[node] Express를 사용하여 웹 서버 띄우기(feat. nodemon)

 

해당 예시 실행을 위해서는 Express가 추가 되어 있어야 합니다.

혹시 설치가 되어있지 않거나, 설치법을 모르시는 분은 이전 포스트의 npm install을 보고 오시면 됩니다.

 

예시 작성을 위한 새폴더 생성 및 새 파일(app.js) 생성

새로 생성한 app.js 파일에 다음과 같이 코딩

const express = require('express');
const app = express(); // 익스프레스 가져오기
const port = 3000; // 포트 번호

app.get('/', (req, res) => {
    res.send('hello express'); //화면에 표출될 부분
});

app.listen(port, () => {
    console.log('Express listening on port', port) // 잘 실행되었는지 확인하기 위해 cmd창에 뜰 문구 설정
}); // 웹서버를 띄우는 크리에이트 웹 서버 소스 코드

 

app.js 화면

입력이 끝났으면 cmd 창에서 app.js를 실행

cmd

localhost:3000 접속 시 다음과 같은 화면을 확인할 수 있다.

localhost:3030 접속 화면

다음으로 url을 추가하는 방법이다.

vscode의 app.js로 돌아가 app.get() 부분을 아래와 같이 수정한다.

app.get('/kwkim', (req, res) => {
    res.send('hello express');
});

수정한 후 url 주소를 바꿔서 바로 접속할 경우 아래와 같은 에러 페이지를 확인할 수 있다.

에러 화면

cmd 창에서 node를 재실행해야만 정상적으로 페이지가 뜬다.

이렇게 되면 vscode에서 파일을 수정하고 실행하면 그때 그때 마다 노드를 실행 취소했다 실행했다 하는 굉장히 번거로운 과정을 거쳐야 한다.

이러한 과정을 거치지 않게 해주는 것이 nodemon이다.

nodemon은 node.js 서버 개발 시에 소스코드에 수정이 있을 경우 자동으로 서버를 재 시작해준다.

 

nodemon을 먼저 인스톨을 한 후에 다시 진행한다.

cmd 창을 열어 npm install -g nodemon 을 입력

(아래 이미지에는  npm install nodemon으로 되어 있는데 반드시 install과 nodemon 사이에 -g가 들어가야 함)

nodemon install

설치가 완료되었으면 nodemon으로 app.js를 실행한다.

nodemon 실행

vscode로 돌아가 res.send(''); 부분을 'hello express-5'로 변경한 후에 바로 url에 접속한다.

localhost:3000

별도의 에러도 없고 정상적으로 hello express-5로 변경되어 표출되는 것을 볼 수 있다.

cmd 창을 켜놓고 nodemon으로 app.js를 실행하고 vscode에서 app.js를 수정하고 저장하면 서버가 올라갔다 내려갔다 하는 것을 직접 볼 수 있다.

 

출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다.