(Node.js) 파일 읽기 + 예제/ readFile과 readFileSync

Node.js 파일 읽기 + 예제

포스팅 요약

1. readFile vs readFileSync

1. readFile vs readFileSync

> readFile은 비동기, readFileSync는 동기

> 사용 형식

fs.readFile("파일경로", "encoding", callback)

fs.readFileSync("파일경로", "encoding")

> fs.readFile 동작 과정

파일명: server2.js

const http = require("http");
const fs = require("fs");
const app = http.createServer((request, response) => {
  const _url = request.url;
  const fullUrl = new URL("http://localhost:3000" + _url);
  const pathName = fullUrl.pathname;

  if (pathName === "/") {
    fs.readFile("./data/html", (err, data) => {
      console.log("1.비동기입니다~")
      response.writeHead(200, { "Content-Type": "text/html;charset = utf-8" });
      response.end(data);
    });
  }
  console.log("2.비동기입니다~")
});

app.listen(3000, () => {
  //포트번호 3000으로 서버 구동
  console.log("서버 시작 주소: http:localhost:3000");
});

<결과>

* 밖깥에 있는 콘솔이 실행 된 후, readFile안에 있는 콘솔이 동작함.

> fs.readFileSync 동작 과정

파일명:server2.js

const http = require("http");
const fs = require("fs");
const app = http.createServer((request, response) => {
  const _url = request.url;
  const fullUrl = new URL("http://localhost:3000" + _url);
  const pathName = fullUrl.pathname;

  if (pathName === "/") {
    const html = fs.readFileSync("./data/html", "utf8");
    console.log("1.동기입니다~");
  }
  console.log("2.동기입니다~");
});

app.listen(3000, () => {
  //포트번호 3000으로 서버 구동
  console.log("서버 시작 주소: http:localhost:3000");
});

* 차례대로 동작함

<결과>

2. readFile 사용법

경로 data/html.txt

파일명: html.txt

<!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>Document</title>
</head>
<body>
  <h1>html</h1>
</body>
</html>

파일명: server2

const http = require("http");
const fs = require("fs");
const app = http.createServer((request, response) => {
  const _url = request.url;
  const fullUrl = new URL("http://localhost:3000" + _url);
  const pathName = fullUrl.pathname;

  if (pathName === "/") {
  
  //data파일의 html.txt파일을 읽어옴
    fs.readFile("./data/html", "utf8", (err, data) => {
      response.writeHead(200);
      response.end(data);
    });
  }
});

app.listen(3000, () => {
  //포트번호 3000으로 서버 구동
  console.log("서버 시작 주소: http:localhost:3000");
});

<결과>

터미널창

웹 화면

3. readFileSync 사용법

경로 data/css.txt

파일명: html.txt

<!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>Document</title>
</head>
<body>
  <h1>css</h1>
</body>
</html>

파일명: server2

const http = require("http");
const fs = require("fs");
const app = http.createServer((request, response) => {
  const _url = request.url;
  const fullUrl = new URL("http://localhost:3000" + _url);
  const pathName = fullUrl.pathname;

  if (pathName === "/") {
    const css = fs.readFileSync("./data/css", "utf8");
    response.writeHead(200);
    response.end(css);
  }
});

app.listen(3000, () => {
  //포트번호 3000으로 서버 구동
  console.log("서버 시작 주소: http:localhost:3000");
});

4. 예제

<결과 화면>

Main을 클릭시, 코드짜는 문과녀 화면에 출력

NodeJs를 클릭시, NodeJs 관련 글 출력, css, html도 동일.

<코드>

파일명: server2.js

const http = require("http");
const fs = require("fs");
const info = require("./info.js");
const app = http.createServer((request, response) => {
  const _url = request.url;
  const fullUrl = new URL("http://localhost:3000" + _url);
  const pathName = fullUrl.pathname;
  const queryData = fullUrl.searchParams;

  if (pathName === "/") {
    let list = "";
    if (queryData.get("id") === null) { // localhost:3000/ 일때
      title = `<h1>코드짜는 문과녀</h1>`;
      description = `<p>코드짜는 문과녀의 블로그입니다.</p>`;
    } else { // localhost:3000/?id=파일명 <-id뒤에 값이 있을때
      /* localhost:3000/?id=NodeJs 일때,
        queryData.get("id") = NodeJs
      */
      title = queryData.get("id");
      description = fs.readFileSync(`./data/${title}`, "utf8"); 
    }

    fs.readdir("./data", (err, files) => {
      files.forEach((file) => {
        list += `<li><a href="/?id=${file}">${file}</a></li>`;
      });
      response.writeHead(200, { "Content-Type": "text/html;charset = utf-8" });
      response.end(info(title, description, list));
    });
  }
});

app.listen(3000, () => {
  //포트번호 3000으로 서버 구동
  console.log("서버 시작 주소: http:localhost:3000");
});

파일명: info.js

const info = function (title, description, list) { 
//server.js에서 매개 변수 title, description, list를 받아옴.

  return `<!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>Document</title>
  </head>
  <body>
    <h1><a href="/">Main</a></h1>
    <h2>${title}</h2>
    ${description}
    <hr>
    <ul>
      ${list}
    </ul>
  </body>
  </html>`;
};

module.exports = info;

data폴더와 data폴더 안에 css, html, NodeJs.txt 파일 만들기

파일 내용 아래 사진 참조해주세요.

5. 그 외 추가 자료 링크

node.js에서 파일 목록 불러오는 법이 궁금하다면 아래 링크를 참고해주세요~

2021.09.08 - [웹/(Node.js)노드] - (Node.js) 파일 목록 불러오기/ 파일 이름 불러오기 + 예제(간단함)

저작자표시 비영리 변경금지

'웹 > (Node.js)노드' 카테고리의 다른 글

(Node.js-express) get, post요청 처리/body-parser deprecated (0)	2021.09.11
(Node.js) 파일 쓰기, 생성하기/ 파일 삭제하기 + 예제 (0)	2021.09.10
(Node.js) 파일 목록 불러오기/ 파일 이름 불러오기 + 예제(간단함) (0)	2021.09.08
(Node.js) pm2 서버 중단 없이 소스 반영법/무중단 서비스하기 (pm2사용법) (0)	2021.09.08
(Node.js) node.js express로 서버구축하기 (0)	2021.09.07

코드짜는 문과녀

(Node.js) 파일 읽기 + 예제/ readFile과 readFileSync