Image nextjs에서는 v10부터 별도의 Image Component를 제공한다. 사용은 해왔지만 제대로 알지 못하고 사용하는 것 같아서 정리를 해보려 한다. 기존의 html의 img 태그와는 다르게 다양한 성능 최적화 기능을 가지고 있다. 주요 목적이 최적화이기 때문에, 제공하는 기능을 적절히 사용한다면 보다 나은 프로젝트를 만들 수 있다. 주요 기능 향상된 성능 기기별로 올바른 크기의 이미지를 제공하고, 모던 이미지 포맷을 사용한 성능 개선 시각적 안정성 Cumulative Layout Shift 자동 방지 빠른 페이지 로드 뷰포트 혹은 화면에 보이는 부분에 들어갈 때만 이미지 로드 유연한 이미지 처리 원격 서버에 저장된 이미지의 경우에도 동적인 이미지 크기 조정 Props Image Compo..
Pagination (페이지네이션) 페이지네이션은 화면에 나타나는 데이터를 여러 개의 페이지별로 나눠서 보여주는 UI다. 검색결과 하단이나, 쇼핑몰 하단에서 쉽게 접할 수 있다. 보통 숫자를 선택하거나, 원하는 범위를 직접 입력하는 방식으로 구현되어 있다. 비슷한 UI로는 Infinite Scroll(무한 스크롤)이 있다.이는 페이지를 이동해서 보여주는 방식이 아닌, 한 화면에서 데이터를 아래로 끊임없이 나타나게 하는 UI다. 각각의 장단점이 있어서 기획이나 상황, 사용자의 요구에 맞게 잘 선택해서 사용해야 한다. 페이지네이션 장점 많은 양의 데이터를 쉽게 탐색하고, 원하는 섹션에 빠르게 도달할 수 있다. 데이터를 나눠서 보여주기 때문에, 로딩 시간이 느린 사이트에 유용하게 사용된다. 사용자 입장에서 컨..
Image Lazy Loading 먼저, 단어 그대로 보자면 사진을 불러오는 행위를 지연시킨다는 말이다. 웹페이지에 사진이 많은 경우에는 눈에 보여지지 않는 부분까지 불러올 필요는 없다. 실제로 눈에 보이는 부분을 먼저 불러오고, 보이지 않는 부분은 나중에 불러오는 방식이다. 긴 사진 목록을 가진 특정 웹사이트에 접속했을 때, 스크롤을 내리면서 아래 사진을 차례로 불러오는 상황을 예시로 들 수 있겠다. 이미지 요청을 최소화하여 초기 로딩시간을 단축할 수 있고, 네트워크 통신도 줄일 수 있다. 구현 방법 단순히 태그의 속성을 사용하는 방법부터, Javascript event, Web API를 사용하는 방법까지 다양한 방법이 있다. 난 그 중에 Web API를 사용하는 방법으로 구현해봤다. Intersect..
최근에 리팩토링을 진행하면서 custom hook이 하나 생겼다. 만든김에 해당 훅을 npm에 올려보기로 했다. npm에 훅을 publish 하는 과정은 아래와 같다. npm 회원가입 npm organization 생성 custom hook 폴더생성 npm init publish ! npm 회원가입 및 organization 생성 회원가입을 마치고, npm 사이트 우측 상단 프로필에서 organization을 추가할 수 있다. 프로필 클릭 -> + Add organization Custom hook 폴더 생성 프로젝트를 진행하면서 만들었던 hook이어서 올리기 위해 분리가 필요했다. custom hook의 이름으로 폴더를 만들고, 그 안에 index.js파일을 만들어서 분리했다. 그리고 앞으로 custo..
페이지를 이동했다가 다시 돌아왔을 때 스크롤 위치를 유지하는 코드이다. 새로고침을 하면 세션스토리지에서 스크롤 값을 삭제시킨다. 총 2번의 리팩토링을 진행했다. 기타 로직은 제외하고 스크롤 관련 로직으로 축약한 Component이다. 1. 처음에는 debounce로 사용자의 스크롤을 감지해서 스토리지에 담는다는 생각을 했다. 하지만 state도 자주 바뀌고, 스크롤을 하다가 클릭을 해버리면 엉뚱한 스크롤 위치로 이동하기 때문에 수정이 필요했다. 만들때에도 이 생각을 했었는데, 분리되어있는 SubComponent에 onClickHandler가 있어서 하지 못했다. ref를 넘겨서 scroll target을 잡으면 됐었는데, 엉뚱하게 window를 scroll target으로 생각하고 작업해서 감지를 하지 ..
Clean-up Clean-up함수란, useEffect()에서 parameter로 넣은 함수의 return 함수이다. Component의 unmount이전 / update직전에 어떠한 작업을 수행하고 싶다면 Clean-up함수를 반환해 주어야 한다. unmount 될 때 useEffect(func, []) 특정값 update 직전 useEffect(func, [특정값]) clean-up함수를 사용하게되면, 작동 순서는 re-render -> 이전 effect clean-up -> effect 로 실행이 된다. ex. I import React, {useState, useEffect} from "react"; import "./styles.css"; export default function App() ..