[팀 프로젝트] SWYP 9기

Next.js 프로젝트에서 @tanstack/react-query를 사용할 때 단순히 QueryClientProvider만 감싸는 게 아니라, 우리는 별도의 ReactQueryProvider 파일을 만들어 전역 세팅, Devtools, 상태 관리까지 함께 처리했습니다.

React에서 상태 관리하면 대부분 먼저 떠오르는 건 Redux. 하지만 이번 팀 프로젝트에서는 더 가볍고 간단한 전역 상태 관리 라이브러리인 Zustand를 도입하게 되었다. 그리고 middleware인 devtools와 persist를 함께 적용하며 느꼈던 경험을

최근 프로젝트에서 에러 처리 구조를 어떻게 잡을 것인가에 대해 고민이 많았다.특히 Next.js (App Router) 환경에서는 error.tsx를 통한 전역 에러 처리 기능이 기본 제공되기 때문에, React의 react-error-boundary와 어떻게 조합할지

현재 스위프 9기 팀 프로젝트에서 프론트엔드 개발을 맡고 있고, 프로젝트 초기 세팅 단계에서 axios를 어떻게 구조화할지 고민하게 되었습니다.단순히 axios.create()로 인스턴스를 하나 만들어서 쓰는 방식이 아니라, 유연하고 확장 가능한 구조가 필요하다고 느껴

스위프 9기 팀 프로젝트에서 카카오 OAuth 로그인을 구현하면서 겪은 과정과,Next.js의 App Router 환경에서 발생한 빌드 오류 및 해결 과정을 정리했습니다.로그인 버튼 클릭 시 카카오 OAuth 인증 페이지로 이동로그인 완료 후 redirect URI에

팀 프로젝트 중 백엔드 구현 이전 단계에서, Google OAuth 로그인을 프론트에서 먼저 구현해두었습니다.기존에 구현했던 Kakao OAuth 로그인 구조를 확장하는 형태로 Google 로그인을 자연스럽게 통합했습니다.✅ 이 글은 프론트엔드 단에서 미리 작업해둔 G

🛤️ Main Flow 설계 시작: Splash ➡️ Onboarding후보1: Splash 없이 바로 Onboarding후보2: 짧은 Splash 화면 → 자연스러운 로딩 → Onboarding 이동선택: ✅ 후보2선택 이유:플로고 프로젝트는 "브랜딩"도 중요했음첫

🧩 Signup 페이지 (회원가입) 1. 페이지 개요 사용자가 성별, 거주 지역, 닉네임, 프로필 이미지를 입력하고 다음 단계(약관 동의)로 넘어가는 폼 페이지입니다. UX를 고려해 필수 항목(성별, 지역, 닉네임) 입력 시에만 버튼이 활성화되도록 했습니다. 프로

폰트 최적화 전 사진 기존 ttf파일의 size 및 time(disabled cache적용) lighthouse 점수 ttf파일과 woff2파일 비교 📌 프로젝트 개요 이번 프로젝트에서는 Tailwind CSS v4의 새로운 방식에 따라 폰트, 컬러, 타이포그