1. Next.js 스타일 컴포넌트 적용.

에러 :
Prop 'className' did not match. 에러 발생.

해결 :
Next.js 에서는 따로 설정하지 않는다면, Styled-Components가 적용되지 않은 상태로 렌더링될 수 있다. 이는 간단하게 next.config.js 파일에 아래 옵션을 추가하는 것으로 해결 가능하다.

compiler: {
    styledComponents: true,
  },

2. 폰트가 깨지는 현상

에러 :
인트로에서 GPTFLIX 가 확대되면서 폰트가 깨져 보이는 상태.

시도 :
1. 구글 웹 폰트 사용.
➡ bebas Neue 폰트가 NETFLIX 폰트와 흡사하여 적용.
➡ 기존과 큰 차이 없이 깨져보임.

2. SVG 활용.
   ➡ 텍스트가 아닌 이미지인 SVG로 적용하면 확대해도 깨져보이는 증상이 없을 것으로 추측.
   ➡ 다만, NETFLIX 이미지를 그대로 써야되며 GPTFLIX로 변경 불가.

3. Redux-toolkit의 immer

이전 프로젝트에서는 redux 사용할 때 state 변경 시 불변성을 유지하고자 스프레드 연산자(...state)를 사용했다.

redux toolkit에서는 immer 라이브러리를 사용하여 불변성을 유지하므로 state 배열에 push() 메서드를 사용해서 직접 수정해도 불변성이 유지된다. 결국, redux에서는 내가 직접 새로운 배열을 복제하여 수정하고 반환했다면 toolkit에서는 immer가 내부적으로 새로운 상태를 생성하고 새로운 배열을 반환한다.

4. OpenAI 활용

에러 :

 try {
      const response = await fetch('./api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          // question: `${likeMovie}와 비슷한 ${likeGenre} 장르 영화명 하나만 말해줘`,
          question: `Tell me the name of the movie that is similar to ${likeMovie}`,
        }),
      });

body 안에 질문을 넣어 답변 요청하는데 AI 답변이 다양해서 원하는 영화 제목만 답변 받을 수 없었다.

시도 :
한국어, 영어, 특수문자 제외 등 다양하게 질문을 바꿔 시도해봤으나 원하는 답을 주지 않는 경우가 많아 영화 검색에 실패하는 경우가 많다.

5. styled-components 자동 완성 적용 불가.

에러 :
정상 사용 중에 갑자기 styled-components 에서만 스타일 자동 완성이 안 되는 증상 발생.

해결 :
styled-components 확장 프로그램 재설치, VScode 재설치, VScode Setting json 수정, tsconfig 수정 등 여러 방법을 시도한 결과 VScode 1.77 버전에서 적용이 안 되는 것으로 확인했다.
1.76 버전으로 다운그레이드 후 정상 작동되었고 업데이트 안 함!으로 설정하고 사용 중이다.😂