(우테코) 최종 테스트 - 🚇 지하철 노선도 경로 조회

---

🔗 Github Link

cuza22/javascript-subway-path-precourse

3주간의 프리코스가 끝나고 최종테스트 날이 다가왔다.

1시부터 5시간동안 진행이라 알바 시간을 1시간 앞당기고 시험을 보러 갔다.

테스트는 코로나로 인해 줌으로 진행하였다.

---

🎈 느낀점

💖 테스트 시작 전

나는 이번에 자바스크립트가 처음이었기 때문에 시간 안에 구현을 해 낼 자신이 없었다. 아무리 3주간 미션을 진행하며 실력이 늘었다지만 제한시간 내에 원래 프론트 경험이 있던 사람들보다 완벽한 결과물을 낼 수는 없다고 생각했다. 그래서 목표를 ‘완성’에 두었다.

미션에서 매 주 새로운 조건이 주어질 때마다 이해하고 적용하는 데 시간이 엄청 오래 걸렸다.

1주차에는 JS와 html 사용법을, 2주차에는 import export, 3주차는 html의 data속성과 localStorage을 사용해야만 했다. (data속성은 결국 사용 못 했다!)

그래서 최종 테스트에는 새로운 내용이 추가되지 않았으면 했는데…. ㅠㅠ data.js파일을 통한 ‘데이터 초기화’라는 조건이 추가되었다…

시간 내에 완성을 못 할까 걱정되었지만 집중해서 쉬운 것부터 하나씩 구현해 나갔다.

💖 테스트 중

테스트를 보면서 좀 더 발전하고 신경쓴 점이 있다면…

• 1, 2, 3주차 미션을 진행하면서 중구난방으로 commit했는데 이번 테스트에서는 기능 단위로 commit할 수 있었다.
• addEventListener을 통해 click이벤트를 추가할 때 ‘this’의 scope 문제를 금방 해결하였다.
• 기능별로 패키지를 잘 분리하였다.

아쉬운 점은

• eslint를 제대로 적용하지 못 했다.
• alert를 띄우는 예외 함수를 아직 제대로 작성하지 못 하겠다.

핵심이었던 데이터 초기화는

export const lines = [
  {
    name: '2호선',
    stations: [
      '교대',
      {distance: 2, time: 3},
      '강남',
      {distance: 2, time: 3},
      '역삼',
    ],
  },
...

이런 식으로 구현하였다.. 맞는 방법인지는 모르겠다.

역과 역 사이에 ‘distance’랑 ‘time’이라는 속성이 존재해야 하는데 이걸 어찌 구현해야 할 지 모르겠어서 그냥 배열에 [역 이름] - [ [거리] [시간] ] - [역 이름] - … 이런 식으로 넣어버렸다. 하하하하하

작동해서 다행이다..

💖 테스트 후

예시 image가 잘못 올라와 있어서 1차로 당황했다. 내 프로그램이 계산하는 최소 거리, 최소 시간과 예시로 올라온 최소 거리, 최소 시간이 달랐기 때문이다. 손으로 계산해 보았더니 예시가 틀린 것 같았지만 그래도 불안했다.. 시간 내에 못 끝낼까봐 자잘한 것에 신경쓰기보다는 전체적인 구조를 완성하자는 생각으로 무시하고 넘어갔다.

시험이 끝나기 5분 전 PR을 보냈는데 자동으로 merge가 안 된다고 해서 2차로 당황했다. 내가 뭔가 실수를 했겠거니… 시험이 망한거지 뭐.. 라는 마음으로 그냥 PR을 하고 메일도 보냈다… 이후에 확인해보니 예시 image가 오류가 수정된 버전으로 새로 올라와서 문제가 생긴 것이었다. 흑흑

---

🔨 설계

📁 src
├ constants.js
├ createMessages.js
├ data.js
├ display.js
├ getMinimum.js
├ getTotal.js
├ index.js
└ isValid.js

📄 README.md
📄 index.html

미션과는 달리 5시간만에 끝마쳐야 하다 보니 README가 어수선하게 작성되었지만 확실히 3주동안 많이 발전한 것 같아서 기분이 좋았다! 나는 대단해

---

🚀 기능 (commit 기준)

UI

• index.html 완성
• ‘길찾기’버튼 눌렀을 때 결과창 visible
• 최단거리, 최소시간 라디오버튼
• 결과창 구성

기능

• 최단거리 구하기
• 최소시간 구하기
  • 데이터를 import로 불러와서 전부 edge에 추가한다.
  • 다익스트라 라이브러리를 이용해 type에 따라 최단거리를 리턴
• 프로그램 시작 시 App객체 생성
  • 생성할 때 data.js 를 객체의 속성으로 지정
  • ‘길찾기’ 버튼 누를 때마다 경로를 객체의 속성으로 지정

2주차 피드백 내용을 반영하는 의미에서 UI랑 기능을 구분하였다.