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

Q1. 과제

  이번주 과제는 SPA를 Vanilla JS로 구현하는 것이었다. 이번 주 과제를 진행하면서 마주한 문제들 중 가장 기억에 남는 두 가지를 뽑자면 구조 설계와 클릭 이벤트 처리였다.

Q2. 시도

  1. 구조 설계

• 시작할 때, 프로젝트 구조를 main -> router -> 각 component 구조로 구성하면 되겠다라고 생각했고 각각의 역할을 아래와 같이 부여했다.

1. main : 프로젝트 진입점, router에 현재 url path를 전달하여 컴포넌트를 실행함
2. router : 전달받은 path를 기준으로 각 컴포넌트를 실행함
3. component : 화면을 그림

  2. 클릭 이벤트 처리

• 버튼이면 버튼, a태그면 a태그를 querySelector로 잡아서 addEventListener click 이벤트를 등록해주고 preventDefault로 SPA 링크 + 추가 로직을 등록해주었다.

Q3. 문제점

  1. 구조 설계

• component에서 화면을 그리는 작업이 공통화가 가능한 작업인데 각 컴포넌트에서 각각하고 있었다.
• router를 전역 객체로 사용하다보니 두 개 이상의 컴포넌트에서 처리해야할 기능이 생기면 급한대로 함수의 성격과 상관 없이 router에다가 냅다 구현했고 기능은 동작하지만 다 만들고 보니 router에 대한 불필요한 의존성이 발생했고 결합도가 높은 코드가 되었다.

  2. 클릭 이벤트 처리

• 로그아웃 버튼을 누르면 버블링을 막았을 때 아무일도 일어나지 않게 하는 요구사항이 있었다. 나는 각 버튼에 addEventListener를 해주었기 때문에 이러한 event bubbling을 막는 목적의 테스트를 통과할 수 없었다.

Q4. 해결

  1. 구조 설계

• 시간상의 이유로 구조를 리팩토링하지는 못했다. 하지만 이렇게 글로나마 다시 정리해보자면 아래와 같은 구조로 리팩토링하면 더 클린한 코드가 될 수 있을 것 같다.

1. main
 - 프로젝트 진입
 - 전역에서 쓰이는 상태와 공통 함수를 관리
 - router를 활용하여 화면을 rendering한다.
2. router : 전달받은 path를 기준으로 각 컴포넌트를 실행한다.
3. component
 - 화면을 그리는 데 필요한 상태값들을 초기화한다.
 - 화면 동작에 필요한 함수들을 정의한다.
 - 화면에 필요한 페이지(HTML)을 반환한다.

  2. 클릭 이벤트 처리

• click 이벤트에 대해 root에서 일괄 처리한다. body 안의 모든 콘텐츠를 감싸고 있는 root 태그에 click 이벤트를 추가함으로써 브라우저 화면을 클릭했을 때 발생하는 모든 click 이벤트에 대해 하나의 eventListener에서 처리한다.
• capturing 단계에서 root를 무조건 타기 때문에 화면에 보여지는 어떤 요소를 클릭하더라도 이벤트에 대한 통제가 가능하며 정확하게 어떤 이벤트를 선택했는 지는 target 정보에 들어 있음으로 리스너 내부에서 각 target에 대한 동작을 일괄적으로 통제할 수 있다.
• 실제 React가 위와 같은 방식으로 동작한다고 한다.
• 해당 요구사항은 capturing과 targeting, bubbling이라는 DOM의 이벤트 처리 과정에 대한 이해를 돕기 위해 작성된 것이었고 stopPropagation으로 bubbling을 막는 것과 같은 아주 디테일한 상황에 대한 컨트롤이 가능한 코드를 짤 수 있게 해주었다.

Q5. 1주차 느낀 점

  이게 실무를 하고 있는 현역 개발자들을 대상으로 하는 프로그램이 맞나 싶을 정도로 과제의 양과 난이도가 상당하다. 하지만 뭐 어쩌겠나.. 네이버 다니는 코치님도 잠 안자고 준비 해주시는데 내가 뭐라고 후후후... 더 열심히 해야겠다는 생각 뿐이다!