크와앙

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!라는 문구가 뜬다.