인프런 커뮤니티 질문&답변

해당 강의 프론트앤드 빌드 방법 정리합니다.

강의 그대로 따라할 시에 제가 구성한 환경에서는 에러가 지속적으로 발생했습니다.

• 에러 정보: Error: error:0308010C:digital envelope routines::unsupported

• 환경 정보

  • OS: MacOS Ventura 13.3 베타

  • npm, npx version: 9.5.0

  • node version: v18.14.2

이에 따른 해결 방법 정리해봅니다. :)

1. 강의에 있는 git 프로젝트를 clone 한다.

2. frontenddev 폴더 접근

3. package.json 파일을 아래와 같이 작성 (dependencies 에서 antd 는 4.24.0 버전, 그 외는 2023.03.04 기준으로 최신 버전입니다. )

4. frontenddev 폴더에서 sudo npx @next/codemod new-link . 을 실행한다.

5. components/layouts/AccountForm.tsx 파일에서 <Link href="/signup"> 을 <Link href="/signup" legacyBehavior> 으로 변경

   1. Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. 해결하기 위함입니다.

   2. 참고 블로그: https://steady-learner.tistory.com/entry/Nextjs-Error-Invalid-Link-with-a-child-Please-remove-a-or-use-Link-legacyBehavior-%EC%98%A4%EB%A5%98

6. npm i 후 npm run dev 하면 실행 됨을 확인할 수 있습니다.