[NodeJs] http, fs 내장 모듈을 활용한 html 불러오기

내장모듈 http

http 모듈은 웹 어플리케이션을 구축하는데 필수적인 기능을 제공한다. http 서버 및 클라이언트 기능을 제공하는 모듈로 이 모듈을 사용하여 웹 서버를 만들고 웹 브라우저와 같은 HTTP 클라이언트와 통신을 할 수 있다. http 모듈은 웹 어플리케이션을 구축하는데 필수적인 기능을 제공합니다.

// 내장 모듈 http 가져오기
const http = require("http");

 

내장모듈 http > createServer 메소드

createServer 메소드는 내장모듈 http에서 제공 하는 함수로 새로운 http 서버 인스턴스를 생성해준다. 클라이언트의 요청이 발생 할 때마다 호출 됩니다.

const http = require("http");

// http 인스턴스 생성
// req : http 요청의 정보 URL, 메소드(GET, POST 등) 헤더 정보, 바디의 내용을 담음
// res : http 응답의 정보를 가지고 있는 객체. 상태 코드는 statusCode 응답 헤더, 바디의 내용이 있음
const server = http.createServer((req, res)=>{});

 

내장모듈 http > setHeader 메소드

응답한 헤더의 내용을 설정하는 메소드로 헤더의 이름과 값을 인수로 받아 응답합니다.

const http = require("http");

const server = http.createServer((req, res) => {
	// Content-Type : 응답의 내용
  	// application/json : 응답의 내용을 JSON 형식의 데이터로 전송
 	// charset=utf-8 : 응답 문자를 utf-8로 인코딩
	res.setHeader("Content-Type", "applicastion/json", "charset=utf-8");
});

 

내장모듈 fs

fs 모듈은 파일 생성, 삭제, 읽기, 쓰기 작업을 할 수 있게 해주는 기능을 제공한다. 파일 뿐만 아닌 디렉토리도 생성 삭제가 가능하고 파일의 정보를 얻어 올 수도 있어 nodejs에서 파일 작업을 하는데 fs 모듈은 필수로 사용됩니다. 다른 내장모듈 처럼 제공하는 기능들이 있는데 재밌는건 mkdir, mkdirSync 같이 Sync이 붙는지 안붙는지에 따라 비동기, 동기 방식으로 나뉩니다.

// 내장 모듈 fs 가져오기
const fs = require("fs");

 

내장모듈 fs > existsSync 메소드

폴더가 있는지 확인 하는 메소드로 폴더가 있으면 true, 없으면 false로 반환합니다. exists는 사용이 중단되었다고 합니다. 관련 문서 https://nodejs.org/docs/latest-v9.x/api/deprecations.html -> DEP0034

const fs = require("fs");

let folder = fs.existsSync("./test"); // 파일이 있으면 true, 없으면 false

 

내장모듈 fs > mkdir, mkdirSync 메소드

디렉토리를 생성해주는 메소드입니다.

const fs = require("fs");

const folder = fs.existsSync("./test");

// test 폴더가 없으면 만드는 코드
if (!folder) {
  // 비동기 실행
  // 첫번째 매개변수 : 생성할 폴더의 경로
  // 두번째 매개변수 : 폴더 생성시 호출할 콜백 함수
  // 콜백함수 첫번째 매개변수 : 에러의 내용 객체를 전달
  fs.mkdir("./test", (err) => {
    if (err) {
      console.log("error");
    } else {
      console.log("create folder : test ");
    }
  });

  // 동기 실행
  fs.mkdirSync("./test");
  console.log("create test folder");
}

 

내장모듈 fs > writeFile, writeFileSync 메소드

파일에 데이터를 작성할 수 있게 해주는 메소드로 파일이 없으면 새로 만들고 있으면 기존 내용에 덮어 씁니다.

const fs = require("fs");

// 비동기 실행
// 첫번째 매개변수 : 파일의 경로
// 두번재 매개변수 : 파일에 작성할 내용
// 세번째 매개변수 : 콜백 함수
// 콜백함수 첫번째 매개변수 : 에러 내용을 객체 형식으로 전달
// test 폴더 아래 temp.txt라는 파일을 만들고 내용은 Hello nodejs를 입력
fs.writeFile("./test/temp.txt", "Hello nodejs", (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log("create file : temp.txt");
  }
});

// 동기 실행
fs.writeFileSync("./test/temp.txt", "Hello nodejs");

 

내장모듈 fs > readFile, readFileSync 메소드

파일의 내용을 읽어주는 메소드입니다. 동기 실행을 했을때 파일을 읽어 오는 시간보다 console.log를 읽는 시간이 더 빠르게 되면 temp에 아무내용도 찍히지 않고 출력되는 문제가 발생했었습니다.

// 첫번째 매개변수 : 파일의 경로
// 두번째 매개변수 : 인코딩 내용 작성
// 세번째 매개변수 : 콜백 함수
// 콜백함수 첫번째 매개변수 : 에러 내용을 객체 형식으로 전달
// 콜백함수 두번째 매개변수 : 읽어온 파일의 내용
// 비동기 실행
fs.readFile("./test/temp.txt", "utf-8", (err, data) => {
   if (err) {
     console.log(err);
   } else {
     console.log("temp.txt : ", data);
   }
});

// 동기 실행
// 반환값으로 파일을 읽어옴
let temp = fs.readFileSync("./test/temp.txt", "utf-8");
// 어쩔때 나오고 어쩔때 안나오는거보니 동기 실행이라 파일을 읽는 동안 console.log가 실행되서 내용이 안보이는거 같음
console.log("temp.txt : ", temp);

 

내장모듈 fs > rm 메소드

파일이나 디렉토리를 삭제하는 메소드 recursive 옵션을 사용하여 디렉토리 안에 파일까지도 제거할 수 있습니다.

const fs = require("fs");

// 첫번째 매개변수 : 삭제할 폴더의 경로
// 두번째 매개변수 : 옵션을 객체 형식으로 전달 {recursive : true}
// recursive 키의 값에 따라 true나 false를 반환. 폴더안에 파일까지 제거
// 세번째 매개변수 : 콜백 함수
// 콜백함수 첫번째 매개변수 : 에러 내용을 객체 형식으로 전달
fs.rm("./test", { recursive: true }, (err) => {
  if (err) {
    console.log(err);
  } else {
    console.log("remove folder : test2");
  }
});

 

내장모듈 http, fs를 활용하여 html 불러오기

• views 폴더 아래 main.html, list.html, add.html 파일 생성
• URL에 /을 입력하면 main.html, /list 를 입력하면 list.html, /add를 입력하면 add.html 파일을 불러옴

// 내장모듈 http, fs 사용
const http = require("http");
const fs = require("fs");

const server = http.createServer((req, res) => {
  // req : 요청 내용을 가지고 있는 객체
  // res : 응답 내용을 가지고 있는 객체
  // setHeader() : 응답 헤더 내용 설정
  res.setHeader("Content-Type", "application/json", "charset=utf-8");

  // 요청한 URL을 URL에 담음
  const URL = req.url;
  // 요청한 URL이 favicon이면 무시
  if (URL == "/favicon/ico") {
    // end() : 내용을 응답하고 종료하는 메소드
    // 응답을 하지 않으면 클라이언트는 요청이 올때까지 대기
    res.end();
    return;
  }

  // 요청한 URL의 내용에 따라서 응답
  switch (URL) {
    case "/":
      fs.readFile("./views/main.html", (err, data) => {
        if (err) {
          // 파일을 불러오지 않으면 상태코드를 보냄
          // 404 : 파일을 불러오지 못함
          res.statusCode = 404;
          res.end("file not found");
        } else {
          // 파일이 잘 받아와 졌으면
          res.statusCode = 200;
          // 전달하는 컨텐츠의 내용은 html 파일
          res.setHeader("Content-Type", "text/html");
          res.end(data);
        }
      });
      break;
    case "/list":
      fs.readFile("./views/list.html", (err, data) => {
        if (err) {
          res.statusCode = 404;
          res.end("file not found");
        } else {
          res.statusCode = 200;
          res.setHeader("Content-Type", "text/html");
          res.end(data);
        }
      });
      break;
    case "/add":
      fs.readFile("./views/add.html", (err, data) => {
        if (err) {
          res.statusCode = 404;
          res.end("file not found");
        } else {
          res.statusCode = 200;
          res.setHeader("Content-Type", "text/html");
          res.end(data);
        }
      });
      break;

    default:
      break;
  }
});

// 서버를 대기상태로 만듬 port 번호 4000
server.listen(4000, () => {
  console.log("server on");
});

URL : localhost:4000/

URL : localhost:4000/list

URL : localhost:4000/add