-토큰 만료와의 혈투 기록 -프론트엔드를 하다보면, 그 어떤 api보다도 나를 가장 괴롭히는게 등장한다 바로 토큰 만료(401) 이번 글은 “처음에 대충 회사 코드 ctrl c ctrl v 했다가 혼나서 결국 프로젝트 갈아엎고 다시 처음부터 axios 인터셉터 설계하게 된 이야기” 시작은 항상 \복붙이었다. 솔직히 말하면 인터셉터 만들 여유보다는 화면 구성더보기...

blank blank blank blank blank blank blank blank blank blank blank blank blank

@tanstack/react-query Optimistic Updates Tanstack Query에서 Optimistic Updates는 서버 응답을 기다리기 전에 UI를 먼저 바꿔서 체감 속도를 올리는 패턴이다. 서버가 실패하면 되돌리고, 성공하면 실제 응답으로 확정한다. 사용하는 경우 버튼을 누르자마자 리스트/카운트/좋아요 상태가 바뀌어야 할 때 삭제더보기...

blank blank blank blank blank blank blank blank blank blank blank blank blank

걷기만 했는데 꽃이 심어졌다. 어떻게 작동하는 걸까? 프론트 개발자 입장에서 추정해봤다. 위치 수집과 저장 꽃을 심기 시작하면, 앱은 사용자의 위치를 실시간으로 추적하기 시작한다. 이때 예상되는 기술 흐름은 다음과 같다: CLLocationManager를 통한 실시간 위치 수집 일정 간격으로 좌표를 샘플링하여 배열에 저장 -> 너무 가까운 위치는 무시하여 더보기...

blank blank blank blank blank blank blank blank blank blank blank blank blank

React 프로젝트를 리팩토링 하면서 Next.js로 마이그레이션을 하게 되었고, 처음으로 서버 사이드 컴포넌트(Server-side Component, SSC) 를 사용할 기회를 갖게 되었다. 기존 React에서는 React Query를 활용하여 서버의 부담을 줄이며 데이터를 관리해왔는데, Next.js에서도 기존처럼 React Query를 사용할 수 있더보기...

blank blank blank blank blank blank blank blank blank blank blank blank blank

프론트엔드 디자인 패턴: Atomic Design FSD 적용기 프롤로그: 협업을 시작하며 처음으로 현업에서 종사하는 여러 프론트엔드 개발자들과 협업을 진행하면서 다양한 프론트엔드 디자인 패턴에 대해 깊이 고민할 기회가 생겼다. 그중에서도 가장 큰 고민은 어떻게 폴더 구조를 정리하고, 컴포넌트를 재사용할 것인가? 였다. 이 과정에서 접하게 된 대표적인 디자더보기...

blank blank blank blank blank blank blank blank blank blank blank blank blank