CSS / JS 파일 적용 시키기

파일 경로

파일 경로는 위의 이미지처럼 지정되어있습니다.

 

app.js

// 접근 권한 설정
app.use(express.static("assets"));

app.js 파일에서 접근 권한 설정을 해주었습니다.

 

저 같은 경우에는 assets 폴더 안에 css폴더, JS폴더가 있습니다.

 

접근 권한 설정에는 최상위 폴더를 입력해주시면 됩니다.

 

 

index.ejs

   <!-- CSS 링크 -->
    <link rel="stylesheet" href="/css/index.css" />

    <!-- JS 링크 -->
    <script src="/JS/index.js" defer></script>

app.js에서 접근 권한 설정을 해주었지만 css 파일과 JS 파일이 적용이 되지 않았습니다. 

 

원인은 아래 코드와 함께 살펴보겠습니다.

   <!-- CSS 링크 -->
    <link rel="stylesheet" href="/assets/css/index.css" />

    <!-- JS 링크 -->
    <script src="/assets/JS/index.js" defer></script>

경로 앞에 최상위 폴더 assets를 붙여준 것이 원인이었습니다.

 

app.js에서 접근권한 설정에서 app.use(express.static("assets")) 으로 코드를 작성해주었기 때문에

 

링크에서 assets를 붙여주게 되면 

 

/assets/assets/css/index.css 으로 찾고,  /assets/assets/JS/index.js으로 경로를 찾게 되기 때문입니다.