• 카테고리

    질문 & 답변
  • 세부 분야

    백엔드

  • 해결 여부

    미해결

프론트엔드 코드 실행시 에러가 발생합니다.

23.10.04 18:21 작성 23.10.06 19:10 수정 조회수 300

1

>> 갱신, 2023. 10. 06

해결했습니다.

https://github.com/amamov/teaching-nestjs-a-to-z/tree/frontend

위 링크 설명 따라 nestjs root 디렉토리에서 git clone 받고,

npm install, npm run dev 하니까 잘 실행되네요

$ npm run dev

> frontend@0.1.0 dev
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\.env

 

잘못된 파일을 받았던것 같습니다..

어느 질문글에서 본 링크 따라서 들어가서 받았던거로 기억하는데..

어느 글이었는지 다시 찾아도 보이지 않네요..

 

>> 질문글, 2023. 10. 04

학습자료 frontend를 다운 받았고, 이 폴더를 05 NestJS 실전 프로젝트와 같은 위치에 두었습니다.

이후 프론트엔드 코드 실행 방법 강의를 보고

frontend 디렉토리로 들어가 npm i를 입력하였습니다

admin@DESKTOP-ALLM3V0 MINGW64 ~/OneDrive/바탕 화면/learning_NestJS/frontend (master)
$ npm i
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.       
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated @types/antd@1.0.0: This is a stub types definition for antd (https://github.com/ant-design/ant-design). antd provides its own type definitions, so you don't need @types/antd installed!
npm WARN deprecated @types/axios@0.14.0: This is a stub types definition for axios (https://github.com/mzabriskie/axios). axios provides its own type definitions, so you don't need @types/axios installed!
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 368 packages, and audited 369 packages in 24s

48 packages are looking for funding
  run `npm fund` for details

15 vulnerabilities (3 moderate, 7 high, 5 critical)     

To address issues that do not require attention, run:   
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

위와 같이 경고 메세지가 나왔고...

 

이 상태에서 npm run dev를 입력하였더니

admin@DESKTOP-ALLM3V0 MINGW64 ~/OneDrive/바탕 화면/learning_NestJS/frontend (master)
$ npm run dev

> frontend@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\.env
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133790:18)
    at BulkUpdateDecorator.update (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133692:50)
    at OriginalSource.updateHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack-sources2\index.js:1:19148)
    at NormalModule._initBuildHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65772:17)
    at handleParseResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65837:10)
    at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65928:4
    at processResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65651:11)
    at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65711:5
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133790:18)
    at BulkUpdateDecorator.update (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133692:50)
    at OriginalSource.updateHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack-sources2\index.js:1:19148)
    at NormalModule._initBuildHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65772:17)
    at handleParseResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65837:10)
    at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65928:4
    at processResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65651:11)
    at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65711:5
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133790:18)
    at BulkUpdateDecorator.update (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:133692:50)
    at OriginalSource.updateHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack-sources2\index.js:1:19148)
    at NormalModule._initBuildHash (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65772:17)
    at handleParseResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65837:10)
    at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65928:4
    at processResult (C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65651:11)
    at C:\Users\admin\OneDrive\바탕 화면\learning_NestJS\frontend\node_modules\next\dist\compiled\webpack\bundle5.js:65711:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.0

위와 같은 에러가 발생하며 프론트엔드가 웹 서버가 실행되지 않고 있습니다..

이러한 상황에서는 어떻게 진행하면 좋을지 조언 부탁드립니다.

답변 2

·

답변을 작성해보세요.

0

휴고 강님의 프로필

휴고 강

2023.10.17

덕분에 해결했습니다.

해당 강의 제목 옆에 바로 다운받은 자료로는 돌아가질 않는데 이부분 수정 필요하겠네요;;

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.10.06

안녕하세요, 인프런 AI 인턴이에요. 프론트엔드 코드 실행 관련해서 도움을 드릴 수 있을까요?

프론트엔드 코드 실행 시 발생하는 에러에 대해서 알려주셨는데, npm i (또는 npm install) 명령을 실행했을 때 몇 가지 경고 메시지를 받으신 것 같네요. 이러한 경고 메시지들은 프로젝트를 구성하는 패키지들에 대한 정보를 담고 있을 뿐이므로, 주로 프로젝트를 구동하는 데에 지장을 주지 않습니다. 경고 메시지들은 패키지의 버전 갱신 등의 이유로 나타날 수 있습니다.

위의 경고 메시지를 보면, @types/antd@types/axios 패키지가 더 이상 필요하지 않다는 메시지가 나오고 있습니다. 이 패키지들은 실제로 antdaxios 패키지가 자체적으로 타입 정의를 제공하므로, 제거해도 전혀 문제가 되지 않을 것입니다. 경고 메시지로 인해 의미 없는 패키지를 설치하거나 유지하는 것보다는, 해당 패키지들을 제거하시는 것을 권장합니다.

만약 경고 메시지 이외에 에러 메시지가 나타나거나 여전히 문제가 발생한다면, 다른 에러 메시지나 상세한 내용을 알려주시면 더 자세한 도움을 드릴 수 있을 것입니다. 감사합니다.

jeongho218님의 프로필

jeongho218

질문자

2023.10.06

AI야 패키지 설치부분 말고 아래 에러 코드에서 npm run dev 입력했을때 웹 서버가 실행되지 않고 에러뜨는 부분 확인해줘