Node.js
Node.js를 사용하여 서버를 구축할 수 있다. Node.js를 사용하여 웹 서버를 구축하기 위해선 createServer를 통해 웹 서버를 구축할 필요가 있다.
클라이언트의 요청을 처리하기 위해선 listen 메소드를 통해 포트를 전달해야 한다. 간략한 기본 틀은 다음과 같다.
const http = require('http');
const PORT = 3000;
const ip = 'localhost';
const server = http.createServer((request, response) => {
server.listen(PORT, ip, () => {
console.log(`http server listen on ${ip}:${PORT}`);
});Node.js의 공식문서를 한 번 살펴보길 권한다. Node.js의 공식문서를 통해 서버를 구축하다 보면 요청의 body 데이터를 처리하는데 많은 과정이 소요된다.
또한, 메소드와 url, 헤더 등을 처리하는 구문을 처리하는데 코드가 길어진다.
아래는 공식문서의 코드이다. REQUEST 객체에 data, end 등의 이벤트 리스너를 통해 처리하고 있다.
request.on('error', (err) => {
console.error(err);
}).on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();request를 통해 전달받는 데이터를 처리하기 위해선 chunk 형태로 온 데이터를 버퍼에 담아 처리하는 과정이 필요하다.
문자열을 대문자 또는 소문자로 조작하기 위한 요청의 예시이다. 메소드와 url을 구분시켜 처리해야 한다.
더 잘 처리할 수 있었겠지만 가독성이 떨어진다.
express.js
express를 통해서 서버를 구축하면 저 구문이 훨씬 가독성이 높아진다. 이는 미들웨어를 사용하는 express.js의 큰 장점이다.
express.js의 공식문서를 통해 기본적인 구문을 적어보았다. Node.js 기반이기 때문에 큰 틀에서 다르지 않다.
listen 메소드 역시 사용된 것을 볼 수 있다.
const express = require('express')
const cors = require('cors')
const jsonParser = express.json({strict: false});
const app = express()
const port = 4999
const ip = 'localhost';
app.use(cors());
app.listen(port, ip, () => {
console.log(`http server listen on ${ip}:${port}`);
})한 가지 다른 점은 cors와 jsonPareser 이다. 저 코드가 바로 미들웨어를 사용하기 위한 선언이다.
express에서 사용되는 기본적인 라우팅의 예시이다. 메소드, 경로, 미들웨어 콜백함수를 볼 수 있다.
사진의 미들웨어 함수가 들어갈 자리에 jsonParser가 있다. 말 그대로 json을 파싱해주는 Parser 역할을 한다.
저 미들웨어를 통해 Node.js에서 별도로 겪어주던 과정을 할 필요가 없다. cors는 말 그대로 cors 인증을 진행해준다.
express를 사용하여 서버를 구축하면 가독성이나 유지보수 측면에서 얻는 장점이 크다.
express.Router 클래스를 사용하면 복잡한 구조의 라우팅도 직관적으로 할 수 있다.
12시부터 반시계 방향으로 전개된다.
App.js에 app.use를 통해서 라우팅을 진행핬다. app.use는 지정된 경로에 미들웨어 함수를 지정하여 실행시킨다.
각 라우터에는 라우터 객체를 통해 각 라우터 경로별로 모듈 핸들러를 실행시킬 수 있도록 지정되어있다.
6시 사진의 router.메소드(경로, 모듈) 의 예시가 그것이다.
마무리
대략 한 주간 클라이언트와 서버간의 http 네트워크 통신을 학습했다. Node.js와 express.js를 통해 서버를 직접 구축하면서 Fetch API 후의 서버 처리에 대해서 어떤 원리로 이루어지는지 더 자세히 학습하게 됐다.
프론트엔드와 백엔드 간의 협업을 위해선 네트워크 서버 통신에 대한 이해가 많이 필요할 것 같다.
일전에 구현한 아고라 스테이츠 리액트로 리팩토링하고 있다. 서버 통신에 대한 이해가 더 깊어졌기 때문에 더미데이터가 아닌 구축된 로컬 서버에 연결했을 때 기능 구현을 할 수 있겠다는 자신감이 생긴다.
