코린이[코딩 어린이]

노드 설치하기

노드가 설치된 상태로 npm ( node package manager )로 설치하는 방법입니다.

// 노드 버전 확인
$ node -v

// 노드 패키지 매니저 버전 확인
$ npm -v

// yarn 설치 ( -g : 글로벌로 설치하기 )
$ npm install -g yarn

사용 이유

페이스북에서 npm보다 좀 더 빠른것을 다운로드를 위해서 만들었습니다.

nvm 설치 바로가기

위 릴리즈 노트에서 아래로 내려보면 아래처럼 nvm-setup.exe를 받아서 설치합니다.

노드버전매니저 설치하기

띄어쓰기를 하면 안되기 때문에 저런식으로 바꿔줍니다.

powershell을 관리자모드로 켭니다.

$ nvm -v

제대로 깔렸다면 아래처럼 버전과 함께 여러 말들이 나옵니다.

$ nvm install <version>

$ nvm ls

이렇게 버전을 직접 인스톨할 수 있습니다.

버전을 인스톨하고, nvm ls를 입력하면 노드버전 리스트가 나옵니다.

cmd로는 이유는 모르겠지만 에러문제가 있어서 powershell 관리자모드로 옮겼습니다.

nvm install로 원하는 버전을 설치하면 nvm ls를 입력했을때 자신이 설치한 버전이 나옵니다. 이후 nvm use <버전>을 입력하면 노드버전에 접속하게 됩니다. 이후 다시한번 nvm ls를 입력해서 앞에 *이 붙어있다면 정상적으로 접속한 것입니다.

// 원하는 버전 설치
$ nvm install v14.18.3

$ nvm ls
14.18.3

$ nvm use 14.18.3

$ nvm ls
* 14.18.3

nvm default version 변경하기

Terminal

// 노드 버전보기
$ nvm ls

// 노드 기본 버전 변경하기
$ nvm alias default version

fs 공식문서 바로가기

fs( File System ) 모듈

fs 모듈은 파일 입출력 처리를 할 때 사용하는 모듈입니다.

fs 모듈 불러오기

const fs = require('fs');

비동기 함수 VS 동기 함수

fs 모듈은 비동기( Asynchronous ) API와 동기( Synchronous ) API를 모두 제공하고 있습니다.

따라서 본인이 작성하는 프로그램의 성격을 고려하여 둘 중 어떤 API가 적합한지 판단해야합니다.

fs 모듈에서 제공하는 비동기 메서드는 마지막 인자로 콜백 함수를 받고 아무 값도 반환하지 않습니다. 반면 fs 모듈에서 제공하는 동기 메서드는 결과값을 리턴하며, 예외( exception )를 일으킬 수 있습니다. 동기 메서드의 이름은 Sync로 끝이 나기 때문에 쉽게 비동기 메서드인지 동기 메서드인지 구분이 가능합니다.

디렉토리 생성하기

fs 모듈을 이용해서 디렉토리 만드는 방법입니다. 비동기로 디렉토리를 만들 때는 mkdir() 메서드를 사용합니다.

( mac에서 터미널로 파일 만드는것과 비슷합니다. )

디렉토리 생성하기

// 비동기 ver
fs.mkdir("file-name", (err) => console.log(err));


// 동기 ver
try {
    fs.mkdirSync("file-name");
} catch (err) {
    console.log(err);
}

디렉토리 삭제하기

// 비동기
fs.rmdir("file-name", (err) => console.log(err));

// 동기
try {
    fs.rmdirSync("file-name");
} catch (err) {
    console.log(err);
}

파일 생성하기

// 파일 생성하기
const file = 'file.html';
fs.open(file, 'w', function(err, fd) {
    if(err) throw err;
    console.log('파일 열기');
});

파일 Options

파일 확인하기

// 파일 확인하기
fs.exists('file.html', function(exists) {
  console.log(exists ? "있습니다." : "없습니다.");
});

exists() 메서드는 파일이 존재하는지 확인해줍니다.

파일 이름 변경하기

// 파일 이름 변경
fs.rename('file.html', 'file2.html', function(err) {
    if(err) throw err;
    console.log('변경 성공');
});

rename() 메서드는 파일의 이름을 변경해줍니다. 해당 파일이 없거나 권한이 없다면 에러가 발생합니다. 또한 변경하려는 파일의 이름과 같은 파일이 존재하면 에러가 발생합니다.

파일 삭제하기

// 파일 삭제
fs.unlink('file2.html', function(err) {
    if(err) throw err;
    console.log('파일 삭제');
});

해당 파일이 없거나 권한이 없으면 에러가 발생합니다.

파일 읽기

// 파일 읽기
fs.readFile('file2.html', 'utf8', function(err, data) {
    console.log(data);
});

파일 내용 쓰기

// 파일 내용 쓰기
const write = '파일에 적용시킬 내용';
fs.writeFile('file2.html', write, 'utf8', function(err) {
    if(err) throw err;
    console.log('내용 적용');
})

writeFile() 메서드는 파일 내부에 내용을 작성합니다. 파일이 존재하지 않으면 파일을 생성후에 작성해줍니다.

파일 내용이 이미 있으면, 이전 내용이 삭제되고 새로운 내용이 작성됩니다.

파일 내용 이어쓰기

// 파일 내용 이어쓰기
const write2 = '이어쓰기'
fs.appendFile('file2.html', write2, function(err) {
    if(err) throw err;
    console.log('이어쓰기 성공');
});

appendFile() 메서드는 파일에 내용을 이어서 작성해줍니다. 파일이 존재하지 않으면 파일을 생성후에 작성해줍니다.

고양이 출력하기

아래 내용을 출력해주세요.

|\_/|
|q p|   /}
( 0 )"""\
|"^"`    |
||_/=\\__|

해결 방법

백틱, \ ( 역 슬래쉬 )

\n : 엔터효과

\' : ' 따옴표

\" : " 쌍따옴표

\\ : \ 역 슬래쉬 표시

:: 백틱을 사용 할 때도 \를 사용해줍니다.

결과

console.log(`|\\_/|
|q p|   /}
( 0 )\"\"\"\\
|\"^\"\`    |
||_/=\\\\__|
`);

이전 고양이와 내용은 같습니다.

고양이 출력하기

아래 내용을 출력해주세요.

\    /\
 )  ( ')
(  /  )
 \(__)|

해결 방법

백틱, \ ( 역 슬래쉬 )

\n : 엔터효과

\' : ' 따옴표

\" : " 쌍따옴표

\\ : \ 역 슬래쉬 표시

결과

console.log(`\\    /\\
 )  ( \')
(  /  )
 \\(__)|`);

이상하게 올려서 실패를 3번이나 했..

crypto 바로가기

crypto 모듈을 사용해서 암호화, 복호화 시키기

암호화 방법은 단방향 암호화와 양방향 암호화 두가지가 있습니다.

1. 단반향 암호화

비밀번호는 보통 단반향 암호화를 사용합니다. 단방향 암호화는 복호화를 할 수 없는 암호화 방식입니다.

복호화란 암호화된 문자열을 암호화 되기전의 문자열로 돌려놓는 것을 의미합니다. 그러므로 단방향 암호화를 사용하면 원래 문자열이 무엇인지 알 수 없습니다.

단방향 암호화를 사용하는 이유는 굳이 사용자의 비밀번호를 다시 복호화 할 필요가 없기 때문입니다.

DB에 저장되어있는 암호와 비교를 할 때는 단방향 암호화를 통해서 비교하면 되기 때문에 문제가 없습니다.

즉, 기존 비밀번호는 어디에도 남지 않고 암호화된 문자열로만 비교하는 방법입니다.

단방향 암호화는 해시 알고리즘을 사용합니다. 해시는 임의의 크기를 가진 문자열을 고정된 길이의 다른 문자열로 바꾸는 것을 말합니다.

해시 함수 사용하기 예

const password = 'onepassword'
const password2 = 'twopassword'

const base64crypto = password => {
    console.log(plugins.crypto.createHash('sha512').update(password).digest('base64'))
}

base64crypto(password)
base64crypto(password2)

// password
UWo1TmcJr6ojrARyhC/er6ffsmnhkfXr4uuknTq+SEQqAghTPnClXmwENwJL3+6I6teJyqimDaaDYSH80TdqOA==

// password2
ZMlGJKKiGj9OJ/5tvE2atqA0edtAUP9C62Td3xh4+VY+KezMWwC/IoJGjQHeR3D25XmdJSxyxxB1xdh9XcXZIg==

위처럼 암호화된 문자열로 나오게 됩니다.

단방향 해시 함수의 문제점

단방향 해시 함수는 원본 문자열을 찾거나 동일한 효과의 문자열을 찾을 수 있습니다. 이와 같은 암호화된 문자열의 목록을 '레인보우 테이블'이라고 합니다.

이러한 문제점을 해결하기 위해 salting과 key strtching을 사용하여 보완합니다.

기존 문자열에 추가로 덧붙이는 문자열을 salt라고 합니다. 기존 문자열에 salt를 덧붙이고, 암호화된 문자열(다이제스트[digest])을 생성하는 것을 salting이라고 합니다.

기존 문자열의 다이제스트를 생성하고 생성된 다이제스트를 통해서 다시 다이제스트를 생성하는 방법을 '키 스트레칭(Key Stretching)'이라고 합니다.

이렇게 입력된 패스워드를 동일한 횟수 만큼 해시화 해야 입력한 패스워드와 암호화된 패스워드 일치여부를 확인 할 수 있습니다.

crypto는 randomBytes, pbkdj2 메소드를 지원합니다.

randomBytes, pbkdj2 메소드 사용 예

const password = 'onepassword'
const password2 = 'twopassword'

const base64crypto = password => {
    plugins.crypto.randomBytes(64, (err, buf) => {
        const salt = buf.toString('base64');

        plugins.crypto.pbkdf2(password, salt, 100, 64, 'sha512', (err, key) => {
            console.log(salt);
            console.log(key.toString('base64'));
        });
    });
};

base64crypto(password)
base64crypto(password2)

// ZdhwgYgTUXqCBPIZSK8uIBwubTQh1cu0BCQpGBR33+JAF7gS97Krm4rU9lB68yPNqawFLWlKDa/ZaB60cR6Zxg==
// 6iiBdb49tJusPUbkxoeqO5ZMU/y0M9OZWyHqklEKZfe/TRKRsbG9jJucE3xUHUYSBcTP3x1umFJTlzdvgJNaEw==

// 5VdFDV0q/XBIQJ0RmkzM/xFz7tVwSXUvjffzSExrD4jKsFLRcSq2o2uh4FE9qsP+WIYDUV46dGP+N/VXj9Fevg==
// 2FHpJEGChf3dbTO2EQExdxSFY8C8mKmWscHNdfpRyKesPgabfruW7B88MUuOXYKwl9eJQYcc1AaTisu0r3g8Tw==

위처럼 randomBytes 메소드에서 64바이트 길이의 임의 문자열(salt)을 생성합니다. pbkdf2 메소드는 순서대로 비밀번호, salt, 반복 횟수, 출력될 바이트 수, 해시 알고리즘을 parameter로 받아서 처리합니다. 위는 키 스트레칭을 100번 반복한 것입니다.

pbkdf2 메소드는 간단하게 사용할 수 있지만, bcrypt나 scrypt보다 취약하기에 더 나은 보안이 필요할 경우 사용합니다.

:: 실행할 때마다 값이 다르게 출력되는 이유는 randomBytes를 통해 salt의 값이 매번 변경되기 때문입니다.

:: bcrypt : 패스워드 저장을 목적으로 설계되었습니다. openBSD에서 기본 암호 인증 메커니즘으로 사용되고 있습니다. 단 입력값이 72byte인 제약이 있습니다.

:: scrypt : pbkdf2와 유사하게 salting과 key Stretching을 반복하며, digest를 생성할 때 메모리 오버헤드를 갖게끔 설계가 되어 있어서 억지기법공격을 시도할 때 병렬화 처리가 어렵습니다.

양방향 암호화

양방향 암호화에는 대칭형 암호화와 비대칭형 암호화가 있습니다. 양방향 암호화는 암호화된 문자열을 기존 문자열로 복호화 할 수 있는 암호화 기법입니다. 암호화된 문자열을 복호화 하기 위해 암호화 할 때 사용했던 키와 같은 것을 사용해 주어야 합니다.

양방향 암호화 예

const password = 'onepassword'
const password2 = 'twopassword'

const key = 'helloworld';

const encoder = (password, key) => {
    const encrypt = plugins.crypto.createCipher('des', key);
    const encrypt2 = encrypt.update(password, 'utf8', 'base64') + encrypt.final('base64');

    console.log(encrypt2);
    return encrypt2;
}

const decoder = (password, key) => {
    const decrypt = plugins.crypto.createDecipher('des', key);
    const decrypt2 = decrypt.update(password, 'base64', 'utf8') + decrypt.final('utf8');
    console.log(decrypt2);
}

const en = encoder(password, key);
decoder(en, key);
const de = encoder(password2, key);
decoder(de, key);

// kNiXXsNIwFCkNTJ5jyw5Hg==
// onepassword

// bYPMKWrEMSZup9dtg4VllA==
// twopassword

위 코드처럼 암호화 했던 문자열이 기본 문자열로 복호화 되는 것을 알 수 있습니다.

npm nodemon 바로가기

nodemon

노드몬은 디렉토리의 파일 변경이 감지되면  노드 프로그램을 다시 시작해줍니다.

npm install

$ npm install nodemon -g

or

$ npm install nodemon

노드몬은 전역으로 설치하는것을 추천합니다.

전역으로 설치했을 경우 app.js를 만든 서버폴더로 이동해서 'nodemon app'을 입력해주면 변경이 있을때마다 재시작을 해줍니다.

노드몬 실행

$ nodemon app

전역 설치를 하지 않았을 경우 'nodemon app'이 먹히지 않았습니다.

전역 설치로 다시한번 해주던가, package.json으로 이동해서 scripts를 변경해줍니다.

package.json

"scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
},

key값은 임의로 지정해둔 것입니다. 저는 dev라고 지었기 때문에 실행할때 dev를 붙여줍니다.

노드몬 실행

$ npm run dev

NodeJS 다운 바로가기

필요 프로그램

• NodeJS

Bundling

번들링이란 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 것을 알 수 있게 해줍니다. 정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화 시켜주는 작업을 뜻합니다. 즉, 분리된 모듈들을 하나로 합쳐준다 라고 이해하면 편합니다.

:: 모듈( Module ) : 분리된 파일

파일을 분리하는 이유는 작업의 효율성을 위해서 입니다. 스크립트의 크기가 커지고 복잡해지면 단순히 하나의 파일이나 클래스로만 관리하기에는 그 복잡성이 감당이 되지 않습니다.

그렇기 때문에 하나하나 따로 떼어내 모듈로서 작업을 할 필요가 있는 것입니다.

그렇다고 모듈들이 각각 하나만으로 존재하는 독립적인 존재는 아닙니다. 다른 모듈들과 연계성을 띄어주어야 합니다.

그래서 모듈 내부에 import로 외부 모듈의 기능을 가져오고, export로 외부 모듈에서의 접근을 허용하여 모듈의 기능을 내보내줍니다.

이렇게 보면 import와 export하면 된다고 생각할 수 있지만, 여러 파일들을 브라우저에서 로딩하면 네트워크가 그만큼 소모되어 속도가 저하될 수 있습니다. 또한 여러 파일들을 로딩한다는건 각 모듈간의 변수 충돌등의 위험성도 일어날 수 있다는 뜻이됩니다.

이런 각각의 분리된 자바스크립트를 모아서 묶어주는 작업을 하는 것이 번들링입니다.

Bundling 도구

requireJS, AMD, UMD, ES6 모듈 등 다양하게 존재합니다. 웹팩은 이 모두를 지원해줍니다. 그리고 파일 분할 기능이 있기 때문에 원하는 코드만 따로 분리해서 압축하는 것도 가능합니다.

이러한 장점들 때문에 크고 복잡하며 다양한 리소스들이 존재하는 프로젝트에서는 웹팩을 사용하는 것이 좋습니다.

webpack 사용해보기

1. 원하는 폴더 npm init

// 생성한 폴더 내부
$ npm init

2. html, js 생성

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bundling</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
    
</body>
</html>

src/app.js

alert('app.js 생성완료');

3. npm install

$ npm install webpack --save-dev

$ npm install webpack-cli

// 의존성 설치
$ npm install --dev

4. webpack.config.js 생성

web.pack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

webpack 홈페이지 바로가기

5. webpack 실행하기

$ webpack

// 변경이 있을때마다 반응할 수 있도록 감지해서 번들링을 해주는 기능
$ webpack --watch

dist 파일에 bundle.js 파일이 생성된 것을 확인 할 수 있습니다.

jQuery와 함께 사용하기 + app.js에 새로운 js파일 require시키기

app.js

const data = require('./data.js');
const $ = require('jquery');

window.onload = function() {
    // 단일
    $('body').append(`<h1>이름 : ${data.group[0].name}`);
    
    // 반복문
    $.each(data.group, function(key, value) {
        $('body').append(`<h1>name${key} : ${value.name}`);
    });
}

:: window.onload : 페이지의 모든 요소들이 로드 된 이후에 호출됩니다. [ 한 페이지에 하나만 적용됩니다. 두 개 이상 사용시 뒤쪽에 사용한 window.onload가 작동합니다. ]

data.js

const group = [
    {
        name: 'shiro'
    },
    {
        name: 'new'
    },
    {
        name: 'alpha'
    },
    {
        name: 'bbb'
    },
];

module.exports = {
    group: group
}

app.js에서 css 가져오기

1. npm install

$ npm install css-loader style-loader --save-dev

2. 규칙설정하기

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
        ]
    },
    mode: 'development'
}

mode: 'development' 적용 이유

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

mode가 설정되지 않아서 production모드인지 development모드인지를 설정해 줍니다.

dev-server 설치하기

1. npm install

$ npm install webpack-dev-server --save

$ npm install --save-dev html-webpack-plugin

html-webpack-plugin : webpack 번들을 제공하는 html파일 생성을 단순화 시켜줍니다.

2. package.json 설정하기

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --entry ./src/app.js --output-filename ./dist/bundle.js --open"
  },

3. webpack.config.js 설정하기

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
        ]
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
}

4. npm start

$ npm start

실행시켜주면 아래 그림처럼 localhost:8081이 작동됩니다.

babel 설정하기

1. npm install

$ npm install --save-dev babel-loader @babel/cli @babel/core @babel/preset-env

@babel/cli : 터미널에서 바벨 명령어를 사용할 수 있도록 도와줍니다.

@babel/core : 바벨의 핵심 기능을 포함합니다.

@babel/preset-env : ES6의 문법을 ES5의 문법으로 사용할 수 있도록 ES6의 문법을 트랜스파링을 해주는 플러그인입니다.

2. webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    presets: ['@babel/preset-env']
                }
            },
        ]
    },
    mode: 'development',
    plugins: [new HtmlWebpackPlugin()]
}

3. ./dist/index.html 열어보기

index.html 파일이 생성되고, 실행시켰을때 정상작동되는 것을 확인할 수 있습니다.

nodeJS 시작하기

필요한 플러그인

$ npm install express

있으면 좋은 플러그인

$ npm install nodemon

nodemon : 디렉토리의 파일 변경이 감지되면 노드 응용 프로그램을 자동으로 다시 시작해서 NodeJS기반 응용프로그램을 개발하는데 도움이 되는 플러그인

프로젝트 생성

원하는 위치에 프로젝트 디렉터리 생성하고 프로젝트 폴더에서 커맨드 실행하기 ( VSCode or Terminal )

npm init

npm은 nodeJS에서 패키지들을 설치하고 관리할 때 사용되는 패키지 매니저

package.json 파일 생성된다.

package.json의 dependency부분에 설치한 패키지들의 이름과 버전이 입력된다.

내가 추가한 플러그인 => express, nodemon

app.js

const express = require('express');
const http = require('http');
const app = express();
const server = http.createServer(app);

app.get('/', (req, res) => {
    res.json({
        success: true,
    });
});

// SERVER
const port = 8080;
app.set('port', port);
server.listen(port, () => {
    const message = `
        [ Test Server ]
        Running Port : localhost:${port}
        Start Time : ${Date()}
    `;
    console.log(message);
});

localhost:8080으로 접속해보면

{"success":true}

라는 문구가 나온다.

이로써 첫 서버 구동을 시켜보게 되었다.