[지하철 노선도 미션] 김기융 미션 제출합니다.

[goni-ssi]

이번 프리코스 역시 많은 것을 배울 수 있는 시간이었습니다.

이전보다 click event를 처리하기 까다로웠습니다. 처음에 있는 기능 선택 버튼들과 이후에 등장하는 버튼들이 모두 정상적으로 동작하기 위해서는 새로운 api를 공부해야했습니다. 첫번째 branch인 ‘yungo1846’은 1차, 2차 과정과 유사하게 index.html을 최대한 수정하지 않고 javascript로만 모든 것을 해결하려고 했습니다. 그러나 마지막 과제는 추가해야되는 HTML 요소가 많았기 때문에 코드가 전혀 깔끔하지 못했습니다. 따라서 index.html에 미리 DOM을 추가한 뒤, 필요한 요소만 javascript로 추가하는 방식으로 진행했습니다. 그것이 pull request로 제출한 ‘second_ver’입니다.

새로 배운 내용

우선, insertAdjacentHTML을 새로 알게 되었습니다. innerHTML은 간편하다는 장점이 있지만 초기화 문제가 있었습니다. Select, input 값, 그리고 child event listener를 모두 초기화하기 때문에 의도한대로 페이지가 동작하지 않는 문제가 있었습니다. 물론, 이를 해결하기 위해 구조를 바꾸면 되지만 상당히 복잡해질 가능성이 있습니다. 이 때문에 이전까지의 과제에서는 createElement로 HTML 요소를 만든 뒤, appendChild로 추가하는 방식을 사용하였습니다. 이러는 경우, innerHTML과는 다르게 child 요소들이 초기화되는 문제는 일어나지 않지만 코드가 굉장히 난잡해진다는 단점이 있었습니다. 코드를 어떻게 하면 깔끔하게 바꿀 수 있을까 고민하며 구글링을 하던 중 insertAdjacentHTML을 발견했습니다. 이 친구는 innerHTML처럼 간단하게 코드에 HTML 요소를 작성할 수 있음과 동시에 초기화 문제가 발생하지 않았습니다. 왜 이제서야 이런 친구를 발견했나 싶은 한편 있어줘서 고맙다는 생각이 들었습니다. 이 친구 덕분에 코드가 전체적으로 깔끔해지고 가독성이 올라갈 수 있었습니다.

두번째는 querySelectorAll() 입니다. querySelector가 기본적으로 getElementBy 보다 성능이 안 좋다고 하여 사용을 피해왔습니다. 그러나 querySelector는 클래스, id, tag 모두 하나의 메소드로 처리할 수 있다는 장점이 있었습니다. 더욱 크리티컬 했던 것은 getElementsByClassName()은 forEach와 map 메서드를 사용할 수 없다는 사실이었습니다. 반면 querySelectorAll()은 사용 가능합니다. getElementsByClassName()는 HTMLCollection type을 가지는데 이는 문서 내에 순서대로 정렬된 노드의 컬렉션으로 유사 배열입니다. 유사 배열이기 때문에 배열에서 제공하는 모든 메서드를 가지고 있지 않아 forEach와 map을 사용할 수 없는 것이었습니다. 따라서 여러 개의 요소를 for문 대신 forEach와 map을 사용하여 간단하게 코드를 작성하고 싶다면 querySelectorAll()을 사용하는 것이 좋습니다. 그러나 getElementsByClassName()를 꼭 써야한다면 spread syntax로 푼 뒤 배열로 묶거나, Array.from을 사용하여 배열의 메서드를 쓸 수 있도록 해줍니다.

세번째는 ‘closest’ 입니다. ‘closest()’는 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색합니다. 이 중 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환합니다. ‘closest()’를 사용하면 훨씬 쉽게 인접 요소를 찾을 수 있습니다.

마지막은 ‘display: none’ 입니다. 3차과제에서는 버튼을 클릭할 때만 특정 HTML 요소가 등장하게 해야하는데 이를 javascript로 매번 삭제하고 지운다는 것은 번거로울 뿐만 아니라 코드도 복잡해집니다. 미리 필요한 요소들을 DOM에 포함시켜 놓고 style을 display: none으로 설정한 뒤 필요한 상황에서만 display: block으로 보이게 만들 수 있습니다. 이를 통해 코드의 양을 줄이고 간결하게 만들 수 있었습니다.

고민 사항

사용자 localStorage에 다른 프로그램에서 사용하고 있는 stations와 lines가 있는 경우, 어떻게 처리해야하는지에 대한 의문이 생겼습니다. 이런 일은 쉽게 일어나지 않겠지만 항상 예외사항을 고려하는 자세가 필요하고 생각합니다. 현재까지 나온 해결방안은 다음과 같습니다.

후보1. localStorage의 stations와 lines를 초기화
=> 다른 프로그램에서 문제가 발생할 수 있음. 또한 초기화 시, 매번 페이지를 새로고침 할 때마다 초기화가 발생하기 때문에
localStorage 사용이유가 사라짐.

후보2. 다른 사람들이 절대 사용하지 않을 것 같은 네이밍을 사용한다.
=> 가장 쉬운 방법이지만 코드의 가독성을 위해 여기서는 사용하지 않음.

총평

이번 과제는 두 가지 구성으로 branch를 작성하였습니다. 첫번째는 온전히 제가 해오던 방식대로 진행하였고, 두번째는 다른 사람의 코드를 보고 영감을 받아 진행하였습니다. 제게는 ‘다른 사람의 코드를 보면 실력이 늘지 않는다.’라는 이상한 믿음? 같은 것이 있었는데 이번 과제를 계기로 완전히 깨지게 됐습니다. 오히려 다른 사람의 코드를 참고하는 것이 훨씬 많은 도움이 됐습니다. 전혀 생각하지 못한 방법으로 같은 문제를 해결한 사람도 있었고, 저와 문제해결 방법은 비슷하지만 구성이 다른 사람도 있었습니다. 무엇보다도 제가 잘 몰랐던 여러 javascript 메소드에 대해 공부할 수 있었습니다. 기말고사 기간 중 프리코스 과제는 부담스럽게도 느껴졌지만, 막상 딱 코드 첫 줄을 작성하고 난 뒤부터는 3일 내내 이 과제만 붙잡고 있을 정도로 재밌었습니다. 작성한 코드를 바로 확인할 수 있어 마치 게임처럼 흥미롭게 이어갈 수 있었습니다. 적성에 맞는 분야를 찾았다는 생각이 듭니다. 또, 효율적이고 깔끔한 프로젝트 구조를 위해 UML class diagram과 sequence diagram 작성 연습을 하면 좋을 것 같습니다. 이 흥미를 계속 이어가 더 좋은 개발자가 될 수 있도록 정진하겠습니다.

• 프리코스 후기를 적은 블로그 주소입니다.
  url : https://yung-developer.tistory.com/65

좋은 기회 제공해주셔서 감사합니다. 3주간 많은 것을 배울 수 있었습니다 😊