본문 바로가기

전체 글

Next.js를 배워보자-1 Next.js Nextjs는 프로덕션용 React 프레임워크이다. 또한, React의 풀스택 프레임워크라고도 한다. React 자체가 이미 라이브러리인데, 이는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있다. 그래서, 대규모 프로젝트를 하는 경우 라우팅, 인증을 위한 라이브러리를 추가적으로 사용해야 한다. Nextjs는 React 상에 구축된 프레임워크이다. 라이브러리에 비해서 프레임워크는 조금 더 규모가 크다. Nextjs를 사용하게 되면 서드 파티 라이브러리를 사용하는 빈도도 줄어들게 된다. 서버 사이드 렌더링 Nextjs가 추가하는 기능 중 가장 중요한 기능은 바로 내장된 기능인 서버 사이드 렌더링(SSR)이다. 서버 사이드 렌더링은 클라이언트 측이 아닌 .. 더보기
[기능 구현] 프로젝트 목록 페이지를 개발해보자. 아래 사진은 구현된 프로젝트 목록 페이지 예시이다. 왼쪽 하단 꽃 모양은 리액트 쿼리 데브 툴이니까 신경 쓰지 말자. 세부적인 기능 설명에 앞서, 동작 방식부터 알아보자. 동작 방식 먼저, 사용자가 프로젝트 생성 버튼을 누르게 되면 아래와 같이 프로젝트 생성 모달창이 뜬다. 여기서 프로젝트 이름, 진행 기간, 설명, 이미지를 추가/제거할 수 있다. 작성 완료를 누르게 되면 프로젝트 목록에 추가된다. 그리고 특정 프로젝트를 클릭하게 되면 해당 프로젝트 관리 상세 페이지로 넘어가게 된다. 해당 페이지에는 오버뷰, 회의록, 일정, 평가, 팀, 관리 탭이 있다. 아래 사진이 특정 프로젝트의 관리 상세 페이지이다. 접속하게 되면 바로 전체 일정 오버뷰가 보이게 된다. 프로젝트 관리 메인 페이지를 보게 되면 전체,.. 더보기
axios 모듈화를 해보자! 이번에는 axios 모듈화에 대해서 알아볼 것이다. axios는 서버와 통신하기 위해서 사용하는 HTTP 비동기 통신 라이브러리이다. fetch api와는 달리 추가적으로 설치 후 사용할 수 있는 라이브러리이기 때문에 별도로 설치해주었다. 기본으로 axios를 사용해서 서버로부터 데이터를 받아오는 코드는 다음과 같다. const apiUrl = 'https://fullcare.store/api/auth/project?state=ongoing'; const response = await axios.get(apiUrl, { headers: { 'Authorization': `Bearer ${accessToken}`, 'Content-Type': 'application/json' }, }) 그런데, 이 코드는.. 더보기
[이미지 갤러리 병목 코드 최적화] 웹 성능 최적화까지 해보자-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을 의미한다. .. 더보기

티스토리툴바