Next js Starter Integration Module For Newbie - Preparing isolated module

npm i @sol_o_o/next-starter
npm i @types/sharp --save-dev
npm i mysql2
npm i axios

😸For those who are struggling to upload files

you can import (Be careful. the sharp module has compatibility issues with the m1 chip of the mac! i feel the need to remove or change it.)

import { solFs, solFsForm, sqlData } from '@sol_o_o/next-starter';
import formidable from 'formidable';

How to use

const path : string = "yourPath";
const sizeName : string[] = ["_small", "_medium", "_large"];
const widthSize : number[] = [50, 100, 200];

const option = { multiples : true }

await solFsForm(req, formidable.IncomingForm(option), path, false, null, sizeName, widthSize);

or

const fileJson : fileJson = {};  // There's an explanation below
const fileList : fileType[] = [];
const path : string = "yourPath";
const sizeName : string[] = ["_small", "_medium", "_large"];
const widthSize : number[] = [50, 100, 200];

await solFs(fileJson, fileList, path, false, null, sizeName, widthSize);

✋ requirement

For the form body value, "file" and "fileJson" are required. file is file, Below is the form of fileJson.

export interface fileJson
{
  insert? : insertJson[],
  update? : updateJson[],
  delete? : deleteJson[]
}

interface insertJson
{
  /* Order of files, Use is your choice.However, this is a   required value, so if you do not want to use it, put a zero.*/
  order_no : number, 
  view_type : string // your option Feel free to add the value.
}

// Valid only when you use sqlData.
interface updateJson
{
  /* You can change the order_no in the file with seq_no eigenvalues. */
  seq_no : number,
  /* Order of files, Use is your choice.However, this is a required value, so if you do not want to use it, put a zero.*/
  order_no : number 
}

// Valid only when you use sqlData.
interface deleteJson
{
  /* You can delete a file using the seq_no eigenvalue. */
  seq_no : number
}

So that's what we need.

file is only one

{"insert":[{"order_no":1, "view_type":"PROFILE"}], "update":[], "delete":[]}

file is multiples

{"insert":[{"order_no":1, "view_type":"PROFILE"}, {}, {}, ...], "update":[], "delete":[]}

Option

#1. sqlData

You have a choice to sqlData

enter the information of the file auto uploaded to mysql

🎨 sqlData interface ▼

|user_id|tableName|targetColl|targetID|size_list | --- | --- | --- | --- | --- | | pk of upload user id | upload table name | pk column name | pk column value | image size name list

const path : string = "yourPath";
const sizeName : string[] = ["_small", "_medium", "_large"];
const widthSize : number[] = [50, 100, 200];

const option = { multiples : true }

const sqlOption : boolean = true;
const sqlData : sqlData = {user_id : 1, tableName : "USER_FILE", targetColl : "user_id", targetID : 1, size_list : sizeName};

await solFs(req, formidable.IncomingForm(option), path, sqlOption, sqlData, sizeName, widthSize);

✋ requirement

Must be Mysql or Maria DB to use sqlData Option! also, The structure of the table and column should always be as follows. You can change the column name for all items, but the dataType must be followed. (But "seq_no, edit_user_id, order_no, delete_state, update_dt" The item cannot be renamed for update... 😓) For example, to match sqlData in the above code

🎨 USER_FILE (TableName)

|user_id|seq_no|edit_user_id|file_path|file_name|file_type|file_size|content_type|order_no|view_type|delete_state|update_dt|create_dt | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | bigint | int | bigint | varchar | varchar | varchar | varchar | varchar | varchar | int | varchar | tinyint(1) | datetime | datetime | | PK (targetColl) | PK(It is automatically increased) | id of the user who modified the content | path | file name | file extension | file length| mime type | file order | your option | delete = true | your update date | your create date |

#2. sizeName, widthSize

You have a choice to different sizes for image

Images created with these options are compressed

const sizeName : string[] = ["_large"];
const widthSize : number[] = [500];

The string entered in widthSize is included between the original filename and the extension. In other words, if the original file name was Hello.jpeg, "Hello.jpeg"(original) and "Hello_large.jpeg" are created on the server.

😸 For those who are struggling to Database Connection

you can import

import mysql from 'mysql2/promise';
import { solSelect, solInsert, getConn } from '@sol_o_o/next-starter';

How to use

make file to .env (There's no file name! It's just .env) Location is the same space as package.json

DB_USER=your_db_username
DB_PASSWORD=your_db_userpassword
DB_HOST=your_db_host // maybe localhost? haha
DB_PORT=your_db_port // (The default is 3306.)
DB=your_db_name

you can source!

// step 1 GetConn
const conn = await getConn(conn);

// stem 2 Connection
const sql = `SELECT hello_column FROM HELLO WHERE id = ? ;`;

const param = [1];
const cmd = await solSelect(conn, sql, param);

// if you need transaction
awiat conn.beginTransaction();

const insert_sql = `INSERT INTO HELLO (hello_column) VALUES ( ? );`;

const insert_param = [1];

try
{
    // solInsert for insert / update / delete
    const insert_cmd = await solInsert(conn, sql, param);

    conn.commit();
}
catch
{
    conn.rollback();
}
finally
{
    conn.release();
}

🎨 cmd interface ▼

|conn|row|fields| | --- | --- | --- | | connection data | resultData | fileds |

🐣 What does return "row" look like?

• solInsert

 {
  fieldCount: 0,
  affectedRows: 1,
  insertId: 0, // This is the last automatic increment value. Maybe you'll use the most!
  info: '',
  serverStatus: 2,
  warningStatus: 0
}

• solSelect

 [
  { 
   your_column_name: 'your_coulmn_value' 
  }
]

✋ requirement

1. Let's always release conn. (It would be nice to finally do it in the syntax)

2. If you used transaction, recycle the conn that is open with getConn() ! (If you always create a new one, your mysql process will increase a lot, If you are curious, check the show process list.)

😸 For those who are struggling to Random String And Number

you'll sometimes need a random number value, or a letter value, right? It's a very simple code, but sometimes it's annoying to make it yourself. that's why I just made it. 🤭 It's a simple source code, so it's easy to use. maybe you don't even need a guide.

import { solRan } from '@sol_o_o/next-starter';

How to use

// you need only number (return example : "1524816042")
const you_need_number_length = 10;
const rand_num = Number(await solRan("num", you_need_number_length));


// you need only string (return example : "VSfDkz")
const you_need_char_length = 6;
const rand_num = await solRan("char", you_need_char_length);


// you need mix string and number (return example : "1Fd5Y")
const you_need_length = 5;
const rand_num = await solRan("mix", you_need_length);

😸 Simple Convert And Widely Used

oh... This is too simple, too. It's a source code you can make, but...there are times when it's annoying, right? use it when that happens. It'll be added whenever I'm bored or need anything.

you can import

import { unixToDateTime, convertDateStr, convertDateTimeStr, unixtoDateTimeStr } from '@sol_o_o/next-starter';

How to use

// return example : Date Type value!!
const unixDate : Number = 1673942231;
const unixDateTime = unixToDateTime(value.lat)

// return example : "2022-01-01 12:11:11"
const unixDate : Number = 1673942231;
const unixDateTime = unixtoDateTimeStr(value.lat)

// return example : "2022-01-01 12:11:11"
const dateTimehaha : Date = new Date();
const datetimeStr = convertDateTimeStr(dateTimehaha);

// return example : "2022-01-01"
const dateTime : Date = new Date();
const datetimeStr = convertDateStr(dateTimehaha);

😸 For smooth transmission of results

We need a result delivery form. let's go with the unified one! (objects and types that always change... 🤔)

import { eventResult } from '@sol_o_o/next-starter';

🎨 eventResult interface ▼

| | requestMethod | resultCode | resultMsg | resultRow | resultData | resultException | cmd | | --- | --- | --- | --- | --- | --- | --- | --- | | type | string | number | string | RowDataPacket[] OR ResultSetHeader | any | any | insertResult OR selectResult | description | auto (is mine) | for your resultcode | for your msg | have you seen the database communication above? It's the row value returned from there. | whatever you want to contain | write an error (i usually use exception error here.) | have you seen the database communication above? It's the cmd value returned from there

How to use

// hmmmm... just... so... Anyway! I use it like this.

let eventResult : eventResult = await yourMethod();

if(eventResult.resultCode == 0)
{
    // Sucess
}
else
{
    // Fail
}

// OR

const conn = await getConn(conn);

const sql = `your sql`;
const param = ["hi"];
const cmd = await solInsert(sql, param);

try
{
    conn.commit();
    
    // this is the option I mentioned earlier. of course, it's an eventResult type.
    return E0(cmd);
}
catch(err)
{
    conn.rollback();
    return E1001(err);
}
finally
{
    conn?.release;
}

Option

#1. Basically defined, for write comfortably.

E0(cmd? : insertResult | selectResult)

return -> resultCode: 0, resultMsg : "Complete", resultRow : cmd.row

E1001(exception? : any, cmd? : insertResult | selectResult)

return -> resultCode: 1001, resultMsg : "Server Error : Exception", resultException: exception, cmd : cmd

....There's a lot more. 1002, 1005...2001,2002...3001... but it's in Korean! I'll fix it later. haha I think you should just make it and use it. Just make an error theorem ts, just turn it back. I do that! For example

export const E1009 = () => 
{
    return Result(1009, "Exist Data");
}

I define the code that I use often. oh what's that Result()?

Result(resultCode? : number, resultMsg? : string, resultRow? : RowDataPacket[] | ResultSetHeader, resultData? : {}, resultException? : any, cmd? : insertResult | selectResult)

It's like this. made so that you can customize the eventResult as you please. hm.... Or use ECustom. (If you use it for one time!)

ECustom(yourCode : number, yourMsg? : string, resultData? : any, resultRow? : RowDataPacket[] | ResultSetHeader)

const result = ECustom(1009, "Exist Data");

🐣 What does return eventResult look like?

If you complete everything, you can have pretty results. maybe. (i think it's pretty no matter what anyone says)

{
  "code": 0,
  "data": {
    "requestMethod": "at getYourLike ()",
    "resultCode": 0,
    "resultMsg": "Complete",
    "resultRow": [
      {
        "yourNumber": 1,
        "yourColumn": "Hello"
      },
      {
        "yourNumber": 2,
        "yourColumn": "World!"
      }
    ]
  },
  "message": "success"
}

what do you think? It's pretty, right?

😁 Here are my comments.

if you need anything, I'll make another one next time. I think this project still has a lot to fix. i am most concerned about the compatibility of the m1 chip of the Sharp module. Let me know if there are any complementary points.