[Express.js] Express 설치 및 실행

😲 서론

이 포스팅은 내게 아주 큰 의미를 가진다. 프론트엔드 개발자를 준비해온 내가, 백엔드(서버)에 관련해 처음 작성하는 글일테니!😀

 

혼자 2차 프로젝트를 진행하면서, 데이터를 JSON의 로컬fetch() 로 대체할까 고민을 많이 했다.

결론적으론, 동적 라우팅이나 로그인/회원가입 구현을 위해 Express로 서버를 간단히 구현해보기로 결정했다.

 

Javascript를 처음 공부하면서 포스팅을 하지 않았던 것이 후회되어, 이번엔 학습과 정리를 동시해 진행기로 했다!!

---

📗 Node.js 란?

나는 'Node.js = 백엔드(서버)' 라고 인지하고 있었다. 이번에 Express를 공부하며 정말 잘못된 생각이라는 것을 느꼈다!

Express 정리에 앞서, Node.js 와 npm부터 차근차근 정립할 필요성을 느꼈다.

 

1. Node.js

[Node.js 공식사이트]
Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다.

 

말 그대로, Node.js는 프레임워크 보다는 하나의 생태계(플렛폼)이자 소프트웨어인 것이다.(초기에는 서버 사이드 개발용으로 제작됬다)

Node.js는 Javascript 기반 런타임으로, JS를 브라우저 외 환경에서 사용할 수 있도록 해주며 http서버가 내장되어 있기에 주로 서버로 사용된다.

* Node.js 위키백과 : ko.wikipedia.org/wiki/Node.js

* 런타임 위키백과 : ko.wikipedia.org/wiki/%EB%9F%B0%ED%83%80%EC%9E%84

 

- 설치

Node.js 공식 홈페이지에서 설치할 수 있다.(nodejs.org/ko/) 버전은 LTS(Long Term Support)와 Current 두 가지를 제공한다.

Node.js

두 가지 버전을 제공하는 이유는 새 버전이 6개월 단위로 출시되므로 사용 기업들이 따라갈 수 있는 텀을 두는 것이다.

또한, 보통 짝수 버전을 LTS로 많이 두는데, 이는 홀수 버전은 실험적인 버전이라고 생각하면 되겠다.

 

* Homebrew 와 같은 패키지 매니저를 통해 설치할 수도 있다. (nodejs.org/ko/download/package-manager/)

 

- 확인

Node.js 설치가 정상적으로 됬는지는, Terminal 에서 node -v 명령어로 확인 가능하다.

 

2. npm (node.js package manager)

npm은 위 풀네임 그대로, Node.js에서 자주 사용되고 재사용되는 Javascript 코드들을 패키지화하여 모아놓은 저장소(관리자)이다.

오픈소스라는 장점으로 많은 사람들이 패키지를 공유하며, Node.js를 설치하면 기본적으로 같이 설치된다.

 

- 확인

마찬가지로 npm -v 명령어로 확인 가능하다.

npm은 init, install, --save 와 같이 사용에 필요한 다양한 명령어가 있는데, 이는 이후에 정리하도록 하겠다.

 

3. 서버 구축 준비

Express 로 서버구축을 하기 전에, 작업할 디렉토리에서 npm init 명령어를 통해 package.json 을 만들어줘야 한다.

package.json 은 npm 패키지들의 구성 및 버전을 관리하는 파일 정도로 우선 염두하고 진행하도록 하겠다.

위처럼, package.json 을 생성하면서 다양한 설정을 진행한다.(패키지명, 버전, 진입점 파일 등)

이를 생략하려면, npm init -y, npm init -f 등의 옵션을 사용하면 된다.

 

Heropy Tech님께서, npm 사용 및 패키지 버전관리의 핵심인 package.json 정리를 잘 해주셔서 링크를 첨부했다.

* Heropy Tech 님의 블로그 포스팅(처음 시작하는 Node.js 개발 - 2 - npm) : heropy.blog/2018/02/18/node-js-npm/

처음 시작하는 Node.js 개발 - 2 - npm

---

📗 Express.js 란?

[Express.js 공식 사이트]
Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

 

그렇다면, Express.js 는 무엇일까! 그렇다. 이것이 바로 Node.js 에서 제공하는 웹 서버 프레임워크 인 것이다.

(Java의 Spring, php의 라라벨, Python의 Django 등이 대표적인 웹 서버 프레임워크다.)

 

Node.js 에는 Express, Koa, Hapi 등의 웹 프레임워크를 제공하는데, Express 엔진이 가장 많이 통용되고 있다.

 

- 주요 기능

• HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
• 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다. 
• 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. 
• 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.

 

- 설치

서버작업을 하려는 디렉토리에서 npm install 로 설치할 수 있으며, npm express -v 로 설치여부를 확인할 수 있다.

npm install express --save

 

* --save 옵션을 사용하는 이유?

버전을 관리하는 package.json의 dependencies 항목에 저장하기 위함이다. (모듈 의존성 관리)

npm5 부터는 --save 옵션 없이도 dependencies 항목에 자동적으로 추가되도록 업데이트 되었다. install의 다른 옵션은 아래가 있다.

• -P or --save-prod : package.json의 dependencies에 패키지를 등록합니다.(default)
• -D or --save-dev : package.json의 devDepndencies에 패키지를 등록합니다.
• -O or --save-optional : package.json의 optionalDependencies에 패키지를 등록합니다.
• --no-save : dependencies에 패키지를 등록하지 않습니다.

---

📗 Express.js 개발하기

1. 서버 만들기 (Hello World!)

코딩의 국룰 Hello World 다.🤣🤣🤣 첫 Express.js 서버 개장을 해보도록 하겠다! 

// index.js

const express = require('express')	// 모듈 추출
const app = express()			// 서버 생성
const port = 5000			// 서버주소(port) 지정

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

우리가 진입점 파일로 설정한 index.js 에서, 위와 같이 코드를 작성하면 된다. (PORT 값은 임의로 지정하면 된다.)

 

이제 서버를 시작해보겠다. 터미널에서 node index.js 명령어를 실행한다. (React 의, npm run start 와 같다고 생각?!)

위 설정에 따라, 서버는 http://localhost:5000/ 포트에 개설되어 연결을 청취한다.

node index.js

 

브라우저의 http://localhost:5000/ 으로 이동해보면, "Hello World!" 가 send 되고 있는 것을 볼 수 있다.

다른 경로를 확인해보면, 해당 경로에 대한 요청을 정의하지 않았기에 404 오류('Not Found')로 응답하는 것을 알 수 있다.

 

2. Express Generator(생성기)

Express 개발환경을 신속하게 구축하고 싶다면, express-generator 툴을 사용하면 된다. (React의 create-react-app 과 유사)

 

1) 설치

npm install express-generator -g

* sudo 명령어는 글로벌 설치시, local의 권한거부 없이 설치하도록 해준다. 그렇기에, npm은 sudo 설치를 지양하기를 권장한다.

 

2) 개발환경 구축

express --view [engine] [디렉토리명]

* express --view=pug 뷰 엔진을 많이 사용한다. 디렉토리 명을 넣지 않으면, 현재 디렉토리에 개발환경이 설정된다.

 

3) 모듈 설치

위 사진을 보면, package.json이 설치된 것을 알 수 있다. 해당 버전의 모듈들을 설치해야 하므로, npm install 명령어를 입력한다.

 

 

4) 폴더 구조

아래와 같이 1 depth 의 폴더구조로 이루어져 있다.

dir % tree ./ -L 1
./
|-- app.js
|-- bin
|-- node_modules
|-- package-lock.json
|-- package.json
|-- public
|-- routes
`-- views

• app.js : 접근 포인트. 핵심적인 서버 역할.
• bin/www : 서버를 실행하는 스크립트
• public : 외부(브라우저 등 클라이언트)에서 접근 가능한 파일들을 모아둔 곳 (이미지, JS, css 파일 등)
• routes : 주소별 라우터들이 담긴 디렉토리
• views : 템플릿 파일들이 담긴 디렉토리

5) 서버 실행

package.json 에 start script가 추가되어 있어, npm start 명령어를 통해 서버가 실행될 수 있다. (포트는 3000 default)

위처럼, 3000 포트에서 서버가 정상적으로 동작하는 것을 알 수 있다.

---

내 첫 Node.js 서버를 띄워본 역사적인 순간이다!!!!!!!

다음엔, 로그인/회원가입 연결을 위해 서버 라우팅을 공부하면서 포스팅을 진행하겠다.

 

 

[출처]

- Node.js 공식 사이트 : nodejs.org/ko/

- Express.js 공식 사이트(한국어) : expressjs.com/ko/

- Heropy Tech 님의 블로그 : heropy.blog/2018/02/18/node-js-npm/

- 아빠개발자 님의 블로그 : dydals5678.tistory.com/88