많은 사이트에서 글을 작성하고나 편집할 때, 페이지 이동시 알림 창을 띄우는 UI를 많이 봤습니다. 해당 기능을 개발하면서 생각보다 골치 아팠고 처음 알게 된 처리방법을 찾아 포스팅을 해보려 합니다- 구현 요구사항에 따른 처리 프로세스는 크게 세 가지가 있어요. Link 컴포넌트를 통한 이동 막기 새로고침 이동 막기 뒤로 가기 막기 하나 씩 살펴보겠습니다- Link를 통한 이동 막기 next/router 자체에서 라우팅 이벤트를 제공하고 있어요. next/router | Next.js Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook. nextjs...

React-query 란 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 제공해주는 라이브러리로 알려진 react-query에 관해 간단하게 공부해보았습니다. 기존 상태 관리 라이브러리 redux 및 RTK를 사용해오면서 비동기 로직을 처리 부분에서 클라이언트 데이터와 서버 데이터가 뒤섞이고 어느 순간 방대한 로직이 되어버려 로직 파악이 힘들어지고 state 관리가 힘들어지는 상황을 몇 번 직면하였습니다. 이에 대한 해결 방안으로 react-query가 사용된다고 하네요. react-query의 최대 강점이 서버, 클라이언트 데이터를 분리해주는 것으로 이해했습니다. 이외에도 react-qeury의 장점으로는 아래와 같이 있습니다. 캐싱 자동 refreshing get을 한 데이터에 대해 up..

+ 해당 포스팅은 next@12.x 버전의 내용입니다. Next js에서 URL 파라미터의 유효성을 검사하여 리디렉션 시키는 과정에서 고민이 생겨 간단하게 포스팅을 남겨보려 합니다. 요구사항은 페이지가 렌더되기 전에 유효성을 검사하여 /404 로 리디렉션 시켜라 였습니다. Next js의 SSR을 이용하면 쉽게 getServerSideProps 함수를 이용하여 렌더 전에 서버에서 검사하여 redirect 시킬 수 있었습니다. 그렇다면 서버사이드가 아닌 클라이언트 단에서 렌더 전에 redirect 시킬 수 있을까? 에 대한 질문에 바로 대답을 못하는 것을 느끼고 next의 렌더링 과정에 대한 이해가 부족하다 생각했고 공부해보게 되었습니다. 단순하게 클라이언트에서 useRouter로 redirect 시킨다면..

소셜 로그인 중 가장 대표적으로 사용되는 것이 카카오 로그인입니다. 개발 문서도 자세히 나와있어서, 저도 카카오 로그인을 택했습니다 다만 보안 강화를 위해서 JWT를 추가적으로 이용하였습니다 :-D 카카오 로그인 토큰 Access Token 사용자를 인증합니다. Android, iOS : 12시간 JavaScript: 2 시간 REST API : 6시간 Refresh Token 일정 기간 동안 다시 인증 절차를 거치지 않고도 액세스 토큰 발급을 받을 수 있게 해 줍니다. 2달 유효기간 1달 남은 시점부터 갱신 가능 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers...

💻 react-redux 기존에 리액트에서 리덕스 사용 👉 useEffect 훅 & useReducer 훅을 사용하여 상태값을 업데이트 react-redux 👉 useSelector 훅으로 상태값 업데이트 , 자동으로 값 변경시에만 렌더링 가능 App 컴포넌트 Provider에 store를 넘겨 사용 : 액션 처리 시, 이벤트를 받아 하위 컴포넌트가 렌더링 되도록 import React from 'react'; import FriendMain from './friend/container/FriendMain'; import TimelineMain from './timeline/container/TimelineMain'; import { Provider } from 'react-redux'; import s..

💻 리덕스 란? 상태관리 라이브러리입니다. 자세한 내용은 이전 포스팅에서 다뤘기에 생략하겠습니다. https://keeper.tistory.com/27 [우아한 테크러닝 4기] redux 구현해보기 안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux keeper.tistory.com 이 리덕스 사용의 장점은 아래와 같습니다. 컴포넌트 코드로부터 상태관리 코드 분리 미들웨어를 이용한 다양한 기능 추가 - redux-saga - 로컬 스토리지에 데이터 저장 및 불러오기 SSR시 데이터 전달이 간편 리덕스 상태값은 하나의 객체로 표현가능하여, 해당 객체만..