본문 바로가기

내배캠 최종 프로젝트 T.I.L

2023-08-25 T.I.L 파일 스트림의 생성

지금까지 웹사이트를 만들 때 프론트엔드의 부분은 express.static과 res.sendFile(__dirname + ' ')의 메서드를 사용해서 백엔드와 연결했다. 하지만 현재 TCP서버를 통해서 백엔드를 작업했고 마이크로 서비스 아키텍쳐를 통해서 각 서비스를 제공하는 이상 express.static의 방식으로 프론트엔드와 백엔드를 연결하는 것은 적절하지 않다.

 

MSA에서 중요한 개념 중 하나는 각 서비스의 독립성과 확장성이다. 각 서비스는 자체적인 데이터베이스, 비즈니스 로직 등을 가지며, 필요한 경우 서비스 단위로 확장이 가능하다.

각 서비스가 독립적으로 배포되어야 하는 MSA의 특징에서 하나의 서비스가 변경되더라도 다른 서비스에 영향을 주지 않아야 하지만 express.static을 사용하면 어떤 서비스에 변경 및 수정, 확장이 생겼을 때 다른 서비스에도 영향을 미친다.

 

그래서 프론트엔드와 백엔드 간의 연결을 다른 방식으로 연결해야 한다.

 

이에 대한 방안으로 node.js의 fs모듈이 있다.

"fs"는 "File System"의 약자로, 파일과 디렉토리를 다루는 다양한 함수와 메서드를 제공한다. 이 모듈을 사용하여 파일을 읽고 쓰기, 디렉토리 생성 및 삭제, 파일 정보 조회 등을 수행할 수 있다.

fs모듈에는 여러 기능이 있지만 그 중 사용할 기능은 파일 스트림이다.

파일 스트림: 파일을 스트림 형태로 읽고 쓸 수 있는 스트림 인터페이스를 제공.

fs.createReadStream, fs.createWriteStream 등이 있다.

 

먼저 import fs from 'fs' //최상단에 fs모듈을 import해온다.

import fs from 'fs';

그리고 프론트엔드의 파일의 경로를 받는다.

응답 헤더를 설정한다. 상태 코드 200과 "Content-Type"을 "text/html"로 설정하여 HTML 파일을 전달한다.

function frontconnection(pathname, res) {
  let filePath;
  if (pathname == '/admin') {
    filePath = './src/public/admin.html';
  }
    if (pathname == '/js/admin.js') {
    filePath = './src/public/js/admin.js';
  }
  res.writeHead(200, { 'Content-Type': 'text/html' });
  const readStream = fs.createReadStream(filePath);
  readStream.pipe(res);
}

const readStream = fs.createReadStream(filePath);: 요청된 경로에 해당하는 파일의 읽기 스트림을 생성한다.

readStream.pipe(res);: 파일 읽기 스트림의 내용을 클라이언트 응답 스트림과 연결하여 응답으로 보낸다. 이를 통해 파일의 내용을 클라이언트로 전달한다.

 

그리고 위의 함수를 export하고 app.js에서 받는다.

 

즉, 이 코드는 클라이언트의 요청에 따라 해당 경로에 있는 HTML 파일 또는 JavaScript 파일의 내용을 응답으로 보내는 역할을 한다. 예를 들어, 클라이언트가 "/admin" 경로로 요청을 보내면 "admin.html" 파일의 내용을 응답으로 전송합니다. 이러한 방식으로 서버는 클라이언트의 요청에 대해 적절한 파일을 동적으로 응답으로 보내는 웹 서버 역할을 수행한다.