[Node.js] Express-generator 사용하여 개발환경 만들기

express-generator

Express는 기존 Node.js 코드의 가독성과 확장성이 많이 떨어진다고 생각하여 만들어진 웹 서버 프레임워크입니다. Express는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여했습니다. 또 라우터로 코드를 분리하기 쉬워 유지보수 또한 용이합니다.

Express 외에도 koa나 hapi 같은 웹 서버 프레임워크가 있지만 다음 사진과 같이 Express가 압도적으로 인기가 많습니다.

 

https://www.npmtrends.com/express-vs-koa-vs-hapi

물론 사용자가 많다고 항상 좋은건 아니지만, 사용자가 많은 것에는 이유가 있습니다. 사용자가 많을 수록 버그가 적고, 기능 추가나 유지보수도 활발이 되기 때문입니다.

Express-generator는 Express 환경을 간단하게 구축해주는 npm입니다.  따라서 사용하면 쉽게 Node.js 개발을 할수 있습니다.

 

npm를 이용하여 express-generator 설치하기

 

1 ."npm i -g express-generator" 을 터미널에 입력하여 실행시켜줍니다.

• npm i 대신 install도 가능합니다.
• '-g' 는 글로벌의 약자로 폴더의 국한된 것이 아니라 전역으로 설치하는 방법입니다.   
  만약 전역 설치를 원치 않으면 '-g'  대신 '-save'로 하시면 됩니다.

2. "express [설치할 폴더이름] --view=pug" 을 터미널에 입력하여 실행시켜줍니다.

• 폴더 이름이 test 라면 "express test --view=pug"로 입력하시면 됩니다.
• Node.js의 대표적인 템플릿 엔진으로는 ejs와 pug가 있는데 --view를
  pug로 하게되면 템플릿 엔진으로 pug를 사용하게 됩니다.
• jade가 새롭게 개명된 것이 pug입니다.(pug에 관한글은 추후 올리겠습니다.)

pug 이미지입니다. 귀엽죠? 진짜 그 퍼그에요

1, 2번까지 진행하시면 다음과 같은 폴더가 생성이 됩니다. 저 같은 경우 "express express_test --view=pug"로 하였기
때문에 express_test라는 폴더가 생성이 되었습니다.

 

express_test라는 폴더가 생성되었죠 :)

---

3. 생성한 폴더로 cd 명령어를 사용하여 이동합니다. 생성한 폴더 이동한 후

"npm i"를 입력하여 필요한 npm 파일들을 설치 해줍니다.

 

※여기서 잠깐!!

{
  "name": "express-test",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  }
}

 

"npm i"를 해주는 이유는 package.json라는 json 파일안 dependecies 객체 안에 있는 npm들을 설치해주기 위함입니다.

일일이 npm i express 이런식으로 설치할 필요없이 "npm i" 명령어 하나로 dependecies 객체 안에 있는 모든 npm을 자동으로 설치할 수 있는 것입니다. 

 

추후 Github에 Node.js 프로젝트를 올릴때 해당 프로젝트 내에 모든 npm 파일들이 같이 커밋 되는데 이럴 경우 상당히 비효율적이기 때문에 gitignore로 npm 파일들은 올라가지 않도록 합니다. 하지만 package.json 파일은 커밋이 되기때문에 package.json 파일만 있다면 해당 프로젝트에 필요한 모든 npm을 설치할수 있게되는 것입니다.

---

4. "npm i" 명령어를 입력하면 node_modules라는 폴더가 새롭게 생겨나는데 이곳에 npm에 필요한 모든 파일이 설치됩니다. 

 

(따라서 gitignore에는 node_modules을 입력하여 node_modules가 커밋되지 않게 합니다. 아래는 Node.js 프로젝트의 커밋 파일들인데 node_modules 폴더가 없는 것이 보이죠?)

gitignore에 npm 파일들을 담고 있는 node_modules를 입력해줍니다.

 

node_modules 폴더는 커밋되지 않았습니다. https://github.com/kingbj940429/BJ.GG

5. 마지막으로 "npm start" 명령어를 입력하여 구축된 로컬 서버에 접속하시면 됩니다.

 

npm start 할 경우

근데 우리는 로컬 서버의 포트를 무엇으로 설정해줬는지 몰라요. 포트 번호를 설정해주기 위해선 /bin/www.js 를 열어줍니다.

 

 

들어가시면 뭔지 모를 코드가 많이 있을겁니다. 우선 다 제쳐두고, 다음과 같은 코드를 주목해주세요 :)

 

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');//여기를 주목해주세요★
app.set('port', port);

 

process.env.PORT는 환경변수인데 이것에 대해서 추후 자세히 다루겠습니다. 우리가 주목할 것은 3000이라는 숫자입니다. 이게 바로 연결할 포트 번호입니다. 해당 포트를 기준으로 localhost:3000으로 접속하면 됩니다!!

 

6. 다음과 같은 화면이 표시됐다면 성공한 것입니다 :) 어렵지 않죠??

 

 

화면에 출력되는 문구를 바꾸고 싶다면??

그건 다음에 다루어보겠습니다

 

읽어주셔서 감사합니다.

질문은 언제나 환영합니다.

 

"난 반드시 백엔드 왕이 될거야"