서버 생성하기
서버를 생성하기 위해선 가장 처음으로 nodejs에 탑재된 모듈을 import해와야 한다.
기존에 프런트에서 쓰던 import가 아닌, 여기서는 require을 사용한다.
require 메서드는 외부 모듈을 가지고 올 수 있는 메서드이다.
node.js는 전역으로 노출하는 특성이 있어 node.js로 실행하는 모든 파일에서 기본적으로 require 메서드를 사용할 수 있다.require은 다른 파일로의 경로나 JS 파일을 불러올 수 있다.
대신 항상 파일 경로는
상대경로: ./
절대경로: /
로만 시작해야 한다.경로를 생략하면 글로벌 모듈을 찾게 되는데 이 모듈들은 nodejs에 탑재된 모듈들이다.
// nodejs에 탑재된 모듈 불러오기
const http = require('http');이런 식으로 nodejs의 글로벌 모듈인 http를 불러온 뒤에 서버를 생성한다.
// createServer의 첫번째 인수: 요청에 대한 데이터, 두번째 인수: 응답에 대한 데이터
http.createServer();이런 식으로 서버를 생성하게 되는데, 두 가지 parameter가 필요하다
첫 번째는 request, 두 번째는 response에 대한 각각의 요청/응답 객체이다.
// nodejs에 탑재된 모듈 불러오기
const http = require('http');
function rqListener(req,res){
}
// createServer의 첫번째 인수: 요청에 대한 데이터, 두번째 인수: 응답에 대한 데이터
// createServer에 rqListener라는 함수로 모든 요청에 따라 응답할 수 있도록 설정
http.createServer(rqListener);그래서 이런 식으로 해당 함수를 통해 모든 요청에 대해 처리할 수도 있고
// createServer 콜백 함수의 사용
http.createServer((req,res) => {
console.log(req);
});
이렇게 콜백 함수를 사용하는 방식으로도 만들 수 있다.
하지만 이렇게 해서 그냥 실행만 할 수 없다.
어떤 주소를 통해서 서버에 도달하는지도 잘 모르기 때문이다.
여기서 우리는 createServer 메서드가 생성한 서버를 새로운 변수나 상수로 저장해야 한다.
해당 서버를 저장한 뒤 서버를 호출할 수 있도록 만들고, 요청에 대해서 들을 수 있도록 만들어야 한다.
// nodejs에 탑재된 모듈 불러오기
const http = require("http");
// createServer의 첫번째 인수: 요청에 대한 데이터, 두번째 인수: 응답에 대한 데이터
// createServer 콜백 함수의 사용
const server = http.createServer((req, res) => {
console.log(req);
});
//listen의 경우 nodejs가 스크립트를 바로 종료하지 않고 계속 실행하면서 들을 수 있도록 만듦
//로컬 환경에서 서버 가동 포트번호 3000 설정
server.listen(3000);이렇게 서버가 요청에 대해서 들을 수 있게 만들고, node app_name.js 을 통해 실행시킨 뒤에는 실제로 요청이 가능하다.
하지만 이런 식으로만 나오지, 실제로 작동을 하는지 우리는 모른다.
이때 서버를 3000포트에서 열었기 때문에 브라우저로 들어가서 localhost:3000을 입력하게 되면
사실 화면에는 뭐 안뜬다.
하지만 해당 사이트에 들어감으로써 서버에 요청을 보내게 되었고, 이 요청은 내 터미널을 다시 보면 console.log를 통해 출력되어 있다.
이런 식으로 엄청 길에 IncomingMessage가 출력되어 있는 것을 볼 수 있다.
아직 응답도 처리하지 않았지만 그 전에 이 과정을 다시 보고 내가 보낸 요청 내용을 좀 더 자세히 보자
Node.js Program Lifecycle
Node.js 파일의 실행(node app.js)
-> 스크립트가 시작되어 node.js가 파일 전체를 살펴보고 코드 분석 후 변수와 함수 등록(전체 코드를 읽고 실행)
-> Event Loop작동(들어온 요청 리스너를 따로 제거하지 않았기 때문에 계속해서 작동. 서버가 운영되기 위해서는 제거하면 안 된다)
-> process.exit()을 통해 event loop를 제거
Event Loop
node.js가 관리하는 이벤트 루프는 작업이 남아있는 한 계속해서 작동하는 루프 프로세스로 이벤트 리스너가 있는 한 계속 작동한다
코어 노드 애플리케이션은 이 이벤트 루프에 의해 관리된다.
로그의 요청
Header
Header는 여러가지 메타 데이터를 담고 있다.
보면 요청에 사용되는 브라우저, OS, 연결 상태 등등이 담겨져 있다.
MetaData
데이터에 대한 데이터. 다른 데이터를 설명해 주는 데이터이다.
대량의 정보 가운데서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따라 컨텐츠에 대하여 부여되는 데이터이다.
const server = http.createServer((req, res) => {
console.log(req.url, req.method, req.headers);
});조금 더 자세히 보기 위해 따로 떼서 보면
요런 식으로 접근하여 데이터를 읽는다
서버 응답
const server = http.createServer((req, res) => {
console.log(req.url, req.method, req.headers);
// 새로운 헤더 설정하기
res.setHeader('Content-Type','text/html')
});서버 응답의 경우 다시 돌려주는 데이터를 우리가 정할 수 있다
setHeader는 새로운 헤더를 설정하여 우리가 요청시 지정한 헤더로 다시 보낼 수 있다.
응답에서 우리가 필요한 것은 html 코드이다.
res.write('<html>');
res.write('<head><title>Test</title></head>');
res.write('<body><h1>Hello World</h1></body>');
res.write('</html>');
// res.end()이후로는 입력하면 안된다
res.end();이렇게 html코드를 작성해서 응답을 보내주면 화면이 뜨는 것을 볼 수 있다.
이게 서버에서 html을 보내주는 방식이며, 서버 사이드 렌더링도 이런 방식으로 서버에서 직접 html을 보내주어 SEO가 용이하게끔 만든다.
리액트같은 CSR은 이렇게 보내주는 것이 아니고 클라이언트 자체에서 렌더링하기 때문에 검사에서도 제대로 뜨지 않는데 비해 서버에서 보내준 html은 정상적으로 모두 볼 수 있음을 알 수 있다. 따라서 구글 검색 크롤러 등이 잘 볼 수 있기에 SEO에 용이하다는 것이다.
검사에서도 우리가 요청한 것에 대한 상태 코드 등과 응답 헤더, 기본 요청 헤더 등을 잘 볼 수 있다.
HTTP 헤더에 대한 추가 글
