자바스크립트의 속성 앞에 _(언더스코어)를 쓰는 이유는 이 속성이나 메서드가 비공개임을 나타내는 일반적인 방법이다.

자바스크립트는 자바나 다른 언어들과 달리 직접적으로 접근제어자를 사용할 수 없기 때문에, _(언더스코어)를 사용한다.

ES6 이후에 클래스가 생성됨에 따라서, #을 쓰는 방식으로 바뀌고 있다.

class Example {
    #privateField;

    constructor(value) {
        this.#privateField = value;
    }

    getPrivateField() {
        return this.#privateField; // 내부에서 접근 가능
    }
}

const obj = new Example(123);
console.log(obj.getPrivateField()); // 123 출력
console.log(obj.#privateField); // SyntaxError, 외부에서 접근 불가

출처) ChatGPT

• 모듈이란 특정 데이터들의 집합(파일)을 의미한다.
• 모듈의 import(가져오기) 문법과 export(내보내기) 문법을 사용할 때, 모듈이라고 부를 수 있다.

module.js

export const hello = 'Hello World!'

• module.js에서 다음과 같이 코드를 입력하고, export를 통해서, 내보내기를 한다.

main.js

import { hello } from './module.js'

console.log(hello) // 'Hello World!'

• module.js를 받아오기 위해서는 import를 통해서 받아오기를 진행한다.
• 변수로 선언했던 hello는 {} 사이에 넣어주고, 콘솔을 찍으면, module.js에서와 동일하게 Hello World!가 출력된다.

기본(default) 내보내기

• 모듈에서는 값들을 내보낼 때, default(기본값), 객체, 함수 등을 export(내보내기) 할 수 있다.

module.js

export default defaultValue

• export시에, default를 사용해서, 기본으로 보내는 값을 지정가능하다.

main.js

import value from './moudle.js'

console.log(value); // defaultValue

• import시에, import와 from 사이에, 원하는 변수명을 입력한다.
• 변수로 선언한 값을 conosle에 출력해보면, moudule.js에서 default값으로 선언한 defaultValue라고 나오는 걸 확인할 수 있다.

유명(named) 내보내기

module.js

export const str = "ABC"
const const arr = []
export function hello() {}

• export시에, 함수, 배열, 객체, 변수등을 보내기가 가능하다.

main.js

import { str, arr, hello } from './module.js'

console.log(str); // 'ABC'
console.log(arr); // []
console.log(hello) // function hello()

• import시에, {} 사이에, 변수명을 넣으면, 출력이 가능하다.

main.js

`import { str as alphabet } from './module.js'`

console.log(alphabet); // 'ABC'

• 또한, as를 통해서 변수명을 다르게 변경할 수도 있다.

여러모듈 한번에 내보내기

moduleA.js

export const a = () => abc

moduleB.js

export const b = () => def

main.js

import { a } from './moduleA.js'
import { b } from './moduleB.js'

console.log(a()) //abc
console.log(b()) //def

• 모듈을 합치지 않으면, 다음과 같이 작동하게 된다.
• 하지만 모듈을 합치게 되면 다음과 같은 작용을 하게 된다.

moduleA.js

export const a = () => abc

moduleB.js

export const b = () => def

utils.js

export {a} from './moduleA.js'
export {b} from './moduleB.js'

• moduleA와 moduleB를 바로 export(내보내기)한다.

main.js

import { a, b } from './utils.js'

console.log(a()) // abc
console.log(b()) // def

• 그렇게 되면, 다음과 같이, console.log()에 동일한 결과값을 얻을 수 있다.

express 설치

npm install --save express

를 통해서 express를 설치한다.

package.json을 보게되면, 의존성이 추가된 것을 볼 수 있다.

{
  "name": "nodejs",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.18.2"
  }
}

Express 설정

app.js를 생성한 뒤 다음 코드를 작성한다.
3000번 포트에 연결이 된다는 의미를 갖고 있다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`app listening on port ${port}`)
})

Express 실행

실행하기 위해서는 다음의 코드를 터미널에 적는다.

node app.js

실행한 뒤에, 주소창에 http://localhost:3000/ 을 작성하면 되면 'Hello World!'가 출력된다.
만약 다른 path를 사용하고 싶을 때는 get 메서드에 인자값을 변경하면 된다.
예를 들어 http://localhost:3000/test 로 만들고 싶다면 아래와 같이 코드를 추가하면 된다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/test', (req, res) => {
  res.send('Test Page!')
})

app.listen(port, () => {
  console.log(`app listening on port ${port}`)
})

서버 실행을 종료하기 위해서는 Ctrl + C 혹은 CMD + C를 눌리면 된다.

TypeScript 설치 이유

TypeScript를 적용하지 않았을 경우에, 아래와 같은 코드를 실행할 수 있다.

const something = 'Hello'
const result = Math.long(something)
console.log(result)

NaN

NaN 이라는 숫자가 아니라는 결과가 출력되는데, TypeScript를 적용하게 되면, 잘못된 것들을 수정할 수 있다.

TypeScript 설치

npm install --save-dev typescript

package.json에 들어가면 아래와 같이 의존성이 적용된 걸 볼 수 있다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "eslint": "^8.47.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-node": "^11.1.0",
    "prettier": "^3.0.1",
    "typescript": "^5.1.6"
  }
}

TypeSciprt 적용

// @ts-check
const something = 'Hello'
const result = Math.long(something)
console.log(result)

와 같이 // @ts-check를 적게 되면, something 부분에 에러가 나는 것을 확인할 수 있다.

Node.js에서 TypeScript 적용

npm install --save-dev @types/node

package.json에 가면 의존성이 적용되어 있는 걸 확인할 수 있다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "@types/node": "^20.4.10",
    "eslint": "^8.47.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-node": "^11.1.0",
    "prettier": "^3.0.1",
    "typescript": "^5.1.6"
  }
}

@types/node는 Node.js에서 필요한 파일의 타입들을 정해주는 역할을 한다.
main.js를 다음과 같이 작성한다.

// @ts-check
// Formatting: Prettier, Type Checking
// Linting: ESLint

const http = require('http')

const server = http.createServer((req, res) => {
  res.statusCode = -200
  res.end('Hello World!')
})

const PORT = 3000
server.listen(PORT, () => {
  console.log(`The Server is listening at PORT: ${PORT}.`)
})

실행시킨다.

node main.js

다음과 같은 결과가 나오게 된다.

The Server is listening at PORT: 3000.

main.js를 작성하면서 오타 혹은 잘못된 타입을 넣었을 경우, 바로 알 수 있게 해준다.

TypeScript 설정

jsconfig.json 이라는 파일을 생성 후, 다음과 같은 코드를 작성한다.

{
  "compilerOptions": {
    "strict": true
  },
  "include": ["src/**/*"]
}

compilerOptions에서 strict는 엄격하게 검사를 하는 것을 의미하고, include는 범위를 의미한다.
tsconfig 공식 도큐먼트에서 조금 더 명확하게 알 수 있다.

ESLint 설치

npm install --save-dev eslint

ESLint를 설치하게 되면, package.json에 다음과 같이 추가된 것을 알 수 있다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "eslint": "^8.47.0",
    "prettier": "^3.0.1"
  }
}

package-lock.json의 경우 매우 많은 것들이 추가되기에 생략했다.

ESLint 설정

prettier와 동일하게 .eslintrc.js라는 설정파일을 생성한 뒤, 아래 코드를 입력한다.

module.exports = {}

ESLint 규칙 설정

이후, ESLint의 규칙을 설정하기 위해서 다음의 코드를 실행한다.

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import eslint-plugin-node eslint-config-prettier

이후에, package.json에 가게 되면, 의존성이 추가된 것을 볼 수 있다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "eslint": "^8.47.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.0",
    "prettier": "^3.0.1"
  }
}

ESLint 규칙 적용

이후 ESLint를 설정하기 위해서 .eslintrc.js에 아래 코드를 입력하면 된다.

module.exports = {
  extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}

main.js에서 ESLint의 동작을 보면, console을 사용할 수 없게 되어있다.
하지만, console을 사용하기 위해서는 다음과 같이 예외를 적용시켜두면 쓸 수 있다.

/* eslint-disable-next-line */
console.log('Hello world!');

prettier 설치

npm install --save-dev prettier

을 입력하면, package.json에 devDependencies가 추가된다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^3.0.1"
  }
}

devDependencies는 의존성을 나열하는 것과 비슷하기에, 중요하다.
node_modules 폴더와 package-lock.json 파일도 작성되는데 현재 프로젝트에서 의존하는 것이라 생각하면 된다.
먼저 package-lock.json 파일은 다음과 같다.

{ 
  "name": "nodejs",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "devDependencies": {
        "prettier": "^3.0.1"
      }
    },
    "node_modules/prettier": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
      "dev": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
      },
      "engines": {
        "node": ">=14"
      },
      "funding": {
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    }
  }
}

prettier 설정

prettier을 사용하기 위해서는 .prettierrc라는 파일이 필요하다.

{
  "semi" : false, // 세미콜론 여부
  "singleQuote": true // 문자열을 사용할 때, ''를 쓸것인지 여부
}

vscode에서 prettier를 사용하기 위해서는 . vscode라는 폴더를 만든 뒤, settings.json을 만든 뒤, 아래의 코드를 입력한다.

{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

이렇게 하면, 저장될 때 자동으로 prettier가 작동되는 걸 알 수 있다.

npm init -y

를 통해서, package.json을 생성할 수 있다.
생성되는 내용들은 많지만, 중요 내용은 아래 코드이다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  }
}

test가 추후에 npm을 통해서 실행할 때 입력할 이름이다.

npm run test

를 입력하면 아래와 같은 코드가 나오게 된다.

> test
> echo "Hello, world!" && exit 1

"Hello, world!"

const http = require('http')

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.end('Hello!')
})

const PORT = 3000

server.listen(PORT, () => {
  console.log('The server is lisening at port', PORT)
})

http로 연결하고, 3000번 포트를 사용한다.
콜백함수를 사용하여, 200번 코드가 나오면, Hello!라는 문구가 뜬다.