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

[zigsong]

프리코스 마지막 미션 제출합니다.
1, 2주차에 비해 조금 복잡한 과제를 하면서 많은 고민을 하고 배울 수 있었습니다.

1. localStorage의 item에 단순한 key, value값이 아닌 복잡한 형태의 객체를 넣는 것을 고민해볼 수 있었습니다. station과 line에 대한 정보를 저장하고, 데이터를 적절하게 추가/삭제하여 새로운 value값으로 update되도록 만들었습니다..

2. station과 line을 class로 구현할 생각을 했었으나, localStorage의 key를 각각 'stations'와 'lines'로 만들었고, 각 class마다 포함하는 멤버 property와 method가 많지 않을 것 같아 class는 사용하지 않았습니다. 다른 분들의 PR을 보니 class로 구현한 경우도 많았는데, 다른 구현 방식들도 살펴보며 새로 배울 수 있었습니다.

3. html 태그에 data 속성을 사용하여 table의 각 행마다 독립적인 속성을 가질 수 있도록 했습니다. id나 className 등이 아닌 data 속성을 이용하여 하나의 태그에 여러 개의 속성을 의미별로 구분할 수 있었습니다. 이후에 특정 data값을 가진 element를 querySelector를 이용해서 찾았는데, 이보다 더 좋은 방법이 있을지 궁금합니다.

4. 처음에 전체 앱의 구조 설계를 치밀하게 하지 않아서 코드 작성 이후에 중복 코드를 합치고 함수를 분리하는 과정이 오래 걸렸습니다. 그래서 commit도 계획대로 깔끔하게 분리되지 못하고, 추가적으로 생각해야 할 항목들이 많아졌던 것 같습니다. 코딩에 들어가기 각 단계에서 필요한 기능들과 예외 사항 등을 더욱 확실하고 꼼꼼하게 검토해야할 필요성을 느꼈습니다.

5. javascript로 html 태그와 속성, css 속성까지 컨트롤하려다 보니 코드가 길어진 부분도 있습니다. 파일을 분리시킬 만큼 많은 코드량은 아니라고 생각하여 필요할 때 조금씩 관련 코드를 추가했는데, style 관련 태그가 많아지면 style 파일을 따로 분리해야할 것 같습니다.

6. 많은 요소들을 추가하다보니 addEventlistener를 어느 시점에 추가해야 할지 어려움이 있었습니다. UI와 기능을 상황에 맞게 분리하여 코드를 작성함에 있어 javascript의 event handling 시점에 대해서 고민해볼 수 있었습니다.

7. 요소의 id와 class 이름, 에러 메시지 등을 상수화하였는데 아직 깔끔하게 정리하는 것이 미숙한 것 같습니다. 그러나 literal을 최대한 줄여 코드를 작성해 나가는 것을 연습할 수 있었던 시간이었습니다.

---

3주 간의 프리코스를 마무리하며, 부족한 부분들을 많이 깨닫고 연습할 수 있었습니다. 다른 분들의 PR을 보며 참고하기도 하고, 알고 있다고 생각했던 것들도 다시 검색해 보며 기본기를 조금 더 단단하게 만들 수 있게 된 것 같습니다. javascript 프레임워크로만 주로 개발을 해왔기에 컴포넌트화가 제대로 되지 않은 채 pure javascript만으로 과제를 수행하는 것이 조금 어색하기도 하였으나, 프론트엔드 개발을 연습하는 학생으로써 큰 도움이 되었던 것 같습니다. 😊