[Nodejs] express를 이용한 서버 구축

 📌 들어가며

최근에 서버 프로젝트를 몇 개 시작하면서 서버 구축을 처음부터 다뤄보고자 글을 작성하려고 합니다.

이 글에서는 간단한 express 프로젝트 생성하는 법을 다루고, 다음 글에서는 Express 구조 뜯어보기,

그 이후에는 firebase functions를 이용한 서버 프로젝트 및 자주 사용했던 폴더링 구조를 공유하도록 하겠습니다. 😃

 

 📌 사전 준비

1. Nodejs 설치

 

잠시, Nodejs란?

Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 입니다

 

쉽게 말해서, javascript로 작성한 코드로 서버를 실행시키기 위한 도구다~ 라고 알고 계시면 될 것 같습니다.

 

https://nodejs.org/en/

Node.js

해당 링크로 들어가서 LTS 버전 다운로드 합니다.

 

설치 후 터미널에서

$ node -v
$ npm -v

두 가지의 명령어가 실행된다면, 정상적으로 설치 된 것!

 

2. VS Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

해당 홈페이지에서 본인의 OS에 맞게 다운로드 합니다.

 

 

3. Express 설치

 

Express란...?

Node를 위한 빠르고 간결한 서버 프레임워크로
HTTP 요청에 대해 라우팅 및 미들웨어 기능을 제공한다.

$ sudo npm install express-g

* sudo 명령어는 max, linux 환경에서만 사용하면 됩니다 !!

 

-g 옵션을 주어 전역 설치를 하기 때문에 어느 경로에서 설치를 하든 상관 없습니다.

 

 

 📌 프로젝트 생성

1. VSCode 실행

2. Terminal을 사용해서 프로젝트를 만들 위치로 이동

VSCode를 실행했다면 mac 기준 ^(control) + ` 로 터미널 창을 열어줍니다.

만약, 열리지 않는다면 혹시 현재 언어가 영어가 맞는지 확인해주세요!

(영어 `가 한글로 하면 ₩로 표시될 겁니다!)

 

터미널에서 아래의 명령어를 입력해줍니다.

$ npm install -g express-generator

-g는 --global 옵션의 줄임말로 전역 설치 옵션이며 express-generator는 express 프로젝트 생성기입니다.

 

설치가 된 것을 폴더에서 보고싶다! 하시는 분은

/usr/local/lib/node_modules

폴더로 이동하면 전역으로 설치한 모듈들이 보일 겁니다.

 

이제 터미널에 하단의 명령어를 입력해줍니다.

$ express practice

 

프로젝트 생성 완료!

 

 📌 Express 프로젝트 실행

프로젝트 최상위 폴더 위치로 이동합니다.

쉽게, 프로젝트 생성 시 적었던 express <프로젝트명> 에서 프로젝트명으로 이동해주면 됩니다.

 

해당 위치에서 dependency 설치를 위해 아래의 명령어를 입력합니다.

$ npm install

설치를 했다면 node_modules라는 폴더가 생겼을 겁니다.

해당 폴더는 dependency를 모두 담고 있는 폴더입니다.

 

npm install 명령어는 package.json에 있는 모듈들을 인스톨 해줍니다.

여기에 있는 dependencies를 인스톨해주는 것입니다!

 

이제 express 시작을 위해 아래 명령어를 입력해줍니다.

$ npm start

이 상태에서 브라우저에 접속해줍니다.

 

프로젝트 실행 완료!

 

다시 VSCode로 돌아와서 터미널을 보면

GET 요청이 실행되었던 것을 확인할 수 있네요!

 

 📌 마치며

이번 글에서는 간단히 Express 프로젝트 생성 & 실행을 다뤄보았습니다.

다음 글에서는 Express 프로젝트 생성 시 나오는 폴더 & 파일에 대해 더 자세히 알아보겠습니다!

 

참고: SOPT 29th 서버 2차 세미나 자료