반응형 프론트엔드5 [React] Virtual DOM Virtual DOM이란? React에서 Virtual DOM은 실제 DOM과 동기화되는 가상의 DOM 표현입니다. React는 변경된 부분만 실제 DOM에 반영하여 성능을 최적화하는 방식으로 작동합니다. Virtual DOM 작동 원리 컴포넌트의 상태(state)나 속성(props)이 변경되면, React는 Virtual DOM에 해당 컴포넌트의 새로운 가상 표현을 만듭니다. 가상 DOM은 일반 JavaScript 객체로 구성되어 있으며, 컴포넌트의 계층 구조와 속성을 반영합니다. 새로운 가상 DOM과 이전 가상 DOM을 비교하여 변경된 부분을 식별합니다. 이 과정은 효율적인 알고리즘을 사용하여 수행됩니다. 변경된 부분을 찾은 후에는 React는 해당 부분만 실제 DOM에 반영합니다. 이를 위해 DOM.. 2024. 2. 17. [React] 제어(Controlled) 컴포넌트와 비제어(Uncontrolled) 컴포넌트의 차이 React에서 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 데이터 흐름과 상태 관리 방식의 차이에 따라 구분됩니다. 1. 제어 컴포넌트(Controlled Component) - 제어 컴포넌트는 React의 상태(state)를 사용하여 데이터를 관리합니다. - 컴포넌트의 상태(state)를 업데이트하고, 이를 컴포넌트의 속성(props)로 전달하여 UI를 제어합니다. - 사용자 입력에 대한 이벤트 핸들러를 통해 상태(state)를 업데이트하고, 업데이트된 상태를 UI에 반영합니다. - 예를 들어, `` 요소의 값을 상태(state)로 관리하고, `onChange` 이벤트 핸들러를 통해 상태(state)를 업데이트하여 사용자 입력에 따.. 2024. 2. 16. JavaScript Animation과 CSS Animation 차이 CSS 애니메이션과 JavaScript 애니메이션은 웹 페이지에서 동적인 요소를 만들기 위해 사용되지만 다른 접근방식을 보입니다. 1. CSS 애니메이션 CSS 애니메이션은 CSS 속성을 사용하여 웹 요소에 애니메이션 효과를 적용하는 방식 주로 @keyframes 규칙을 사용하여 애니메이션의 시작 상태와 종료 상태, 그리고 중간 단계의 스타일을 정의 CSS 애니메이션은 주로 시각적인 요소에 대한 애니메이션에 사용됩니다. 예를 들어, 요소의 이동, 회전, 크기 변화, 색상 변화 등을 담당 CSS 애니메이션은 브라우저에 내장된 애니메이션 엔진을 사용하므로, 성능 면에서 일반적으로 JavaScript 애니메이션보다 부드럽고 효율적 CSS 애니메이션은 간단한 애니메이션 효과를 적용하기에 편리하며, 코드가 간결하.. 2024. 2. 16. Webpack, Babel, Polyfill 1. Webpack 웹팩은 JavaScript 애플리케이션을 위한 정적 모듈 번들러 웹팩은 애플리케이션을 구성하는 다양한 모듈(JavaScript, CSS, 이미지 등)들을 의존성 그래프로 분석하고 이를 하나의 번들 파일로 묶어주고, 이렇게 번들링된 파일은 브라우저에서 로드되어 실행될 수 있습니다. 웹팩은 다양한 로더(loader)와 플러그인(plugins)을 제공하여 코드 변환, 번들 최적화, 자동화 등의 기능을 제공하며, 주로 모던 JavaScript 개발에서 모듈 시스템을 사용하고 코드 번들링을 필요로 할 때 웹팩을 사용합니다. 2. Babel 바벨은 자바스크립트의 최신 문법을 구버전 브라우저에서도 동작할 수 있도록 변환해주는 도구 최신 버전의 자바스크립트 문법(ECMAScript)은 모든 브라우저.. 2024. 2. 16. GraphQL 정리 Gql Query vs Gql Mutation gql에서는 굳이 쿼리와 뮤테이션을 나누는데 내부적으로 들어가면 사실상 이 둘은 별 차이가 없습니다. 쿼리는 데이터를 읽는데(R) 사용하고, 뮤테이션은 데이터를 변조(CUD) 하는데 사용한다는 개념 적인 규약을 정해 놓은 것 뿐입니다. Schema/Type Gql 스키마 = C,C++ 헤더파일 작성과 비슷. Object type/field ex) type Character { name: String! appearsIn: [Episode!]! } 오브젝트 타입 : Character 필드 : name, appearsIn 스칼라 타입 : String, ID, Int 등 느낌표(!) : 필수 값을 의미(non-nullable) 대괄호([, ]) : 배열을 의미(ar.. 2023. 12. 27. 이전 1 다음 반응형
