코린이[코딩 어린이]

typescript로 nodeJS 시작하기

typescript를 이용하여 NodeJS를 실행시키는 방법입니다.

global npm

$ npm install -g typescript
$ npm install -g nodemon

nodemon은 있으면 편합니다.

npm

$ npm init -y

$ npm install -D express ts-node @types/node @types/express

/* Express용 Typescript 정의입니다. */
$ npm install @types/express-serve-static-core

tsconfig.json 작성하기

$ npx tsc --init

위 명령어를 실행하면 아래 json 파일이 생성됩니다.

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6", // 컴파일 할 버전
        "jsx": "react", // 생성할 JSX 코드 지정
        "module": "commonjs", // 어떤 모듈 방식으로 컴파일할지 설정
        "rootDir": ".", // 루트 디렉토리
        "moduleResolution": "node", // 모듈 해석 방법
        "outDir": "./dist", // 컴파일 후 JS파일이 생성되는 디렉토리
        "esModuleInterop": true, // 가져오기를 용이하게 하기 위해 추가 Javascript를 내보냅니다.
        "forceConsistentCasingInFileNames": true, // 케이스가 올바른지 확인합니다.
        "strict": true, // strict Option 활성화
        "skipLibCheck": true // 모든 .d.ts파일들 건너뛰기
    }
}

tsconfig.json 파일을 열어보면 주석처리된 내용들이 나옵니다. 그 중에서 위 내용들을 풀어줍니다.

package.json 내용 추가하기

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/app.js",
    "build": "tsc -p .",
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/app.ts"
},

• start: node dist/app.js로 컴파일된 JS파일로 시작합니다.
• build: "tsc -p ." 타입스크립트를 자바스크립트로 빌드를 시작합니다.

app.ts 작성하기

app.ts

import express, { Request, Response, NextFunction } from "express";

const app = express();

app.get("/", (req: Request, res: Response, next: NextFunction) => {
    res.send("성공 !");
});

const PORT = 4000;
app.listen(PORT, () => {
    const message = `
        [ TEST PROJECT ]
        Running PORT: localhost:${PORT}
    `;

    console.log(message);
});

기본 틀입니다.

Server 실행하기

$ npm run dev

// yarn을 사용했을 경우
$ yarn dev

노드 설치하기

노드가 설치된 상태로 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

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}

라는 문구가 나온다.

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