Express로 개발 하기에 앞서서, 먼저 개발 환경을 구성해야 한다.
📁 npm 프로젝트 생성
Nodejs를 설치했다면 npm이 자동으로 설치되는데, npm을 사용해서 package들을 관리하기 위해 원하는 폴더에서 터미널을 열어서 아래 명령어로 npm 프로젝트를 생성한다.
$ npm init -y-y옵션으로 프로젝트를 만들면 초기 세팅 없이 빈 프로젝트를 생성해준다.
📂 Express 설치
이제 Express를 설치해보자.
$ npm i express🔍 Express 설치하는 동안 읽어보기
여러 자료나 강의를 보면 npm 모듈을 다운받을 때, --save(-S) 옵션을 주는 경우가 많은데 이 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미다.
나는 -S를 안해도 잘만 dependency 항목에 들어가길래 무슨 차이인가 싶었는데, 예전에는 package.json dependency 항목에 추가되지 않는게 기본 옵션이었다고 한다. 다른 환경에서 작업할 경우 -S 옵션을 사용해 다운받지 않은 라이브러리는 npm i 를 했을 경우 node_modules에 추가되지 않았었다고,,
하지만 npm5 부터는 --save가 기본 옵션이라서 이제는 --save를 사용하지 않아도 dependency에 자동으로 항목이 추가된다.
⌨️ Express 서버 코드 작성
src 폴더 안에 app.js 파일을 생성한다.
Epxress 앱을 가져와서 localhost 3001번 포트에서 실행시키고, / 경로로 요청이 오면 'Hello Express!'를 보내주도록 했다.
app.js
const express = require('express');
const app = express();
app.use(express.json());
app.listen(3001, () => {
console.log('http://localhost:3001');
});
app.get('/', (req, res) => {
res.send('Hello Express!');
});나는 commonjs 방식으로 모듈들을 require해서 사용했는데, moudle 방식으로 import 해서 사용하고 싶다면 package.json에 아래 설정을 추가해주면 된다.
"type": "module"💡 Express 서버 실행
src 경로에서 터미널을 열고 아래 명령어로 서버를 실행시킨다.
node app.js그런데 서버를 실행시킬 때마다 매번 node app.js를 치는건 번거로운 일이다. 그래서 package.json에 scripts 객체에 start 명령어로 스크립트를 작성해보자.
package.json
"scripts": {
"start": "node ./src/app.js"
}명령어가 실행되는건 package.json 파일이 있는 경로이기 때문에, 상대경로로 경로를 설정해줬다.
이제는 package.json이 있는 경로의 터미널에서 npm start라는 명령어로 간편하게 서버를 실행시킬 수 있다.
서버를 실행시키고, http://localhost:3001에 접속해보면 브라우저에 'Hello Express!'가 출력된 것을 볼 수 있다.
'Hello Express!'가 아니라 'Hello World.'를 출력해보자.
app.js
app.get('/', (req, res) => {
res.send('Hello World.');
});코드를 수정하고 저장을 한 뒤에 브라우저를 새로고침 해서 확인해봤는데, 여전히 'Hello Express!'가 출력된다.
이유는 node는 app.js가 최종적으로 저장된 결과물을 실행시켜줄 뿐, 서버가 실행되는 동안 소스가 변경된다 해도 반영되지 않는다. 그래서 내용이 변경되면 서버를 끄고, 다시 실행시켜야한다.
이런 불편함을 덜기위해 nodemon이라는 모듈을 사용해서, 자동으로 서버를 재시작해줄 수 있다.
🔭 nodemon 사용해서 변경사항 감지하기
아래 명령어로 nodemon을 설치한다.
$ npm i nodemon그리고 package.json에서 서버를 실행시키는 명령어를 node가 아닌 nodemon으로 변경하면 된다.
package.json
"scripts": {
"start": "nodemon --watch ./src ./src/app.js"
}--watch 명령어로 src 폴더 경로에 있는 소스 코드의 변경을 감지하고 서버를 재시작해준다.
