포트폴리오 사이트 개발 일지
1.[포트폴리오] 프로젝트 준비 및 생성
팀 프로젝트에서 사용한 경험이 있으며, 트렌디한 프레임워크와 언어이기 때문에 사용하기로 결정했습니다.Next.js 13버전부터 도입된 Turbopack은 기존 Webpack보다 더 빠른 빌드 속도를 자랑합니다. 인메모리 캐시 시스템을 도입하여 변경된 부분만 빌드하여 개
2.[포트폴리오] 프로젝트 섹션 구현: Notion API를 활용한 CMS 연동
포트폴리오 사이트의 프로젝트 섹션을 어떻게 구성할지 많은 고민을 했습니다. HTML로 직접 프로젝트 리스트를 작성할지, Markdown 파일을 이용해 작성하고 렌더러를 직접 구현할지, 아니면 외부 라이브러리를 사용할지 여러 가지 방법을 고려했습니다. 결국, 제가 선택한
3.[포트폴리오] 프로젝트 상세 페이지 구현: react-notion-x를 활용한 렌더링
처음엔 Notion API를 사용해 Page나 Block Data를 얻고, CustomRenderer를 구현해 프로젝트 상세 페이지를 구현할 생각이었습니다. 하지만 CSS에 많은 리소스가 투자될 것 같아 외부 라이브러리를 사용하기로 결정했습니다.react-notion-
4.Dark Mode 구현
5.[포트폴리오] Vercel 배포
Next.js 개발 팀에서 만든 프론트엔드 배포 플랫폼으로 Github Repo와 연동하여 웹 애플리케이션을 손쉽게 배포하고, 자동화된 CI/CD 파이프라인을 활용할 수 있습니다.또한, 자동 스케일링, 프리뷰 기능 등을 제공하며 Next.js 프로젝트에 최적화된 호스팅
6.[포트폴리오] 에러 총 정리
Github repo에 푸시 중 만난 에러입니다. 기본 버퍼의 크기를 초과하는 데이터를 전송하려고 했기 때문에 발생했습니다.명령어를 통해 기본 버퍼 크기를 500MB로 늘렸습니다기존 코드에서 종속성 배열이 빈채로 배포를 시도 했기 때문에 발생한 경고입니다.useEffe
7.[포트폴리오] 트러블 슈팅
커버 이미지의 url을 확인해보면 아래와 같은데, 우리는 X-Amz-Expires=3600에 주목할 필요가 있습니다. 1시간이면 이미지의 url은 만료가 됩니다. 만료시간 문제를 해결하기 위해 해당 페이지를 공유합니다.페이지 공유이제 공유된 페이지로 접속한 뒤 커버 이