영벨롭 개발 일지

📌 들어가며...리액트는 가상돔(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) 개발에 초점을 맞춘 라이브러..

📌 Vue 란, Vue 는 사용자 인터페이스 개발, 즉 프론트엔드 개발을 위한 오픈소스 자바스크립트 프레임워크입니다. ✅ Vue 를 사용하는 이유 재사용을 통해서 개발 기간을 단축시키고, 양질의 코드를 생산할 수 있습니다. 안정적이고 체계적인 운영을 지원합니다. 컴포넌트 재사용성과 상태관리가 우수합니다. 직관적이고 배우기 쉽습니다. 국내 높은 점유율을 차지하고 있습니다. 리액트와 비교하여 성능이 대등합니다. ✅ Vue 의 특징 SPA(Single Page Application)을 구축하는 데 사용됩니다. MVVM(Model-View-ViewModel) 패턴에서 ViewModel에 해당합니다. Angular 의 양방향 데이터 바인딩의 장점을 수용했습니다. React 의 가상돔(Virtual DOM)의 장점..

📌 CSS Animation animation 은 사용자가 어떠한 액션을 취하지 않더라도 스스로 동작하도록 효과를 구현하고자 할 때 사용하는 css 속성입니다. javascript 없이도 여러 상태를 거치며 웹사이트에 다양한 스타일 전환 애니메이션을 적용할 수 있습니다. @keyframes 규칙을 사용하여 애니메이션 세트를 만들고, 이를 animation 에 적용시킬 수 있습니다. animation 에는 다음 8가지 속성을 가집니다. animation-name animation-delay animation-direction animation-fill-mode animation-iteration-count animation-play-state animation-timing-fucntion animation..

[ 쿠키란? ] 쿠키는 사용자가 웹 페이지 방문시 클라이언트 로컬에 저장되는 키와 값이 들어있는 데이터 파일입니다. 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..