express.static 정적 파일 가져오기

 

정적 파일이란?

---

정적 파일이란, HTML, CSS, JavaScript 파일과 같이 서버에 미리 저장되어 변경되지 않는 파일들을 말한다.

이러한 파일들은 웹페이지를 보여주기 위한 필수 요소에 해당한다.

 

 

 

 

정적 파일 가져오기

---

Express에서는 express.static 미들웨어를 사용하여 정적 파일을 쉽게 가져올 수 있다.

 

express.static() -> ()안에 파일을 가져오고 싶은 폴더를 작성하여 필요한 파일에 접근할 수 있다.

 

예를 들어, public 폴더 안에 있는 파일들을 가져오고 싶다면 다음과 같이 작성하면 된다.

const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

 

 

 

발생한 문제

---

 

경로 지정 오류

 

처음 public안에 있는 사진 파일을 가져올려고 했을때 경로 지정 오류가 발생했다. 

그 오류를 해결하기 위해서 다음과 같은 방법을 사용했다. 

 

• 파일 위치 확인: 먼저 가져와야하는 폴더의 위치가 어디있는지 제대로 확인한다. 특히 src 폴더 안에 있는지 밖에 있는지 확인해야한다. 
• URL 직접 접속:  웹 브라우저에서 파일에 직접 접근해서 잘 가져와지는지 확인할 수 있다.

        예를 들어, **http://localhost:3000/image.jpg**와 같이 URL을 입력해 해당 사진이 잘 뜨는지 확인해 보았다.

• console.log로 디버깅: 서버 코드에 **console.log**를 추가하여, 실제로 어떤 경로로 파일을 찾고 있는지 출력해 보았다. 이는 경로가 올바르게 설정되었는지 확인하는 데 도움이 된다.