Node.js 환경 구성 - Part.3 프로젝트 생성

누군가·2024년 1월 12일

nodejs vscode

Node.js 환경 구성

목록 보기

4/6

※ 다크모드로 읽으시는 것을 추천드립니다.

프로젝트 생성

Node.js 프로젝트 생성에 대한 내용을 설명합니다.

1. 프로젝트 디렉터리 생성

프로젝트를 관리할 디렉터리를 생성합니다.

1) 디렉터리 직접 생성

프로젝트 디렉터리를 생성하려는 경로에서 폴더를 생성합니다.

2) 명령 프롬프트 (CMD 및 PowerhSell)을 통한 디렉터리 생성

명령 프롬프트를 통해 폴더를 생성합니다.

# 폴더 생성
> mkdir "프로젝트 폴더 명"

2. 프로젝트 디렉터리 경로로 이동

VS Code에서 폴더 열기를 통해 프로젝트 디렉터리로 이동합니다.
좌측 상단의 파일(F) → 폴더 열기… CTRL + K CTRL + O

프로젝트 디렉터리를 선택합니다.

3. 프로젝트 생성

프로젝트 디렉터리로 이동했다면 해당 디렉터리 내에 Node.js 프로젝트를 생성합니다.
VS Code에서 터미널을 실행합니다.

터미널에서 해당 프로젝트 디렉터리로 이동합니다.

# 프로젝트 디렉터리로 이동
> cd "프로젝트 폴더 명"

Node.js 프로젝트를 초기화합니다.

# Node.js 프로젝트 초기화
> npm init (프로젝트 명, 버전 등 프로젝트 정보 입력)
또는
> npm init -y (프로젝트 정보를 기본값으로 설정)

프로젝트를 초기화하면 위와 같이 프로젝트에 대한 정보가 package.json 파일에 저장됩니다.

package.json

package.json 파일은 Node.js 프로젝트 정보에 대한 파일이며, 아래와 같은 내용을 포함합니다.
- 해당 프로젝트가 의존하는 패키지 리스트
- 프로젝트 버전 명시
- 다른 환경에서도 빌드를 재생 가능하게 만들어 다른 개발자가 쉽게 사용할 수 있도록 합니다.
즉, npm이라는 오픈소스 패키지 생태계를 사용하기 위한 명세이자 프로젝트의 의존성 관리 및 배포를 위한 명세라고 볼 수 있습니다.

기본 구성 요소

name: 필수로 존재 해야 하는 Fields이며, 패키지의 이름을 나타냅니다.
- 이 Fields가 누락되면 패키지는 설치될 수 없습니다.
- 기본 규칙
  : 소문자로 작성되어야 합니다.
  : 한 단어로 작성되어야 합니다.
  : - (하이픈)이나 _ (언더스코어)를 포함할 수 있습니다.
- 상세 규칙
version: Semantic Versioning Guidelines를 따르며, x.x.x의 형태로 작성해야 합니다.
- 이 Fields가 누락되면 패키지는 설치될 수 없습니다.
- [Major].[Minor].[Patch] 형태를 따릅니다.

# name 및 version 예시
{
	"name": "my-package-name",
	"version": "1.0.0"
}

description: 문자열로 기술한 패키지에 대한 설명입니다.
- npm에서 검색되었을 때 리스트에 표시되어 사람들이 패키지를 찾아내고 이해할 수 있도록 돕는 요소입니다.
main: 패키지의 진입점 (Entry Point)이 되는 모듈의 ID입니다.
- 패키지 Root의 상대 경로로 지정해야 합니다.
  지정하지 않은 경우, Root 폴더의 index.js로 기본 값이 설정됩니다.
- 예를 들어, 사용자가 foo라는 이름의 패키지를 설치하고, require("foo")를 통해 모듈을 import하면 main으로 지정한 모듈의 exports 객체가 반환됩니다.

scripts: 패키지의 생명 주기에서 다양한 타이밍에 자주 사용할 Command를 alias (별칭)을 통해 지정해 둘 수 있는 Dictionary입니다.

유용한 Command를 지정해두고 사용하면 편리할 것입니다.

# scripts 예시 
facebook/create-react-app/package.json
(https://github.com/facebook/create-react-app/blob/main/package.json)

{
	"scripts": {
		"build": "cd packages/react-scripts && node bin/react-scripts.js build",
		"changelog": "lerna-changelog",
		"create-react-app": "node tasks/cra.js",
		"e2e": "tasks/e2e-simple.sh",
		"e2e:docker": "tasks/local-test.sh",
		"postinstall": "npm run build:prod -w react-error-overlay",
		"publish": "tasks/publish.sh",
		"start": "cd packages/react-scripts && node bin/react-scripts.js start"
		// ...
	}
}

이처럼 Value로 일련의 Command (명령어)를 정의해두고 Key로 지정한 alias를 이용해 간편하게 호출할 수 있습니다.
예, npm start

keywords: 키워드를 문자열 배열로 설명합니다.
- description과 마찬가지로 npm에서 검색되었을 때 리스트에 표시되어 사람들이 패키지를 찾아내고 이해할 수 있도록 돕는 요소입니다.
author: 한 명의 배포자를 위한 Fields입니다.
- 다수의 배포자를 표시할 경우 contributors Fields로 작성합니다.
license: 배포한 패키지에 대해 패키지 사용자가 패키지를 사용하는데 있어서 어떤 권한과 제한 사항이 있는지 알기 위해 License를 명시해야 합니다.

프로젝트 샘플

프로젝트가 생성되었으니 샘플 코드를 생성해서 테스트합니다.
기본적인 HTTP 웹 서버를 구축합니다.

1. 시작 파일 생성

프로젝트 Root 경로에 app.js라는 이름의 Node.js 파일을 생성합니다.

2. 소스 코드 작성

기본적인 HTTP 웹 서버 구현을 위해 소스 코드를 작성합니다.
여기서는 별도 모듈을 사용하지 않고 내장된 HTTP 모듈을 통해 구현합니다.
해당 기능을 구현하는 방식은 다양하기 때문에 단순히 참조하는 수준으로 생각하시면 됩니다.

# app.js
const http = require("http");
const createServer = http.createServer((req, res) => {
	res.writeHead(200, { "Content-Type": "text/html" });
	res.end("Hello World!");
});

createServer.listen(3000, () => {
	console.log("Server Started!");
});

1번 라인: http 모듈을 상수 “http”에 할당합니다.
2 ~ 5번 라인: 요청을 받고 응답할 수 있는 http.Server 개체를 생성합니다.
- req: Request를 의미하며 요청에 관한 정보를 담고 있습니다.
- res: Response를 의미하며 응답에 관한 정보를 담고 있습니다.
3번 라인: 응답 헤더에 대한 정보를 기록하는 메서드입니다.
- res.writeHead(상태코드, 헤더정보)
  → “상태코드”는 HTTP 상태 코드를 말하는데 200, 404, 500 등이 있습니다.
  → “헤더정보” (’text/html’)는 응답의 컨텐츠 형식이 “HTML”이라는 의미입니다.
4번 라인: 응답을 종료하는 메서드이며, 괄호 안의 값을 반환하며 종료합니다.
7 ~ 9번 라인: 서버와 연결할 포트 번호를 지정하고, 포트 연결 완료 후 실행된 콜백함수를 입력합니다.
- .listen(포트번호, 콜백함수)
  → “포트번호”는 “3000”으로 지정하여 3000번 포트로 HTTP 서버에 연결할 수 있도록 합니다.
  → “콜백함수”는 포트 연결 완료 후 실행된 콜백함수에 대한 내용을 입력하지만 여기서는 사용하지 않으므로 비워두었습니다.
8번 라인: 서버 실행 시 Console 창에 출력할 내용을 작성합니다.
정상 작동 확인을 위해 소스 코드를 실행합니다.

# 코드 실행 - node 명령어
> node app.js
Server Started...

또는

# 코드 실행 - package.json scripts 활용
# package.json 수정
{
	...,
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
	},
	...
}

> npm start
> test@1.0.0 start
> node app.js     

Server Started...