현재 부트캠프에서 Node.js에 대해서 배우고 있는데, 개인적으로 정리하고 싶은 부분이 있어 참고 자료에 있는 설명을 바탕으로 작성하게 되었다.
프로젝트 생성
mkdir "디렉토리 이름"
cd "만든 디렉토리 이름"위 명령어를 입력해서 프로젝트를 생성한 후, 해당 프로젝트 디렉토리로 이동하여 프로젝트 루트 폴더에서 아래 명령어를 실행한다.
npm init -y
npm i express ejsnpm init -y: npm을 쓸 수 있는 초기 환경을 설정한다. npm_modules 폴더가 만들어지며 express에 관련된 폴더가 생성되고, package.json의 dependencies에 express가 기록된다.
npm i(or install) "패키지명": 원하는 패키지를 설치한다.
코드
const express = require("express");
const app = express();
const PORT = 8000;
// view engine
app.set("view engine", "ejs");
app.set("views", "./views"));
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use("/static", express.static(__dirname + "/static"));
const indexRouter = require("./routes");
app.use("/", indexRouter);
app.get("/", (req, res) => {
res.render("index");
});
app.get("*", (req, res) => {
res.render("404");
});
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});const express = require("express");require: node.js에서 다른 패키지를 불러올 때 사용되는 키워드
위 명령어와 같이 특정 path가 지정되지 않았다면, 기본적으로 node_modules 폴더 또는 NODEPATH 환경 변수에 설정한 위치에서 express라는 모듈을 찾게 된다고 한다.
여기서, const express = require("express");는 node_modules에서 express라는 모듈을 활용한다는 뜻으로 이해하면 된다.
const app = express();app이라는 변수에 express 함수의 반환 값을 저장한다. app이라는 변수를 통해 REST End Point들을 생성한다.
express(): express 모듈이 export하는 최상위 함수로, express application을 만든다.
app 객체: express() 함수를 호출함으로써 만들어진 express application이다.
여기서, End Point란 같은 URL들에 대해서도 다른 요청을 하게끔 구별하게 해주는 항목이다. 각각 GET, PUT, DELETE 메소드에 따라 다른 요청을 하도록 한다. 즉, API가 서버에서 자원(resource)에 접근할 수 있도록 하는 URL이다.
app.set("view engine", "ejs");view engine을 ejs로 설정한다.
여기서, view engine은 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용되는 것이다. ejs는 Embedded Javascript의 약자로, Javascript가 내장되어 있는 html 파일이다.
app.set("views", "./views");대부분 view 파일을 생성할 때 views 폴더 안에 만든다.
위 코드를 통해, 명시적으로 폴더 위치를 선언해줌으로써 그 안의 파일을 불러올 때 굳이 ./views를 적어주지 않아도 되게 해준다.
app.use(express.urlencoded({extended: true}));위 코드를 통해, express.urlencoded() 미들웨어를 사용하도록 하여, x-www-form-urlencoded 형태의 데이터를 해석한다.
urlencoded()에 아무 옵션을 주지 않는다면, body-parser undefined extended: provide extended option이라는 문구가 뜰 것이다.
- extended: false
Node.js에 기본으로 내장된 querystring 모듈을 사용한다.
- extended: true
추가로 설치가 필요한 qs 모듈을 사용한다. 참고로 qs 모듈은 현재 express에 포함되어 자동으로 설치된다.
app.use(express.json());위 코드를 통해, express.json() 미들웨어를 사용하도록 하여, json 형태의 데이터를 해석한다.
app.use("/static", express.static(__dirname + "/static"));express에 있는 static 메소드를 이용하여 미들웨어로 이미지, css 파일 및 Javascript 파일(front)과 같은 정적 파일을 로드하는 코드이다.
const indexRouter = require("./routes");
app.use("/", indexRouter);localhost:PORT/ 경로를 기본으로 ./routes/index.js 파일에서 선언한대로 동작한다.
app.get("/", (req, res) => {
res.render("index");
});REST API의 한 가지 종류인 GET 리퀘스트를 정의하는 부분이다.
app.get으로 작성할 경우 get 요청으로 정의되고, app.post로 작성할 경우 post 요청으로 정의된다.
REST API의 종류(get, post, update, delete 등)를 사용하여 End Point를 작성할 수 있다.
위와 같이, End Point 생성 시 파라미터는 두 가지를 받는다. 첫번째 파라미터는 URL 정의("/"), 두번째 파라미터는 해당 URL에서 수행할 작업 및 응답을 정의할 수 있다. 두번째 파라미터 함수에는 두 개의 파라미터를 받는데 요청에 해당하는 req(request)와 응답에 해당하는 res(response)이다. 요청에 대한 정보는 req에 저장되어 있고, 응답할 때 res 파라미터는 사용하여 응답 정보를 송신한다.
app.listen(PORT, () => {
console.log(`http://localhost:${PORT}`);
});서버를 오픈하는 코드이다. express 서버를 실행할 때 필요한 포트 정의 및 실행 시 callback 함수를 받는다.
첫번째 파라미터는 port 8000번을 적용하여 express를 8000번 포트에 실행하라고 지정했고, 두번째 파라미터인 callback 함수에서 express 서버 구축 성공 시 http://localhost:${PORT}라는 로그를 실행하도록 했다.
참고 자료
[nodeJS express로 서버 구성하기] [#1] express 기본기
[NODE 강의] View Engine / 미들웨어란?