[지하철 노선도 미션] 권선영 미션 제출합니다.

[SunYoungKwon]

지하철 노선도 미션

이번 미션을 진행하며

• 시멘틱한 HTML 구조를 만들기 위해 노력함
• 하드코딩된 부분을 최대한 줄이고자 상수 분리에 신경씀
• data속성에 대해 공부함
• [지하철 노선도 미션] 김미혜 미션 제출합니다. #7 PR문서에 더미 데이터 올려주신 김미혜님 감사해요:)

파일 구조

component 단위로 파일 분리함.
자식 컴포넌트에게 상위 컴포넌트에서 관리하는 자원을 내려주다보니 점점 코드가 복잡해진다고 느꼈습니다. 다른 분들의 PR을 보니 MVC 패턴으로 구조를 잡으신 분들이 많이 보였습니다. MVC 패턴을 활용하여 구현하신 분들의 코드를 보면서 MVC 패턴으로 구조 잡는 방법에 대해서도 학습해봐야겠습니다.

다양한 HTML 태그 사용

이번 미션을 진행하며 어느때보다 다양한 태그를 사용해 본 것 같습니다. 시멘틱한 구조를 만들기 위해 <header>, <nav>, <main> 등의 태그를 사용했습니다. <section>과 <article>태그에 대해서는 아직 사용처에 대한 개념이 명확하지 않아 더 학습해봐야 할 것 같습니다. 평소 잘 사용하지 않아 잊고있던 <table>과 <select>태그는 따로 공부한 후 미션을 진행했습니다.

Event Delegation

화면이 전환되거나 상태가 업데이트 될 때마다 innerHTML을 이용해 새로 그리다보니 모든 이벤트를 Event Delegation으로 추가했습니다. 다만 container역할을 하는 태그에 이벤트를 주다보니 불필요하게 범위를 크게 잡게되지 않았나 하는 생각이 듭니다.

함수 15라인 제한

JS 내장함수를 적극적으로 사용하다보니 두 번째 미션까지는 크게 신경쓰지 않아도 15라인이 넘어가는 일이 거의 없었는데, 이번 미션을 진행하며 함수가 길어져 분리하는 일이 여러번 있었습니다. 그 과정에서 내가 만든 함수가 한 가지 일만 하고 있지 않았다는 것을 깨닫고 구현과정에 더 신경쓰게 되었습니다.

참고 사이트

• [HTML 바로 알기] Semantic Web을 위한 Semantic Elements - bono