개발공부
-
[Next.js] useSWR + axios로 비동기로 데이터 가져오기개발공부/Next.js 2024. 5. 26. 16:19
본 글은 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)개발공부/Next.js 2024. 5. 18. 21:32
본 글은 Next.js에서 useSWRInfinite를 사용해 커서 기반 무한 스크롤을 구현한 내용입니다. 목차페이지네이션: 커서 기반 VS 페이지 기반무한 스크롤 구현 (useSWRInfinite) 페이지네이션: 커서 기반 VS 페이지 기반우선 페이지 기반과 커서 기반의 차이점 및 장, 단점에 대해 정리했다. 페이지 기반 (Page-based Pagination)페이지 번호와 오프셋(offset)을 사용해 특정 페이지의 데이터를 가져오는 방식장점구현이 간단 (페이지 번호와 오프셋을 사용해)특정 페이지 번호로 이동하기 때문에 직관적으로 사용 가능많은 라이브러리와 프레임워크에서 기본적으로 지원하는 페이지네이션 방식단점데이터가 많을 수록 비효율적데이터가 빈번하게 변경되는 경우, 데이터가 중복되거나 누락될 수..
-
[Next.js] Zod + React Hook Form 사용해 회원가입 페이지 만들기개발공부/Next.js 2024. 4. 3. 15:58
본 글은 Next.js에서 Zod + React Hook Form을 사용해 회원가입 페이지를 만든 방법을 다룬 내용입니다. 다양한 프로젝트 진행하면서 항상 회원가입 페이지는 직접 구현했었는데, 주변에서 간편한데 성능 좋은 라이브러리 조합이 있다고 추천해줘서 사용해봤다. 사용해보니 정말 간편하게 회원가입 기능을 만들 수 있어서 다른 사람들과 함께 공유하면 좋을 거 같아서 글을 쓰게 되었다. 목차 Zod React Hook Form 실제로 적용해보기 Zod TypeScript를 우선으로 하는 스키마 선언 및 유효성 검증 라이브러리이다. 스키마 검증에 사용하며, 사용자 등록 양식을 캡슐화하여 관리한다. 장점으로는 강력한 유효성 검사 → 유효성 검증 후 값을 리턴, 타입을 자연스럽게 추론 가능 쉬운 사용 → 직..
-
[React] fetch와 axios개발공부/React 2024. 3. 25. 19:23
본 글은 리액트에서 네트워크 통신을 가능하게 해주는 fetch와 axios에 대해 다룬 내용입니다 목차 fetch axios fetch JS 내장 라이브러리 Promise 기반의 인터페이스를 사용해 비동기적으로 요청을 처리 try { let response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } let data = await response.json(); console.log(data); } catch (error) { console.error('Fetch error:', error); } axios Promise 기반의 API를 사용해 비동기 요청 처리 HTTP 요청과 응답을 쉽게 ..
-
[React] useState, useReducer hook개발공부/React 2024. 3. 2. 16:24
본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능..
-
[Next.js, Node.js] 토큰 암호화 (crypto-js)개발공부/Next.js 2024. 2. 22. 14:43
본 글은 Next.js에서 crypto-js 사용해 AccessToken, Refreshoken을 암호화 및 복호화 하는 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. crypto-js란? 3. 사용 방법 1. 도입 이유 SessionStorage에 AccessToken, Refreshoken을 저장했던 이유는 Cookie에 비해 보안성이 높았기 때문이다. 하지만, 탭별로 데이터가 관리되다 보니 사용자가 매번 새로운 로그인을 해야 하는 번거로움이 발생했다. 보안도 중요하지만 사용자 경험 개선이 우선이라 판단되어 AccessToken, Refreshoken을 Cookie에 저장하기로 했다. 이때, 그냥 저장하는 게 아닌 crypto-js를 활용해 암호화해 사용자 정보가 직접적으로 노출되지 않도록..
-
[Next.js] NextAuth 사용해 카카오톡 로그인 구현개발공부/Next.js 2024. 2. 21. 10:05
본 글은 Next.js에서 NextAuth 사용해 카카오톡 로그인 구현했던 방법에 대해 다룬 내용입니다. 목차 1. 도입 이유 2. NextAuth란? 3. 사용 방법 1. 도입 이유 최근에 진행한 프로젝트에서 보안성 때문에 Token을 SessionStorage에 저장했었다. SessionStorage의 경우 Cookie에 비해 보안성이 좋지만, 브라우저 탭 별로 로그인을 해야한다는 점이 굉장히 불편했다. 팀원들과 논의한 결과, Token 저장하는 방법을 바꾸기로 결정했고, 이후 다양한 방법에 대해 찾아봤다. 쿠키에 저장 후 암호화하여 보안성 높이기 NextAuth 사용해서 관리하기 우리는 2번 방법을 채택했고, 그 이유는 아래와 같다. NextAuth는 다양한 인증 및 식별 공급자를 지원해 인증 흐름..
-
[Next.js] Hydration failed 에러 해결 (Unhandled Runtime Error)개발공부/Next.js 2024. 2. 17. 14:37
본 글은 Next.js로 프로젝트를 진행하면서 발생했던 Hydration failed 에러를 해결한 방법에 대해 다룬 내용입니다. 목차 1. 에러 발생 2. 원인 3. 해결 방법 1. 에러 발생 소개 페이지에서 로그인 유무에 따라 버튼을 다르게 보이도록 처리하는 과정중에 아래 에러가 발생했다. 2. 원인 에러 원인을 한 줄로 간단하게 정리하자면, 서버와 클라이언트에서 렌더링된 HTML이 일치하지 않아서이다! 위의 내용을 이해하기 위해서는 Next.js가 서버 사이드 렌더링(SSR)이라는 것을 잊지 말아야 한다. SSR은 클라이언트와 서버의 렌더링 사이의 일관성을 유지하기 위해 hydrate 과정을 사용한다. hydrate 서버에서 생성된 HTML과 클라이언트 측 JS 코드 간의 일치 여부를 확인 후, 그..