[Nodejs] Express generator 사용해서 웹 어플리케이션 간단하게 만들기

이전 두 포스팅에서 Nodejs 프로젝트와 Express 프로젝트를 만드는 방법을 알아보았습니다.

이 경우에는 직접 폴더를 구성하고 index.js 또는 app.js인 시작 js소스를 직접 만들어서 편집하는 방법을 사용했었습니다. 하지만 express 프레임워크에서는 명령어 하나로 아주 간단하게 만드는 방법을 제시하고 있습니다.

이번 포스팅에서는 express-generator를 이용해서 웹 애플리케이션의 뼈대를 간단하게 만드는 방법을 알아보겠습니다.

Express 웹 어플리케이션 만들기

웹 어플리케이션을 Express를 이용해서 만드는 방법은 공식 홈페이지에도 잘 나와있습니다. 이럴 때는 공식 홈페이지를 잘 보고 따라 해 보는 것이 중요하겠죠. 한번 그대로 따라 해 보도록 하겠습니다.

Express 공식 홈페이지 : expressjs.com/ko/starter/generator.html

저의 경우는 expgen이라는 디렉토리를 만들고 그 안에서 작업을 하기 위해서 이동 후 설치부터 시작했습니다. -g 옵션은 global이란 옵션으로 전역에서 사용할 수 있도록 설치하겠다는 의미입니다.

설치가 완료되면 정상적으로 설치되었는지 확인하기 위해 version 또는 help 메뉴를 볼 수 있습니다.

$ express -h

help메뉴를 보니 여러가지 옵션들이 있습니다. 그럼 실제로 express-generator를 이용해서 웹 애플리케이션을 만들어 보도록 하겠습니다. 명령어는 다음과 같습니다.

$ express [options] [dir]

저의 경우는 ejs 엔진을 선택할 것이고 디렉토리는 현재 디렉토리를 만들어 놓았기 때문에 현재 위치에 프로젝트를 만들어 보겠습니다.

ejs를 사용하겠다는 옵션 -e와 현재디렉토리를 가리키는 . 을 입력해 보았더니 warning이 났습니다. 하지만 프로젝트는 정상적으로 생성이 되었습니다.

Warning은 친절하게 이유를 알려줬네요. -e 옵션 혹은 --ejs 옵션은 --view=ejs라는 옵션으로 변경해서 사용하라는 내용입니다. 다음 프로젝트를 만들 때에는 이렇게 변경해서 만들어야겠네요.

디렉토리는 public/, routes/, views/, bin/ 이렇게 4개의 디렉토리가 생성되었고 내부에 파일들도 자동으로 생성되었습니다. 웹 애플리케이션의 구조를 알아서 만들어 준 것입니다. 굉장히 편리한 프레임워크네요.

그리고 다음을 읽어보면 install dependencies 라는 문구가 있습니다. 필요한 라이브러리들의 종속성을 위해서 다음 명령어를 실행해야 합니다.

$ npm install

위 명령어를 실행하면 package-lock.json 파일과 함께 여러 가지 패키지들이 설치가 되면서 node_modules라는 디렉토리가 하나 더 생성됩니다.

자 그럼 이제 현재 프로젝트를 실행해 보겠습니다.

$ npm start

정상적으로 시작되었다면 기본포트로 웹 애플리케이션이 실행되고 localhost:3000로 접속하시면 다음과 같은 화면이 나타나는 것을 확인할 수 있습니다. 기본 포트는 3000입니다.

지금까지 Express-generator를 이용해서 웹 애플리케이션 구조를 간단하게 만드는 방법을 알아보았습니다. 직접 구성을 맞춰서 만들어도 되지만 기본적인 뼈대를 만들어주니 더 편리한 방법인 것 같습니다. 도움이 되셨으면 합니다. 이상입니다.

[Nodejs] express 프레임워크 프로젝트 만들기 (0)	2021.03.21
[Nodejs] NodeJS 설치 및 프로젝트 생성하기(feat. Windows & macOS) (0)	2021.03.19