Coding/내일배움캠프

[내일배움캠프] 최종 프로젝트 Day 30 | Node.js 4기 | Day 111 | 24.04.24.(수)

_Woo_ 2024. 4. 25. 01:15 
03.EJS
- es-project
    - node_modules
    - src
        - views/mission
            - templates
                - createMission.ejs
                - missionDetail.ejs
            - mission.controller.spec.ts
            - mission.controller.ts
            - mission.module.ts
            - mission.service.spec.ts
            - mission.service.ts
        - stash
            - 08.missionDetail.css
            - 08.missionDetail.html
            - 09.createMission.css
            - 09.createMission.html
        - app.controller.spec.ts
        - app.controller.ts
        - app.module.ts
        - app.service.ts
        - main.ts
    - test
        - app.e2e-spec.ts
        - jest-e2e.json
    - .eslintrc.js
    - .gitignore
    - .prettierrc
    - nest-cli.json
    - package-lock.json
    - package.json
    - README.md
    - tsconfig.build.json
    - tsconfig.json

 

 

이 오류 메시지는 NestJS 애플리케이션에서 EJS 뷰를 렌더링하려 할 때 발생했습니다. 구체적으로는 "mission/templates/createMission.ejs" 뷰를 "/Users/_woo_s.j/Desktop/wireframe/03. EJS/ejs-project/views" 디렉토리에서 찾을 수 없다는 내용입니다. 이 문제를 해결하기 위한 구체적인 접근 방법을 다음과 같이 설명드리겠습니다.

오류 원인 파악하기

  1. 경로 설정 오류: setBaseViewsDir을 설정할 때 제공된 경로가 정확하지 않거나 예상하는 디렉토리 구조와 다를 수 있습니다. NestJS는 설정된 기본 뷰 디렉토리를 기준으로 파일을 찾습니다.
  2. 파일명 또는 경로명 대소문자 구분: 파일 시스템에 따라 대소문자를 구분하는 경우가 있습니다. 따라서 실제 파일 경로와 코드에서 참조하는 경로가 정확히 일치하는지 확인해야 합니다.
  3. 파일 누락: 실제로 "mission/templates/createMission.ejs" 파일이 해당 경로에 존재하지 않을 수 있습니다.

해결 방법

  1. 경로 확인: 먼저, "/Users/_woo_s.j/Desktop/wireframe/03. EJS/ejs-project/views" 디렉토리 안에 "mission/templates/createMission.ejs" 파일이 실제로 존재하는지 확인합니다.
  2. 대소문자 확인: 파일 및 디렉토리 이름의 대소문자가 정확히 일치하는지 확인합니다. 대소문자가 일치하지 않으면 수정해야 합니다.
  3. 기본 뷰 디렉토리 설정 확인: NestJS 애플리케이션에서 setBaseViewsDir로 설정한 경로가 올바른지 확인합니다. 만약 여러 디렉토리를 설정해야 한다면, 배열 형태로 경로들을 제공할 수 있습니다. 예를 들어:
    typescript

    app.setBaseViewsDir([join(__dirname, '..', 'views'), 'another/path']);


  5. 경로 설정 방법 확인: join(__dirname, '..', 'views')를 사용하여 경로를 설정하는 경우, __dirname은 현재 파일의 위치를 기준으로 합니다. 따라서, 실제 경로를 잘못 계산하고 있을 수 있으니, 경로 계산 방식이 올바른지 다시 한 번 확인해 보세요.
  6. 코드 내 참조 경로 확인: 뷰를 렌더링하는 코드에서 사용된 경로가 기본 뷰 디렉토리에 대한 상대 경로로 올바르게 설정되었는지 확인합니다. 예를 들어, app.setBaseViewsDir(join(__dirname, '..', 'views'))로 설정했다면, 뷰를 렌더링할 때는 단순히 res.render('mission/templates/createMission')와 같이 파일 경로만 지정해야 합니다.

위 단계들을 체계적으로 확인하고 수정함으로써 문제를 해결할 수 있습니다. 문제의 원인이 명확하지 않은 경우, 경로 설정과 관련된 코드 부분을 다시 한 번 꼼꼼히 검토하는 것이 좋습니다.

 

 

dist 폴더에 ejs가 안 들어가면 어떻게 해?

 

 

NestJS 및 Node.js 프로젝트에서 TypeScript를 사용할 때, TypeScript 컴파일러는 기본적으로 .ts 파일들만 .js 파일로 변환하여 dist 폴더에 넣습니다. 따라서, .ejs 파일들 같은 정적 파일들은 TypeScript 컴파일 과정에서 자동으로 dist 폴더로 복사되지 않습니다. 이러한 문제를 해결하기 위해서는 몇 가지 방법을 사용할 수 있습니다.

1. 직접 복사

가장 간단한 방법은 .ejs 파일들을 수동으로 dist 폴더에 복사하는 것입니다. 그러나 이 방법은 개발 과정에서 자주 반복해야 하므로 비효율적일 수 있습니다.

2. npm 스크립트 사용

package.json 파일에 커스텀 스크립트를 추가하여 빌드 프로세스의 일부로 .ejs 파일들을 자동으로 복사할 수 있습니다. 예를 들어, copyfiles 패키지를 사용하는 방법입니다.

먼저 copyfiles 패키지를 개발 의존성으로 설치합니다.

bash

 

npm install copyfiles --save-dev

그런 다음, package.json에 빌드 스크립트를 추가합니다.

json

 

"scripts": {

  "build": "tsc && copyfiles -u 1 src/**/*.ejs dist",

  "start": "node dist/main"

}

 

이렇게 하면 npm run build 명령어를 실행할 때 TypeScript 컴파일러가 .ts 파일을 변환한 후 copyfiles가 src 폴더 내의 모든 .ejs 파일을 dist 폴더로 복사합니다.

3. Webpack 또는 기타 빌드 도구 사용

프로젝트에서 Webpack 같은 모듈 번들러를 사용하고 있다면, 정적 파일을 자동으로 복사하기 위한 플러그인을 설정할 수 있습니다. 예를 들어, copy-webpack-plugin을 사용하는 방법입니다.

먼저 필요한 패키지를 설치합니다.

bash

 

npm install webpack copy-webpack-plugin --save-dev

그런 다음, Webpack 설정 파일(webpack.config.js)에 copy-webpack-plugin을 설정하여 .ejs 파일을 dist 폴더로 복사하도록 설정합니다.

javascript

 

const CopyPlugin = require("copy-webpack-plugin");



module.exports = {

  // 나머지 webpack 설정

  plugins: [

    new CopyPlugin({

      patterns: [

        { from: "src/views", to: "views" },

      ],

    }),

  ],

};

 

 

이러한 방법 중 하나를 선택하여 사용하면 .ejs 파일들을 dist 폴더에 자동으로 복사하고 관리할 수 있습니다. 프로젝트의 요구 사항과 개발 환경에 가장 적합한 방법을 선택하세요.

 

 

모집 기간 시작일만 선택되었을 경우

 

  • 챌린지 기간의 시작일이 모집 기간의 시작일보다 이르다면 경고 메시지 띄워준다.

 

모집 기간 종료일만 선택되었을 경우

 

  • 챌린지 기간의 종료일이 모집 기간 종료일보다 이르다면 경고 메시지 띄워준다.

 

모집 기간 시작일과 종료일 모두 선택되었을 경우

 

  • 챌린지 기간의 시작일이 모집 기간의 시작일보다 이르다면 경고 메시지 띄워주고, 챌린지 기간의 종료일이 모집 기간 종료일보다 이르다면 경고 메시지 띄워준다

 

[Nest] 26329  - 2024. 04. 24. 오후 11:38:44   ERROR [ExceptionsHandler] Cannot find module 'ejs'