🌈 코드스쿼드 마스터즈 FE코스 시작
8주간의 CS코스를 마치고 FE 수업을 본격적으로 시작하게 되었다.
첫 미션은 아마존 웹사이트를 클론하는 과정으로,
HTML, CSS, JS를 사용하여 클론한다는 점에서 다른 클론 강의들과 비슷해보였지만,
협업을 위한 git과 친해지기 부터,
CS적인 부분까지 고려하며 학습할 수 있도록 미션이 구성되어 있었다.
특히, 코드스쿼드가 강조하는 함께하기의 효과를 확실히 체감할 수 있었다.
혼자서 학습하던 시간이 많았던 CS과정과는 다르게 12명의 동료들과 함께 같은 문제를
고민하고, 학습하고, 알려주고, 배우는 모든 과정은 우리 모두가 공감할 수 있는 만큼
성장하고 있음을 느낄 수 있었다. 그리고 특히 너무나도 함께함이 즐거웠다.
5월부터 시작되는 팀 프로젝트 미션도 함께 할수 있다는 생각에
두려움보다는 설레임이 큰 것 같다. ❤️
🧗♂️ 상태관리의 벽
두 번째 미션으로 네이버 뉴스스탠드를 구현해보는 미션이 주어졌다.
아마존 클론에서는 레이아웃과 애니메이션 위주의 학습이었다면,
뉴스스탠드에서는 설계와 ES module 그리고 상태관리가 주 학습 과제였다.
아마존 미션에서는 몇번 경험해본 친숙한 클론코딩과 동료들의 도움으로
조금은(?) 수월하게 미션을 수행해갔지만 처음 접한 상태관리라는 개념은
나에게 너무나 큰 벽으로 다가왔다.
리엑트의 경험이나 상태관리에 대한 이해가 빠른 동료들이 좋은 내용을 공유해주고
알려주려고 노력해주었지만
JavaScript Observer
Rethinking Web App Development at Facebook
개발자 황준일 : Vanilla Javascript로 상태관리 시스템 만들기
mvc, flux는 고사하고 옵저버 패턴의 이해도 현재의 나에게는 난이도가 어려웠다.
여러 패턴들을 이해해보려 하고 나는 어떤 패턴을 적용하여 프로그래밍을 해볼까만 고민하다..
결국 일주일 이라는 시간을 코드 한 글자 적지 못하고 보내게 되었다.
🤝 난이도 낮추기
결국 내가 선택한 방식은 store와 view만 먼저 나누어서 구현해보자 였다.
많은 사람들이 사용하는 방식과 노하우로 만들어진 다양하고 좋은 패턴들이 존재하지만,
그런 패턴이 탄생한 배경에도 상태관리를 위한 첫 단계들이 존재했을 것이고,
많은 단계들을 거치면서 필요성에 의해 발전된 것이 패턴일 것이다.
나는 이번 미션에서 자신의 실력을 받아들이고 자체적으로 난이도를 낮추어서
상태관리를 시도해보고 어째서 옵저버 패턴이나 mvc, flux와 같은 아키텍처가 필요하게 되었는지를 이해하는 것으로 학습 목표를 세웠다.
😅 나의 첫 상태관리
상태에 따라 렌더링이 일어나는 각각의 view들을 모듈화로 구성해주고
상태만을 가지고 있는 store들을 모듈화하여 구성했다.
그리고 이 모두를 하나의 로직처럼 컨트롤해주는 모듈(view들의 집합)로 구현했다.
각각의 view에서 이벤트가 발생하면 store의 상태가 변경되고 변경된 상태에
반응하는 view들만이 새롭게 렌더링 되도록 프로그래밍 되었다.
📃 정리하며
우선 상태관리를 통해 페이지의 전체 렌더링이 아닌 특정 view만이 렌더링 되도록
구현이 되었기에 미션 결과에 대해서는 개인적으로 만족하고 다행스럽게 생각한다.
특정 페턴이 적용되지는 않았지만,
컨트롤해주는 모듈을 C로 본다면 MVC 패턴과 비슷하게 구현이 된 것 같다.
여기서 컨트롤 모듈의 복잡성과 방대해짐에 새로운 기능의 추가나 수정에서 어려움이 커짐으로써,
어째서 view가 많은 FE에서는 MVC 패턴이 맞지 않는지도 조금은 체감을 한 것 같다.
리엑트를 학습하며 flux 아키텍처를 경험해보고 다시 한 번 바닐라 JS로 구현을 해봐야 겠다.
