node.js express 1. express란??, express generator, directory 구조

Express란??

홈페이지를 가면 이런 식의 설명을 볼 수 있다.

"Fast, unopinionated, minimalist web framework for Node.js"

"Node.js를 위한 빠르고, 침착성이 없고(?), 미니멀리스트한 웹 프레임워크이다."

구글 번역기를 돌렸더니 이모양이다...(수능식 영어를 배운지라 무슨 뜻인지 감만 오는;;)

아무튼 express를 정의하자면 웹 프레임워크이다.

웹을 빠르게 개발할 수 있는 편리한 도구들의 집합체라고 볼 수 있다.

웹을 모르는 사람들도 이와 관련된 포스팅된 블로그들을 보고 따라만 한다면 쉽게 개발할 수도 있고

Node.js를 위한 웹프레임워크라서 배워둔다면 웹 프론트 진입장벽을 크게 허물고 시작할 수 있다.

글을 쓰고 있는 나 자신도 사실 node.js와 express가 뭔지도 모르고 서버를 빠르게 개발할 수 있다는 소리에 현혹되어서 뭣도 모르고 썼었다.

처음에는 간편하고 편리해서 진짜 좋다고 생각했지만 이상한데서 생기는 오류와 점점 깊이 개발하다보니 뭣도 모르고 서버가 돌아간다는게 내 자신 스스로도 용납이 안되어서

express를 먼저 하나하나 분해해서 낱낱히 알고자 이 포스트를 작성한다.

express generator

express generator란 express의 application skeleton이다.

무슨 말이냐 하면 뼈대라고 말 할수 있다.

express를 편리한 도구들의 집합이라고 한다면 express generator는 말 그대로 express로 생성한 간단한 뼈대이다.

뼈대이기 때문에 움직일 수는 있지만 뼈만 있다..

하지만 뼈대를 구축해주었기 때문에 살만 붙이면 되는 장점이 존재한다.

정확하게 이야기하자면 웹 어플리케이션 서버의 기초가 되는 코드를 미리 작성해둔 뼈대이자 코드이다.

이 express generator를 이용하면 1분안에 웹 어플리케이션 서버를 구현할 수 있다.(미쳤다;;)

먼저 express-generator를 npm이란 저장소에서 express-generator를 다운받아야한다.

npm이란 Node Package Modules의 약자로 쉽게 말해서 Node.js에서 사용할 수 있는 모듈을 패키지화해서 저장해둔 장소라고 보면 된다.

이 npm에서 express-generator를 글로벌로 다운받아야한다.

다운받고 싶은 경로에서 git bash든 터미널 창이든 열어서 다음 명령어를 작성한다.

npm install -g express-generator

혹시나 permission denied 에러가 뜬다면 root 권한으로 명령어를 실행하는 sudo를 붙이면 된다.(리눅스에서)

sudo npm install -g express-generator

이제 전역으로 express-generator가 설치되었다.

전역이란 프로젝트에서만 사용할 수 있는 모듈이 아니라 컴퓨터 전역에서 사용할 수 있다는 의미이다.

설치가 되었다면 이제 express-generator를 이용하여 프로젝트 뼈대를 생성할 차례이다.

프로젝트를 생성하고 싶은 디렉토리 경로(path)에서 다음 명령어를 작성한다.

express --view=ejs testServer

그러면 해당 경로(path)에서 렌더링 모드는 ejs, 그리고 testServer란 디렉토리 안에 다음과 같은 구조가 생긴다.

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

간단히 정리해보자면

- bin/www는 main 함수가 담겨있는 파일이라고 생각하면 된다. www에서 프로젝트를 실행해야한다.

- app.js는 서버의 설정을 담아놓은 파일이라고 생각하면 된다. 웹 어플리케이션 서버에 설정할 모듈을 포함시키면 된다.

- package.json는 프로젝트가 어떤 모듈에 의존성을 가지는 지 정리해둔 파일이라고 보면 된다. npm install을 하게 되면 package.json에 적힌 모듈을 다운받게 된다. (건드릴 필요 X)

- public은 서버가 public으로 제공할 정적 파일들, 예를 들어 js파일, css파일, 이미지 파일 등을 저장해놓는 디렉토리이다.

- routes는 서버가 라우팅 할 url path에 대한 로직들을 저장해놓는 파일이다. 

- views는 서버가 렌더링하는 템플릿들을 저장해놓는 디렉토리이다. 아까전에 우리는 ejs로 설정했기 때문에 ejs파일들이 보인다.

끝이다. 이제 이 프로젝트를 구동하면 웹 어플리케이션 서버를 만들수 있다.

하지만 이렇게 끝내기는 아쉬우니 좀 더 보자.

프로젝트를 구동하려면 필요한 모듈을 다운받아야하므로 커멘드 창이나 터미널 창에서 다음 명령어를 실행시킨다.

npm install

그러면 added XX packages in *.***s 라는 글자가 나타난다. 모듈 설치가 끝났다는 뜻이다. 이제 프로젝트를 구동해보자

node bin/www

끝났다. 이제 그저 웹브라우저에서 http://localhost:3000이라고 치면 된다.

그러면 다음과 같은 화면을 볼 수 있다.

저 화면은 views/index.ejs 파일이 렌더링 되어서 보여진 화면이다. 

그리고 렌더링하는 라우트는 routes/index.js에 있다.

코드 보고 설명하는 것은 다음 포스트에서 작성하도록 하겠습니다~.