목록프론트엔드 (2)

Develop+

리액트 코어 - 리액트의 virtual dom 그리는 방식 파해쳐보기

일단 바닐라js로 리액트 코어를 만들어보려고 한다. 컴포넌트의 ui를 만드는 JSX 는 js문법이 아니기 때문에 js로 바꿔야 하기 때문에 babel을 사용해 변환을 해줄 것이다. 시작하기 전 리액트 버츄어돔에 대한 이해 리엑트는 버츄얼돔을 가지고 있다. 버츄얼 돔을 만든다면 어떻게 만들 수 있을까??? 리액트의 버츄어돔도 오픈소스이기 때문에 전부 공개되어있다. 버츄얼돔은 기본적으로 HTML태그를 변환시키는 구조로 되어있을 것이다. 그러면 html태그는 어떻게 생겼을까. 태그가 있고 그 안에 속성 id등등이 있고, 태그는 열리고 닫히고 내부에는 자식 노드들이 있다. 이걸 버츄어 돔으로 js친화적인 데이터로 만들면 어떨까? js 친화적긴 데이터란 객체이다. EXAMPLE 이걸 객체로 바꾸면 어떨까 객체도 ..
React 2022. 11. 7. 13:33
안정적인 프로덕트를 위한 코드 구조와 관리

모든 요소들은 생명주기를 가지고 있다. 생명주기는 왜 있어야할까? 코드로 만들어진 가상세계에도 생명주기가 있어야 할까? > 모든 자원들이 유한하기 때문에 생명주기가 있다. 예를들면 컴퓨터 시스템 내의 파워,시스템 등등이 유한하다. 지금은 빠르지만 미래에는 느리게 느껴지는 속도 지금은 많은 용량같지만 나중에 가면 작은 용량이 되기도 한다. 생명주기를 가진 요소들이 변화에 잘 어우러져서 하나의 서비스를 만드는데 효과적인 전략을 취할 수 있다. 이게 라이프사이클을 충분히 이해해서 잘 구성된 것을 잘 구조화된 아키텍쳐라고 할 수 있다. 프론트앤드를 구성하는 요소들 모듈, 함수, 컴포넌트 등의 생명주기는 얼마나 될까? 강의에서는 1년정도라고 생각한다고 한다. 대부분의 코드가 굉장히 오래 쓴다고 하더라도 프론트앤드..
그냥 내 이야기 2022. 11. 3. 23:10
이전 Prev 1 Next 다음