바닐라 스크립트로 라우팅 구현을 한 타자게임을 만들어 보았습니다. 기존의 모듈 시스템을 이용한 리액트 프레임워크와 유사한 동작 방식 으로 간단한 프레임워크를 구현해보았습니다.
기존엔 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
폴더에 넣어 두었습니다.
개인적으로 주말마다 직장인들을 대상으로 소규모 프론트엔드 강의를 진행하고 있습니다. 스스로 자바스크립트에 강점이 있다고 느껴왔었는데요, 이번 프로젝트를 통해 스스로 돌아보는 계기가 되었으며, 한층 업그레이드 된 자신을 발견할 수 있었습니다. 굉장히 만족스러운 과제였으며, 평일에 퇴근하고, 주말에 강의 끝나고 개발하여 시간에 쫓겼음에도 즐겁게 임할 수 있었습니다. 무엇보다 라이브러리들의 소중함을 다시 일깨워주었으며 모듈화 시스템의 중요성을 되새겼습니다. 모듈화 시스템의 가장 중요한 점은 안정성과 확장성인 것으로 느껴지고 이 주제에 관해서는 카카오 컨퍼런스에서 토론을 해볼 재미있는 주제가 될 것 같습니다. 기존에 사용하던 라이브러리들이 어떻게 동작할까(?)라고 막연하게 생각해보고 중요한 모듈들의 코드들만 들여다보았는데, 이번에 직접 구현해 봄으로써 평소에 당연하게 사용하던 모듈들의 소중함을 또한 느낄 수 있었습니다.