Zod란 뭘까?TypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리 Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고 Zod 이 정적 TypeScript 유형을 자동으로 추론한다 - Zod - [공식문서] Intro | Zod zod.dev Zod의 장점의존성 없음Node.js 및 모든 최신 브라우저에서 작동작음: 8kb 압축 후 크기불변성 유지: 메서드 (예: .optional())는 새 인스턴스를 반환합니다.기능적 접근: 구문 검사, 유효성 검사하지 않음일반 JavaScript에서도 작동합니다! TypeScript를 사용할 필요가 없습니다. Zod 사용방법설치npm install zodyarn add zod tscon..

🚀 useRefuseRef는 React에서 저장공간이나 DOM요소에 접근하기 위해 사용되는 Hook이다. JavaScript에서 DOM에 접근하기 위해 사용한 querySelector 등의 함수와 같은 역할이다. Ref는 reference를 뜻한다. useRef를 사용하면 함수형 컴포넌트에서도 이전에 클래스형 컴포넌트에서만 가능했던 DOM 조작이나 값의 유지가 가능하다. 이 Hook은 함수 컴포넌트 내에서 변수를 선언하고, 해당 변수가 컴포넌트의 생명 주기 동안 유지되도록 한다. useRef 의 첫 번째 매개변수인 initialValue는 ref 객체의 current 프로퍼티의 초기값으로 사용된다. initialValue에는 모든 타입으로 지정가능하다. 초기값이 설정되면 해당 ref 객체의 curren..

🚀 시작 요즘들어 완성도 있는 좋은 프로젝트 코들를 읽는데 취미를 붙여서 읽던 중 프리패칭을 도와주는 핵심 기능인 prefetchQuery를 알아보려고 한다. 🧐 그전에 Tanstack Query로 데이터를 미리 채우는 방법에는 무엇이 있을까? ✅ prefetchQuery가장 핵심 기능인 prefetchQuery는 queryClient의 메서드로, 서버로 부터 받아온 데이터를 캐시에 추가한다. ✅ setQueryDatasetQueryData는 queryClient의 메서드로, prefetchQuery처럼 useQuery를 실행시키지 않고 쿼리 데이터를 캐시에 추가하는 또 다른 방법이다. 단, 클라이언트에서 데이터를 받아오는데, 이 데이터는 서버에서 mutation된 상태의 데이터일 것이다. ✅ pla..

[CS] 네트워크 공부 OSI 7계층 컴퓨터에서 네트워크를 사용해서 통신을 수행하는 과정을 7단계로 나눈 것 왜 나눴냐고? 고장났을 때 해당부분만 고치면되고, 문제가 생겼을 때 빠르게 판단을 할 수가 있기 때문에 기능별로 나눠서 구분 물리 계층- 실제 케이블, 커넥터 및 기타 하드웨어 구성 요소를 포함하여 네트워크를 통해 데이터의 물리적 전송을 처리하는 최하위 계층입니다. 데이터 링크 계층 - 이 계층은 직접 연결된 장치 간에 안정적인 데이터 전송을 담당하며 오류 감지 및 수정과 같은 기능을 포함합니다. 네트워크 계층 - 이 계층은 서로 다른 네트워크 간의 데이터 라우팅을 담당하고 주소 지정 및 라우팅 프로토콜을 사용하여 데이터 패킷이 올바른 목적지로 전달되도록 합니다. 전송 계층 - 이 계..

[VSCode] 오류 소리 없애기 vscode를 사용하면서 오타 발생하거나 오류 생길때마다 "띠롱 띠롱" 하면서 계속 울려서 검색을 해봤는데 못 찾았었다. 포기하다가 너무 신경 쓰여서 스택 오버플로우를 찾아보니 VSCode가 업데이트 되고나서accessibilitySupport가 on으로 바뀌면서 발생한다고 한다. 설정 탭에서 accessibilitySupport 검색 -> 기존 on을 off로 변경 드디어 띠롱 띠롱에서 벗어났다. 하... 너무 짜증나서 공유하려고 작성했습니다 ㅠㅠ

MobX(observer) + React-Hook-Form(FormProvider) 충돌   사이드 프로젝트에 React-Hook-Form 라이브러리를 도입하면서 발생한 트러블 슈팅 해결과정입니다. 🔥 문제 상황CreatePage ->  handleSubmit함수 필요 (제출 버튼 위치)SectionTitleEditor, QuestionEditor -> require, formState : { errors } 필요 (폼 위치)CreatePage 부모 컴포넌트에서 SectionTitleEditor, QuestionEditor 컴포넌트까지의 경로는 CreatePage -> SectionListEditor -> SectionEditor -> SectionTitleEditor, QuestionEditor 위와..

Express.js => Firebase 마이그레이션 과정   ⭐️ 시작하기 앞서 6개월간의 부트캠프가 끝나고 처음으로 사이드 프로젝트를 진행하게 되었다.  설문 조사 플랫폼을 만들기로 결정했지만, 가장 큰 고민은 백엔드 서버를 혼자 구축해야 한다는 점이었다. 프론트엔드 개발자 혼자 프로젝트를 개발하기 위해 백엔드에 대한 기본적인 이해가 필요하다고 생각했다.   ❕ 처음 Express.js 선택하게된 계기 (공식문서) 1. 쉽게 접근 가능- Node.js 프레임워크인 Express.js는 JavaScript 언어를 사용하기 때문에 새로운 언어를 배운다는 부담이 적어 접근하기 쉬울 것이라고 생각했다. 2. 프레임워크 사용자가 많아 방대한 커뮤니티- 공식문서도 한글을 지원했고 커뮤니티도 크다고 판단해 쉽게 ..

Firebase 공부  Firebase란?- Firebase: 실시간 데이터베이스, 인증, 스토리지, 분석 등 다양한 기능을 제공하는 모바일 및 웹앱 개발 플랫폼- 2011년 스타트업에서 시작 (실시간 채팅 기능) >> 2014년 구글이 인수 (백엔드 서버리스)- 백엔드 서버 구축하고 관리 X. Google Cloud Platform을 이용해 빠르고 효율적인 개발- 특히 실시간 기능 서비스, 클라이언트 사이드 집중, 초기 프로토타입 개발에 유용 Firebase 주요 기능1. Authentication: 간편한 다중 플랫폼 로그인- 이메일 인증, 소셜 미디어 계정 인증, 전화번호 인증방식 제공- 보안 강화, 사용자 인증 과정 안정하게 처리 2. Firestore: NoSQL 데이터베이스- Firebase에..

CRA(Create-React-App)에서 Vite로 마이그레이션 과정 1. 들어가며지금까지 협업 프로젝트와 토이 프로젝트를 진행하면서 항상 Webpack 번들러를 사용해왔다. 하지만 프로젝트 규모가 커질수록 개발 서버 구동 시간과 빌드 시간이 눈에 띄게 느려지는 것을 경험했었고 마음속에 답답함이 있었다. 이러한 성능 이슈를 해결하고자, 이번 토이 프로젝트에서는 더 빠른 번들러로 알려진 Vite로 마이그레이션을 진행해보고 싶었고 그 경험과 과정을 공유하고자 포스팅을 하게 되었다.   2. CRA(Webpack) VS Vite(rollup, esbuild) CRA는 Webpack을 기반으로 구성되어 있고, Vite는 rollup, esbuild를 기반으로 구성되어 있다. Webpack은 프론트엔드 공부를 ..