Lecture | Node.js

SURI·2021년 9월 7일

🚶‍♂️ 들어가며

Node.js의 등장

웹이 등장하면서 정보를 웹페이지로 표현할 수 있게 되었고, 인터넷을 통해서 웹페이지를 전송할 수 있게 되었다. 종이에 있던 수많은 정보들이 웹페이지로 만들어지기 시작한다.

html을 타이핑해서 수동으로 웹페이지를 만들고 수정하는 것에 피곤함을 느끼다. 방문자가 글을 올리고 싶은 경우, 웹페이지를 수정하는 것도 불가능했다. 성장에 한계를 느끼다.

html 작성 작업을 기계에 시킬 수 있다면?

JavaScript에 익숙한 웹개발자들이 새로운 언어를 배우지 않고도 웹페이지를 자동으로 생성할 수 있는 서버쪽 애플리케이션(Server Side Application)을 만들고 싶었다. 이 때 Node.js가 출현한다.

JavaScript는 웹브라우저에서 사용할 수 있는 독점적인 프로그래밍 언어이면서, 웹브라우저에 갇혀 있는 편파적인 언어였다. 하지만 2008년, 구글이 크롬 웹브라우저에서 작동하는 JS 성능을 개선하기 위해 v8엔진을 개발하고 오픈 소스로 공개했다. 이를 기반으로 Node.js가 만들어진다.

Node.js는 자바스크립트를 이용해서 웹브라우저가 아닌 컴퓨터 자체를 제어한다. 파이선, 자바, 루비, php처럼.
Javascript를 이용해서 웹페이지를 자동으로 생성하는 Web application을 만들고 싶어졌다. 웹브라우저에 갇혀 있던 Javascript는 빠르게 웹브라우저 밖으로 팽창하기 시작한다.
쉽고 편파적이라는 이유로 천대받던 언어가 핫한 언어가 되다.

웹 애플리케이션에 공장장이 되고, html 코딩같은 지루하고 단순한 일은 웹애플리케이션에게 맡기고 콘텐츠를 생산하는 창의적인 일에 전념해보다.

⚡ html로 만든 정적인 웹페이지, css등장으로 디자인이 가미된 웹페이지, javascript로 사용자와 상호작용할 수 있는 동적인 웹페이지, 더 나아가서 node.js로 웹페이지를 자동 생성하는 web application? 웹은 나와 같은 해에 태어났는데, 정말 다양한 패러다임을 거쳐왔구나 싶다.

수업의 목적

생산성의 한계에 직면하다. 가령, 우리는 index와 목록을 포함해 4개의 웹페이지를 가지고 있다. 하지만 우리가 페이지를 1억개 갖고 있다고 상상해보자. 그리고 웹사이트의 목록 방식을 ol에서 ul로 바꿔야 한다면? 일일이 1억개의 페이지를 작업하려면 너무 힘들 것이다.

수업이 끝나고 우리가 작성하게 될 최종적인 node.js 코드를 확인해보았다. 아직은 무슨 이야기인지 하나도 모르겠다. 하지만, node.js를 사용하면 우리는 파일 하나만 바꾸면 되었다. node.js를 이용하면 1억개의 페이지를 모두 만드는 것이 아니라, 순간 순간의 웹페이지를 프로그램적으로 생산해 내기 때문에 가능하다.

그리고 node.js 이전에는 사용자의 참여가 제한적이었지만(개발자가 일일이 html 문서를 수정해야 했다), node.js를 통해서 사용자가 콘텐츠의 읽기 뿐만 아니라 쓰기, 수정, 삭제를 웹을 통해 할 수 있게 되었다. 이 부분은 무척 신기했다!

php, jsp, 장고, 루비온레일즈는 node.js와 경쟁관계에 있는 다른 기술들이라고 할 수 있다.

공부방법

우리는 결론적으로 node.js로 web application을 만들 것이다. 각각의 스텝마다 node.js가 가지고 있는 기능을 실행시켜야 한다. 조작장치는 javascript 컴퓨터 언어다.

따라서, 필요한 javascript의 문법을 배우고, javascript의 문법을 통해서 node.js가 가지고 있는 기능을 배울 것이다. 그 기능을 이용해서 application을 완성해 나갈 것이다. 이 순환의 반복이 될 것이다.

👩‍🏫

1. Node.js runtime 설치

👆 javascript라는 프로그래밍 언어를 통해 node.js application을 만들게 될 것이다.

설치

nodejs 웹사이트에 들어가서 프로그램을 다운로드 받는다.
cmd창을 통해 버전을 확인하고, node를 입력한다.
console.log(1+1)를 쳐본다. console.log는 가로 안에 있는 걸 계산해서 보여달라는 뜻이다. 자바스크립트 문법이다.
나갈 때는 ^c를 두번 누르거나 .exit을 누르면 나가게 된다.

⚡ cmd로 명령어 치는 거 너무 너무 신기하고 재밌다!!!!

실행

바탕화면에 프로젝트 폴더(nodejs)를 하나 만들고, 파일(helloworld.js)도 하나 만든다.
파일 안에 console.log(1+1) 코드를 넣고 저장한다.
cmd 창을 열고 프로젝트 폴더로 디렉토리를 변경한다. dir을 눌러서 변경이 잘 되었는지 확인한다.
node helloworld.js 라는 명령어를 쳤을 때, 2라는 숫자를 실행한다면 정상 작동한 것이라고 볼 수 있다.

1. Node.js로 웹서버 만들기

node.js는 우리가 web1 수업에서 배운 웹서버 아파치처럼 웹서버의 기능을 내장하고 있다. 이런 특성으로 아파치 웹서버는 할 수 없는 일을 할 수 있다. 그걸 하기 위한 코드를 살펴보자.

생활코딩 사이트에서 코드를 복사해서 가져오고 main.js라는 파일에 저장했다.
cmd 창을 열어서 node main.js 명령어를 입력한다.
그리고 웹브라우저에 localhost:3000을 치면 웹사이트가 나오면 node.js가 웹서버로서 구동되고 있는 것이다. ^c로 끄고 접속을 하면 접속이 되지 되지 않는다.
console.log(__dirname + url) 코드를 파일에 추가하고 cmd창으로 node.js를 다시 실행시키고 웹사이트를 다시 열어본다.
내가 웹사이트에서 클릭을 할 때마다, 경로를 실행창에 적어서 보여주는 걸 알 수 있었다.

완전히 이해는 되지 않지만 결론적으로, 사용자가 요청하고 접근할 때마다 경로에 해당하는 파일을 읽어서 가져오는 것이다. node.js는 어떤 코드를 넣느냐에 따라 사용자에게 전송하는 데이터가 바뀐다는 것이다. 이것이 아파치와 같은 웹서버는 할 수 없는 일이다.

⚡ public ip address를 통해서 이 웹사이트에 들어올 수 있게 해볼까? 코드에 적힌 대로 3000번 포트를 리스닝하게 port-forwarding을 해주면 똑같이 될 것 같은데. 정상적으로 작동되는 걸 알 수 있었다.

2. Javascript 문법 ⓐ

datatype

어떠한 데이터가 있는가? 각각의 데이터는 어떻게 처리하는가? 종류와 처리의 방법을 아는 것이 중요하다.

2.1. Number

//숫자 작성방법
console.log(1);
//사칙연산
//+는 이항연산자다. 왼쪽과 오른쪽의 값을 처리해서 하나의 값을 만들어내는 역할을 한다. 
console.log(1+1);
console.log(4-1);
console.log(10/2);

2.2. String

// 문자열 작성방법 
console.log('1'+'1');  // 11
// 큰/작은 따옴표 어떤 것도 상관 없다. 짝을 이루기만 하면 된다. 
// 문자열이 오면 더하기라는 산술연산자가 아니라 결합연산자로 처리된다. 

🔎 javascript string count

console.log('가나다라마바사아자차카타파하'.length);

var str = '가나다라마바사';
console.log(str.length);

2.3. Variable

수학에서의 변수와 본질적으로는 같지만, 추상적이지 않고 편리한 도구가 되어줄 것이다.

a = 1; // =는 대입연산자다. 오른쪽에 값을 왼쪽에 있는 변수에 대입한다.
console.log(a);

a = 2; // 오른쪽에 있는 수는 상수다. 
console.log(a);

var n = 2; // 변수를 만들 때 좋은 습관은 var를 넣는다.
n = 4; // 변수 초기화에만 var를 넣고 그 다음부터는 생략한다.
console.log('n : ' + n);

👀 윈도우 cmd창을 VSC 프로그램 내에서 오픈하는 것 찾아서 해봤는데 편했다. 그리고 cls명령어를 입력하면 창이 깨끗해지니 좋다.

var nickname = 'suri';
var letter = 'dear '+nickname+' as;dlkfja;ldfkjas;dflkaj '+nickname+' sdf;lkasjdf;wthqqqt';

console.log(letter);

중복을 제거하면 드러나는 효용에 대해서.
데이터에 이름을 붙여 코드의 가독성을 높인다.
유지보수에 편리하다.

2.4. Template Literal

리터럴은 정보를 표현하는 방법이다.

var name = 'k8805';

// String literals
var letter = 'Dear '+name+'\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '+name+' Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. '+name;
 
// Template literals
var letter = `Dear ${name}
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ${name} Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ${1+1} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. ${name}`;
 
console.log(letter);

백틱으로 감싸 주고 변수는 ${}이거로 감싸준다. 줄바꿈은 엔터로 띄어쓰기도 그냥 스페이스로 처리해주면 된다.
줄바꿈을 위해서 \n을 쓰고 더하기와 작은따옴표를 하는 건 몹시 귀찮은 일이었는데, 그저 변수를 ${} 이 안에 담기만 하면 자동으로 치환되었다. 변수 뿐만 아니라 ${1+1}은 2로 치환되었다.
아, 그런데 \n 사용하는 건 자바와 문법이 같은 것 같다.

3. URL

3.1. url의 이해

javascript문법을 사용해서 node.js가 가지고 있는 기능을 이용하면 웹 애플리케이션을 만들 수 있다는 것이 최종 목적이다.

어떤 웹사이트를 띄워서 서로 다른 게시글을 열었다. 우리는 페이지별로 다른 html파일을 각각 가지고 있었는데, 예시 웹사이트의 url을 보니까 같은 파일을 열었다는 걸 알 수 있었다. 다만 뒤에 t의 값이 달랐다. 즉, php 어플리케이션이 웹 브라우저에게 서로 다른 페이지를 만들어서 보내고 있다는 거다. 이걸 해보자!

protocol : 프로토콜은 통신규칙이다. http는 웹브라우저가 웹서버가 데이터를 주고 받기 위해 생긴 통신 규약이다.
host(domain) : 인터넷에 연결되어 있는 컴퓨터를 가리키는 주소다.
port : 한 대의 컴퓨터 안에 여러대의 서버가 있을 수 있다. 클라이언트가 접속해서 어떤 서버에 통신할 지 애매하다. 각 서버는 특정 포트를 리스닝하고 있기 때문에, 포트 번호를 입력하면 된다. 웹서버는 디폴트가 '80'이다.
path : 컴퓨터 안에 있는 어떤 디렉토리 안에 어떤 파일인지를 가리킨다.
query string : 이 값을 변경하면 웹 서버에게 내가 읽고 싶은 정보는 html이고 12페이지다라는 데이터를 전달할 수 있다. query string은 물음표로 시작하기로, 값과 값은 앰퍼샌드로 구분하기로, 값의 이름과 값은 =로 구분하도록, 약속되어 있다.

3.2. url을 통해 입력된 값 사용하기

id값이 무엇이냐에 따라서 사용자에게 적당한 값을 보여준다. query string의 값을 node.js에서 어떻게 알아낼까? 그 값은 request.url에 들어가는 걸 알 수 있었다.

초반 강의에도 있었지만,

console.log(__dirname + _url);

이걸 하면 내가 웹사이트를 옮겨 다닐 때마다 디렉토리 이름과 url을 cmd 창에 보여줬었다.

url을 분석해서 데이터를 추출해야 한다. 검색을 어떻게 해볼까?

🔎 nodejs url parse query string

stackflow의 어느 답변을 보면서 분석해서 코드를 복사해왔다.

var url = require('url');

node.js가 가지고 있는 수많은 기능들은 비슷한 것들끼리 그룹핑해놓은 것을 모듈이라고 한다. url이라고 하는 모듈을 사용할 것이다 라는 뜻이다. url 모듈을 url이라는 변수를 통해 사용할 것이다.

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

queryData에는 뭐가 들어오는걸까? console에 띄워서 확인해본다.
주소창에 http://localhost:3000/?id=html 이렇게 검색했을 때, { id: 'html'}이 나온다. queryData가 객체라는 뜻이다.
이번에는 console.log(queryData.id);라고 해보자. 그러면 html이 나온다.
request.url의 값과 queryData.id의 값에는 차이가 분명히 있었다. /?name=html vs html
완전히 이해가 되는 것은 아니지만, 내가 주소창에 친 url의 값을 node.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;
    console.log(queryData.name); //name으로 바꿔도 상관은 없다.
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      response.writeHead(404);
response.end();
return;
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + _url));
  // 사용자가 접속한 url에 따라서 파일들을 읽어주는 코드
  // 끝에서는 queryData.name으로 바꿔서 실행해보았다. 
 
});
app.listen(3000);

4. 동적인 웹페이지 만들기

4.1. 제목 동적으로 만들기

1.html 파일 내용을 복사해서 template이라는 변수에 담는다.
그 안에서 url에 따라서 바뀌었으면 하는 부분을 ${queryData.id}로 담는다.
주소창에 ?id=html이라고 치면 그에 따라 내용이 바뀌는 걸 볼 수 있었다.
a href="/?id=HTML" 이렇게 해준 부분과 index는 a href="/"이렇게 처리해주고 조건문 처리해준 것
결과적으로 주소창에 id = 값으로 주는 이름에 따라서 페이지의 제목들이 동적으로 바뀌는 걸 할 수 있었다. 그리고 웹페이지의 a태그들의 href 값으로 주소창에 id = 값을 조작했고, 그에 따라 페이지의 제목들이 동적으로 바뀌었다.

어렴풋하게 무엇을 하고 있는지 이해는 가는 것 같다. 내가 처음부터 끝까지 쓰라고 하면 못할 것 같지만..

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 title = queryData.id;
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      response.writeHead(404);
response.end();
return;
    }
    response.writeHead(200);
    var template = `
    <!DOCTYPE html>
<html>
  <head>
    <title>WEB1 -${title}</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1><a href="/" target="_self">WEB</a></h1>
    <ul>
      <li><a href="/?id=HTML">HTML</a></li>
      <li><a href="/?id=CSS">CSS</a></li>
      <li><a href="/?id=JavaScript">JavaScript</a></li>
    </ul>
    <h2>${title}</h2>
    <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
	이하생략</p>
  </body>
</html>
`;
    response.end(template);
   
 
});
app.listen(3000);

제목은 동적인 상태로 바꿨는데 본문은 정적이었다. 이걸 어떻게 바꿀 수 있을까? 이건 다음시간에 해보도록 한다.

4.2. 본문 동적으로 만들기

정보 시스템의 핵심적인 매커니즘은 CRUD, Create/Read/Update/Delete 4가지다. C가 가장 우선하고, 다음으로 R이 C에 필적한다.

FILE을 node.js로 읽을 수 있는 방법, CRUD를 node.js로 하는 방법을 알아본다.

node.js 공식 웹사이트 > 문서

nodejs가 기본적으로 제공하는 기능들을 그룹핑한 것, 모듈을 제공한다.
filesystem 모듈로 들어가서 이해보다는 익숙함을 목적으로 api문서를 따라해본다. 과정에서 검색과 질문 등의 추가적인 과정을 거친다.

var fs = require('fs');

fs.readFile('sample.txt', 'utf8', function(err, data){
    console.log(data);
});

외부 텍스트 파일을 nodejs로 불러올 수 있었다.
불러오려는 텍스트 파일이 같은 디렉토리에 없기 때문에 실행이 되지 않았었다. 그 때 사용했던 몇 가지 명령어들을 기억해두자. cd nodejs dir/w 확인한 후에 실행시키니 되었다. cd ..는 부모 디렉토리로 가는 명령어다.

4.3. 예제 적용

query string의 값에 따라 본문이 변경되는 것을 본격적으로 해보자.

data라는 새로운 폴더를 만들고 파일을 만든다. (파일명은 query string 값에 맞춰야 한다.)
각각의 파일 안에는 순수한 본문 텍스트를 넣는다.

코드로 보기

fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
var template = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${title}</title>
          <meta charset="utf-8" />
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
          <ul>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
      </html>
  `;    
   response.end(template);
  
});

텍스트의 파일명을 백틱으로 감싸주는 Template literal 처리를 해줘서 변수를 용이하게 넣어주었다.
파일 내용만 수정이 되는 것이라면, main.js 파일 자체를 리로드 하지 않아도 되었다. 실시간으로 텍스트 파일을 불러오는 것이기 때문이다. 이 부분은 편리하다. 고정된 템플릿/변경되는 부분을 파일처리. 유지보수에 꽤 도움이 될 것 같다.

⚡ 개인이 웹서버를 만드는 것은 교육적으로는 도움이 되지만, 어려운 부분들이 있다. node.js를 적용한 웹페이지를 만들어보고 싶다. node.js 경우 cmd창에서 ^c로 나가게 되면 서버도 닫히는 불편함이 있었다. 어떻게 해결할 수 있을까?

5. Javascript 문법 ⓑ

5.1. Boolean datatype

추상적으로 느껴질 수 있다. 불리언을 true/false 단 두 개의 데이터로 이루어져있다. 숫자와 문자열과 비교하면 종류가 제한적이다.

// 표현방식
console.log(true);
console.log(false);

5.2. Comparison operator

비교연산자는 좌항과 우항을 비교해서 불리언 데이터 타입을 만들어내는 연산자다. 조건문에서 사용된다.

console.log(1==1); //true
console.log(1==2); //false
console.log(1>2); //false
console.log(1<2); //true

classNumber = 1; //대입연산자
classNumber == 1; //비교연산자
classNumber === 1; //2개를 쓸 때는, 3개를 써라(?)

5.3. Flow-Control statement

경우에 따라 다른 프로그램을 실행시키고 싶다면, 경우에 맞는 파일을 여러개 만들어도 될 것이다. 하지만 하나의 파일 안에서 조건문을 사용하면 흐름을 제어할 수 있다.

conditional statement

if(true){ //조건문 안에는 불리언 데이터 타입이 들어간다. 
    console.log('C1');
}

else {
    console.log('C2');
}

console.log('D');

6. 콘솔에서의 입력값

Parameter : 입력되는 데이터의 형식
Argument : 형식에 맞게 입력되는 실제 값

콘솔에서 명령을 실행할 때, 입력값을 주는 법을 살펴본다. 내부에서 조건문을 이용해서 그에 따라 다른 값을 출력하는 프로그램을 만들어본다.

🔎 nodejs console input parameters

var args = process.argv;
console.log(args[2]); 
//args로만 했을 때는, 배열의 형식으로 값을 주는 걸 확인할 수 있음.

커맨드 라인에 입력값을 주어서 조건문을 조작하고 출력을 다르게 할 수 있었다.

커맨드 라인에 입력하는 1은 숫자가 아니라 문자열로 인식되는 것 같다. 생각해보면 java에서도 그랬다.

7. App 제작

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;
    console.log(url.parse(_url, true)); //어떤 정보를 주나 콘솔창에 띄워보았고 pathname를 확인했다.
    var title = queryData.id;

    if(pathname === '/'){ fs.readFile(`data/${title}`, 'utf8', function(err, description){
      var template = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${title}</title>
          <meta charset="utf-8" />
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
          <ul>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
      </html>
  `;    
      response.writeHead(200); //응답의 결과를 숫자로 하기로 약속을 했다.
      response.end(template);
    });
   
    }else{
      response.writeHead(404);
      response.end('Not Found');
    }
 
});

위의 코드로는 홈은 undefined 상태가 된다. pathname 값을 통해서는 홈과 각각의 페이지를 구분할 수 없다. 값을 확인해보니 모두 '/'으로만 나온다.조건문을 중첩해서 사용함으로써 구분해낼 수 있다.

홈 구현하기

if(pathname === '/'){  
      if(queryData.id === undefined){
           
      // fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      var title = 'Welcome';
      var description = 'Hello, Node.js'; 
      var template = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${title}</title>
          <meta charset="utf-8" />
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
          <ul>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
      </html>
  `;    
      response.writeHead(200); 
      response.end(template);
    // });
  }else{
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      var title = queryData.id;
      var template = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${title}</title>
          <meta charset="utf-8" />
        </head>
        <body>
          <h1><a href="/">WEB</a></h1>
          <ul>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=JavaScript">JavaScript</a></li>
          </ul>
          <h2>${title}</h2>
          <p>${description}</p>
        </body>
      </html>
  `;    
      response.writeHead(200); 
      response.end(template);
    });
  }
    }else{
      response.writeHead(404);
      response.end('Not Found');  
    }
 });

홈과 다른 페이지들을 구분하는 방법으로

if(pathname === '/'){
if(queryData.id === undefined){홈을위한내용}else{다른웹페이지들위한내용}
else{notfound를위한내용}  
}

이렇게 조건문을 중첩해서 사용해줬다. 뭔가 굉장히 조잡한 코드라고 느껴졌다. 이 코드는 분명 더 좋아질 수 있을 거 같다. 나는 이 수업 전에도 홈을 구현하긴 했었다. 홈에 대해서만 조건문을 써도 충분히 같은 결과를 낼 수 있지 않나?

8.1. 반복문

단 두줄의 코드를 무한루프를 돌리는데, CPU 점유율이 마구 치솟는 걸 알 수 있었다. 무한루프는 어떤 의도가 있는 게 아니라면 코드 상의 심각한 버그다.

var i = 0;
while(i < 3){
    console.log('A');
    console.log('B');
    i++;
}

8.2. 배열(Array data type)

데이터를 다루는 4가지 처리 방법에는 C R U D가 있다고 했다. 배열을 그렇게 처리해보자.


// C
var arr = ['A', 'B', 'C', 12, true]; //데이터 타입이 섞여도 상관없다.

// R
console.log(arr[1]); //배열은 index로 호출한다.
console.log(arr[3]);
console.log('length : ' + arr.length);

// U
arr[2] = 3; //데이터 변경
arr.push('E'); //데이터 추가

// D
arr.splice(3, 1); //arr[3]을 1개 제거

console.log(arr); //확인

8.3. 배열과 반복문

var number = [1, 400, 12, 34, 5];
//배열에 있는 숫자를 모두 더해보고 싶은 상황이다. 

var sum = 0;
var i = 0;
while(i < number.length){
    sum += number[i];
    i++;
}

console.log(`sum : ${sum}`);

// 자바와 문법이 똑같기 때문에 어렵지 않게 코드를 짤 수 있었다.

9. node.js로 파일목록 알아내기

9.1. 파일목록 불러오기

🔎 node.js file list directory

var testFolder = './data';
var fs = require('fs');

fs.readdir(testFolder, function(error, filelist){
    console.log(filelist);
})

특정 디렉토리에 있는 파일의 목록을 배열형식으로 보여준다. 그 배열을 반복문을 통해 반복적으로 처리해서 어떤 결과를 만들어 낼 수 있다.

9.2. 예제에 적용하기

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

파일목록을 가져온 다음에 작업이 끝나면 node.js는 function 안에 코드를 실행하도록 되어 있다.

코드로 보기

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;
    console.log(url.parse(_url, true));
    console.log(`url : ${_url}`);

    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 += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
        i++;
      }
      list = list+'</ul>';
            
      var template = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${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);
      }
      )  
      
  }else{
    fs.readdir('./data', function(error, filelist){
     
      var list = '<ul>';
      var i = 0;
      while(i < filelist.length){
        list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
        i++;
      }
      list = list+'</ul>';
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      var title = queryData.id;
      var template = `
      <!DOCTYPE html>
      <html>
        <head>
          <title>${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);
      
    });
  });
  }
    }else{
      response.writeHead(404);
      response.end('Not Found');
    }
 
});
app.listen(3000);

프로그래머들은 데이터가 추가된다고 로직이 바뀌는 걸 부끄럽게 생각한다. 근데 텍스트 파일이 추가될 때마다, 웹페이지에 자동으로 추가되는 건 정말 신기하다!

10. Javascript 문법 ⓓ

10.1. 함수의 생성과 호출

함수는 일련의 로직에 대한 이름을 붙이는 것이다.

// 함수 생성 
function f123(){
    console.log(1)
    console.log(2)
    console.log(3)
}
// 함수 호출
f123();

10.2. 함수의 입력

함수도 프로그램처럼 입력과 출력이 있다. 작은 프로그램이라고 생각해도 좋다. 입력에 따라 다르게 작동하고 출력에 따라 다양하게 사용할 수 있는 방법에 대해 살펴본다.

// Math는 자바 스크립트가 내장하고 있는 객체고, round는 내장하고 있는 함수이다. 반올림을 해준다.

console.log(Math.round(1.6)); // 2
console.log(Math.round(1.4)); // 1

// 입력값에 따라서 반올림을 해주고 그 값을 출력한다. 우리도 입력값이 있는 함수를 만들어 보자. 

function sum(first, second){ //parameter
    console.log(first+second);
}

sum(2,4); // argument

10.3. 함수의 출력

function sum(first, second){
	console.log('a');
  	return first+second;
  	console.log('b');  // 실행되지 않는다.
 }

위의 함수는 언뜻 보기에 편리해보이지만 융통성이 없다. 아래의 함수는 출력을 받아서 다양한 용도로 사용할 수 있다.

return은 출력한다는 의미와 함수를 종료시킨다는 의미를 가지고 있는 특수한 키워드다.

11. 함수로 정리 정돈하기

우리의 예제에서 완전히 똑같은 코드가 존재하니, 함수를 만들어 중복을 제거해보자.

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

function templateHTML(title, list, body){
  return `
  <!DOCTYPE html>
  <html>
    <head>
      <title>${title}</title>
      <meta charset="utf-8" />
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${body}
    </body>
  </html>
`;
}

function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i++;
  }
  list = list+'</ul>';
  return list;
}

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;
    console.log(url.parse(_url, true));
    console.log(`url : ${_url}`);

    if(pathname === '/'){  
    if(queryData.id === undefined){
      fs.readdir('./data', function(error, filelist){
      var title = 'Welcome';
      var description = 'Hello, Node.js'; 
      var list = templateList(filelist);
      var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
      response.writeHead(200); 
      response.end(template);
      }
      )  
      
  }else{
    fs.readdir('./data', function(error, filelist){
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      var list = templateList(filelist);
      var title = queryData.id;
      var template = templateHTML(title, list, description);
  response.writeHead(200); 
  response.end(template);
      `
    });
  });
  }
    }else{
      response.writeHead(404);
      response.end('Not Found');
    }
 
});
app.listen(3000);

SURI

Every step to become a better version of me 🚶‍♂️ 블로그 이사중

이전 포스트

Lecture | Domain Name System

다음 포스트

Lecture | Node.js

🚶‍♂️ 들어가며

Node.js의 등장

수업의 목적

공부방법

👩‍🏫

1. Node.js runtime 설치

설치

실행

1. Node.js로 웹서버 만들기

2. Javascript 문법 ⓐ

datatype

2.1. Number

2.2. String

2.3. Variable

2.4. Template Literal

3. URL

3.1. url의 이해

3.2. url을 통해 입력된 값 사용하기

코드 전체 다시 보기

4. 동적인 웹페이지 만들기

4.1. 제목 동적으로 만들기

4.2. 본문 동적으로 만들기

4.3. 예제 적용

코드로 보기

5. Javascript 문법 ⓑ

5.1. Boolean datatype

5.2. Comparison operator

5.3. Flow-Control statement

conditional statement

6. 콘솔에서의 입력값

7. App 제작

홈 구현하기

8. Javascript 문법 ⓒ

8.1. 반복문

8.2. 배열(Array data type)

8.3. 배열과 반복문

9. node.js로 파일목록 알아내기

9.1. 파일목록 불러오기

9.2. 예제에 적용하기

코드로 보기

10. Javascript 문법 ⓓ

10.1. 함수의 생성과 호출

10.2. 함수의 입력

10.3. 함수의 출력

11. 함수로 정리 정돈하기

Lecture | Domain Name System

Lecture | CS50

0개의 댓글