2023-01-23 node.js_6

2023. 1. 23. 18:25ㆍ공부 중/Node.js

WEB2 - Node.js - 생활코딩

수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사

opentutorials.org

생활코딩 node.js 강의 정리

1. Node.js 파일

Node.js에서 파일을 다루는 방법을 배워보자.

역시 데이터를 다루기 위해서 알아야할 가장 중요한 것은 CRUD다.

Create : 생성
Read : 읽기
Update : 갱신
Delete : 삭제

CRUD를 모두 구현하겠지만 일단은 Read부터 배웠다.

2. 파일 읽기

Node.js가 file을 읽어오는 방법을 알아보자.

google에 ‘node.js read file’이라고 검색하거나 아래의 공식 홈페이지를 참고하면 된다.

Reading files with Node.js

How to read files using Node.js

nodejs.dev

공식 홈페이지에서는 2가지 방법을 제시한다.

fs.readFile() : 비동기
fs.readFileSync() : 동기

fs 모듈을 이용해서 파일 I/O작업을 수행한다.

가. fs.readFile() 예시

fs.readfile()의 공홈의 예시를 가죠왔다.

const fs = require('fs');

fs.readFile('/Users/joe/test.txt', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

\'/Users/joe/test.txt'의 내용을 읽어와서 utf8로 인코딩한 후 이를 callback함수에 넘겨준다.

이때 error가 발생하면 callback 함수의 매개변수 err이 참이 된다.

정상적으로 파일을 읽어왔다면 이를 매개변수 data로 전달한다.

해당 예시에서는 전달받은 데이터를 콘솔에 출력하고 있다.

3. 파일 읽어서 본문 구현

쿼리 스트링에 따라서 본문을 동적으로 구현하기 위해서 본문의 내용을 따로 저장한다.

쿼리 스트링에 맞는 파일을 읽어와서 템플릿 리터럴에 입력할 것이다.

가. 프로젝트 디렉터리에 본문만 따로 저장할 새로운 디렉터리를 만든다.

mkdir data

그리고 본문의 수만큼 새로운 파일을 만든다.

이때 파일의 이름은 우리가 사용할 쿼리의 id 값과 같다.

~~(띄어쓰기 에반데;;; 괜찮을까;;;)~~

나. 본문을 파일에 복사한다.

복사할 대상은 <div id="article">태그 안에 위치한 내용이다.

다. main.js의 코드를 수정한다.

...
response.writeHead(200);
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description) {
      var template = `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>WEB - ${title}</title>
            <link rel="stylesheet" href="style.css">
            <script src="color.js"></script>
          </head>
          <body>
            <div id="top">
              <h1><a href="/">차</a></h1>
              <input type="button" value="night" onclick="nightDayHandler(this)"/>
            </div>
            <div id="grid">
              <ul>
                <li><a href="/?id=black%20tea">홍차</a></li>
                <li><a href="/?id=oolang%20tea">우롱차</a></li>
                <li><a href="/?id=green%20tea">녹차</a></li>
              </ul>
              <div id="article">${description}</div>
            </div>
          </body>
        </html>
      `;
        response.end(template);
    });
...

파일을 읽어오고 읽은 본문의 내용을 기존의 template에 더해서 페이지를 완성 한다.

그리고 response.end(template);까지 마치면 fs.readFile() 함수가 종료된다.

조금 살펴보면 ...

fs.readFile(`data/${queryData.id`}, 'utf8', function(err, description) { … });

: 파일의 path를 템플릿 리터럴로 처리했다.

<div id="article">${description}</div>

: 읽어온 본문의 내용을 삽입한다.

4. 실행하기

아직 쿼리 스트링이 비어있을 때 description의 값이 없어서 undefined라고 표시되긴 하지만 나머지는 잘 동작한다.

이렇게 본문을 동적으로 생성하면 좋은 점이 하나 있다.

이전에 main.js에 본문의 내용을 수정하면 웹 서버를 재시작해야 했다.

하지만 본문의 내용을 main.js가 아닌 별도의 파일에 저장하고 관리하면서부터는 본문의 내용을 수정해도 웹 서버를 재시작할 필요가 없이 바로 적용된다.

'공부 중 > Node.js' 카테고리의 다른 글

2023-01-31 node.js_8 (0)	2023.01.31
2023-01-30 node.js_7 (0)	2023.01.30
2023-01-23 node.js_5 (0)	2023.01.23
2023-01-22 node.js_4 (0)	2023.01.22
2023-01-16 node.js_3 (0)	2023.01.16

개발은 즐거워?