[Node.js 교과서] #18. 익스프레스 웹 서버 만들기 - Express-generator 빠르게 설치하기

Express-generator 빠르게 설치하기

익스프레스 프레임워크는 익스프레스 외에도 많은 패키지를 사용하므로 입문자 입장에서는 필요한 패키지를 찾아서 설치하기 조금 어렵다. 다행히 프레임워크에 필요한 package.json을 만들어주고 기본 폴더 구조까지 잡아주는 패키지가 있다. 바로 Express-generator이다. express-generator는 콘솔 명령어이므로 npm 전역 설치가 필요하다.

1. express-generator 패키지 전역 설치하기

2. express 프로젝트 생성하기

설치가 완료되었다면 새 익스프레스 프로젝트를 생성한다. 새로 프로젝트를 만들고자 하는 폴더로 이동해서 express <프로젝트 이름>을 입력한다.

 

 

☑ Note --view=pug란?

• Express-generator는 기본적으로 Jade를 템플릿 엔진으로 설치한다. 하지만 Jade는 Pug로 개명한 지 오래되었다. 따라서 옛 버전인 Jade 대신 최신 버전인 Pug를 설치하기 위하여 express-generator에 옵션을 주었다.
• Pug 대신 EJS를 템플릿 엔진으로 사용하고 싶다면 --view=ejs를 입력하면 된다.

 

이제 learn-express라는 폴더가 생성되었다. 폴더에 들어가서 npm 모듈들을 설치한다. 콘솔에서 다음과 같이 명령어 사이에 &&를 붙이면 두 가지 명령어를 한 번에 실행할 수도 있다. 

 

 

책에서는 &&를 쓰면 된다고 했는데 나는 에러가 난다. 찾아보니 -and를 사이에 두면 된다고 해서 해봤다.

 

 

이것도 안 된다. 더 찾아보니 세미콜론으로 구분하면 된다고 했다. 드디어 됐다.

 

 

폴더 구조를 간단하게 살펴보면 다음과 같다.

 

 

• app.js : 핵심적인 서버 역할을 한다.
• bin 폴더 : bin 폴더 내 www 파일은 서버를 실행하는 스크립트이다.
• public 폴더 : 외부(브라우저 등의 클라이언트)에서 접근 가능한 파일들을 모아둔 곳이다. 이미지, 자바스크립트, CSS 파일들이 들어 있다.
• routes 폴더 : 주소별 라우터들을 모아둔 곳이다.
• views 폴더 : 템플릿 파일을 모아둔 곳이다. 

 

앞으로 서버의 로직은 모두 routes 폴더 안의 파일에 작성할 것이고, 화면 부분은 views 폴더 안에 작성하고, 데이터 부분은 models 폴더를 만들어 그 안에 작성하게 될 것이다.

3. express 실행하기

package.json의 scripts에 start 속성이 있고, 속성값으로 node ./bin/www가 적혀 있다.

 

 

따라서 npm run start 명령어로 서버를 실행할 수 있다. 그런데 start 명령어는 특별하므로 그냥 npm start만으로도 서버를 실행할 수 있다. 

 

 

express 실행 후 localhost:3000으로 접속했을 때

 

콘솔에는 추가적으로 클라이언트가 보낸 요청에 관한 정보가 기록된다.

 

 

localhost:3000/users에 접속할 수 있다.

 

 

콘솔에 GET /users 요청이 기록된다.