Node.js + Express 프레임워크로 웹 서버 구축하기
0. Express 기반 서버?
브라우저 외부에서 자바스크립트를 실행할 수 있는 환경을 제공하는 Node.js.
브라우저에서 할 수 없던 *서버 측 애플리케이션, 파일 시스템 접근, 네트워킹 등의 작업을 수행할 수 있다.
*서버 측 애플리케이션 : 클라이언트로부터 요청을 받아 처리하고, 결과를 다시 클라이언트로 반환하는 서버에서 실행되는 프로그램이나 서비스
그리고 이런 Node.js 기반으로 된 애플리케이션 설계 및 구현을 도와주는 도구(프레임워크) Express.js.
이 둘을 가지고 백엔드를 맛보려고 한다.
1. 환경설정
개발 환경은 Visual Studo Code 다.
▶ Node.js 설치
가장 중요한 node.js 부터 깔자.
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
오랜 기간 지원되는 LTS 버전으로 다운 받고, 다운로드된 파일을 더블클릭 해 설치해주면 된다.
약 두달 전에 설치했던 지라 방법이 기억나지 않았는데
그냥 기본 설정대로 Next 만 눌러도 설치가 되는 간단한 구조였다.
기억이 안 나는 이유가 있었다.
명령 프롬프트(cmd) 에 node -v 를 쳤을 때, Node.js 의 버전이 뜨면 설치가 된 것이다.
▶ Visual Studio Code 세팅
사실 세팅이라 할 것도 없는데 단 한가지.
터미널(Terminal) 이 powershell 로 되어있다면 cmd 로 바꿔줘야 한다.
powershell 과 cmd 는 동작 방식이 다르기 때문에 스크립트 실행 시 차이가 발생할 수 있다.
▶ Node.js 프로젝트 초기 설정
npm init
프로젝트 폴더 하나를 생성하고 해당 폴더로 들어가 npm init 명령을 입력한다.
사진 속 표시한 내용들을 하나하나 입력하라고 뜰텐데, 그냥 엔터 쭉 쳐서 넘겨도 된다.
그러면 기본 설정대로 만들어진다.
npm init -y
엔터마저도 귀찮다면 대답을 전부 yes 로 입력하겠다는 명령 npm init -y 를 입력해도 된다.
실수로 넘겼다고 해도 괜찮다.
npm init 을 통해 환경이 구성되었다면 package.json 이 만들어진다.
이 파일안에 터미널에서 한 줄 한 줄 뜨던 내용들이 종합해서 들어가있다.
이곳에서 수정해도 된다.
서버의 메인이 되는 파일 이름을 index.js 에서 App.js 로 바꿔주었다.
App.js 파일은 수동으로 만들어주자.
▶ express 설치
npm i express
터미널에 npm i express 명령을 입력해 express 프레임워크를 설치한다.
i 는 install 의 줄임말이다.
express 를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성된다.
▶ (선택) 서버 실행 도구 nodemon
npm i nodemon
node index.js .. 이런 식으로 서버를 실행하게 되면 서버에 수정사항이 있을 때마다
서버를 수동으로 재시작해주어야 한다는 불편함이 있다.
그래서! 서버를 새로 시작할 필요 없이 즉시 수정 사항이 반영되어 스스로 재시작하는 nodemon 이란 도구도 추가로 설치해주었다.
nodemon 의 장점을 정리하자면..
① 서버 구동 및 운용에 발생한 모든 과정을 로깅으로 보여준다.
② 에러 수정에 용이하다.
③ 일정 시간이 지나거나 주요 파일이 저장되면 서버가 다시 시작되므로 수정사항이 서버 수동 재시작 없이 적용된다.
nodemon 을 설치하고 package.json 에 들어가면
파란 네모 부분에 아까 설치한 express 와 nodemon 의존성이 추가되어 있는 것을 확인할 수 있다.
nodemon 으로 서버를 실행하기 위해 명령 하나를 추가해주자.
"start: nodemon app",
앞으로 node index.js.. node app.js.. 이렇게 파일 이름을 지정해서 서버를 실행하지 않고
npm start 명령으로 서버를 실행할 것이다.
요로코롬 말이다.
(참고로 다른 실습파일이라 내용이 들어가있는데, 아무것도 안 적힌 우리의 App.js 에 대고 npm start 를 입력해봤자 아무일도 일어나지 않는다.)
참고로 설치할 것이 있을 때 띄어쓰기로 구분해서 한 번에 작성해도 된다.
또한 설치 명령어로 install 을 쓰던 i 를 쓰던 상관없다.
2. 서버 구축
서버 구축에 필요한 기본적인 명령어는 다음과 같다.
const express = require('express');
const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res)=>{
res.send('<h1>Hello Express!</h1>');
});
app.listen(app.get('port'), ()=>{ console.log("3000 포트 서버 오픈!"); });
하나하나 살펴보자.
▶ express 모듈 require
/* express 모듈을 require 해서 express 변수에 저장 */
const express = require('express');
앞전에 설치한 express 모듈을 require 명령으로 가져와 변수에 담는다.
▶ express 애플리케이션 생성
/* require 된 함수를 호출하고 리턴되는 객체를 app 객체 변수에 저장 */
const app = express();
express 애플리케이션을 생성하기 위해 express() 함수를 호출한다.
express() 함수는 Express 애플리케이션의 인스턴스를 반환한다.
반환된 인스턴스를 app 이라는 변수에 담아주었다.
이제 app 객체를 이용하여 서버를 설정하고 요청, 응답을 처리할 수 있다.
▶ 서버가 사용할 포트 설정
/* 서버가 사용할 포트 설정 */
app.set('port', process.env.PORT || 3000);
// app.set(); : 서버 객체의 필드 변수를 추가해서 사용할 수 있음
// 추가된 변수는 현재 파일에서만 사용되고, 서버 종료 시 소멸됨
app.set(); 으로 서버 객체의 필드 변수를 추가해서 사용할 수 있다.
해당 명령으로 'port' 라는 이름으로 포트 번호를 설정해주었다.
process.env.PORT 는 서버내의 환경변수 PORT 값을 의미하며, 값이 없는 경우 3000 을 사용하도록 했다.
( process.env.PORT 는 클라우드 서비스나 서버 환경에서 특정 포트를 지정할 때 유용하게 사용된다고 한다. )
▶ HTTP GET 요청에 대한 router 설정
app.get('/', (req, res)=>{
res.send('<h1>Hello Express!</h1>');
});
지정한 경로로 get 요청을 보낼 때 실행될 콜백 함수를 의미한다.. 라고 하는데
쉽게 말해서 개발자가 데이터를 서버에서 처리하라고 요청 경로('/') 를 지정해주면, 그 요청 경로와 일치하는 곳을 찾아가 그곳의 함수를 실행시키는 것이다.
그리고 이런 app.get() 과 같은 길 찾아주는 함수를 router (라우터) 라고 부른다.
현재는 res(response) 에 <h1>Hello Express!</h1> 라는 요청을 보내도록 하고 있다.
이전에 SpringBoot 로 Controller 를 사용해본적이 있다면
방식만 달라졌지 사실 같은 기능을 하고 있음을 알 수 있다.
▷ res.send 유의사항
const server01 = http.createServer( ( request, response )=>{
// request : 요청을 받음, response : 응답을 보내는 객체 변수
// request 에 요청이 들어오면 response 로 응답해줌
response.write('<h1>** Hello Node Server 01 **</h1>');
response.end('<h2>Welcome to My Node Server 01!</h2>');
// response.write('<h1>** Hello Node Server 01 **</h1>');
// end 이후에는 X - Error [ERR_STREAM_WRITE_AFTER_END]: write after end
} );
express 프레임워크를 사용하지 않고 서버를 구축할 때, http 를 require 해서 진행한다.
이때 res.write, res.end 라는 명령을 사용하곤 했는데, res.end 은 응답을 종료하는 메소드다.
데이터를 보내는 등의 추가적인 명령이 작성되면 무시도 아닌 에러가 발생하기 때문이다.
그런데 express 를 사용하여 서버를 열고나서 사용하는 res.send 는 응답을 보내고 자동으로 연결을 종료한다.
즉, res.end 를 내부적으로 호출하기 때문에 마찬가지로 res.send 이후에 응답을 작성하거나 전송하려는 시도가 있어서는 안된다.
물론 console.log 와 같은 응답과 관련 없는 작업은 가능하다.
그렇기 때문에 데이터를 전송하고 따로 이동할 파일 등의 경로를 지정하고 싶다면
① 서버에서는 res.redirect() 를 사용하거나
② 요청(get, post 등..)을 보낸 자바스크립트 코드(클라이언트 코드)에서 location.href 를 사용해야 한다.
무슨 말인지 모르겠다면.. 일단 res.send 뒤에는 응답과 관련된 명령이 오면 안 된다는 것만 기억하자.
▶ 서버 시작
/* app.listen(port, callback) */
app.listen(app.get('port'), ()=>{ console.log("3000 포트 서버 오픈!"); });
지정된 포트(app.get('port')) 서버를 시작하는 명령이다.
익명 함수 속 내용은 서버가 시작되면서 나타나는 메시지로 큰 의미는 없다.
가장 중요한 건 port 값을 지정해 시작해주어야 한다는 것.
app.listen(app.get('port'), ()=>{});
앞서 app.set() 을 통해 'port' 라는 이름으로 포트 번호를 설정해주었다.
이곳에서 하드 코딩으로 3000 을 직접 적지 않고 app.get('port') 로 가져와 3000 포트에서 서버를 실행한다.
node app.js
npm start // nodemon 이용
