반응형
본 글은 생활코딩의 Node.js 강의를 보고 정리한 것입니다.
장고(Django) 이후 새로운 웹 프레임워크를 접하는 것은 처음입니다. 프레임워크도 새롭지만 프로그래밍 언어도 익숙하지 않은 자바스크립트라 기초부터 차근차근 배워보려고 합니다.
기본적인 웹 서버를 구축하기 위해 필요한 코드는 아래와 같습니다. 저도 한줄한줄 모두 이해하지 못하고 일단 흐름대로 살펴보고 있습니다.
var http = require('http');
var fs = require('fs');
var url = require('url'); // 'url'이라는 모듈을 사용하겠다는 것을 node.js에게 알려줌
var app = http.createServer(function(request, response) {
var _url = request.url;
var myURL = new URL('http://localhost:3000' + _url); // URL 객체 생성
var queryData = myURL.searchParams.get('id'); // .searchParams로 URLSearchParams 객체 불러옴 -> get 메서드로 key 'id' 값 호출
console.log(queryData);
if(_url == '/') {
url = '/index.html';
}
if(_url == '/favicon.ico') {
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
response.end(queryData);require(): 필요한 Node.js 모듈을 요청
http.createServer(): 서버를 생성하는 'http'라는 모듈의 메서드
function(request, response): 서버에 데이터를 전달하는 request와 응답을 출력하는 response
생활코딩 사이트에 많은 사람들이 글을 남겨주셨듯이 생활코딩 코드를 그대로 사용하기엔 deprecate 라는 경고 문구가 종종 보입니다. 아무래도 3~4년 전 강의다보니 어쩔 수 없는 듯 합니다.
생활코딩의 코드와 달라지는 코드는 아래와 같습니다. parse 라는 메서드가 deprecate 된다고 합니다.
var myURL = new URL('http://localhost:3000' + _url); // url.parse(_url, true).query;
var queryData = myURL.searchParams.get('id'); // queryData.id
response.end(queryData) // queryData.id동적인 웹 페이지를 만들기 위해선 Template literals 인 ${} 형식을 사용하면 됩니다.
var http = require('http');
var fs = require('fs');
var url = require('url');
var app = http.createServer(function(request, response) {
var _url = request.url;
var myURL = new URL('http://localhost:3000' + _url);
var queryData = myURL.searchParams.get('id');
console.log(queryData);
if(_url == '/') {
url = '/index.html';
}
if(_url == '/favicon.ico') {
response.writeHead(404);
response.end();
return;
}
response.writeHead(200);
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${queryData}</title> // Template literals
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ol>
<h2>${queryData}</h2> // Template literals
<p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img src="coding.jpg" width="100%">
</p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
</p>
</body>
</html>
`;
response.end(template);
})
app.listen(3000);response.writeHead(): 헤더 정보 전달(상태코드, 메시지 등)
response.end(): 데이터 정보를 읽고 브라우저에 전송
write함과 동시에 response를 종료
response 메서드에 대해 더 자세히 알고 싶다면 Node.js의 공식 문서를 참고해주세요.
728x90
반응형
'문돌이 존버 > Node.js 스터디' 카테고리의 다른 글
| AWS EC2 우분투에 Node.js 설치하기 (0) | 2021.07.15 |
|---|---|
| (Node.js) 자바스크립트 반복문 및 Array 특성 feat. 생활코딩 (0) | 2021.07.15 |
| Node.js 홈페이지 구현해보기 feat. 생활코딩 (0) | 2021.07.15 |
| Node.js 콘솔 입력값(input) 및 Not found 오류 구현 feat. 생활코딩 (0) | 2021.07.13 |
| Node.js 파일 읽기 기능 feat. 생활코딩 (0) | 2021.07.13 |
