[항해 플러스 프론트엔드 3기] 2주차 회고

osohyun0224·2024년 10월 5일

WIL 항해 플러스

항해 프론트엔드 플러스 3기

목록 보기

3/12

안녕하세요 프론트엔드 개발자 Garden, 오소현입니다:)
저는 요즘 항해 플러스 프론트엔드 3기 코스 과정에 참여하면서 공부하고 있는데요!
오늘은 그 2주차의 회고를 진행해보려고 합니다 !

[1] 과제 회고

우선 이번주차 과제는 " 프레임워크 없이 SPA 만들기 Part 2" 과제였습니다!
과제를 하면서 주요한 토픽이 있었는데 아래의 2가지를 한 번 보겠습니다 :)

주요한 토픽 2가지

Topic 1. 주어진 DOM 요소에 다양한 속성을 적용하는 함수 개선

createVNode(v1,v2)에 쓰이는 가상 노드의 속성들을 실제 DOM 요소에 반영하는 함수를 아래와 같이 개선해보았습니다.

이전의 이벤트 핸들러를 중앙에서 관리하는 방식으로 이벤트 위임을 했던 과거 버전의 applyProps 함수

개선한 내용

1) 이벤트 핸들링 개선

처음에 구현했던 기존의 함수는 모든 이벤트 리스너를 문서의 루트에 추가하여 이벤트 위임을 사용하는 방식으로 구현되어있었기 때문에 이벤트 전파 과정에서 원하지 않는 이벤트 핸들링이 발생할 수 있었습니다. 지난 주차 멘토링에서 받았던 이벤트 전파에 대한 피드백을 반영하여,

각 요소에 필요한 이벤트만을 직접 등록함으로써, 불필요한 이벤트 전파를 방지하도록 이점을 개선했습니다.

2) 스타일 적용 방식에 대해 안정성 높이기

기존의 함수에서 스타일 객체를 직접 할당하는 방식은 오류 발생 시 전체 스타일 적용이 실패할 수 있다는 위험성을 가지고 있었습니다. 오류 처리 메커니즘이 없어, 잘못된 스타일 값이 적용 시도될 때 문제를 파악하기 어려웠습니다.

스타일 속성을 개별적으로 적용하면서, 각 스타일 적용 시도에서 예외를 캐치하고 오류를 출력하도록 이점을 개선했습니다.

3) 코드 일관성을 높이기

특정 속성에 대한 처리가 일관되지 않았던 기존에 함수에 대해 일관성을 높이고자 하였습니다.

className을 class 속성으로 일관되게 설정하고, 모든 속성을 setAttribute을 사용하여 처리함으로써 HTML 요소에 속성을 적용하는 방식을 표준화하였습니다.

위와 같이 코드를 개선하고자 노력했고, 개선한 부분에 대해 올바르게 구현했는지 궁금합니다! 개선한 코드는 다음과 같습니다.

현재 이전의 applyProps 함수가 가지고 있던 성능과 안정성의 문제를 개선한 applyPropsBatch 함수

Topic 2. 코드의 일관성과 네이밍

이번주차 과제는 뚜렷하게 함수명과 그 기능에 대한 제시문이 꼼꼼하게 출제되어, 이를 반영하면서 구현하니 테스트 코드를 통과하며 과제를 마칠 수 있었습니다.

따라서 저는 테오 코치님의 게슈탈트 법칙으로 이해하는 클린코드: 가독성의 비밀 의 글을 보며, 좋은 코드를 만들기 위해 알아야할 3가지(좋은 모양, 좋은 구조, 좋은 이름)을 반영하기 위해 이번주차 코드를 리팩토링하는 과정에서 이를 많이 신경써서 개발을 진행했습니다. (좋은 글을 작성해주셔서 다시한번 더 감사합니다 테오! Vv)

리팩토링 내용

1) 함수의 기능을 명확하게 드러내는 네이밍 짓기

createElement에 사용되는 주어진 props 객체의 모든 속성을 DOM 요소에 일괄적으로 적용하는 함수를 applyPropsToElement라는 함수명으로 작성했습니다. props 객체의 모든 속성을 하나의 DOM 요소에 적용한다는 것을 'to Element'라는 표현을 사용하여, 모든 속성을 특정 DOM 요소에 적용하는 일괄 처리 작업이라는 것을 내포하기 위해 위와 같이 네이밍을 하게 되었습니다.
createElement__v2에 사용되는 주어진 DOM 요소에 하나의 속성(key-value 쌍)을 적용하는 함수를 applyPropsBatch라는 함수명으로 작성했습니다. "batch"가 "묶음으로" 속성을 적용한다는 의미를 가지고 있어서 함수가 하나의 속성 쌍(key-value)을 받아 처리한다는 것을 명확히 하고, 각각의 속성을 독립적으로 적용한다는 것을 내포하기 위해 위와 같이 네이밍을 하게 되었습니다.

둘의 네이밍을 위와 같이 생각해서 지어보았는데 좋은 코드를 작성하는 방향으로 잘 가고 있는지 궁금합니다!

2) 코드의 일관성 높이기

코드의 일관성을 높이기 위해 다양한 고민을 해보았습니다.

조건에 필요한 모든 함수에서 if 조건문의 사용, 반복문 및 재귀적 호출 방식이 일관되도록 개선해보았습니다.
코드를 설명하기 위해 사용된 jsdoc의 형식을 @terms, @param, @returns 등을 일관되게 사용하여, 각 함수의 목적과 매개변수, 반환 값에 대한 설명을 표준화하고자 노력해보았습니다

특히 코드에 대해 일관성을 높이고자 하는 부분에 대해 좋은 코드를 작성하는 방향으로 잘 개선했는지 궁금합니다!
제 과제에서 더 일관성을 높이고자 한다면 어떤 방식으로 개선하면 좋을지도 궁금해요 👀

과제를 수행하면서 느낀 점

제시된 함수들의 return 값들의 형식이 무엇인지 신경써야 테스트를 통과할 수 있던 점이 많아서 jsdoc을 사용하면서 계속 파악한게 과제 해결에 도움이 되었습니다 👏🏻
이번 주차에는 형식이 주어진 것과, 제시문이 명확하게 작성되어 있어서 이대로 개발을 차근차근 해나아갔더니 테스트를 통과했습니다 💯
그래서 코드 확장성과 중복되는 로직에 대해 따로 공통 함수를 만들고 싶다는 고민이 있었지만 제시문을 만족하는 데에 우선 신경을 썼습니다
나중에 리팩토링을 꼭 해보고 싶다는 생각이 들었어요!
준일 코치님의 블로그 글과, 추천해주신 책, 학습 자료로 이번 과제 제시문들을 이해하는데 도움을 많이 받았어요!! 처음에 받고는 어렵겠다 싶었는데 문제를 잘 이해하고 나니 제시문과 함께 푸니까 해결할 수 있었습니다. 좋은 글과 학습 자료 제공해주셔서 감사합니다 준일 코치님!