주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

Astro 프레임워크 체험기 챗 지피티에게 물어본 Astro의 주요 특징1. 멀티 프레임워크 지원: Astro는 React, Vue, Svelte, Solid.js 등 다양한 프론트엔드 프레임워크의 컴포넌트를 한 프로젝트에서 함께 사용할 수 있습니다.2. Partial Hydration (부분 하이드레이션): Astro는 기본적으로 정적 HTML을 생성하며, 필요한 부분만 JavaScript로 하이드레이션(동적으로 활성화)하여 클라이언트에서 실행합니다.이를 통해 JavaScript 로딩을 최소화하고 페이지 로드 속도를 최적화합니다.3. 파일 기반 라우팅: 파일 구조를 기반으로 라우팅을 자동으로 처리합니다.4. 빠른 빌드와 최적화: Vite를 기반으로 하여 빌드 속도가 매우 빠릅니다. 정적 HTML을 우선..

React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..

React는 MVC패턴에서 V(View)를 담당하고 있습니다. 앱이 가벼운 경우에는 State로 데이터를 핸들링 할 수 있지만, 앱이 커질 경우에는 데이터 관리를 별도로 해야하는 요구사항이 생기게됩니다. 이때 사용할 수 있는 것이 Redux와 MobX 등, 상태 관리 라이브러리입니다. redux-saga는 redux의 액션 생성자와 reducer의 순수성을 유지하고 사이드 이펙트를 처리하기 위해 사용합니다. 여기서 사이드 이펙트는 부작용을 발생시키는 어떠한 효과가 아니라, 데이터 요청이나 비동기 작업, 브라우저 캐시 같이 순수하지 않은 작업들을 의미합니다. Redux-Saga란? redux-saga는 리덕스의 미들웨어입니다. 리덕스가 액션을 수행하면 redux-saga에서 디스패치하여 redux의 액션을..

리액트 컴포넌트는 생성(Mount), 갱신(Update), 제거(Unmount) 주기를 가지게됩니다. 해당 주기에서 사용되는 메소드에 대해 알아보겠습니다. 생성(Mount) constructor(props) 메소드를 바인딩 하거나 state를 초기화하는 작업이 없을 경우 사용합니다. 만약, 해당 작업이 없다면 사용하지 않아도됩니다. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state로 넣어주고 싶을때 사용합니다. state를 변경할 때는 setState가 아닌 반환 값으로 변경해야하며 반환 값이 null일 경우에는 아무일도 발생되지 않습니다. render() 반드시 구현되어야하는 유일한 메소드입니다. 이 메소드가 호출되면 this.pr..