일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- javascript
- 프론트엔드
- 항해
- 항해플러스
- webGPU
- typescript
- rust
- FE
- GPU
- 회고
- 개발 공부
- 알고리즘
- 테스트 코드
- frontend
- 분기 회고
- React
- 항해 플러스
- 자바스크립트
- naver
- 개발공부
- 항해99
- React Query
- wil
- 리뷰
- 성능최적화
- 백준
- 성장일지
- 개발자
- 항해 플러스 프론트엔드
- 보안
- Today
- Total
느릿늘있
[항해 플러스 프론트엔드 3기] 4주차 WIL 본문
Q1. 과제
이번주 과제의 주제는 Clean Code였습니다. 테오 코치님이 클린 코드는 집정리와 같다고 말씀해주시는데 자취 5년차로서 아주 아주 공감이 갔습니다. 청소광이 보는 클린 코드와 무던한 사람이 보는 클린 코드의 기준은 다를 수 있겠지만 보편적인 관점에서 클린하다는 것은 어느 정도의 기준이 있는 것 같습니다. 이번 시간에는 테오가 말아주는 깨끗한 프론트엔드 코드에 대해서 학습할 수 있었고 너무 좋은 시간이었습니다.
Q2. 시도
매우매우 더티한 코드가 주어졌고 이를 클린하게 개선하는 미션이 주어졌습니다. 함수와 변수의 명칭을 개선하고 로직을 분리 및 구조화하고 더 가독성 있게 만들려고 노력했습니다.
Q3. 문제점
처음부터 MVC와 같은 패턴 혹은 아키텍쳐에 대해서 고민하려는 시도를 하지 않았습니다. 당장 눈에 보이는 것들부터 뜯어 고치고 비즈니스 로직에만 집중하다보니 큰 그림을 놓치고 자기 함정에 빠졌던 것 같습니다. 처음 시작할 때, rendering 부분을 분리하고 싶다는 생각을 잠깐 하긴 했었는데 어떻게 하면 되는 지 바로 떠오르지 않으니까 그냥 하자는 생각으로 넘어갔던 게 큰 패착이었던 것 같습니다.
Q4. 해결
프레임워크가 없는 Vanilla JS에서 View를 어떻게 분리하지? 생각보다 답은 간단했습니다. 리터럴 문자열을 innerHTML 또는 textContent로 DOM Element에 주입하면 View를 그리는 로직을 분리할 수 있습니다. View를 분리해야한다는 생각이 확신으로 이어졌더라면 이 정도는 생각해낼 법 했는데 아쉽습니다. 이 또한 실력이겠지요... View는 분리하지 않은 채로 상태는 또 분리하려고 시도하다보니 더티 코드가 오히려 더 더티더티코드가 되어버렸답니다.. :(
Q5. 4주차 느낀 점
이 정도 수준의 미션을 회사를 다니면서도 뚝딱뚝딱 해내는 몇몇 동기분들과 코치님들이 요구하는 수준을 보면서 나는 아직 멀었구나라는 생각이 듭니다... 1~3주차에는 그나마 빨간 날이 많았었는데 빨간 날 하루없이 쌩으로 회사 다니면서 과제를 하려고 하다 보니 포기하고 싶은 마음이 정말 많이 들더군요... (회사를 때려 칠 수는 없잖아요... ㅎ_ㅎ) 실제로 중도 하차 하시는 분들도 조금 보이는 것 같은데 저는 그냥 미련하게 끝까지 가보렵니다! 못 하는 것보다 포기하는 게 더 부끄러운 일이니까요!
'성장일지' 카테고리의 다른 글
[항해 플러스 프론트엔드 3기] 6주차 WIL (0) | 2024.11.02 |
---|---|
[항해 플러스 프론트엔드 3기] 5주차 WIL (0) | 2024.10.26 |
[항해 플러스 프론트엔드 3기] 3주차 WIL (0) | 2024.10.11 |
[항해 플러스 프론트엔드 3기] 2주차 WIL (0) | 2024.10.05 |
[항해 플러스 프론트엔드 3기] 1주차 WIL (0) | 2024.09.28 |