Frontend 썸네일형 리스트형 Next.js를 배워보자-2 페이지 & 파일 기반 라우팅 React 앱 상에서는 라우팅을 사용하기 위해서는 라우트에 관련된 다양한 컴포넌트를 react-router-dom으로부터 추가한다. 하지만 Next.js는 React 라우터를 설치하지 않고, 라우트나 페이지 구조를 정의하는 데에 JSX나 js 코드를 전혀 사용하지 않는다. Next.js에서는 React 컴포넌트 파일을 생성한다. 이후, 설정된 폴더 구조로부터 프로젝트의 라우트를 도출해 내도록 만든다. Next.js는 pages 폴더를 자동으로 확인해서 라우트 구조를 도출해 낸다. pages 내부 폴더 구조가 다음과 같다고 해보자. pages │ about.js => my-domain.com/about │ index.js => my-domain.com/ │ └─products .. 더보기 Next.js를 배워보자-1 Next.js Nextjs는 프로덕션용 React 프레임워크이다. 또한, React의 풀스택 프레임워크라고도 한다. React 자체가 이미 라이브러리인데, 이는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있다. 그래서, 대규모 프로젝트를 하는 경우 라우팅, 인증을 위한 라이브러리를 추가적으로 사용해야 한다. Nextjs는 React 상에 구축된 프레임워크이다. 라이브러리에 비해서 프레임워크는 조금 더 규모가 크다. Nextjs를 사용하게 되면 서드 파티 라이브러리를 사용하는 빈도도 줄어들게 된다. 서버 사이드 렌더링 Nextjs가 추가하는 기능 중 가장 중요한 기능은 바로 내장된 기능인 서버 사이드 렌더링(SSR)이다. 서버 사이드 렌더링은 클라이언트 측이 아닌 .. 더보기 [이미지 갤러리 병목 코드 최적화] 웹 성능 최적화까지 해보자-17 병목 코드 최적화 이미지 모달 분석 병목 코드를 찾기 위해서 Performance 패널을 이용해보자. 서비스 이용 과정에서 느리거나 문제가 있다고 판단되는 부분을 찾아서 검사해볼 것이다. 이미지 갤러리 서비스에서는 페이지가 최초로 로드될 때, 카테고리를 변경했을 때, 그리고 이미지 모달을 띄웠을 때로 크게 3가지를 알아보면 된다. 이미지를 클릭해서 이미지 모달을 띄웠을 때는 이미지도 늦게 뜨고 배경 색도 늦게 변하는 것을 볼 수 있다. 모달이 뜨는 과정에서 메인 스레드의 작업을 확인하려면, 화면이 완전히 로드된 상태로 Performance 패널의 기록 버튼을 클릭하면 된다. 그리고 이미지를 클릭해서 모달을 띄운 뒤 기록 버튼을 다시 누르면 기록이 종료된다. 페이지에서 이미지 클릭을 하면 이미지 모달이 뜬.. 더보기 [이미지 갤러리 리덕스 렌더링 최적화] 웹 성능 최적화까지 해보자-16 리덕스 렌더링 최적화 리액트의 렌더링 리액트는 렌더링 사이클을 갖는다. 서비스의 상태가 변경되면 화면에 반영하기 위해서 리렌더링 과정을 거친다. 그래서 렌더링이 오래 걸리는 코드가 있거나 렌더링하지 않아도 되는 컴포넌트에서 불필요하게 리렌더링이 발생하면 메인 스레드의 리소스를 차지해서 서비스 성능에 영향을 준다. 이번에 React Developer Tools를 사용해서 이미지 갤러리 서비스는 어떤 상황에서 리렌더링이 발생하는지, 또한 불필요한 렌더링은 없는지 분석해보자. 리렌더링 시 테두리가 나타날 수 있게 Highlight updates when components render 옵션을 클릭해서 어떤 컴포넌트가 어느 시점에 리렌더링되는지 알아보자. 확인해보면, 이미지를 클릭해서 이미지 모달을 띄울 때 모.. 더보기 [이미지 갤러리 레이아웃 이동 피하기, 이미지 지연 로딩] 웹 성능 최적화까지 해보자-15 레이아웃 이동 피하기 레이아웃 이동이란? 레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 밀리는 현상을 말한다. 이미지 갤러리 서비스를 새로고침해보면 레이아웃 이동 현상을 볼 수 있다. 이미지가 로드될 때 아래 이미지보다 늦게 로드되는 경우, 뒤늦게 아래 이미지를 밀어내면서 화면에 그려진다. Lighthouse에서는 웹 페이지에서 레이아웃 이동이 얼마나 발생하는지를 나타내는 지표로 CLS(Cumulative Layout Shift)라는 항목을 두고 성능 점수에 포함했다. CLS는 0부터 1까지의 값을 가지고, 레이아웃 이동이 전혀 발생하지 않은 상태를 0, 그 반대를 1로 계산한다. 또한 권장하는 점수는 0.1 이하이다. Performance 패널을 좀 더 살펴보면 Layout Shift라는 막.. 더보기 [이미지 갤러리] 웹 성능 최적화까지 해보자-14 이번에는 이미지 갤러리 서비스를 최적화해볼 것이다. 초기 페이지에서는 여러 이미지들을 그리드 형태로 보여준다. 이미지 위 필터링 버튼도 있고, 특정 이미지 클릭 시 클릭한 이미지가 모달 창으로 나타난다. 모달의 배경 색 또한 이미지 색상과 비슷한 색으로 맞춰지도록 했다. 이번에는 다음과 같은 기법을 학습할 것이다. 이미지 지연 로딩 레이아웃 이동 피하기 리덕스 렌더링 최적화 병목 코드 최적화 이미지 지연 로딩 이전에는 Intersection Observer API를 이용했는데 이번에는 npm에 등록되어 있는 이미지 지연 로딩 라이브러리를 이용해서 적용해볼 것이다. 레이아웃 이동 피하기 레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 떨리는 현상을 말한다. 특히 이미지 로딩 과정에서 레이아웃 이동.. 더보기 [홈페이지 캐시 최적화, 불필요한 CSS 제거] 웹 성능 최적화까지 해보자-13 캐시 최적화 이때까지 최적화한 서비스를 Lighthouse를 통해 검사해보자. Diagnostics 섹션의 Serve static assets with an efficient cache policy라는 항목이 있다. 이 항목은 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 의미이다. Network 패널에서 위 리소스 중 하나를 확인해보면 응답 헤더에 캐시에 대한 설정인 Cache-Control이라는 헤더가 없는 것을 알 수 있다. npm run start로 실행한 서버에는 캐시 설정이 제대로 되어 있지 않은 것이다. 캐시의 종류 웹에서 사용하는 캐시는 크게 두 가지로 구분할 수 있다. 메모리 캐시와 디스크 캐시이다. 메모리 캐시: 메모리에 저장하는 방식이다. 여기서 메모리는 RAM을 의미한다. .. 더보기 [홈페이지 동영상 최적화, 폰트 최적화] 웹 성능 최적화까지 해보자-12 동영상 최적화 동영상 콘텐츠 분석 이번에는 이미지와 비슷한 동영상을 최적화해보자. Network 패널에서 동영상이 다운로드되는 과정을 살펴보자. 동영상 파일은 이미지처럼 하나의 요청으로 모든 영상을 다운로드하지 않는다. 일단 동영상 콘텐츠 특성상 파일 크기가 크기 때문에 당장 재생이 필요한 앞부분을 먼저 다운로드한 뒤 순차적으로 나머지 내용을 다운로드한다. 그래서 동영상 콘텐츠의 다운로드 요청이 여러 개로 나뉘어 있는 것이다. 하지만 동영상 파일 자체가 크다 보니 재생하기까지 꽤 오래 걸린다. Performance 패널을 통해 확인해보면 일정 시간 동안 동영상 콘텐츠가 다운로드되고 그 이후에야 재생이 되는 것을 볼 수 있다. 또한, assets 폴더에 있는 동영상 파일을 확인해보면 파일 크기가 51.9M.. 더보기 이전 1 2 3 4 5 다음
