[NodeJs] CSS Javascript 추가 / 사용하기 (public 폴더 사용하기)

NodeJs Express를 통해 웹사이트를 구현하게 되면

Html 내 CSS나 Javascript 파일을 포함해야하는 경우가 있다.

 

 

무작정 프로젝트 폴더내 css나 javascript 파일을 넣어 놓으면

클라이언트 측에서는 보안 등의 문제로 폴더내

다른 파일들의 접근이 허용이 되지않는데

이를 허용하는 방법이 미들웨어 express.static 이다.

 

1. 우선 클라이언트의 접근이 허용되는 public이라는 폴더를 프로젝트 폴더 내에 만든다.

2. 코드 상단에 미들웨어로 app.use(express.static('public'))을 선언해준다.

3. nodejs로 구축한 웹사이트에서 최상위 경로로 등록된 폴더

(public)내의 파일의 접근이 가능하다.

 

  샘플예제

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

//public이라는 폴더의 클라이언트 접근 허용 (미들웨어)
app.use(express.static('public'));

 

만약 public 폴더 내 images 폴더를 만들고

그안에 image.jpg 파일을 저장하였다면,

/images/image.jpg 경로를 통하여

해당 파일에 접근이 가능하다.

 

마찬가지 public 폴더 내 lib 폴더를 만들고

내부에 style.css나 main.js파일을 저장하였다면,

html 태그 내 link href 속성이나

script의 src 속성을 통해

소스 파일의 추가가 가능하다.