Link: https://ykss.netlify.app/translation/react_router_take_on_rsc/?utm_source=substack&utm_medium=emailTLDR리액트 라우터가 서버 컴포넌트(RSC) 지원을 추가하고 있다. 리액트 라우터의 RSC 접근 방식에 대해 알려준다.리액트 라우터 앱에서 RSC 활성화 방법부터, RSC 도입 전 사용하던 loader의 사용, 증분 마이그레이션, 서버 함수를 만드는 방법, loader에서의 RSC와 RSC 라우트 선택의 사례, 서버 컴포넌트 사용하면서 정적 빌드 가능한 점까지 언급한다. keywordreact routerloaderinsight- next.js를 따라가는 리액트 라우터의 모습이 상당히 인상적이었다.- 리액트 라우터의 ..

Tldr실무 보안 및 사용 전략1. 인증 토큰(JWT) 관리localStorage 주의: XSS(스크립트 탈취) 공격에 취약하므로 민감한 토큰 저장은 위험하다.쿠키 권장: HttpOnly 플래그를 설정하여 자바스크립트 접근을 차단하고, SameSite 옵션으로 CSRF 공격을 방어해야 한다.하이브리드 전략: 보안을 위해 Refresh Token은 HttpOnly 쿠키에, Access Token은 메모리나 sessionStorage에 두는 방식이 널리 쓰인다.2. 데이터 타입 관리Web Storage(로컬/세션)는 문자열만 저장 가능하다.객체나 배열을 저장할 때는 JSON.stringify()를, 불러올 때는 JSON.parse()를 사용해야 하며, 오류 방지를 위해 try-catch 문을 권장한다.3. ..

1. Who 발표자: 라프텔(Laftel)의 임상원 개발자.대상: React Server Component(RSC) 환경에서 TanStack Query를 효율적으로 사용하고 싶은 프론트엔드 개발자.2. When 발표 시점: FEConf2025.배경: 기존 Isomorphic React에서 **RSC(서버 중심)**로 패러다임이 회귀하고, 복잡한 상태 관리와 서버 렌더링 최적화가 동시에 요구되는 현재 시점.3. Where 사용 환경: Next.js와 같은 메타 프레임워크를 포함하여 React Server Component를 사용하는 모든 프로젝트.적용 단계: 라우트 레벨부터 말단 컴포넌트까지 이어지는 데이터 페칭(Data Fetching) 구조.4. What 핵심 주제: RSC와 TanStack Query..

TldrTanStack Query의 편리함은 유지하되, RSC의 성능 이점을 극대화하기 위해 데이터 요구사항을 라우트 레벨로 전파하여 병렬 패칭을 자동화하는 전략

1. 오늘 배운 점오늘 새로 알게 된 것Next.js Route Handlers(app/api/*/route.ts)는 서버에서 실행되는 API 엔드포인트다httpOnly 쿠키는 JavaScript로 접근할 수 없어서 XSS 공격으로부터 안전하다Route Handler가 브라우저와 외부 API 사이의 프록시 역할을 하면서 쿠키를 Authorization 헤더로 변환한다정리로그인 기능을 만들면서 처음에는 localStorage에 토큰을 저장했는데, 보안 문제 때문에 httpOnly 쿠키로 전환했다. 브라우저는 쿠키를 자동으로 서버에 보내주고, Next.js Route Handler가 이 쿠키를 읽어서 외부 API 호출 시 Authorization 헤더로 변환해준다. 카페 멤버십 카드 비유처럼, 쿠키가 멤버십..

https://yozm.wishket.com/magazine/detail/2511/ Vue+express에서 Next.js로, '숨고'의 마이그레이션 (1) | 요즘IT숨고에서 기술 부채 해결, 팀의 생산성을 개선하는 업무를 맡고 있는 프론트엔드 엔지니어 정지만입니다. 이 글에서는 서비스의 프레임워크를 Vue에서 Next로 전환한 경험을 공유하고자 합니다.yozm.wishket.comTL;DR (요약)숨고 팀은 기존 Vue2+Express 기반의 자체 구축 SSR 환경이 가진 기술 부채(LTS 종료, 유지보수 어려움, 성능 저하)를 해결하기 위해 Next.js로의 마이그레이션을 결정했다. 대규모 B2C 서비스의 안정성을 위해 페이지 URL 단위의 점진적 마이그레이션 방식을 채택했으며, 특히 SEO 유지와..

Pick of the week백엔드 속이는 프론트엔드 성능 최적화 , Optimistic UI 5W1H FrameWorkWhat(무엇인가?): 아티클의 핵심 내용 정의: 서버 응답을 기다리지 않고 사용자 액션에 대해 즉각적인 '성공 결과'를 시뮬레이션하여 UI를 업데이트하는 패턴이다.메커니즘: "요청 → 대기 → 응답 → 업데이트"의 전통적 순서를 "요청 + UI 업데이트 → 서버 응답 → 결과 확정/롤백"으로 재구성한다.비유: 요리가 나오기 전, 손님에게 "곧 나옵니다"라고 말하며 미리 밑반찬을 깔아주어 대기 시간을 즐겁게 만드는 서빙의 기술과 같다.Why(왜 중요한가?): 이 주제가 중요한 이유 INP(Interaction to Next Paint) 최적화: 구글의 핵심 성능 지표인 INP를 개선..

아티클https://yozm.wishket.com/magazine/detail/3211/ 백엔드 속이는 프론트엔드 성능 최적화, ‘Optimistic UI’ | 요즘IT구글의 'INP(Interaction to Next Paint)' 지표는 사용자 인터랙션 후 화면 업데이트 속도를 측정합니다. 2024년 3월부터 구글은 INP를 Core Web Vitals의 공식 지표로 채택했습니다. 'Optimistic UI' 패턴은 이 INP 지yozm.wishket.com TL;DROptimistic UI는 사용자가 상호작용(예: 좋아요 클릭, 메시지 전송)을 했을 때, 서버의 최종 응답을 기다리지 않고해당 액션이 성공할 것이라고 낙관적으로 가정하고 UI를 즉시 업데이트하는 패턴이다.KeywordINP (In..

1. 오늘 배운 점오늘 새로 알게 된 것Next.js 13+ App Router에서는 기본이 Server Component다'use client'를 써야만 Client Component가 된다모달, 폼 같은 인터랙티브 요소는 무조건 Client Component다정리처음에는 "모든 걸 Server Component로 만들어야 한다"는 강박이 있었다. ModalWrapper를 만들어서 Server Component를 유지하려 했지만, 모달은 useState, onClick 같은 클라이언트 기능이 필수였다. Next.js는 필요한 곳에만 'use client'를 쓰고, 나머지는 서버에서 렌더링하는 게 핵심이다. 상호작용이 없으면 서버, 있으면 클라이언트. 이게 전부다.2. 헷갈렸던 점처음에 헷갈렸던 부분"S..

아티클https://tech.kakaopay.com/post/fsd/ FSD 아키텍처 적용기 : "이 코드는 어디에 넣어야 할까?" FSD가 답해준 코드 위치의 명확성 | 카카오복잡하게 얽힌 레포지토리의 구조적 문제를 FSD 아키텍처로 해결하고, 코드 위치의 명확성을 확보하여 확장 가능한 서비스 기반을 다진 실무 경험을 담았습니다.tech.kakaopay.com TL;DR레포지토리의 복잡한 구조적 문제를 해결하기 위해 FSD(Feature-Sliced Design) 아키텍처를 도입한 경험과 그 과정에서 했던 고민들을 공유한다. FSD는 코드를 재사용 범위(Layers), 비즈니스 도메인(Slices), 기술적 목적(Segments)의 3가지 차원으로 분리하고 단방향 의존성을 강제하여, 높은 응집도와..