📕 TODAY I LEARN
- React Router + Zod: 안전한 params 검증과 useLoaderData 활용법 React Router에서 Zod로 안전한 params 검증하기토이 프로젝트를 하다 보면 useParam()을 사용해 URL 파라미터(:id, :category)를 그대로 사용하는 경우가 많았습니다.실제 서비스라면 사용자가 잘못된 URL을 입력하거나 예상하지 못한 값이 들어올 수도 있을텐데 말입니다!!!그래서 런타임에서 파라미터를 검증하는 로직이 있어야 한다고 생각했고 검색을 하기 시작했습니다.param을 검증할 수 있는 라이브러리인 zod검증된 param을 컴포넌트에 전달해 사용할 수 있게 하는 React-router-dom의 loader이번 글에서는 Zod + React Router의 loader를 활용해 params를 검증하고, 검증된 데이터를 컴포넌트에서 안전하게 사용하는 패턴을 정리해 보겠습니다.. 2025.09.22
- Home 컴포넌트 ⇒ 중복 데이터 로딩, 단일 상태 관리로 해결하기 Problem현재 프로젝트의 Home 컴포넌트에는 불필요한 중복 코드가 많았다. Firestore에서 카테고리별 데이터를 가져와 상태에 저장하고, 이를 Section 컴포넌트에 전달해 UI를 그리는 구조였는데, 문제는 카테고리마다 동일한 로직을 4번이나 반복해야 했다는 점이다.techNotes, thoughts, deepdives, portfolio 각각을 별도 상태로 관리useEffect 안에서 getPostsByCategory를 4번 호출카테고리가 늘어날수록 코드 수정 범위가 기하급수적으로 증가처음 블로그 프로젝트를 구현 할 때에는 코드가 문제없이 동작하니 그대로 두었지만, 카테고리 중앙 관리 리팩토링을 진행한 뒤 Home 컴포넌트 역시 구조 개선이 필요하다는 것이 명확해졌다. Solution중복을.. 2025.09.18
- 하드코딩 된 카테고리, 중앙 관리로 리팩토링[2] Problem카테고리는 라우터, API, UI, 검색 필터 등 여러 레이어에 걸쳐 반복적으로 등장하는 핵심 도메인 개념이다. 처음 블로그 프로젝트를 시작했을 때는 카테고리를 "TechNote", 처럼 컴포넌트마다 직접 하드코딩해 사용했다.하지만 이런 중요한 값을 한 곳에 정의하지 않고 중구난방으로 쓰다 보니, 오타가 발생하거나 “이게 맞는 값이었나?”를 일일이 확인해야 하는 번거로움이 생겨났다.또한 DB에 저장되는 카테고리명과 UI에 보여지는 카테고리명이 달라, 이를 매번 구분하고 맞춰주는 작업이 불필요하게 늘어났다. 새로운 카테고리를 추가하거나 이름을 바꾸려 할 때마다 프로젝트 전역에서 대규모 수정이 필요하겠다는 점도 문제라는 생각이 들었다.바로 이전에 라우팅을 상수화해 리팩토링했던 것이 떠올랐다. “.. 2025.09.18
- 하드코딩 된 라우트 경로, 중앙 관리로 리팩토링[1] ProblemReact Router를 사용하면서 나 navigate에 경로를 직접 하드코딩해 작성해왔다.초반에는 단순히 /detail/:id와 같은 문자열을 그대로 작성하는 방식이 빠르고 편리해 보였다.하지만 서비스가 커지면서 카테고리와 페이지 수가 늘어나고, 특정 경로를 수정해야 할 때마다코드 전반에서 나 navigate를 하나 하나 찾아 수정해야 하는 문제가 발생했다.특히 오타 같은 휴먼 에러로 인한 불필요한 버그가 자주 발생하면서,라우팅 방식을 더 안정적으로 관리할 필요성을 느꼈다. 즉, “경로를 안전하게 일관성 있게 관리할 수 있는 방법”을 찾는 것이 문제의 핵심이었다. Solution이 문제를 해결하기 위해 라우트 경로를 하드코딩하지 않고 중앙에서 관리할 수 있도록 리팩토링을 진행했다. 1. .. 2025.09.18
- Vercel로 [ Vite + React + Firebase ] 프로젝트 배포하기 배포란 무엇일까?배포란 단순히 말해서,내가 VSCode에서 npm run dev로 실행하지 않아도,어디서든 접속 가능한 주소(도메인)로 내 서비스를 사용할 수 있게 만드는 것!좀 더 전문적인 정의로는 아래와 같습니다.내 컴퓨터에서만 동작하던 서비스를 인터넷을 통해 누구나 접근할 수 있도록 공개하는 과정 로컬 개발 Local Development내 컴퓨터 + VSCode에서 `npm run dev` 로 개발 서버를 실행하면 변경 사항이 실시간 반영되어 UI, 수정, 기능 구현에 최적화됩니다. 서비스는 내 PC가 켜져 있어야 동작할 수 있다는 단점이 있습니다.빌드 Build개발용 코드를 배포 가능한 형태로 변환하는 과정으로 npm run build 실행시 Vite가 코드를 최적화 합니다. ( 최신 JS 문법.. 2025.08.17
- Firebase Authentication으로 로그인 구현하기 목표Google 팝업 로그인을 구현하고, Google Auth의 상태와 profile(firebase db유저)을 분리해전역으로 관리하는 패턴을 소개합니다. 또한 하나의 헤더 버튼으로 로그인 / 로그아웃을 토글하는 UX까지 다룹니다. 1. 왜 Firebase Auth인가?기본적으로 이 프로젝트는 백엔드가 없는 서버리스 프로젝트라 firebase서비스에 포함된 Firebase Authentication을 이용하게 되었습니다. 게다가 Firebase Authentication은 앱에서 사용자 인증시 필요한 백엔드 서비스와 쉬운 SDK를 제공하고 google, facebook 등의 인증이 지원되기 때문에 로그인 기능을 더욱 쉽게 구현할 수 있게 되어 있습니다. 2. 이 글의 범위google Auth와 블로그에.. 2025.08.17
- React를 사용해서 만든 서비스를 어플로 다운 받을 수 있다고? ( PWA로 프로젝트 하기 ) React + Vite + PWA로 프로젝트 생성하기vite-pwa-plugin 설치Vite PWA Vite Plugin PWAZero-config PWA Framework-agnostic Plugin for Vite and Integrationsvite-pwa-org.netlify.app React와 Vite그리고 PWA를 사용해 프로젝트를 시작하기 위해서vite-pwa 템플릿을 사용해서 react개발환경을 세팅해준다.npm으로 vite-pwa 플러그인을 설치하면 아래와 같은 질문과 함께 설정을 도와준다. PWA로 프로젝트를 생성하기 위해서는 다양한 설정파일들이 필요하다.나는 기본 세팅으로 프로젝트를 생성했다.npm create @vite-pwa/pwa@latest Select a strategy : .. 2024.12.11
- PWA설치 및 기본 설정 PWA의 설치 PWA는 처음 웹에서 설치를 하게 된다.PWA가 기기에 설치되면 다른 앱처럼 운영체제에서 직접 실행할 수 있는 플랫폼 앱으로 사용자에게 표시된다. 이는 모바일 기기에 앱 아이콘이 표시되며, 브라우저 웹 사이트에서 동작하는 것이 아니라독립형 앱으로 실행할 수 있다는 뜻이다. 웹 사이트의 ‘북마크(즐겨찾기)’와 ‘홈 화면에 추가’와 ‘앱 설치’는 각각 다르다.‘홈 화면에 추가’기능은 북마크와 유사하지만, 페이지의 파비콘이 OS의 홈 화면의 아이콘으로 추가된다.하지만 PWA를 설치하게 되면 홈 화면에 URL을 추가하는 것 이상의 기능을 얻을 수 있다. PWA를 설치하려면 manifest.json파일과 service_worker.js를 통해 설정을 해 주어야 한다.그래야 PWA는 브라우저( Chr.. 2024.12.10