프로젝트 배경

'모던리액트DeepDive'란책을읽으며React의동작원리를이해하고,기본기를다질수있었습니다.

이를바탕으로이전직장인MEMENTOAI에서리액트렌더링이나최적화관점에서나름의성과를거둘수있었습니다.

프론트엔드개발자로서더욱성장하기위해서는제가다루는도구들의동작원리를정확하게이해하고이를활용할수있어야한다는생각이명확해지게되었고,TSXCraft프로젝트를시작하게되었습니다.

App.tsx 사용 예시

담당 역할

Babel, Webpack 세팅

React와 같은 폴더 구조를 활용할 수 있게 구현

개발 서버 빌드 타임 100ms 내외로 구성

JSX 파싱 구현

JSX로 작성된 함수형 컴포넌트를 파싱 및 바벨에 연동

createElement 함수를 통해 바벨에서 변경된 결과 처리

Renderer 클래스 구현

createElement로 생성된 데이터를 렌더링하는 클래스 구현

React 15 버전의 동기식 재조정 과정과 유사한 재조정 알고리즘 구현(추후 concurrent mode로 수정 예정)

Router 구현

react에서의 동작 방식와 마찬가지로 화면을 새로고침 하지 않고 파이버 노드 업데이트를 통한 화면 갱신 로직 구현