이전 글에서 node.js를 설치하는 방법에 대해서 알아보았다.
본문에서는 express를 이용해 API를 개발하는 방법에 대해 적고자 한다.
(개인적으로 공부하며 정리할 겸 적는 글이라 틀린 부분이 있을 수도 있습니다. 혹시 있다면 댓글로 알려주세요!)
- Node.js는 프레임워크가 아니다!!!
우리가 흔히 알고 있는 spring 은 백엔드를 개발할 때 쓰는 프레임워크이다.
node.js는 javascript를 실행 시킬 수 있는 환경 즉, 런타임일 뿐이고 프레임워크가 아니다.
- 결론부터 말하자면 express는 node.js 웹 애플리케이션 프레임워크이다.
물론 express 없이 node.js만으로 개발할 수는 있지만 무척 험난한 길이 될 것이다. (라우팅, 세션 관리 등등등....신경 쓸 게 너무 많다!!)
웹 애플리케이션을 만들기 위한 각종 라이브러리와 미들웨어 등이 내장돼 있어 개발하기 편하고, 수많은 개발자들에게 개발 규칙을 강제하여 코드 및 구조의 통일성을 향상시킬 수 있다.
아래는 express 공식 홈페이지에 있는 설명 글이다.
- 웹 어플리케이션
Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다- API
자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성할 수 있습니다.- 성능
Express는 기본적인 웹 애플리케이션 기능으로 구성된 얇은 계층을 제공하여, 여러분이 알고 있고 선호하는 Node.js 기능을 모호하게 만들지 않습니다.
요약하자면 express를 이용하면 더 쾌적한 개발 환경을 만들 수 있다. 😃
- express generator는 express 환경을 간단하게 구축해주는 모듈이다.
빠르게 애플리케이션의 뼈대를 만들수 있다.
내장 모듈이 아니기 때문에 npm을 통해 설치해야 한다.
npm i -g express-generator
위 명령어를 통해 설치할 수 있다.
express-generator 모듈을 설치하면 커맨드 창에서 express라는 키워드를 사용할 수 있다!
정상적으로 설치가 된 모습이다.
개발을 위한 모든 준비는 끝났다! 본격적으로 개발을 시작해보자.
express-generator를 설치하므로써 우리는 이제 커맨드 내 어디서든 express 키워드를 사용할 수 있다.
express 프로젝트명 --view=pug
위 명령어로 express 프로젝트를 생성하였다.
node.js의 대표적인 템플릿 엔진으로는 ejs와 pug가 있는데 --view를 pug로 하게되면 템플릿 엔진으로 pug를 사용하게 된다.
cd 프로젝트명
npm i
다음으로 해주어야 할 것은 해당 프로젝트 폴더로 이동하여 npm 파일들을 설치해주는 것이다.
package.json라는 json 파일의 dependecies 객체 안에 있는 npm들을 설치해주기 위해 npm i를 해주어야 한다.
정상적으로 프로젝트와 npm을 설치한 모습이다.
VS code에서 해당 폴더를 열어보자.
그저 express로 프로젝트를 생성하고 npm을 설치한 것 뿐인데 많은 것들이 자동으로 생성되어있다!! 😲
이래서 express를 쓰나보다.
프로젝트 구조에 대해 간단히 설명하자면,
bin/www
웹 서버 구축에 관한 파일로, http 모듈에 express 모듈을 연결하며 포트를 지정할 수 있다.
서버를 실행하는 스크립트이다.
node_modules
"npm i" 명령어를 입력하면 생성되는 폴더로, npm에 필요한 모든 파일이 설치된다.
이 폴더는 나중에 프로젝트를 git에 push 할 때 ignore 해주는 것이 좋다. spring의 build 폴더로 생각하면 되겠다.
public
리소스들을 모아놓은 폴더로, 외부(브라우저 등의 클라이언트)에서 접근 가능한 파일들을 모아 둔 디렉토리이다.
images, javascripts, stylesheets(css) 파일들이 들어있다.
routes
라우팅 리소스 별로 모듈을 만들어서 라우팅 조직을 구현한 폴더로,
index.js 파일을 기반으로 라우팅 관리를 해주면 된다.
views
view 파일들을 관리하는 폴더로, request 요청에 대한 로직을 처리한 후 클라이언트에 응답을 보낼 때 html 코드로 변환해서 반환하는 파일을 정의
app.js
express 설정 정보가 담겨져 있는 파일로, 핵심적인 서버의 역할을 하며 미들웨어 관리를 하는 파일이다.
pakage.json
프로젝트의 이름, 버전, dependecies, 패키지 리스트 등의 정보를 담고 있는 파일이다.
위에서 언급했듯, npm i를 통해 생겨난 파일이다.
pakage.json 파일을 보면 "start": "node ./bin/www" 속성이 추가되어 있다.
이 속성은 npm start 명령어만으로 서버를 구동시키는 www를 실행 시킬 수 있다.
npm start
기본 포트는 3000이다. (spring을 이용해서 개발할 땐 tomcat을 사용해서 8080 포트였는데..!😲)
http://localhost:3000 에서 확인할 수 있다.
위 사진처럼 화면이 나온다면 정상 작동 중인 거다!
아직 나도 이 단계까지 했기 때문에 실제 API 개발은 다음 글에서 다뤄보도록 하겠다!
실시간으로 공부하고 찾아보며 하는 중이다 ㅎㅎ 재밌다!