Next.js (23) 썸네일형 리스트형 JSX 구성 요소로 사용할 수 없습니다. 컴포넌트 사용 중 오류가 발생했다. JSX 구성 요소로 사용할 수 없다는 것이 무슨 뜻일까. map 안에서 컴포넌트를 사용하고, key를 지정하고, props를 넘기는 것도 매우 일반적인 과정이었다. 그러나 void 형식을 적용할 수 없다는 오류가 발생했다. 컴포넌트로 넣은 카드에 유표성 검사를 한다고 return을 넣은 경우가 많았는데, 컴포넌트의 return은 결과를 표현하는 것이 중요했다. 도중에 조건을 걸어 return을 넣는 것은 적절한 사용법이 아니므로 다시 리펙터링이 필요하다. Next.js: youtube API 생성 새로운 프로젝트가 시작되었다. youtube API로 연결해서 코드할 때 듣기 좋은 리스트를 선별하는 것이 목적이었다. Google Debelopers Console의 라이브러리 중 youtube Data aPI v3을 선택하였다. API를 신청한 뒤 사용자 인증정보에서 API key를 얻으면 된다. 얻은 API key는 폴더의 가장 바깥에 .env 파일을 만들어 암호화한다. gitignore에 .env 파일을 넣어 github에 넣지 않도록 주의한다. query string을 이용해서 검색 기능을 만들어 주었다. youtube에 할당된 요청 수는 많지 않다. firebase처럼 생각하고 계속 요청을 보내다가는 어느새 용량 제한에 걸려버린다. 용량을 더 많이 할당받으려면 요청 서식을 보내고, 검토를 받아.. Next.js: 코드 스플리팅(Code Splitting) TTV(Time to View) : 사용자가 콘텐츠를 볼 수 있는데까지 걸리는 시간. TTI(Time to Interaction) : 사용자가 콘텐츠를 사용할 수 있는데까지 걸리는 시간. 코드 스플리팅(Code Splitting) Next.js에서는 컴포넌트를 동적으로 import하여 사용할 수 있습니다. Next.js의 번들러에서 번들 시 이러한 컴포넌트는 코드가 자동으로 나누어져 번들링 됩니다. 그 결과 실행되지 않아도 불러와졌던 컨텐츠는 런타임시 필요한 모듈만 불러올 수 있게 됩니다. 따라서 로딩 시간이 짧아지므로 TTV가 향상됩니다. 그러나 런타임시 필요한 모듈을 불러오는 형식이므로, 모듈의 크기가 클 경우에는 오랫동안 빈 화면만 나타낼 수도 있습니다. Code Splitting 1. 개요 코드 .. 이전 1 2 3 다음
