hani hani

결론부터 말하자면, 저는 현재 프로젝트에 Jest부터 도입할 예정입니다. 이유는 먼저 간단한 유틸 함수와 컴포넌트 테스트부터 시작해 점차 복잡한 UI와 사용자 플로우, 그리고 Vitest, Cypress 등 최신 도구까지 확장해나갈 계획입니다.목차테스트 코드의 필요성테스트의 종류와 도구프론트엔드 단위 테스트 주요 도구와 방식 테스트 코드의 필요성 테스트 코드는 단순히 "잘 돌아가는지 확인"하는 것 이상의 의미를 가진다.코드 품질 보장: 버그를 미리 발견하고, 코드가 의도대로 동작하는지 검증유지보수 용이성: 코드 변경 시 기존 기능이 깨지지 않았는지 빠르게 확인자동화와 빠른 피드백: 반복적인 검증을 자동화해 실수 감소협업과 문서화: 테스트 케이스는 코드의 의도와 사용법을 명확하게 해줘 팀원과의 협업에 큰 ..

본 글은 Next.js에서 useSWR와 axios를 사용해 서버에 비동기로 데이터를 가져오는 방법을 다룬 내용입니다.  목차useSWRaxios사용해보기  useSWR데이터 페칭을 위한 Hook으로 데이터 요청과 캐싱을 쉽게 관리할 수 있도록 해준다. 이전 데이터를 유지하면서 백그라운드에서 새로운 데이터를 가져와 업데이트 하는 방식이다. 기본 형태는 아래와 같다. // 0. 설치yarn add swr// 1. import import useSWR from 'swr'; // 2. 선언 (key: '/api/user', 데이터 가져오는 함수: fetcher)const { data, error, isLoading } = useSWR('/api/user', fetcher); (필수 값은 색깔로 표시)파라미터k..

본 글은 Next.js에서 useSWRInfinite를 사용해 커서 기반 무한 스크롤을 구현한 내용입니다. 목차페이지네이션: 커서 기반 VS 페이지 기반무한 스크롤 구현 (useSWRInfinite) 페이지네이션: 커서 기반 VS 페이지 기반우선 페이지 기반과 커서 기반의 차이점 및 장, 단점에 대해 정리했다. 페이지 기반 (Page-based Pagination)페이지 번호와 오프셋(offset)을 사용해 특정 페이지의 데이터를 가져오는 방식장점구현이 간단 (페이지 번호와 오프셋을 사용해)특정 페이지 번호로 이동하기 때문에 직관적으로 사용 가능많은 라이브러리와 프레임워크에서 기본적으로 지원하는 페이지네이션 방식단점데이터가 많을 수록 비효율적데이터가 빈번하게 변경되는 경우, 데이터가 중복되거나 누락될 수..

본 글은 Next.js로 프로젝트를 진행하면서 발생했던 Hydration failed 에러를 해결한 방법에 대해 다룬 내용입니다. 목차 1. 에러 발생 2. 원인 3. 해결 방법 1. 에러 발생 소개 페이지에서 로그인 유무에 따라 버튼을 다르게 보이도록 처리하는 과정중에 아래 에러가 발생했다. 2. 원인 에러 원인을 한 줄로 간단하게 정리하자면, 서버와 클라이언트에서 렌더링된 HTML이 일치하지 않아서이다! 위의 내용을 이해하기 위해서는 Next.js가 서버 사이드 렌더링(SSR)이라는 것을 잊지 말아야 한다. SSR은 클라이언트와 서버의 렌더링 사이의 일관성을 유지하기 위해 hydrate 과정을 사용한다. hydrate 서버에서 생성된 HTML과 클라이언트 측 JS 코드 간의 일치 여부를 확인 후, 그..

export function getSession(key: string) { // Next.js는 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문에 window 객체의 존재 여부 확인 후 접근할 수 있도록 함. const token = typeof window !== "undefined" ? sessionStorage.getItem(key) : null; return token && token.trim() !== "" ? token : ""; } 요즘 지인들과 Next.js 사용해서 프로젝트 진행중인데, 발생했던 문제를 기록해두면 좋을 거 같아 글을 쓴다. 문제 발생 초반에는 Cookie에 토큰 정보를 저장했었는데 팀원들과 논의한 결과 보안측에서 장점이 있는 세션 스토리지(Session St..