project
1.[프로젝트] pnpm 첫 세팅 방법‼
터미널을 이용해 바탕화면에 프로젝트를 세팅하는 방법을 알아 보자! pnpm과 yarn의 차이점도 알 수 있고 🚀 더 자세히...
2.[프로젝트] 팀프로젝트 초기설정‼
팀 프로젝트에서 초기세팅과 더불어 개발자들끼리 정해야하는 것들과 그에관한 간략한 예시와 설명을 볼 수 🚀 더 자세히...
3.[A project ] study(1) React Query랑 jotai
본격 팀프로젝트를 시작하기 앞서 처음들어본 jotai라는 상태관리 툴을 듣게 되었다. 서버상태로는 React Query를 사용하기로 했고 클라이언트는 jotai 🚀 더 자세히...
4.[A project ] study(2) Zod
데이터를 검증(Validation)하고, 데이터의 구조와 타입을 정의하기 위한 스키마 기반 검증 도구야. 쉽게 말해, 데이터를 체크리스트에 따라 검사 🚀 더 자세히...
5.[A project ] study(3) Zustand
* Zustand*란, React 애플리케이션에서 데이터를 효율적으로 관리하기 위한 상태 관리 라이브러리야. * 📍핵심 설명* Zustand는 중앙 데이터 저장소 여러 컴포넌트가 같은 데이터를 필요로 할 때, 중앙에 데이터를 저장하고 필요할 때 꺼내 쓸 수 있도록 해줘. (예시) 로그인 여부: 헤더, 사이드바, 프로필 페이지 등에서 공유. ...
6.[A project ] study(4) React Hooks와 React Hook Form
React Hooks는 React 컴포넌트의 상태와 생명주기를 관리하기 위한 내장 도구이고, React Hook Form은 폼 데이터를 관리하고 유효성을 검증하기 위한 외부 라이브러리야 🚀 더 자세히...
7.[A project ] study(5) React Query 상세
React Query(=TanStack Query)는 서버 상태 관리를 간편하게 만들어주는 도구야. 서버에서 데이터를 가져오고, 캐시에 저장하며, 이를 다시 사용할 수 있도록 관리하는 것을 도와줘. 특히, 비동기 작업 🚀 더 자세히...
8.[A project ] study(6) React Query의 Must-Know Options
React Query를 사용할 때 꼭 알아야 하는 주요 옵션들이야! 이 옵션들은 데이터를 어떻게 가져오고, 캐싱하며, 새로고침할지 등을 설정하는 데 🚀 더 자세히...
9.[A project ] study(7) React Query의 UX향상 옵션
여기에서 소개할 기능들은 사용자 경험을 향상시키기 위해 꼭 알아야 하는 핵심 옵션이야! (예제)🙌 쉽게 비유하자면: 좋아요 버튼을 누르자마자 숫자가 올 🚀 더 자세히...
10.[A project ] study(8) 피그마 아이콘 설정하기
프로젝트에 들어가기 앞서, 아이콘을 먼저 공통화 할일이 생길거야. 피그마에서 내보낸 아이콘과 로고 파일을 재사용 가능하고 유지보수하기 쉽게 관리하려면 다음과 같은 폴더 구조를 추천해 🚀 더 자세히...
11.[A project ] study(9) use-funnel
모바일 네비게이션에 최적화된 단계별 상태 관리 라이브러리야.useFunnel은 엘리베이터 버튼\*\*이라고 생각해봐!단계를 배열(steps)로 관리하고, 🚀 더 자세히...
12.[A project ] study(10) DBMS(데이터베이스 관리 시스템)을 알아보자!
대표적인 DBMS 6개를 쉽고 빠르게 알아보자! ✔️ 가장 많이 쓰이는 무료 데이터베이스✔️ 속도가 빠르고, 웹사이트, 앱에서 많이 🚀 더 자세히...
13.[A project ] study(11) 소셜로그인 Provider
웹사이트나 앱에서 별도의 회원가입 없이 기존의 소셜 계정을 사용하여 로그인할 수 있게 하는 기능이야.사용자(User) → 로그인 버튼 🚀 더 자세히...
14.[A project ] study(12) NextAuth 소셜 로그인
NextAuth는 Next.js에서 간편하게 소셜 로그인(구글, 페이스북 등)을 구현할 수 있는 라이브러리야. 이걸 사용하면 복잡한 OAuth 인증 과정을 🚀 더 자세히...
15.[A project ] study(13) Props 타입정의
💡 Props(프롭스)는 컴포넌트에 전달하는 값(데이터)을 의미해.즉, 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용하는 것!📌 Props 타입 정의를 하는 이유코드를 더 명확하게 작성할 수 있음 (어떤 값이 들어와야 하는지 예측 가능)잘못된 데이터가 전달