느릿늘있

[항해 플러스 프론트엔드 3기] 4주차 WIL 본문

성장일지

[항해 플러스 프론트엔드 3기] 4주차 WIL

JHKim93 2024. 10. 19. 20:03

Q1. 과제

  이번주 과제의 주제는 Clean Code였습니다. 테오 코치님이 클린 코드는 집정리와 같다고 말씀해주시는데 자취 5년차로서 아주 아주 공감이 갔습니다. 청소광이 보는 클린 코드와 무던한 사람이 보는 클린 코드의 기준은 다를 수 있겠지만 보편적인 관점에서 클린하다는 것은 어느 정도의 기준이 있는 것 같습니다. 이번 시간에는 테오가 말아주는 깨끗한 프론트엔드 코드에 대해서 학습할 수 있었고 너무 좋은 시간이었습니다.

Q2. 시도

  매우매우 더티한 코드가 주어졌고 이를 클린하게 개선하는 미션이 주어졌습니다. 함수와 변수의 명칭을 개선하고 로직을 분리 및 구조화하고 더 가독성 있게 만들려고 노력했습니다.

Q3. 문제점

  처음부터 MVC와 같은 패턴 혹은 아키텍쳐에 대해서 고민하려는 시도를 하지 않았습니다. 당장 눈에 보이는 것들부터 뜯어 고치고 비즈니스 로직에만 집중하다보니 큰 그림을 놓치고 자기 함정에 빠졌던 것 같습니다. 처음 시작할 때, rendering 부분을 분리하고 싶다는 생각을 잠깐 하긴 했었는데 어떻게 하면 되는 지 바로 떠오르지 않으니까 그냥 하자는 생각으로 넘어갔던 게 큰 패착이었던 것 같습니다.

Q4. 해결

  프레임워크가 없는 Vanilla JS에서 View를 어떻게 분리하지? 생각보다 답은 간단했습니다. 리터럴 문자열을 innerHTML 또는 textContent로 DOM Element에 주입하면 View를 그리는 로직을 분리할 수 있습니다. View를 분리해야한다는 생각이 확신으로 이어졌더라면 이 정도는 생각해낼 법 했는데 아쉽습니다. 이 또한 실력이겠지요... View는 분리하지 않은 채로 상태는 또 분리하려고 시도하다보니 더티 코드가 오히려 더 더티더티코드가 되어버렸답니다.. :(

Q5. 4주차 느낀 점

  이 정도 수준의 미션을 회사를 다니면서도 뚝딱뚝딱 해내는 몇몇 동기분들과 코치님들이 요구하는 수준을 보면서 나는 아직 멀었구나라는 생각이 듭니다... 1~3주차에는 그나마 빨간 날이 많았었는데 빨간 날 하루없이 쌩으로 회사 다니면서 과제를 하려고 하다 보니 포기하고 싶은 마음이 정말 많이 들더군요... (회사를 때려 칠 수는 없잖아요... ㅎ_ㅎ) 실제로 중도 하차 하시는 분들도 조금 보이는 것 같은데 저는 그냥 미련하게 끝까지 가보렵니다! 못 하는 것보다 포기하는 게 더 부끄러운 일이니까요!