hani hani

본 글은 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에서 Zod + React Hook Form을 사용해 회원가입 페이지를 만든 방법을 다룬 내용입니다. 다양한 프로젝트 진행하면서 항상 회원가입 페이지는 직접 구현했었는데, 주변에서 간편한데 성능 좋은 라이브러리 조합이 있다고 추천해줘서 사용해봤다. 사용해보니 정말 간편하게 회원가입 기능을 만들 수 있어서 다른 사람들과 함께 공유하면 좋을 거 같아서 글을 쓰게 되었다. 목차 Zod React Hook Form 실제로 적용해보기 Zod TypeScript를 우선으로 하는 스키마 선언 및 유효성 검증 라이브러리이다. 스키마 검증에 사용하며, 사용자 등록 양식을 캡슐화하여 관리한다. 장점으로는 강력한 유효성 검사 → 유효성 검증 후 값을 리턴, 타입을 자연스럽게 추론 가능 쉬운 사용 → 직..

본 글은 Next.js에서 crypto-js 사용해 AccessToken, Refreshoken을 암호화 및 복호화 하는 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. crypto-js란? 3. 사용 방법 1. 도입 이유 SessionStorage에 AccessToken, Refreshoken을 저장했던 이유는 Cookie에 비해 보안성이 높았기 때문이다. 하지만, 탭별로 데이터가 관리되다 보니 사용자가 매번 새로운 로그인을 해야 하는 번거로움이 발생했다. 보안도 중요하지만 사용자 경험 개선이 우선이라 판단되어 AccessToken, Refreshoken을 Cookie에 저장하기로 했다. 이때, 그냥 저장하는 게 아닌 crypto-js를 활용해 암호화해 사용자 정보가 직접적으로 노출되지 않도록..

본 글은 Next.js에서 NextAuth 사용해 카카오톡 로그인 구현했던 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. NextAuth란? 3. 사용 방법 1. 도입 이유 최근에 진행한 프로젝트에서 보안성 때문에 Token을 SessionStorage에 저장했었다. SessionStorage의 경우 Cookie에 비해 보안성이 좋지만, 브라우저 탭 별로 로그인을 해야한다는 점이 굉장히 불편했다. 팀원들과 논의한 결과, Token 저장하는 방법을 바꾸기로 결정했고, 이후 다양한 방법에 대해 찾아봤다. 쿠키에 저장 후 암호화하여 보안성 높이기 NextAuth 사용해서 관리하기 우리는 2번 방법을 채택했고, 그 이유는 아래와 같다. NextAuth는 다양한 인증 및 식별 공급자를 지원해 인증 흐름..

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

본 글을 Next.js에서 카카오 지도 오픈 API를 사용법을 다룬 내용입니다. 지도 만들기 순서를 간단하게 요약하면 아래와 같다. 카카오 지도 Key 발급 Next.tsx 파일 초기 설정 지도 그리기 카카오 지도 Key 발급 순서: 카카오 지도 페이지 접속 > 카카오로 로그인 > 내 애플리케이션 선택 > 애플르케이션 추가 및 선택 > JavaScript 키 복사 (꼭 JavaScript 키 복사해두기!) Next.tsx 파일 초기 설정 _document.tsx에서 카카오 지도 API 스크립트를 로드해야 한다! (해당 파일에서 스크립트를 로드하면 모든 페이지에 해당 스크립트가 포함되어 초기 로딩 시간 개선, 필요한 경우에만 API 활성화 가능) JavaScript 키는 아까 사이트에서 복사한 값 넣어주..

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..