🔥Next 뽀개기15 검색 기능 구현(feat. 디바운스) 📌 구현목표- 검색창에서 입력이 바뀔 때마다 서버에 요청을 즉시 보내지 않고, 입력이 멈춘 뒤 일정 시간(300ms) 이후에 검색 요청을 보내기- 검색 결과를 부모 컴포넌트에 전달해서 리스트 렌더링 제어하기1. SearchBar 컴포넌트 타입 정의SearchBar는 공통 컴포넌트라 기존에는 onSearchResult의 파라미터 타입을 단순히 any[]로 지정해두었다. 하지만 any를 쓰면 TypeScript가 어떤 타입의 배열이 넘어오는지 정확하게 추론할 수 없다. 😢 Project[]를 받아야 할 컴포넌트에 실수로 Study[]를 넘겨도 오류 없이 실행되어 런타임 버그로 이어질 수 있기 때문에Discriminated Union을 사용했다! https://radlohead.gitbook.io/type.. 2025. 4. 7. 드롭다운 메뉴 직접 구현하기 Next.js에서 드롭다운 메뉴 구현하기🔼🔽1. Dropdown 컴포넌트 구현사용자가 드롭다운을 클릭하면 메뉴를 열고, 옵션을 선택할 수 있게 해보자! isOpen 상태로 드롭다운의 열림/닫힘을 관리하고, selectedOption으로 선택된 옵션을 관리한다.외부 클릭 시 드롭다운 닫힘useRef는 React에서 DOM 요소에 접근할 수 있게 해주는 훅이다. 드롭다운 컴포넌트의 루트 div에 ref를 연결하고, 클릭이 드롭다운 바깥에서 일어났는지 확인할 수 있다!useEffect를 통해 외부 클릭을 감지할 수 있다. mousedown 이벤트를 사용해 마우스로 클릭이 일어났을 때, 클릭이 드롭다운 메뉴 내부인지 외부인지를 감지하고, 외부라면 드롭다운을 닫는다!type DropdownProps = { .. 2025. 4. 4. Next.js 마크다운 미리보기 적용하기 Next.js 마크다운 미리보기 적용하기👁️Next.js 프로젝트에서 글을 작성할 때 textarea만 사용해서 구현했었다. 하지만 마크다운 문법을 적용한 텍스트를 미리 볼 수 있으면 훨씬 직관적이고 사용하기 편리할 것 같아서 마크다운 미리보기 기능을 추가하기로 했다.! (텍스트를 입력하면서 실시간으로 마크다운 문법을 미리 볼 수 있으면 작성자가 입력한 내용을 쉽게 확인할 수 있고, 특히 블로그나 프로젝트 설명 같은 내용에서 문법적인 요소를 미리 확인할 수 있어 편리함!!)라이브러리 설치pnpm add react-markdown remark-gfmreact-markdown: Markdown을 렌더링하는 React 컴포넌트remark-gfm: GitHub 스타일의 Markdown을 지원하는 플러그인실시간.. 2025. 3. 30. Zustand로 로그인 상태 관리하기 Zustand로 로그인 상태 관리하기👤최근에 전역 상태 관리 라이브러리를 사용해보고 싶다는 생각을 했다. 프로젝트가 커지면서 상태 관리가 점점 더 복잡해졌고, React에서 제공하는 Context API로 해결하려니 코드가 점점 길어지고 관리가 힘들어졌다... Provider 쓰구,, 넘 불편쓰,,🚬 Redux도 고려했지만, 설정이 복잡하고 보일러플레이트 코드가 많아서 사용하기 쉽다고 많이 들어본 Zustand를 사용해 보기로 결심했다..! 😎 Zustand는 생각한 것보다 훨씬 간단하고 직관적이었다. 상태를 관리하기 위한 별도의 복잡한 설정 없이 스토어만 만들면 되는 점이 easy 뽀인트 + Context API보다 코드가 훨씬 간결해짐! 👍 이제 Zustand를 사용해 로그인 상태 관리와 로딩.. 2025. 3. 16. Vercel Organization 우회 배포 & PR Preview 설정하기 🚨 Vercel에서는 개인 프로젝트는 무료로 배포할 수 있지만, Organization(조직)으로 설정된 프로젝트는 유료 플랜이다...(2주 무료긴 헌디..) 하지만! 👉 우회하는 방법이 있길래 무료로 배포하고 PR Preview까지 설정하기! 해보겠다...Vercel Organization 우회 배포🚀1. organization 의 팀 레포를 개인 계정으로 포크해준다.2. vercel에서 개인 계정으로 포크한 레포를 deploy해준다.3. 깃헙 토큰 발급개인 개정 settting ➡️ Developer Settings ➡️ 토큰 발급 (classic)repo 권한만 체크발급된 토큰을 따로 저장해두기! 4. build.sh 파일 생성프로젝트 루트경로에 파일을 생성 후 아래 코드를 넣자⬇️#!/bin.. 2025. 3. 11. Next.js App Router + PWA + Firebase로 알림 구현하기 Next.js App Router + PWA + Firebase로 알림 구현하기다른 개발자 블로그 보면 푸시 알림 금방 금방 구현했다고 하던데, 나는 계속 오류가 나고, 도대체 왜 알림이 두 번 뜨는지(아직 해결 못 함 ㅎ), 왜 권한 요청이 제대로 안 되는지 도통 알 수가 없었다. 구글링 해보면 다들 쉽게 잘 하는 것 같은데, 나는 뭐가 그렇게 꼬였는지 한 번 해결하면 또 다른 문제가 터지고... 정말 힘들었다. Next.js App Router + PWA + Firebase를 조합해서 푸시 알림을 구현한 과정과 그동안 겪은 문제들, 해결 방법을 정리해보자..❓PWA란PWA(Progressive Web App)는 웹 애플리케이션을 네이티브 앱처럼 사용할 수 있게 해주는 기술이다. 기본적으로는 웹사이트지.. 2025. 1. 26. Chart.js 라이브러리로 달성률 시각화 구현하기(feat. Doughnut 차트) 📊Chart.js 라이브러리로 달성률 시각화 구현하기(feat. Doughnut 차트)‼️구현하고자 하는 것전체 수행 날짜 대비 완료된 날짜의 비율을 계산하기Chart.js의 Doughnut 차트를 사용해 완료/미완료 비율을 시각적으로 표현하기전체 수행 날짜 대비 완료된 날짜의 비율을 계산하기HabitCard 컴포넌트 안에 자식인 HabitCardChart 컴포넌트를 넣어준다. const startDate = new Date(habit.startDate) const endDate = new Date(habit.endDate) // frequency에 해당하는 요일을 계산 const frequencySet = new Set(habit.frequency.map((day) => day.toLowerCa.. 2024. 12. 20. 리액트 캘린더와 Firebase로 CRD 구현하기 📆리액트 캘린더와 Firebase로 CRD 구현하기‼️구현하고자 하는 것1. 사용자가 새로운 루틴을 추가할 수 있는 모달 창 제공2. 사용자는 시작 날짜와 종료 날짜를 설정하고, 반복 주기 표시하기3. 사용자가 특정 날짜에 루틴을 완료했다고 표시하기4. react-calendar를 사용하여 날짜별로 루틴을 완료한 여부를 시각적으로 표시하기🔥데이터를 Firestore에 저장할 때 사용할 데이터 구조 정의하기habitName: 루틴 이름startDate: 시작 날짜endDate: 종료 날짜frequency: 루틴을 수행할 요일들type Habit = { id: string name: string startDate: string endDate: string frequency: string[] c.. 2024. 12. 16. Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie) 🔥Next.js Layout과 Firebase로 AuthGuard 구현하기(feat. cookie)Next.js App Router에서 Layout을 활용해 메인페이지 하위에 공통 레이아웃을 적용해 AuthGuard를 적용해보자.메인페이지 하위 폴더 내에는 무조건 로그인을 해야 접속할 수 있게!!0. 폴더구조1. 로그인 시 토큰 저장로그인 시 Firebase에서 발급된 JWT 토큰을 쿠키에 저장해 인증 상태를 유지한다.npm install cookies-nextconst onSubmit = async (data: FormData) => { try { const userCredential = await signInWithEmailAndPassword( auth, d.. 2024. 12. 1. 이전 1 2 다음
