영벨롭 개발 일지

📌 React Query란?리액트 쿼리(react-query)는 리액트 애플리케이션에서 데이터 페칭과 같은 서버 상태를 관리하는 데 도움을 주는 라이브러리입니다. 리액트 쿼리를 통해 외부 데이터를 효율적이고 간편하게 관리할 수 있습니다.npm install @tanstack/react-query ✅ React Query 장점간편한 데이터 관리: 데이터 페칭, 캐싱, 리패치, 에러 처리 등을 자동으로 처리할 수 있어, 개발자가 간편하게 데이터 관리할 수 있도록 도와줍니다. 캐싱과 성능 최적화: 내부적으로 캐싱을 사용하여 동일한 데이터 요청을 최적화하고, 데이터의 유효성을 자동으로 관리하여 성능을 향상시킵니다. 자동 리패치: 데이터가 만료되거나, 유효하지 않을 경우 자동으로 데이터를 다시 가져오는 기능을 ..

📌 Vite란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다.Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록 확장되었습니다.  ✅ Vite의 장점빠른 시작 속도: 기존 번들러에 비해 개발 서버 시작 속도가 매우 빠릅니다.개발 생산성: HMR(핫 모듈 교체)를 통해 변경된 파일을 다시 로드하여 애플리케이션을 즉시 업데이트합니다.모던 개발 경험: 최신 JavaScript 기능과 ES 모듈을 기본적으로 지원합니다.작은 번들 크기: Rollup을 통해 최적화된 생산 빌드를 생성하여 작은 번들 크기를 유지합니다.📌 Vite + React + TypeScript 프로젝트 생성 및 시작프로젝트를 생성하는 명령어..

📌 들어가며...리액트는 가상돔(Virtual DOM)을 통해 효율적이고 빠르게 우리가 원하는 페이지를 브라우저에 그려줄 수 있습니다. 리액트를 사용하는 개발자시라면 Virtual DOM은 무조건 학습하셔야 합니다! (저 포함...)이번 포스팅에서는 DOM이 무엇인지, Virtual DOM이 무엇인지 그리고 그 작동원리에 대해 알아보겠습니다!📌 DOM (Document Object Model)우선 Document 란 각각의 HTML 요소(Elements)들을 담고 있는 웹페이지입니다. 브라우저는 이 Document를 분석하여 우리에게 웹 페이지를 띄워주게 됩니다.  DOM은 이러한 HTML 요소들을 Tree 형태로 표현한 것으로, 각 요소에 상응하는 Node를 가집니다. DOM은 HT..

📌 들어가며... 이 글을 작성하는 시점(2024.04.21)인 지금까지 나는 다양한 프로젝트에서 프론트엔드 개발자로 참여하며, React를 많이 사용해왔다. 하지만 "왜 React 를 사용했는가?"에 대한 질문을 받는다면, 단지 많은 기업에서 사용하는 기술 또는 프론트엔드 개발자라면 당연히 알아야 할 기술이라는 답변밖에 떠오르지 않는다. 적어도 왜 이 기술을 사용하며 어떠한 장단점이 있는지 분석해 볼 필요가 있다고 생각했다. 따라서! 이 글을 통해 왜 리액트를 사용하며, 리액트의 등장 배경, 장단점 등에 정리하고자 한다! 📌 React란? 리액트(React)는 페이스북(현재 Meta)에서 만든 오픈 소스 JavaScript 라이브러리입니다. 리액트는 사용자 인터페이스(UI) 개발에 초점을 맞춘 라이브러..

[ 쿠키란? ] 쿠키는 사용자가 웹 페이지 방문시 클라이언트 로컬에 저장되는 키와 값이 들어있는 데이터 파일입니다. Key와 Value 쌍으로 구성되며 String 형태로 이루어져 있습니다. 최대 300개까지 저장 가능하며 하나의 도메인당 20개의 값만 가질 수 있습니다. 이때 하나의 쿠키값은 4KB까지 가능합니다. 웹 서버가 웹 브라우저에게 보내어 저장했다가 서버의 부가적인 요청이 있을 때 다시 서버로 보내주는 문자열 정보라고 할 수 있습니다. 우리는 이 쿠키를 통해 브라우저를 종료했다가 다시 접속하더라도 로그인 상태를 유지할 수 있게 되는 것입니다. ★ 쿠키의 장점 1. 세션관리: 로그인, 접속 시간 등 서버가 알아야 할 정보를 저장할 수 있다. 2. 개인화: 사용자마다 다르게 적절한 페이지를 보여줄..

[ Props와 State ] Props는 컴포넌트 외부에서 컴포넌트에게 주는 객체형 데이터입니다. 즉, 상위 컴포넌트에서 하위 컴포넌트로부터 데이터를 넘겨주는 것입니다. 읽기 전용 데이터로 수정 불가능합니다. State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. props와는 반대로 해당 컴포넌트 안에서 데이터를 수정할 수 있습니다. Props와 State는 모두 각각 변경이 발생하면, 리렌더링이 발생할 수 있습니다. ★ Render 함수와 Props & State Render 함수는 Props와 State를 바탕으로 컴포넌트를 그립니다. 그리고 props와 state가 변경되면 컴포넌트를 다시 그리는 즉, 리렌더링이 발생합니다. [ 함수형 컴포넌트 ] import React from 'reac..