바닐라 스크립트로 라우팅 구현을 한 타자게임을 만들어 보았습니다. 기존의 모듈 시스템을 이용한 리액트 프레임워크와 유사한 동작 방식 으로 간단한 프레임워크를 구현해보았습니다.
기존엔 SPA를 개발할 땐, react 라이브러리를 사용하여 개발을 진행하였는데요, vanilla javascript로 직접 프레임워크를 구현해 보았습니다. 하지만 routing을 통한 페이지 이동 시에 전역 객체를 두고 해당 객체만 변화시켜도 되지만, 보다 확장성 있는 개발을 위해, 컴포넌트 방식을 채택하였고, Redux모듈과 같은 Store를 두어 아키텍처를 구성하여 접근해보았습니다.
과제를 진행하면서 까다로웠던 부분은 렌더링 부분과 jsx를 사용하지 못한다는 점이었는데요, 렌더링 부분을 먼저 보자면, SPA의 경우 이벤트의 발생과 바인딩, 태그의 replace가 중요하다가 생각되었는데요, 때문에 url, event, tag가 변경될 때마다 pipe라인으로 실행 권한을 위임해 주는 일이 필요했고, 변환된 데이터의 값으로 화면을 replace해주는 부분이 필요했습니다. router의 경우 url 변화를 인지하여 이벤트를 걸고 core.config에서 잡아둔 컴포넌트를 렌더링 해주었습니다. class Component의 변화를 감지하기 위해 store를 두고 변화된 값을 인지할 때 render의 함수를 진행시켜주는 함수를 넣었습니다. constructor에서 store값을 받아 진행하면 해당 컴포넌트의 re-render링까지는 진행을 했는데요, 문제는 tag replace가 진행될 때 새로운 Template Literal 이 replace 되어 이벤트 바인딩이 끊기는 문제가 있었습니다. 해당 부분은 좀 더 연구가 필요할 것으로 판단되어 다른 방식을 채택하였는데요, Redux의 Store처럼 특정 컨텍스트에 Store를 생성하여 모듈을 export 하고 해당 값을 변경하는 방식으로 진행하였으며 render부분의 replace tag를 controller에서 돔으로 직접 접근하여 이벤트 바인딩을 진행해 주었습니다. 이 부분에서 가상 돔으로 진행할 시 didMount 부분과 updateMount, unMount의 필요성을 느꼈으나 시간 관계상 구현은 미루고 돔으로 직접 접근하였습니다. 페이지가 넘어갈 때 새로운 Template Literal 생성되어 이벤트 바인딩이 해제되는 것을 확인은 하였으나 메모리에 올라가있는 event Id를 체크하여 해제해 주는 기능까진 세세하게 구현하지 않았습니다. 이 부분에서 역시 까다로운 부분은 jsx를 사용하지 못한다는 점인데요. 처음엔 엘리먼트들을 각각 create하여 이벤트를 붙여주고 return해주는 방식으로 진행을 했는데, 가독성도 떨어지고, 코드와 프로젝트의 규모가 커질 시에 관리가 안 될 것으로 판단되어 Template Literal을 사용하여 진행해보았습니다. redner 되어 append되는 부분의 코드를 curring한 상태로 두고 로직 부분을 후에 실행하여, 이벤트를 바인딩 해주는 식으로 시도를 해보았는데 jsx처럼 외부 컨텍스트에서 함수를 가져와서 바인딩 해주는 게 아닌 이상 쉽지 않았습니다.
처음에 풀어나가보려고 했던 코드인데요, jsx 아닌 이상 render부분을 컨택스트 레이어에서 분리하기가 쉽지 않았습니다. 채택하였습니다. ssr 을 구현하면 좋았겠으나, 요구사항에서 벗어나는것 같아 진행하지 않았습니다.
저는 코드의 스타일을 통일 시키는 취향을 갖고 있는데, 이번 과제에는 보다 다양하게 보여드리는 게 좋지 않을까 판단되어 prototype부터 class문법을 활용하여 다양하게 구현해보았습니다. 때문에 코드가 장황해 보일 수 있는데요, 간단한 기능을 구현하는 과제라 함수형 프로그래밍처럼 세세하게 나눌 필요성은 못 느꼈습니다. 컴포넌트의 형식으로 최대한 쓰기 위해 전체적인 template, button, form, header 컴포넌트를 두었고 호출하는 방식으로 진행하였습니다. class Component의 특징은 render 부분에 모든 코드를 넣어 2번 렌더링 시키는 방식이 진행을 했었는데요, 생각보다 가독성이 좋지 않아 MVP pattern 에서 사용하는 방식처럼 class Component를 controller부분으로 나누고 model부분으로 나눠놓았습니다. style의 scss 부분의 스트럭처의 경우, 각 컴포넌트에 1개씩의 scss를 두고 컴포넌트의 이름으로 레이어를 분리해 주었습니다. 공통으로 쓰는 scss 모듈은 src/styles에 모아두고 함수들을 각 컴포넌트에서 @import 하는 형식으로 진행하였습니다. 자주 사용하는 모듈들은 lib폴더에 몰아두고 프로젝트가 확장되어 ssr이나 npm에 올라갈 목록들을 core 폴더에 넣어 두었습니다.
개인적으로 주말마다 직장인들을 대상으로 소규모 프론트엔드 강의를 진행하고 있습니다. 스스로 자바스크립트에 강점이 있다고 느껴왔었는데요, 이번 프로젝트를 통해 스스로 돌아보는 계기가 되었으며, 한층 업그레이드 된 자신을 발견할 수 있었습니다. 굉장히 만족스러운 과제였으며, 평일에 퇴근하고, 주말에 강의 끝나고 개발하여 시간에 쫓겼음에도 즐겁게 임할 수 있었습니다. 무엇보다 라이브러리들의 소중함을 다시 일깨워주었으며 모듈화 시스템의 중요성을 되새겼습니다. 모듈화 시스템의 가장 중요한 점은 안정성과 확장성인 것으로 느껴지고 이 주제에 관해서는 카카오 컨퍼런스에서 토론을 해볼 재미있는 주제가 될 것 같습니다. 기존에 사용하던 라이브러리들이 어떻게 동작할까(?)라고 막연하게 생각해보고 중요한 모듈들의 코드들만 들여다보았는데, 이번에 직접 구현해 봄으로써 평소에 당연하게 사용하던 모듈들의 소중함을 또한 느낄 수 있었습니다.