📗Nodejs : plus Alpha

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

📗Nodejs : plus Alpha - 분석하기 본문

📗Nodejs/⚡ver.0

📗Nodejs : plus Alpha - 분석하기

4:Bee 2024. 6. 17. 23:50

728x90

이번 시간에는 지난 포스팅에서 말했던 코드를 분석하는 시간을 가져 볼 것이다. 우리가 분석할 코드는 아래와 같다. section26부분을 중심으로 둘러 보려고 했으나 함수를 분리하기 전 section24에 있는 main.js 코드를 중심으로 분석 할 예정이다. 분석 대상이 될 코드는 아래 더보기를 참조 하면 되겠다.

var http = require('http');

var fs = require('fs');

var url = require('url');

var app = http.createServer(function (request, response) {

var _url = request.url;

var queryData = url.parse(_url, true).query;

var pathname = url.parse(_url, true).pathname;

if (pathname === '/') {

if (queryData.id === undefined) {

fs.readdir('./data', function (error, filelist) {

var title = 'Welcome';

var description = 'Hello, Node.js';

var list = '<ul>';

var i = 0;

while (i < filelist.length) {

list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;

i = i + 1;

}

list = list + '</ul>';

var template = `

<!doctype html>

<html>

<head>

<title>WEB1 - ${title}</title>

</head>

<body>

${list}

<h2>${title}</h2>

<p>${description}</p>

</body>

</html>

response.writeHead(200);

response.end(template);

})

}

} else {

response.writeHead(404);

response.end('Not found');

}

});

app.listen(3000);

URL

모듈 가져오기

var http = require('http');
var fs = require('fs');
var url = require('url');

http 모듈은 HTTP 서버와 클라이언트 기능을 제공한다.
fs 모듈은 파일 시스템에 접근하는 기능을 제공한다.
url 모듈은 URL을 해석하고 조작하는 기능을 제공한다.

서버 생성

var app = http.createServer(function (request, response) { ... }

http.createServer 함수는 서버 객체를 생성한다. 이 함수는 요청을 받을 때마다 실행될 콜백 함수를 인자로 받습니다. 여기서 request는 요청 정보를, response는 응답을 다루는 객체이다.

요청 URL 분석

//var app = http.createServer(function (request, response) { ~
// ~ function (request, response){ ~

var _url = request.url;
var queryData = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
if (pathname === '/') {...}

request.url을 통해 요청받은 URL을 가져온다.
url.parse() 함수를 이용하여 URL을 파싱하고 이때 true 옵션을 주면 쿼리 스트링을 객체로 변환한다. query는 URL의 쿼리 스트링 부분, pathname은 URL의 경로 부분을 나타낸다.
- 여기서 request는 클라이언트(사용자,브라우저)로 부터 받는 요청(request)을 의미한다.

pathname '/'

//function (request, response){ ~

if (pathname === '/') {...}

요청받은 경로가 루트('/')인 경우의 로직을 처리한다.

쿼리 데이터에 'id' 필드가 없는 경우

// if (pathname === '/') { ~

if (queryData.id === undefined) {...}

지금까지의 url은 'localhost:3000/(pathName:'/')(quesryString:undfiend)'인 상태를 의미한다. 즉, URL이 'localhost:3000/'인 것이다.

data 디렉토리 읽기

(서버 개발 할때 꼭 사용되는 부분은 아니다.)

// if (queryData.id === undefined) { ~

fs.readdir('./data', function (error, filelist) {

fs.readdir() 함수를 사용하여 ./data 디렉터리의 파일 리스트를 비동기적으로 읽는다. 읽기 완료 후 콜백 함수가 실행된다.

HTML 목록 생성

// fs.readdir('./data', function (error, filelist) { ~

var title = 'Welcome';
var description = 'Hello, Node.js';
var list = '<ul>';
// ./data 디렉토리에 있던 파일 리스트를 while문으로 읽어 낸다.
var i = 0;
while (i < filelist.length) {
  list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
  i = i + 1;
}

list = list + '</ul>';
var template = `~`

기본 제목과 설명을 설정한다.
<ul> 태그로 시작하는 목록을 초기화하고 디렉터리의 각 파일에 대해 <li> 태그와 링크를 추가하여 목록을 구성한다.

HTML 템플릿 생성 및 응답

// fs.readdir('./data', function (error, filelist) { ~

var template = `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    <h2>${title}</h2>
    <p>${description}</p>
  </body>
  </html>
  `;

response.writeHead(200);
response.end(template);

HTML 템플릿을 문자열로 생성합니다.
response.writeHead(200)으로 HTTP 상태 코드 200(성공)을 응답 헤더에 설정합니다.
response.end(template)으로 생성된 HTML 템플릿을 응답 본문으로 전송합니다.

404 오류 처리

// if (pathname === '/') { ~

} else {
  response.writeHead(404);
  response.end('Not found');
}

경로가 루트(/) 이외의 다른 경로로 요청되었을 경우 실행된다.
response.writeHead(404)를 사용하여 응답 헤더에 HTTP 상태 코드 404를 설정한다. 이 상태 코드는 요청된 리소스를 찾을 수 없을 때 사용된다.
response.end('Not found')로 응답 본문에 "Not found"라는 메시지를 보내며 응답을 마친다.

서버 리스닝

// var app = http.createServer(function (request, response) { ~

});
app.listen(3000);

위에서 생성한 서버(app)는 listen 메소드를 사용하여 포트 3000에서 네트워크 요청을 수신하기 시작한다. 이는 서버가 3000번 포트를 열고 해당 포트로 들어오는 요청을 기다린다는 의미이다.
포트 3000은 일반적으로 개발 환경에서 사용하는 포트 중 하나로 실제 운영 환경에서는 다른 포트 번호를 사용할 수도 있다.