분류 전체보기231 (next-intl) Next.js 15 App Router 다국어(i18n) 적용하기 - next-intl 설치부터 서버/클라이언트 컴포넌트 적용까지, TypeScript 포스팅 목차i18n이란? 다국어 지원이 왜 필요한가?Next.js App Router에서 i18n 라이브러리 비교next-intl 설치 및 기본 세팅 (App Router 기준)메시지 파일 구조 및 관리 전략서버 컴포넌트 vs 클라이언트 컴포넌트에서 번역 사용법공부하면서 생겼던 의문점참고 자료1. i18n이란? 다국어 지원이 왜 필요한가?i18n(Internationalization) 은 소프트웨어를 다양한 언어와 지역에 맞게 조정할 수 있도록 설계하는 것을 의미합니다. 이름이 i18n인 이유는 Internationalization의 첫 글자 i와 마지막 글자 n 사이에 18개의 글자가 있기 때문입니다.서비스가 글로벌 사용자를 대상으로 한다면 다국어 지원은 선택이 아닌 필수입니다. 한국어만 지원하는 서비.. 2026. 3. 28. (React Query) TanStack Query v5 캐싱 이해하기 - staleTime vs gcTime 그리고 prefetch까지 (React + TypeScript) 포스팅 목차React Query의 캐싱이란?staleTime과 gcTime — 가장 중요한 두 가지 개념queryKey 설계 전략prefetchQuery / initialData / placeholderData공부하면서 생겼던 의문점참고 자료1. React Query의 캐싱이란?React Query는 서버에서 받아온 데이터를 메모리에 저장(캐싱) 해두고, 동일한 요청이 들어오면 서버에 다시 요청하지 않고 캐시에서 꺼내 쓰는 방식으로 동작합니다.덕분에 불필요한 네트워크 요청을 줄이고, 사용자 입장에서는 화면이 더 빠르게 그려지는 경험을 할 수 있습니다.React Query 캐싱의 핵심은 아래 두 가지 질문으로 요약됩니다.이 데이터가 아직 신선한가(fresh)? → 캐시를 그대로 쓸 것인가, 서버에 재요청할.. 2026. 3. 21. (MSW) Mock Service Worker 사용법 - 개념부터 REST API 모킹 예제까지 (React + TypeScript + Vite) 포스팅 목차MSW란 무엇인가?MSW의 동작 원리 (Service Worker)MSW 설치 및 기본 세팅 (Vite + React + TypeScript)REST API 모킹 핸들러 작성법실전 예시 — 로그인 / 게시글 목록 API 모킹개발 환경 / 테스트 환경 분리 운영법실제 서버로 전환하기 (환경변수 분리)공부하면서 생겼던 의문점참고 자료1. MSW란 무엇인가?MSW(Mock Service Worker) 는 실제 백엔드 API 없이도 네트워크 요청을 가로채서가짜 응답(Mock)을 반환해주는 라이브러리입니다.왜 필요한가?프론트엔드 개발을 하다 보면 이런 상황이 자주 생깁니다.백엔드 API가 아직 개발 중인데 프론트는 먼저 진행해야 할 때에러 응답, 로딩 상태 등 특정 시나리오를 재현하기 어려울 때Stor.. 2026. 3. 14. (Storybook v10기준) 컴포넌트 주도 개발(CDD) - 개념부터 실전 테스트까지 (React + TypeScript + Vite) 포스팅 목차CDD란 무엇인가?Storybook이란?Storybook 설치 및 기본 세팅 (Vite + React + TypeScript)Story 작성법 — Args, Controls 상세 설명실전 컴포넌트 Story 작성 (Button, Input 예시)Interaction Test / Play function 사용법공부하면서 생겼던 의문점참고 자료** 참고자료 부분에 예제 코드 github repository 주소 올려놨습니다** 1. CDD란 무엇인가?CDD(Component-Driven Development) 란 UI를 가장 작은 단위인 컴포넌트부터 만들어 올라가는 개발 방법론입니다.쉽게 말하면, 레고 블록을 조립하듯 작은 컴포넌트를 먼저 만들고 → 그것들을 조합해서 페이지를 완성하는 방식이에요... 2026. 3. 6. (RSC) React Server Components(Next.js + App Router) 가이드 - 개념부터 실전까지 포스팅 목차1. RSC란 무엇인가?2. 기존 SSR에 대해서 - Next.js + Page Router 기준3. RSC의 장점과 어떻게 사용할지?4. (보충) CSR VS SSR VS RSC 비교5. 실무 활용 가이드6. 공부하면서 생겼던 의문점7. 참고 자료1. RSC란 무엇인가? React Server Components의 정의RSC(React Server Components)는 React 18부터 공식 지원되는 서버 전용 컴포넌트입니다.Next.js가 필수이고 Next.js + App Router에서만 실용적으로 사용이 가능합니다. "Server Component" 단어를 통해 CSR보다는 SSR(Server Side Rendering)에 용이할 것을 예상할 수 있습니다. 기존에는 Next.js .. 2025. 11. 13. (react-query)useInfiniteQuery로 무한스크롤 구현하기 (상세 설명, React with Typescript) 포스팅 목차1. 구현 완료 후 영상2. 필요한 라이브러리 정리3. 코드와 함께 상세 설명4. 전체 코드 및 주석1. 구현 완료 후 영상 * 해당 영상은 "네트워크 > 느린 4G" 환경에서 찍은 영상입니다.(데이터를 불러올 때의 UI도 보여드리기 위함) 2. 필요한 라이브러리 정리 "@tanstack/react-query": "^5.59.16", 설치 방법npm i @tanstack/react-query tanstack/react-query 공식 문서 : https://tanstack.com/query/latest/docs/framework/react/installation 3. 코드와 함께 상세 설명1. Request&Response 값 타입 정의backend에서 받아오는 response 값과 requ.. 2024. 10. 29. 이전 1 2 3 4 ··· 39 다음
