영벨롭 개발 일지

📌 들어가며...리액트는 가상돔(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..

[ Fetch API ] const url = '요청 보낼 서버 url'; const option = { method: '메소드', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json; charset=utf-8' }, body: JSON.stringify({ //데이터 }), } fetch(url, option) .then((response) => { ... }) Fetch API 는 자바스크립트에서 API를 연동하기 위해 사용됩니다. fetch() 함수는 HTTP response 객체를 래핑한 promise 객체를 반환하여, 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있습니다. ..

[ useEffect ] import React, { useEffect } from "react"; useEffect(function, deps); useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. 첫 번째 인수로 수행하고자 하는 작업을 나타내는 함수를 전달하고, 두 번째 인수로는 검사하고자 하는 dependency 배열을 전달합니다. [ deps X - 렌더링 될 때마다 실행 ] useEffect(() => { console.log("렌더링 될 때마다 한 번만 실행"); }); 만약 deps 인수를 전달하지 않는다면, useEffect 는 해당 컴포넌트가 렌더링 될 때마다 작업을 수행합니다. 다음 코드는 deps 를 전달하지 않았기 때문에, + ..