next.js

두 차례 성능 최적화를 진행하고 측정했던 성능 점수입니다. 지난 이야기... 👇 [Next.js] 페이지 성능 개선하기 2 - 번들 사이즈 개선, Tree Shaking 지난 시간에 측정했던 성능 점수입니다. (모바일 기준) 지난 시간에 성능 개선을 시도했던 흔적 👇 [Next.js] 페이지 성능 개선하기 1 - Next/image, CSS 프리로드 최근 들어 성능 최적화에 대한 고민을 cheolsker.tistory.com 이번 포스팅으로 이번 시리즈(?)를 마무리해볼까 합니다. 배너 이미지(LCP)가 늦게 렌더링 되는 원인은 API 호출 후, 이미지 링크를 받아오기 때문인데요. 이 API를 사전에 호출하면 LCP를 개선해볼 수 있을 것 같습니다. 이 프로젝트는 React-Query를 사용하고 있고, ..

최근 들어 성능 최적화에 대한 고민을 많이 해보고 싶어서, 성능 최적화를 해봐야 겠다는 생각이 들었습니다. 예전에 진행했던 프로젝트 중 하나가, Lighthouse 점수가 낮게 나와서 몇 가지 개선을 통해 성능 개선을 하려고 합니다. 이 프로젝트는 Next 12 버전을 이용하여 개발되었고, HTTP/2 프로토콜을 사용하고 있습니다. 앱 서비스이기 때문에, Lighthouse에서 모바일 기준으로 성능 검사를 진행하였습니다. Lighthouse를 이용한 성능 점수 확인 이 페이지는 이미지가 굉장히 많습니다. 상단에 배너 슬라이드를 통해 여러 개의 이미지가 보여지고, 뷰포트 아래에도 섹션별로 많은 이미지를 로드합니다. LCP도 무려 15.8초가 걸립니다.. 일단은 이미지 로드에 대한 개선이 확실히 필요할 것 ..

Storybook 이란? 스토리북(Storybook)은 컴포넌트의 다양한 경우를 정리할 수 있도록 도와주는 시각화 도구(tool)입니다. 예를 들어, 버튼 컴포넌트가 있다고 하면 상태(데이터)에 따라서 UI나 액션이 달라질 수 있습니다. variant 값이 primary이면 일반 버튼, dashed이면 점선이 있는 버튼으로 버튼 UI를 표현할 수 있습니다. 스토리북과 같은 도구 없이도 컴포넌트를 개발할 수 있지만, 점점 늘어나는 컴포넌트들을 한 눈에 정리하는 것은 쉽지 않습니다. 스토리북은 컴포넌트들을 시각적으로 정리할 수 있게 도와줄 뿐만 아니라, 컴포넌트의 구현 코드를 문서화해줍니다. 디자이너와 협업할 때 컴포넌트의 UI가 잘 구현되었는지 피드백을 받을 수 있으며, 다른 개발자와 협업할 때는 컴포넌트..

개요 서비스를 운영하다 보면, 로그를 쌓을 일이 많이 생길 텐데요. 페이지별 로그도 쌓아야 하는 경우가 생깁니다. Next.js에서는 Custom App 페이지를 (_app.jsx 또는 _app.tsx) 제공하고 있는데요. Custom App 페이지에서 페이지에 공통적으로 사용할 로직을 적용할 수 있습니다. Next.js에서 제공하는 router를 통해 URL pathname을 파악할 수 있는데요. 페이지 path를 파일로 관리하여 router pathname과 비교하면, 어떤 페이지인지 알아낼 수 있습니다. 프로젝트 구조 예시 페이지 & 페이지 pathname 메인 : /main 메인 상세 : /main/[idx] About : /about 페이지 파일 생성 (pages.ts) // @/constan..

import dynamic from 'next/dynamic'; import { Suspense } from 'react'; const LazyComponent = dynamic( () => import('@/components/LazyComponent') ); export default function MainPage() { return ( ); } 위와 같이 Next.js에서 제공하는 dynamic(Dynamic Import)을 이용하면, 컴포넌트를 지연 로딩할 수 있어서 Suspense와 같이 사용하려고 했었는데요. 계속 테스트를 진행해도, Suspense의 fallback 컴포넌트가 보이질 않았습니다... next/dynamic is a composite extension of React.lazy..

프로젝트를 만들고 개발을 진행하다 보면, 파일이 점진적으로 늘어나면서, 폴더 구조를 어떻게 잡아야 하는 지에 대한 고민이 생기곤 합니다. 작은 프로젝트면 폴더 구조를 바로바로 바꿀 수도 있지만, 규모가 어느 정도 커지면 폴더 구조를 변경하기 어렵게 됩니다. 여러 프로젝트를 진행하면서, 저는 나름대로 폴더 구조를 다음과 같이 구성해야 겠다고 결정을 했습니다. 아래는 VSCODE 에디터에 캡쳐한 사진입니다. - apis - components - constants - containers - fixtures - hooks - interfaces - pages - public - slices - styles - utils apis API 들을 모아 놓은 폴더입니다. 타입스크립트를 사용한다면, *.ts 형태의 ..

create-next-app을 이용해서 새로운 Next.js 프로젝트를 만들고, 개발을 진행했습니다. 프로젝트에서는 Emotion.js를 사용하고 있는데요. 개발을 잘 진행하고 있다가, 다음과 같은 문제가 발생했습니다. 다음과 같은 코드를 보시면, HTML 요소를 스타일링 해줄 때, 다음과 같이 CSS 선택자를 이용하는데요. ...생략 하이 div p { color: red; font-weight: bold; } Component Selector(컴포넌트 선택자)란 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링을 하는 것을 의미합니다. import styled from '@emotion/styled'; const Child = styled.div` color: red;..

Next.js 환경에서 Jest + Cypress를 구축하는 도중에 문제가 발생했습니다. Jest로 만든 테스트 코드 (*.test.ts | tsx) 는 문제없이 타이핑 및 자동완성이 잘 되는데, Cypress로 테스트 코드 (*.spec.ts) 를 작성할 때 타이핑 및 자동완성이 되지가 않습니다. Cypress를 이용한 E2E 테스트 코드는 보통 cypress 디렉토리 내에 작성하게 되는데, cypress 디렉토리 내부의 테스트 코드들이 루트 디렉토리의 tsconfig.json의 설정에 영향을 받고 있기 때문입니다. // /tsconfig.json { "compilerOptions": { ... // 다른 설정 }, "exclude: [ ... // 다른 설정 "cypress" ] } 루트 디렉토리의 ..