[express] 서버에서 정적파일(css, js)을 사용하는 법

 

express 사용시 client쪽 html파일에서는 기존 참조하던 방식으로는 css와 js파일을 불러올 수 없다.

 

따라서 express의 static 미들웨어 함수를 사용해서 css, js파일들을 직접 전달할 수 있다.

 

//정적파일 참조를 위한 static 미들웨어함수

app.use(express.static(path.join(__dirname, '../../client/src')));

1. 여기서 app = express()이고, express 의 use 메서드를 사용해 static 미들웨어함수를 사용했다.

 

2. expressd의 내장 모듈인  path모듈의 join 메서드를 사용, 정적경로를 설정해주었다. (__dirname = 현재 디렉토리 경로)

 

//client/src/js 안 js파일들 사용가능

<script src="/js/sns-share.js" defer></script>
<script src="/js/item-info.js" type="module" defer></script>

 

이제 정적경로('../../client/src')를 설정해줬기 때문에 html에서 정적경로는 생략하고 나머지 하위경로만 설정함으로써

css, js파일을 불러올 수 있게됐다.