이번 포스트에서는 JWT를 사용해서 토큰 만료를 판단하고 처리하는 과정에서 겪은 고민과Axios Interceptor에서 React Hook 및 Custom Hook을 사용하기 위해 고민했던 과정을 담았습니다.해당 프로젝트에서는 주어진 백엔드 api를 이용해서 유저기능

앞선 포스팅에선 공통 컴포넌트를 만들기 위한 첫번째 방법인 도메인 로직과 뷰를 분리하는 방법에 대해서 알아보았다. 이번에는 두번째 방법인 확장성있는 UI를 만들어보자. 이번 포스팅에서는 현재 진행중인 프로젝트에서 사용하는 버튼 컴포넌트를 예시로 들어보겠다. "버튼"

현재 프로젝트에서 로그인과 회원가입기능을 만드는 중이다. 이번 프로젝트에서는 Supabase를 사용해서 로컬로그인과 카카오 로그인을 모두 구현하고자한다. 카카오 로그인은 로그인 버튼만 하나 생성하고 내부 처리는 모두 supabase, kakao login api에

Supabase 카카오 로그인 공식문서카카오 Developer카카오 로그인 버튼 로고이번에 구현할 기능은 supabase에서 제공하는 카카오 로그인 공식문서만 정독해도 만들기 어렵지 않은 기능이다. 카카오 Developer링크에서 로그인후 카카오 로그인을 사용할 어플

스토리북(Storybook)의 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 이해가 편하실 것 같습니다.

https://tech.kakao.com/posts/344이 문제는 자카드 유사도 J(a,b) 를 설명해주고 자카드유사도 값을 직접 계산하는 프로그램을 작성하는 문제이다. 자카드 유사도를 구하는 공식은 간단하다. 교집합을 합집합으로 나눈 수이다. 이 값은 늘

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class객체를 생성할 수 잇는 템플릿(청사진, 틀)클래스를 이용해서 만든 객체를 인스턴스(instance)라고 한다.apple

| createPortal 공식문서 바로가기흥미를 끄는 리액트의 기능이 생겨 이를 알아보는 글입니다.이름도 무려 포탈이다..! 포탈이란 무엇인고? 게임을 하다보면 캐릭터가 어떤 포탈 속에 쏙 빨려들어가서 이곳에서 저곳으로 이동하게 된다.리액트 공식문서에서는 create

무한스크롤\_작은용량원티드 프리온보딩 챌린지의 사전과제로 intersection observer를 활용하여 무한스크롤 구현하기를 해보았다.사실 전에 프로젝트에서 이미 react-query의 useInfiniteQuery를 활용하여 만들어본적이

Next.js의 페이지 라우터는 page 폴더의 구조를 기반으로 한 라우팅 방식으로써, React Router 처럼 페이지의 라우팅기능을 제공한다.srcpages \- api \- \_app.tsx 페이지의 역할은 하지 않으나, Next 앱의 모든 페

증분 정적 재생성 이란, SSG 방식으로 생성된 정적 페이지를 일정시간을 주기로 다시 생성하는 기술이다.빌드타임에 생성된 페이지에 유통기한을 설정유통기한이 끝나기 전에는 계속 똑같은 페이지 응답유통기한이 끝난 이후에는 Next서버에서 다시 새로운 페이지를 정적으로 생성

이란 SSR의 단점을 보완하는 사전렌더링 방식으로 빌드타임에 페이지를 사전 렌더링해둔다.SSG에서는빌드타임에 백엔드 서버에 데이터를 요청하기 때문에 데이터의 양이 많아서 응답 속도가 느리더라도 즉,장점 ) 사전렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는

가장 기본적인 사전 렌더링 방식브라우저 접속 요청이 들어올 때 마다 사전렌더링을 진행페이지 내부의 데이터를 항상 최신버전으로 유지할 수 있음데이터 응답속도가 느려지면, 사용자는 로딩을 기다려야 함루트 페이지 컴포넌트를 서버사이드 랜더링방식으로 동작하도록 만들어 보자 i

사전렌더링 포스트에서 언급하지 않고 넘어갔던 데이터패칭부분을 정리해 보려고 한다.단점) 초기 접속 요청으로 부터 데이터 로딩까지 오랜 시간이 걸림이유 ) 컴포넌트 마운트 시점에 데이터 요청이 이루어지기 때문기존의 리액트앱에서는 FCP가 이루어진 시점 = 컴포넌트가 마운

앞서 발생한 Next.js의 사전렌더링 포스트에서 페이지 이동 전 프리패칭이라는 단어가 끼어든것을 볼 수 있다. 이것은 무엇일까?이란 현재 사용자가 보고 있는 페이지에서, 이동할 가능성이 있는 모든 페이지의 javascript 코드를 사전에 불러놓는 기능이다.예를들어

작년 9월, 팀원들과 새로운 프로젝트를 Next.js를 사용하여 구현해보던 중이었다. 그 때 당시에는 졸업 프로젝트와 학업에 떠밀려 Next.js의 여러 장점을 채 알지 못한채 기존의 CSR로 작동하는 React프로젝트처럼 사용했던 것 같다. 구현하면서도 Image최적

이번주 스터디 주제인 redux로 todolist 만들기를 진행하면서 투두리스트의 각 아이템을 만드는 컴포넌트인 Todo 컴포넌트와, Todo컴포넌트들의 목록으로 이루어진 Todolist컴포넌트를 만들면서 React.memo로 최적화 하는 코드를 알게 되었다.기존에 알

이번 주차에는 Redux를 모듈화하는 방법에 대해 공부해보았다.Todo나 User 처럼 특정 상태에 따라 분리해서 관리할 수 있다.먼저 이전의 User에 대한 경우는 ContextAPI로 관리하고 있기 때문에 투두리스트에 관한 리듀서를 만들어 보았다.만드는 순서는 다음

author: tave web study - 이정수요 문제를 해결하려고(red, green, blue 박스마다 각각 fire 버튼이 있고, 버튼을 누르면 해당 박스의 색상으로 container의 색상들이 모두 변경된다.이를 위해서는 각각의 container들이 (que

React 날짜 선택 input&calendar 컴포넌트 만들기(1) 에서 이어지는 글 입니다.사용자가 입력한 날짜가 올바른 날짜인지 확인한다.? 올바른 날짜의 조건?1\. 인풋값에 들어올 날짜는 이미 목격한 신고에 대해 접수하기 때문에 오늘 날짜보다 이후의 날짜는 들