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

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은 프론트엔드 공부를 ..

React Hook Flow - Mount 부터 Unmount까지  이번 포스팅에서는 React Hook Flow Diagram을 통해 리액트 컴포넌트의 생명주기동안 훅이 언제 실행되는지 공부한 내용을 포스팅 해보려고 한다.추가적으로 useEffect 와 useLayoutEffect를 비교하면서 언제 해당 훅을 사용하는게 좋을지도 같이 고민한 내용도 추가했다. Mount, Update, Unmount?- Mount: 컴포넌트가 페이지에 처음 렌더링 될 때를 의미- Update: 부모 컴포넌트가 리렌더링 or state, props가 변경되어 리렌더링 될 때를 의미- Unmount: 컴포넌트가 DOM에서 제거될 때를 의미 이제 React Hook Flow를 보면서 Mount, Update, Unmout 마..

Call Stack, Task Queue, Event Loop  JavaScript 언어를 공부하던 중 비동기 처리 방식을 이해하기 위해서는 Call Stack, Task Queue, Event Loop의 개념을 알아야 한다는 것에서부터 흥미를 느껴 공부한 내용을 기록해보려고 한다. 작성 순서1. Call Stack, Task Queue, Event Loop 란?2. Call Stack, Task Queue, Event Loop 이해하기 위한 나만의 설명 + 사진   그럼 이제 자바스크립트에서 함수를 호출할 때 보이지 않는 곳에서 무슨 일이 일어나는지에 대해서 살펴보자. 1. Call Stack, Task Queue, Event Loop 란?콜 스택(Call Stack)모든 프로그래밍 언어에는 보이지 않..