[Node.js] 정적 파일 import

태연·2025년 2월 17일
0

서버 프레임워크 중 하나인 node.js의 static경로 설정 방법

CSS 연결

  1. css파일을 만들어 css폴더에 넣어줌
  2. ejs파일에 css링크를 <link rel="stylesheet" href="css/파일이름.css">걸어놓음
  • express는 모든 폴더를 서버에 보여주지 않고 app.js와 views폴더에 있는 것만 기본으로 보여준다.
    (css나 js파일은 https://localhost:3000/css/styles.css로 찾을 수 없음)
    그래서 express에 css/js도 사용하겠다는 명시를 해줘야한다(서버에 나오라고 명령).
    3.public폴더를 만들어 이 폴더를 서버에서 돌릴 수 있도록 만든다.
    public/css폴더 밑에 연결하고 싶은 css파일을 넣음
    app.js에 app.use(express.static("public")); 추가하여 static 파일의 위치를 public으로 설정해준다.

js는 정적 파일이라 ejs로 읽어줄 수 없음 그래서 한번 더 요청을 보냄(node.js_02 폴더 참조)
-> 데이터는 계속 app.js에서 바뀜


템플릿에서 태그로 참조하는 css,js,image 등 여러 정적 파일들을 사용하는 방법
1. public 폴더에 정적 파일을 담는다.
2. 모든 요청에 공공으로 사용하기 위해 use메서드 사용
const path = require('path'); // 경로
app.use(express.static(path.join(__dirname, 'public')));

(정적(static)한 파일을 이곳에 넣어두면 / 경로로 ejs파일내에서 public폴더내에 있는 파일을 접근 할 수 있다는 의미)
app.use('/ejs에서접근할경로', express.static(path.join(__dirname, ' /실제위치한디렉토리경로')));

profile
어서와

0개의 댓글