프로젝트 배경
삼성청년SW아카데미를수료한이후,프론트엔드개발자로서성장하기위해JavaScript관련지식들을점검하고있었습니다.
해당지식들을활용해서단순한서비스가아닌,JavaScript를활용해서조금더깊이가있는프로젝트를해보고싶었습니다.
이러한생각들때문에해당프로젝트를시작하게되었습니다.
부포 컴포넌트
자식 컴포넌트
구현 내용
Routing
Express를 활용한 미들웨어를 구현하여 새로고침 및 직접 url을 입력하는 경우 처리
history API를 활용하여 화면 깜빡임 없이 url 변경에 대한 라우팅 구현
이벤트 위임을 통해 anchor 요소에 이벤트 핸들러를 등록하지 않아도 페이지가 변경되게 구현
State Management
proxy를 활용하여 불변성을 유지하지 않는 vue-like한 상태 관리 구현
Rendering & Life Cycle
custom element를 활용하여 컴포넌트 클래스 구현 및 props 처리
requestAnimationFrame을 활용하여 렌더링 최적화 구현
beforeMount, mounted, beforeUpdate, updated 라이프사이클 메서드 구현
성과 및 배운 점
JavaScript 관련 지식을 재정립할 수 있었습니다.
Vanilla JS 기반의 SPA를 구현하며 기존에 확실히 모르던 부분들에 대해 짚고 넘아갈 수 있었습니다.
Proxy와 Object.defineProperty의 차이나 custom element와 같이 JavaScript에 관련된, 보다 근본적인 부분들에 대해 이해할 수 있었습니다.
SPA의 동작 과정을 이해하고, 이를 활용할 수 있게 되었습니다.
SPA에서의 라우팅을 처리하는 기본적인 원리와 렌더링을 적용하는 방식, 컴포넌트의 라이프 사이클을 체험할 수 있었습니다.
리액트에서 이를 어떻게 적용하면 좋을 지 고민해보는 시간을 가질 수 있게 되었습니다.