Dev.karnelll

안녕하세요, 이번 포스팅에서는 React 전역 상태 관리의 핵심 라이브러리인 Zustand를 정리해봤어요.React로 프로젝트를 하다 보면 한 번쯤 이런 고민을 하게 됩니다. “props를 몇 번이나 내려보내고 있지?”“Context가 점점 늘어나고 있는데 괜찮을까?”“Redux는 너무 무겁고 설정이 복잡한데...” 저도 같은 고민 끝에 Zustand를 선택했습니다.결제 페이지처럼 여러 단계의 상태를 관리해야 할 때,Zustand는 깔끔하고 단순한 해법을 제시해줬습니다.1. Zustand를 선택한 이유당시 진행 중이던 프로젝트는 인터파크 티켓 결제 리디자인이었습니다.결제는 다음과 같은 단계로 구성되어 있었죠.예매자 정보 입력배송 방법 선택결제 수단 선택문제는 단계가 바뀔 때마다 이전 단계의 데이터를 유..

React 개발에서 함수와 컴포넌트 네이밍은 단순한 스타일 문제가 아닙니다. 가독성, 유지보수성, 협업 효율을 결정짓는 핵심 요소입니다. 이 글에서는 기본 개념부터, 기업 현장에서 쓰이는 규칙, 그리고 제가 실제로 사용하는 Git/PR/파일 네이밍 규칙까지 한 번에 정리했습니다.1️⃣ 왜 네이밍 규칙이 중요한가?이름이 모호해 디버깅이 어려움상태나 함수를 찾느라 시간 낭비컴포넌트와 파일명이 뒤엉켜 협업 시 혼란 발생→ 초기부터 좋은 네이밍 습관을 들이는 것이 중요합니다.2️⃣ 기본 React 네이밍 규칙✔️ 컴포넌트파일명 = 컴포넌트명 (PascalCase)PostList.jsx → function PostList()CommentForm.jsx → function CommentForm()✔️ 이벤트 핸들러..

📑 목차 1) 5주차 진행 범위 & Udemy 강의 소개 2) 5주차 학습 정리 — Next.js 배포 과정 — 1️⃣ next build vs next export — 2️⃣ 빌드 결과 읽기 & 재배포 필요성 — 3️⃣ fallback 개념 — 4️⃣ next.config.js 핵심 — 5️⃣ 환경변수 & 단계별 분기 — 6️⃣ 번들 최적화(하이라이터) — 7️⃣ 로컬 프로덕션 테스트 — 8️⃣ GitHub × Vercel 배포 — 9️⃣ MongoDB 연결 오류 해결 — 🔟 수정 후 자동 재배포 🔥 최종 정리 1. 5주차 진행 범위 📝 세션..

📑 목차 1) 4주차 진행 범위 & Udemy 강의 소개 2) 4주차 학습 정리 — 파일 기반 라우팅/동적 경로/필터링 1️⃣ 프로젝트 시작 & 라우팅 계획 2️⃣ 페이지 & 동적 라우팅 구현 3️⃣ 연도/월 필터링 & 프로그램 내비게이션 4️⃣ 공통 컴포넌트 & 스타일링 🔥 최종 점검 체크 📌 부록: 무료 아이콘 사이트 1. 4주차 진행 범위 📝 세션 12 ~ 17 강의까지 진행 ［Udemy 강의 소개］ 이번 스터디에서 수강하는 강의는 【한글자막】 Next.js 15 & React - 완벽 가이드이다. 이 강의에서는 Next.js 15를 기초부터 학..

📑 목차 1) 3주차 진행 범위 & Udemy 강의 소개 2) 3주차 학습 정리 — Next.js × Lucia 인증 1️⃣ 사용자 계정 생성(Signup) 2️⃣ 로그인(Login) 3️⃣ Lucia 세션 관리 4️⃣ 로그아웃 5️⃣ 로그인/회원가입 모드 전환 🔥 최종 점검 체크 1. 3주차 진행 범위 📝 세션 5 ~ 11 강의까지 진행 ［Udemy 강의 소개］ 이번 스터디에서 수강하는 강의는 【한글자막】 Next.js 15 & React - 완벽 가이드이다. 이 강의에서는 Next.js 15를 기초부터 학습하고, 앱 라우터 & 페이지 라우터를 활용..

📑 목차1) 2주차 진행 범위 & Udemy 강의 소개2) 2주차 학습 내용 정리 (Next.js 핵심)1️⃣ 서버 vs 클라이언트 컴포넌트2️⃣ 서버 컴포넌트 동작 방식3️⃣ 클라이언트 컴포넌트가 필요한 경우4️⃣ usePathname()으로 내비 상태5️⃣ 클라이언트 컴포넌트 효율 사용 & 한계🔥 최종 정리 1. 2주차 진행 범위 & Udemy 강의 소개📌 2주차 진행 범위📝 세션 3 ~ 4 강의까지 진행［Udemy 강의 소개］이번 스터디에서 수강하는 강의는 【한글자막】 Next.js 15 & React - 완벽 가이드이다.이 강의에서는 Next.js 15를 기초부터 학습하고, 앱 라우터 & 페이지 라우터를 활용하여 풀스택 앱을 구축하는 방법을 배울 수 있다.💡 강의 정보강의명: 【한글자막】..

목차1. 스터디를 시작한 이유2. 강의 전 사전 학습 자료3. Udemy 강의 소개4. 1주차 진행 범위5. 1주차 학습 내용 정리6. 추가 정리 – 함수/컴포넌트 네이밍 규칙 1. 스터디를 시작한 이유프론트엔드 개발자로 취업을 준비하면서 실무 경험 위주의 개발을 해왔다.주어진 요구사항을 빠르게 구현하는 것에는 익숙하지만, 이론적으로 부족한 부분이 많다고 느꼈다.예를 들어, 상태 관리, 성능 최적화, 서버 사이드 렌더링(SSR) 등의 개념을 깊이 이해하지 않고 단순히 구현했던 경우가 많았다.그러던 중, 친구가 Udemy 러닝크루에 참여하면서 Next.js 강의를 함께 공부하자는 제안을 했다.마침 Udemy에서 할인 쿠폰을 제공해주어 좋은 기회라고 생각했고, 이론적으로 부족했던 부분을 채우기 위해 스터디에..