MERN 스택 학습 44일 차
제 Express.js 서버는 이전에는 JSON 데이터만 전송했습니다. 오늘은 그것을 바꿨습니다.
백엔드에서 HTML, CSS, 이미지를 직접 제공하는 방법을 배웠습니다. 이로써 제 프로젝트는 단순한 API에서 풀스택 애플리케이션으로 발전했습니다.
파일 라우팅을 마스터하기 위해 Complete Coding 백엔드 트랙을 학습했습니다.
실제 운영 환경에서는 프론트엔드 파일을 전달하는 효율적인 방법이 필요합니다. 파일을 읽기 위해 직접 커스텀 루프를 작성해서는 안 됩니다.
오늘 제가 사용한 설정은 다음과 같습니다:
express.static() 미들웨어 Express에는 express.static()이라는 내장 도구가 포함되어 있습니다. 이를 통해 public이나 assets와 같은 폴더를 선택하여 브라우저에 제공할 수 있습니다.
path.join() Node.js의 path 모듈과 __dirname 변수를 사용했습니다. 이를 통해 서버가 Windows, Linux 또는 Mac에서 오류 없이 파일을 찾을 수 있도록 보장합니다.
코드 예시는 다음과 같습니다:
const express = require("express"); const path = require("path"); const app = express(); const PORT = 8000;
app.use(express.static(path.join(__dirname, "public")));
app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "public", "index.html")); });
app.listen(PORT, () => {
console.log(Server running on http://localhost:${PORT});
});
이러한 기초를 다지는 것은 웹이 어떻게 작동하는지 이해하는 데 도움이 됩니다.
출처: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m