[ Node.js ] 프로젝트 작성 및 실행 (express-generator)

express-generator는 Express 애플리케이션의 기본 구조를 빠르게 생성할 수 있는 도구입니다. 이를 사용하면 Express 앱을 신속하게 설정하고 시작할 수 있습니다. 아래는 express-generator를 사용하여 프로젝트를 시작하는 방법을 단계별로 설명한 가이드입니다.

1. Node.js 및 npm 설치

먼저 Node.js와 npm(Node Package Manager)이 설치되어 있는지 확인해야 합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 다운로드하여 설치할 수 있습니다. 설치 확인은 다음 명령어를 통해 가능합니다:

node -v
npm -v

위 명령어는 각각 Node.js와 npm의 버전을 출력합니다. 설치되지 않았다면 command not found 메시지가 나타납니다.

2. express-generator 설치

express-generator는 글로벌 npm 패키지로 설치할 수 있습니다. 터미널을 열고 다음 명령어를 입력합니다:

npm install -g express-generator

이 명령어는 express-generator를 글로벌 환경에 설치하여 어느 위치에서든 사용할 수 있게 합니다.

3. 새 프로젝트 생성

express-generator를 사용하여 새 프로젝트를 생성하려면, 프로젝트를 생성하고자 하는 디렉토리로 이동한 후 다음 명령어를 실행합니다:

express myapp

여기서 myapp은 생성할 프로젝트의 이름입니다. 원하는 다른 이름을 사용할 수도 있습니다.

이 명령어는 기본적인 Express 애플리케이션 구조를 포함한 myapp 디렉토리를 생성합니다. 옵션을 추가하여 프로젝트를 생성할 수 있는데, 자주 사용되는 옵션은 다음과 같습니다:

• -h, --help: 사용 가능한 옵션을 출력합니다.
• -e, --ejs: EJS 템플릿 엔진을 사용합니다.
• -p, --pug: Pug 템플릿 엔진을 사용합니다.
• -hbs, --hbs: Handlebars 템플릿 엔진을 사용합니다.
• --view <engine>: 다른 템플릿 엔진을 지정합니다 (예: --view=hbs).
• -c, --css <engine>: CSS 엔진을 지정합니다 (예: --css=sass).

예를 들어, EJS 템플릿 엔진과 sass를 사용하는 프로젝트를 생성하려면 다음과 같이 실행할 수 있습니다:

express --view=ejs --css=sass myapp

4. 프로젝트 디렉토리로 이동

프로젝트 생성이 완료되면 새로 생성된 디렉토리로 이동합니다:

cd myapp

5. 종속성 설치

express-generator로 생성된 프로젝트는 필요한 기본 패키지를 나열한 package.json 파일을 포함하고 있습니다. 이를 기반으로 종속성을 설치합니다:

npm install

이 명령어는 package.json 파일에 나열된 모든 npm 패키지를 node_modules 디렉토리에 설치합니다.

6. 애플리케이션 실행

이제 애플리케이션을 실행할 준비가 되었습니다. 다음 명령어를 사용하여 서버를 시작합니다:

npm start

기본적으로 서버는 http://localhost:3000에서 실행됩니다. 브라우저를 열고 이 URL로 이동하여 기본 Express 애플리케이션이 실행 중인지 확인할 수 있습니다.

7. 프로젝트 구조 이해

express-generator로 생성된 프로젝트는 다음과 같은 기본 디렉토리 구조를 갖습니다:

myapp/
│
├── app.js             # 애플리케이션의 메인 파일
├── package.json       # 프로젝트 정보 및 종속성 목록
├── bin/
│   └── www            # 서버 시작 스크립트
├── public/            # 정적 파일 (CSS, JavaScript, 이미지 등)
├── routes/            # 라우터 모듈
│   ├── index.js       # 기본 라우터
│   └── users.js       # 사용자 관련 라우터 (예시)
├── views/             # 템플릿 파일 (EJS, Pug, Handlebars 등)
│   ├── error.ejs
│   ├── index.ejs
│   └── layout.ejs
└── ...

각 디렉토리와 파일의 용도는 다음과 같습니다:

• app.js: Express 애플리케이션의 진입점으로, 미들웨어 및 라우팅을 설정합니다.
• bin/www: 서버 실행 설정을 담고 있으며, 포트 번호 등 서버의 기본 설정을 정의합니다.
• public/: 정적 파일을 호스팅하는 디렉토리로, CSS, JavaScript, 이미지 파일 등을 넣을 수 있습니다.
• routes/: 라우팅 모듈을 저장하는 디렉토리로, 애플리케이션의 URL과 대응하는 로직을 정의합니다.
• views/: 템플릿 파일을 저장하는 디렉토리로, 사용자에게 렌더링할 HTML을 정의합니다.

8. 코드 수정 및 확장

이제 기본 구조를 기반으로 애플리케이션을 수정하고 확장할 수 있습니다. 라우트를 추가하거나, 미들웨어를 설정하거나, 뷰 템플릿을 수정하는 등의 작업을 통해 애플리케이션을 개발해 나갈 수 있습니다.

추가 팁:

• 환경 설정: 개발 및 프로덕션 환경에 따라 process.env를 통해 포트 번호와 같은 설정을 조정할 수 있습니다.
• 모듈 설치: 추가적인 기능이 필요할 경우 npm을 사용하여 모듈을 설치하고 사용할 수 있습니다.
• 개발 서버 리로드: 개발 중에는 nodemon 같은 도구를 사용하여 파일 변경 시 자동으로 서버를 리로드할 수 있습니다.

이 단계를 따라가면 express-generator를 사용하여 Express 애플리케이션을 쉽게 시작할 수 있습니다.