TIL (Today I Learned)

[ithome / TIL - 240324] Next.js + TypeScript로 마이그레이션

Turtle-hwan 2024. 3. 25. 00:33

PR11

기존 React + JS로 개발했던 ithome 프로젝트의 Next.js + TypeScript로 마이그레이션

Next.js와 타입스크립트로 마이그레이션을 결정한 이유 => [링크 추가 예정]

그 중 이번주 까지 끝내야 할 내가 맡았던 페이지들을 Next.js + TS 환경으로 마이그레이션 하면서 겪은 것들이다.

0. 먼저 Map.js / SearchSubletInfo.js 파일을 .tsx 파일로 바꾸기.

- eslint와 vscode 오류 잡아가는 방식으로 진행. 대부분 해당하는 ts type 추가 
    => marker 나 naver.map 관련해서 type을 도무지 알 수 없는 것이 있어 임시방편으로 any를 썼는데 나중에 더 자세히 알아보고 수정해야겠다.
- 기존 React useEffect 내에서 fetch하는 코드를 그대로 가져왔더니 이를 쓰기 위해서 "use client"를 파일 최상위에 추가하라는 error가 떴다.

  • 이전에 썼던 Next.js 12 버전에서는 안 그랬던 것 같아 찾아보니,

    • Next 12에서는 기본적으로 CSR로 동작하고 getServerSideProps()를 사용해서 명시적으로 SSR을 적용해 줘야 했었다.
    • Next 14에서는 (아마도 13부터는) 기본적으로 모든 페이지가 SSR로 동작하고, 명시적으로 파일 최상위에 "use client"를 추가하면 해당 페이지는 CSR로 동작하는 것으로 이해했다.
    • 공식 docs : Next에서 확장된 fetch 사용법
      • SSR을 위해 마이그레이션 중인데 "use client"를 무작정 추가하면 의미 없는 것 같아 이런저런 방법을 고민하면서 가능한 SSR 페이지를 늘려가야겠다.

  • Next.js가 2년도 안 된 거 같은데 12 -> 14로 버전업 하면서 짧은 시간 동안 많은 변화가 있었다. 구글링 해도 각 버전에 알맞게 원하는 정보를 바로 찾기가 까다롭다. 결국 공식 문서로 회귀하게 된다... Next.js 공식 문서가 잘 관리되고 있어서 정말 다행이지..

    • 이전 프로젝트 정리 => [링크 추가]
    • CSR, SSR 차이 => [링크 추가]
    • Next.js 14에서 SSR fetch 방식, "use client" 명령어의 의미 정리 => [링크 추가]

1. url 대문자 인식 안되는 오류 발생 => 모든 app router 경로 소문자로 수정!!

  • 분명 url 경로는 대소문자 상관없는 것으로 알고 있었는데 Next app router 방식을 도입하면서, 특정 URL에 접속하면 /not-found으로 뜨면서 404 오류가 발생했다.
  • 소문자로 바꾸니 해결되어서 전부 변경했다.

2. 백엔드 / mongodb docker 켜서 프론트와 연결하는 법 복기.. (기억력의 문제로)

  • 항상 오류 기록을 남기려고 노력하는 탓에 기록은 여기저기 흩뿌려져 있는데 그걸 못 찾아서 문제다..
# docker compose up -d mongo 
    # backend만 npm run start으로 따로 키려면 backend 안의 .env에서 mongo:27017 부분이 localhost:27017 로 바뀌어야 함!!
    # mongo db를 안 키고 mongo atlas로 사용하려면 DB_URL env를 atlas 것으로 바꿔주어야 함!!
# docker compose up -d mongo backend    => 일반적인 db, back 둘 다 켜고 테스트 시
# docker compose up -d --build backend     => backend 파일 변경 후 재빌드 필요할 때

3. localhost 서버에서 ssl 인증 받아서 https로 실행할 때, ERR_CERT_AUTHORITY_INVALID 문제

  • 이유는 모르겠는데 예전에 받아둔 key.pem / cert.pem 을 백엔드 서버와 프론트 서버를 동일한 파일로 맞추니까 해결 됨!

  • ssl localhost에서 인증서 발급 참고 사이트

  • ssl 원리 및 localhost ssl 인증 원리 정리 필요,.. => [링크 추가]

4. next.js 12 등 이전 버전의 pages/_app.js 및 pages/_document.js는 app/layout.js 루트 레이아웃 하나로 대체된 관계로, meta tag 및 html head tag들은 app/layout.js 파일에서 작업!

5. global.css 로 이상하게 화면에 보이는 것 주석처리!

반응형

'TIL (Today I Learned)'의 다른글

  • 현재글[ithome / TIL - 240324] Next.js + TypeScript로 마이그레이션

티스토리툴바