백엔드 과정인 node.js 수업을 시작하였다. 확실히 프론트엔드 수업과 달리 바로바로 눈에 보이는 결과물이 없어서 더 어렵게 느껴지고 감이 잘 안왔다. 모듈을 배웠는데 모듈이란 무엇인지와 많은 모듈 중 내장모듈인 http모듈에 대해 알아보자.
node.js란?
서버 측 자바스크립트 런타임환경으로 브라우저 밖에서 자바스크립트를 사용할 수 있다. 여기서 런타임이란 프로그래밍 언어가 구동되는 환경이다. 즉, node.js = javascript 런타임 = javascript로 만든 프로그램을 실행할 수 있는 프로그램!
원래 자바스크립트의 런타임 환경은 웹 브라우저만 존재하였는데 서버언어로 사용하기 위해 나온 것이 node.js이다. 따라서 자바스크립트 코드를 웹 브라우저없이 실행 가능하다는것!
➕ npm: 노드 패키지를 관리해주는 틀로 오픈 소스 라이브러리
(마트같은 역할, 우리가 주문하면 배달해준다고 생각)
node.js의 소개는 여기서 간단히 마치고, 모듈에 대해서도 간단히 말하자면 재사용 가능한 코드의 조각으로 특정한 기능을 하는 함수나 변수들의 집합이다.
http 모듈
웹 서버를 구동하기 위한 node.js 내장 웹모듈이다. server 객체, request 객체, response 객체를 사용한다.
- server 객체 : 웹 서버를 생성할 때 사용하는 객체 ex) listen()
- request 객체 : 응답 메시지를 작성할 때 첫 번째 매개변수로 전달되는 객체
- response 객체 : 응답 메시지를 작성할 때 두 번째 매개변수로 전달되는 객체
실습
const http = require('http');
const url = require('url');
const fs = require('fs');
http.createServer(function(req, res) {
let q = url.parse(req.url, true)
let filename = "." + q.pathname;
fs.readFile(filename, function(err, data) {
if(err) {
res.writeHead(404, {'Content-Type' : 'text/html'});
return res.end('404 Not found')
} else {
res.writeHead(200, {'Content-Type' : 'text/html'})
res.write(data)
return res.end();
}
})
}).listen(8000, () => {
console.log('8000 서버 실행');
})const http = require('http');
const url = require('url');
const fs = require('fs');http, url, fs는 내장 모듈로 모듈을 불러와서 사용하면 된다.
- http 모듈: HTTP 서버를 생성하고 관리
- url 모듈: URL을 파싱 즉, url 형식으로 구성된 데이터를 분석하고 그 의미를 알아감.
- fs 모듈: 파일 시스템에 접근
require(' ')를 통하여 해당 모듈을 불러와 변수에 저장한다.
http.createServer().listen(8000, () => {
console.log('8000포트에서 서버 실행')
})http모듈이 가지고 있는 기능 중 createServer함수를 호출하여 서버를 생성하고 listen()는 어떤 포트에 열게될 것인지와, 포트 연결이 완료된 후 실행할 콜백함수를 작성한다. 우리(사람)이 확인하기 위해 console.log('8000포트에서 서버 실행')를 찍어준다. 즉 listen함수는 신호가 들어왔다는 것을 감지하는 역할이다.
이제 creatServer함수에 req(호출), res(응답) 변수를 이용하여 서버를 실행했을때 어떤걸 보낼건지 작성해줘야한다. 이 함수는 콜백함수로 클라이언트로부터 요청이 들어올 때마다 호출된다.
http.createServer(function(req, res) {
let q = url.parse(req.url, true)
let filename = "." + q.pathname;
})요청(req)한 url을 파싱(parse)한것을 q라는 변수에 넣는다. 그 파싱한 url을 넣은 q의 요청한 파일의 경로(pathname)를 filename 변수에 저장한다. ( . 은 현재 디렉토리를 의미)
fs.readFile(filename, function(err, data) {
if(err) {
res.writeHead(404, {'Content-Type' : 'text/html'});
return res.end('404 Not found')
} else {
res.writeHead(200, {'Content-Type' : 'text/html'})
res.write(data)
return res.end();
}
})fs.readFile 함수를 사용하여 요청된 파일을 읽는다.(fs.readFile(파일명(파일경로), 콜백함수)) 여기에서 콜백함수는 읽은 파일의 내용 또는 오류를 인수로 받는다.
(콜백함수를 써서 에러가 발생했을때 알려줘야 나중에 긴코드를 작성할때에 유용할것이다!)
- res.writeHead(): 응답에 대한 header를 작성하는 부분으로 첫번째 매개변수는 응답코드이며, 두번째 매개변수로는 헤더에 들어갈 내용을 작성.
여기에서 Content-Type은 response body의 MIME을 특정. 즉 위 코드는 html의 형태인것! - res.write() : 응답의 body를 작성하는 부분.
- res.end() : 응답을 종료한다. 만약 매개변수가 있다면, 해당 내용까지 body에 작성하고 응답을 종료하고 없으면, 그냥 응답을 종료.
if문을 해석하자면, 파일을 읽는 도중 오류가 발생하면, HTTP 상태 코드 404(찾을 수 없음)을 반환하고 '404 Not found'를 출력한다.
파일을 성공적으로 읽었다면, HTTP 상태 코드 200(성공)을 반환하고, 파일의 내용(data)을 클라이언트에게 전송한다.
마무리하며...
지금까지 해왔던 코드와는 전혀 다른 느낌의 분위기를 내는 코드를 접해서 그런지 두려운감이 있었다. 하지만 찬찬히 코드 한줄 한줄 해석하고 블로그를 적다보니 이해가 되었다. 앞으로 배워나갈 내용이 많지만 지금의 마음을 잊지말고 이겨내자!
출처
[새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
