24/01/19 TIL __ ejs 에서 js파일 인식이 안될때(nest.js)

 

 

간단한 문제였는데, 삽질을 좀 해서 기록에 남긴다. 

 

🧐  상황

socket io를 이용해서 채팅기능 테스트를 해보려고 브라우저를 봤는데 콘솔이 전혀 찍히고 있지 않았다. 

뭔가 이상했다. 

어떤 에러도 나오지 않았다. 

 

ejs파일에 콘솔을 찍어보니( script태그 내부) 콘솔은 찍히는데,

src로 가져오는 js파일에 만든 콘솔은 안찍혔다. 

 

 

🐕 시도

1. 경로를 확인했다.

현재 파일구조는 아래와 같다. 

views
 ┣ js
 ┃ ┗ chat.js
 ┣ modules
 ┃ ┣ footer.ejs
 ┃ ┣ header.ejs
 ┃ ┣ section.ejs
 ┃ ┗ sideBar.ejs
 ┣ channelInfo.ejs
 ┣ live-provide-page.ejs
 ┣ livePage.ejs
 ┗ main.ejs
 src
 ┣ auth
 ┃ ┣ dto
 ┃ ┃ ┗ req.auth.dto.ts
 ┃ ┣ guards
 ┃ ┃ ┣ jwt-auth.guard.ts
 ┃ ┃ ┗ kakao.guard.ts
 ┃ ┣ interfaces
 ┃ ┃ ┗ after-auth.ts
 ┃ ┣ strategies
 ┃ ┃ ┣ jwt.strategy.ts
 ┃ ┃ ┗ kakao.strategy.ts
 ┃ ┣ auth.controller.ts
 ┃ ┣ auth.module.ts
 ┃ ┗ auth.service.ts
 ┣ chat
 ┃ ┣ dto
 ┃ ┃ ┣ create-chat.dto.ts
 ┃ ┃ ┗ update-chat.dto.ts
 ┃ ┣ schema
 ┃ ┃ ┗ chat.schema.ts
 ┃ ┣ chat.controller.ts
 ┃ ┣ chat.gateway.ts
 ┃ ┣ chat.interface.ts
 ┃ ┣ chat.module.ts
 ┃ ┗ chat.service.ts
 ┣ common
 ┃ ┣ decorator
 ┃ ┃ ┣ role.decorator.ts
 ┃ ┃ ┗ user.decorator.ts
 ┃ ┗ types
 ┃ ┃ ┗ userRoles.type.ts
 ┣ live
 ┃ ┣ dto
 ┃ ┃ ┗ req.live.dto.ts
 ┃ ┣ entities
 ┃ ┃ ┗ live.entity.ts
 ┃ ┣ live.controller.ts
 ┃ ┣ live.module.ts
 ┃ ┗ live.service.ts
 ┣ main
 ┃ ┣ dto
 ┃ ┃ ┗ req.search.dto.ts
 ┃ ┣ main.controller.ts
 ┃ ┣ main.module.ts
 ┃ ┗ main.service.ts
 ┣ user
 ┃ ┣ entities
 ┃ ┃ ┣ channel.entity.ts
 ┃ ┃ ┗ user.entity.ts
 ┃ ┣ user.controller.ts
 ┃ ┣ user.module.ts
 ┃ ┗ user.service.ts
 ┣ app.controller.ts
 ┣ app.module.ts
 ┗ main.ts
 public
 ┣ imgs
 ┃ ┣ crown.png
 ┃ ┗ trophy.png
 ┣ script
 ┃ ┣ channelInfo.js
 ┃ ┣ chat.js
 ┃ ┗ main.js
 ┣ styles
 ┃ ┗ common.css
 ┗ index.html

 

livePage.ejs 파일은 views폴더에 있고 , 연결하고 싶은 파일은 public폴더 내부 js폴더 내부에 존재했다. 

따라서 아래와 같이 설정하는게 맞다고 생각 했다.  

<script src="../public/script/chat.js"></script>

 

이상이 없다고 생각해서 다른 문제를 찾아봤다. 

 

 

 

2. script src = '' 이 부분의 위치를 바꿧다.

 

처음에는 ejs파일 하단에 위치해 있었는데, 

이것을 상단 헤더로 옮겨보고, body로 바꿔봤다. 

여전히 콘솔이 찍히지 않고, 어떤 에러도 나오지 않았다. 

 

 

 

3. main.ts파일에 설정 부분을 확인했다.

 

공식문서에 나온것과 동일했고, 우리의 폴더구조 때문에 살짝 다르긴 했지만 문제 없었다. 

    app.useStaticAssets(join(__dirname, '../..', 'public'));
    app.setBaseViewsDir(join(__dirname, '../..', 'views'));
    app.setViewEngine('ejs');

 

 

 

4. 폴더구조가 문제인가 싶어서 폴더 구조를 확인했다. 

 

찾아보니 폴더구조 또한 문제가 없다고 판단되었다. 

 

 

5. 스텍오버 플로우 및 다른 사이트를 다시 찾아봤다. 

 

분명 경로가 문제일 것 같았다. 

절대경로 를 시도하라는 글을 봐서 시도했다. 

<script src="/public/script/chat.js"></script>

 

작동하지 않았다. 

 

 

 

 

🫠  해답은 여기에 있었다. 

 app.useStaticAssets(join(__dirname, '../..', 'public'));

 

 

이 내용은 정적파일을 가져올 루트를 지정해주는건데,

public 디렉토리 를 적어주었기 때문에,

클라이언트 측에서는 절대경로를 public 이후의 경로로 설정해야만 한다. 

 

따라서 절대경로는 

<script src="/script/chat.js"></script>

 

 

이렇게 해야만 했던것!!!!!

 

 

 

ejs 설정 부분에 대한 개념이 없어서 발생한 일인 것 같다. 

마냥 절대경로 상대경로가 아니라,

설정경로에 따라 달라질 수 있다는 점을 유념해야 겠다.