웹 공부

웹 공부

React Fiber 구경하기

https://d2.naver.com/helloworld/2690975 해당 글을 읽고 알게된 내용에 대해 정리하는 글입니다. JSX 로 선언된 표현식은 React 엘리먼트라는 객체로 치환됩니다.React 엘리먼트는 일반 객체입니다. (클래스 인스턴스가 아님) -> JSX 가 표현식이 치환된 객체이므로 태그 이름, 어트리뷰트 및 값, 자식 등의 정보가 있을 것이라 유추할 수 있습니다. native DOM 에 React 엘리먼트를 렌더링하기 위해서는 루트를 생성해야 합니다.React 엘리먼트는 native DOM 에 바로 렌더링 할 수 없고 루트를 통해 렌더링해야 합니다.React 엘리먼트를 업데이트하려면 생성과 유사하게 새로운 React 엘리먼트를 생성하고 루트를 통해 렌더링해야 합니다. N 개의 엘리먼..

웹 공부

React - Controlling an input with a state variable

예를 들어 컴포넌트의 경우 리액트에서 제공하는 상태를 통해 관리하고 있지 않기 때문에 비제어 컴포넌트 입니다. 만약 defaultValue 를 통해 초기 값을 전달한다고 하더라도JSX 는 initial value 를 보여줄뿐 현재 값이 무엇이여야 하는지 제어하지는 않습니다. 제어 컴포넌트로 렌더링 하려면 value 라는 props 를 전달하세요 React는 입력이 항상 전달한 값을 가지도록 강제할 것입니다. 제어 컴포넌트로 전달되는 value 는 undefined 나 null 이 될 수 없습니다.만약 초기 값으로 빈 값을 전달하고 싶다면 빈 스트링 으로 상태를 초기화해야 합니다. 만약 onChange 없이 value 를 전달한다면 input 컴포넌트에 무언가를 타이핑 할 수 없습니다.Input 에 va..

웹 공부

브라우저와 Node 환경에서의 Date 객체는 어째서 다를까 ?

해당 내용은 잘못된 정보를 포함하고 있을 수 있습니다. 앞 내용에 대해 이야기하기 앞서 시간대에 대한 정의가 우선적으로 되어야 할 것 같습니다. 그리니치 평균 시(GMT, Greenwich Mean Time)그리니치 천문대를 기점으로 하는 협정 세계시입니다. 협정 세계시(UTC, Coordinated Universal Time)세슘 원자 진동수를 기반으로 측정합니다.기술적인 표기에는 UTC를 사용합니다. 시간대360도를 24로 나누면 15도 당 1 시간경도 15도 단위로 한 시간씩 차이가 납니다.대한민국 시간대(KST, Korean Standard Time) 는 경도 135도 를 기준으로 UTC+9 에 속합니다. ISO 8601날짜와 시간과 관련된 데이터 교환을 다루는 국제 표준입니다.표준 내에서 특정 ..

웹 공부

제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트 (Controlled Component)폼 – React (reactjs.org) 폼 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org HTML 에서 폼 엘리먼트(, , )는 사용자의 입력을 기반으로 자신의 state 를 관리하고 업데이트 합니다.반면 React 에서는 변경할 수 있는 state 가 일반적으로 컴포넌트의 state 속성에 유지되며 setState 에 의해 업데이트 됩니다. React 에서는 React state 를 "신뢰 가능한 단일 출처 (single soure of truth)" 로 만들어 두 요소를 결합할 수 있다고 합니다.즉 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사..

웹 공부

useState 객체는 왜 useEffect 를 유발하지 않을까 ?

useEffect 의 deps 에 일반적인 객체를 넣을 경우 리렌더링이 발생했을 때 useEffect 가 다시 작동하게 됩니다. 헌데, useState 를 통해 선언된 객체를 집어넣었을 경우 리렌더링이 발생하지 않습니다. 왜 그런건지 조사해보도록 합니다. 우선 ref 를 통해 이전 렌더링의 값과 현재 렌더링의 값이 같은지 동치 연산자(===) 를 통해 확인했을 때는 useState 훅으로 만들어진 값은 같은 값으로 판단하고 일반적인 객체는 다른 값으로 판단합니다. useState useState – React useState – ReactThe library for web and native user interfacesko.react.dev 우선 공식문서를 확인하며 원하는 내용이 있는지 확인합니다. us..

웹 공부

CommonJS 와 ES Modules

이번에 바닐라 자바스크립트 패키지를 개발하며 모듈에 대한 지식이 부족하다 생각되어 CommonJS 와 ES Modules 에 대해 조사해보았습니다. commonJS 모듈은 ECMAScript module 가 나오기 이전에 자바스크립트 모듈을 불러올 때 사용하는 방식이였습니다.  우선 시작하기 앞서 "모듈"은 무엇이고 이러한 "모듈 시스템"이 탄생하게 된 배경에 대해 알아보도록 하겠습니다. Node 환경에서 이야기하는 "모듈"이란 코드가 작성된 각 파일을 별도의 "모듈" 이라고 정의합니다. "모듈 시스템"이 발생하기 이전Kevin Dangoor 이라는 개발자는 JavaScript 에 필요한 내용들을 네 가지 언급했습니다.1. cross-interpreter standart library2. standard..

beingB
'웹 공부' 카테고리의 글 목록