Facts
- 지하철 노선도 노선 수정, 삭제 기능을 구현해서 노선을 모두 완성했다.(7시간)
- 웹팩에
historyApiFallback:true옵션을 주어 새로고침을 했을 때 404에러가 발생하지 않도록 했다.
Feelings & Findings
지하철 노선도 노선 수정, 삭제 기능을 구현해서 노선을 모두 완성했다.
오늘도 예상이 빗나갔다. 최소 구간 추가 기능까지는 할 수 있을 줄 알았는데 노선 수정에서 너무 오랜 시간이 걸렸다. 게다가 7시부터 9시까지는 서버가 끊겨서 강제로 2시간을 쉬었다.
네이밍 문제
오래걸렸던 부분은 노선의 색을 수정할 때 기존의 색을 사용하려고 하면 중복되는 색이라고 해서 validation을 고쳤더니 색이 투명으로 들어가는 오류가 있었다. 결국 어쩌어찌 해결하긴 했지만 그렇게 마음에 들진 않는다. 마음에 들지 않는 이유는 변수 명이 너무 애매하다. 유저가 선택한 컬러는 selectedLineColor라고 했고, 수정 버튼을 눌렀을 때, 그 노선의 색을 lineColorInEdit이라고 했다. 내가 봐도 헷갈리는데 리뷰어가 볼 땐 정말 이해하기 어려울 것 같다. 하지만 마땅한 이름이 생각나지 않는다...
querySelector(dataset)
또, 오래 걸렸던 이유가 있다. dataset으로 노선의 이름을 할당했는데, querySelector로 찾지 못하는 것이다. 역 관리 기능에서는 잘 찾아지더니 왜 노선에서는 안되는지 이유를 도통 알 수 없었다. 이걸로 1시간 이상 씨름을 하다가 결국 알아냈는데, 정확한 이유를 모르겠다.
이유는 document.querySelector('[data-line-name=${line.name}]')으로 찾아지지가 않고 ${line.name}부분을 string 처리를 해주어야 한다.
document.querySelector('[data-line-name="${line.name}"]') 이렇게 찾아야 한다.
역 관리 버튼을 할 땐 문제가 되지 않았던 이유는 역 이름에 숫자를 등록하지 못하게 막아놨기 때문이다. dataset을 검색할 때 한글과 영어로만 되어 있으면 string으로 만들지 않아도 자동으로 string으로 들어가는 것 같다.
하지만 노선 이름에는 1호선과 같이 숫자가 들어가는데, 1이라는 숫자가 있어서 string으로 만들지 않는 것인지 뭔지 이유를 도저히 알 수가 없지만 ""를 할당해서 string으로 강제로 만들어주면 해결이 되었다.
너무 힘들어서 이유를 정확하게 찾지 못했고, 내일 우테코에 가면서 찾아보려고 한다.
노선 삭제 기능은 역 삭제 기능과 동일했기 때문에 매우 빠르게 끝낼 수 있었다. 그리고 페어와 약간의 잡담을 한 뒤에 끝냈다.
웹팩에 historyApiFallback:true 옵션을 주어 새로고침을 했을 때 404에러가 발생하지 않도록 했다.
현재 SPA 기능을 구현하기 위해 라우팅 기능을 사용하고 있는데, 이 때문에 만약 localhost:8080/lines에서 작업을 하다가 새로고침을 하면 lines라는 html이 없기 때문에 404 에러가 발생했고, /lines를 지워서 메인으로 돌아가야 하는 힘든 점이 있었다.
난 이것을 고칠 생각도 못하고 있었는데, 다른 크루들이 어떻게 코딩하고 있는지 구경하러 갔다가 이것을 해결한 크루들을 봤다. 그래서 알려달라고 했고, 몇 번의 시행착오 끝에 해결하게 되었다.
우선, webpack dev-server에서 제공하는 historyApiFallback 기능이 있다. 이 기능은 만약 페이지를 찾지 못해 404에러가 발생한다면 index.html으로 돌아가는 것이다. 또한, history api를 사용할 때 사용할 수 있는 기능이다.
이때, 우리가 기존에 설정해 둔 라우팅 주소는 그대로 유지하고 있다. 그렇기 때문에 html을 찾지 못해 404 에러가 발생한다면 예를 들면 localhost:8080/lines로 주소는 유지되고 있지만 화면은 index.html이 들어가 있을 것이다.
이를 이용하여 window.location.pathname을 사용해 /lines라는 path를 가져와서 라우팅을 직접 시켜주면 된다.
const path = window.location.pathname;
const app = new App();
app.init();
app.router.route(path);
app.runPathMatchedAction(path); 내 코드에서는 이렇게 동작한다. path를 가져와서 라우팅을 시키고 path에 맞는 동작을 수행시킨다. 이제는 새로고침을 해도 작업하던 위치로 돌아오기 때문에 코드 구현이 더 빨라졌다.
이것을 슬랙에 공유했는데, 많은 크루들이 도움이 됐으면 좋겠다. (나 빼고 다 알고 있던 건 아니겠지?)
Plans
- 지하철 노선도 2단계 구간 기능 완료 및 cypress 테스트 구현하기
