TIL - 20220608

 과제를 진행하다가 끝내 해결하지 못한 e2e 테스트 하나가 존재했다. e2e의 테스트 코드는 다음과 같다.

간단하다. 메인 페이지에서 /restaurants/1로 이동하면 '양천주가'와 '서울 강남구'라는 텍스트를 확인할 수 있어야 한다. 다만, 여기서 한 가지 문제가 존재했는데 식당 링크를 눌러 이동할 때는 식당 정보가 정상적으로 출력됐지만 url로 이동하면, 식당 정보가 출력되지 않는 문제가 있었다. 식당 링크를 눌렀을 때도 식당 정보가 출력되지 않았다면 원인을 쉽게 파악할 수 있었을 것 같은데, 식당 링크를 눌렀을 때는 식당 정보가 출력되니 갈피를 잡지 못했다. 결국 윤석 님께 물어봤다.

내 힘으로 해결해보고 싶었는데 도무지 감이 잡히지 않아 결국에 물어보게 됐다...

 윤석 님의 지도 아래, 30분 동안 디스코드 DM으로 이 문제에 대한 상황 파악부터 해결까지 내가 갖고 있는 지식과 갖고 있지 않은 지식을 바탕으로 하나하나 차근히 설명해주셨다. 지금부터 그 과정을 공유하려 한다.

 

내게 주어진 문제

 식당 링크를 눌러 이동할 때는 식당 정보가 정상적으로 출력됐지만 url로 이동하면, 식당 정보가 출력되지 않는 문제. console 창에서 다음과 같은 메시지가 존재했다.

 

console 메시지

Network 전문

내가 알고 있는 것과 모르는 것

console 메시지와 Network 메시지를 보자 http://localhost:8080/restaurant/main.js를 요청했는데 얻지 못했다. 여기서 내가 알고 있는 것은 http://localhost:8080/restaurant은 내가 위치하고 있는 url, /restaurant에서 main.js를 요청한다는 사실. main.js는 webpack이 만들어낸 결과물. 근데 여기서 모르는 것은 왜 webpack이 만든 것을 왜 못 찾냐는 것이였다.

 

해결하기 전까지

 윤석 님이 main.js를 찾아보자고 말씀해주셨다. 처음에는 webpack이 만든 걸 볼 수 있나? 이런 생각을 했다. 하지만 main.js는 예상치 못했던 곳에 존재했다.

 1주차 때, webpack과 babel을 배우면서 적었던 index.html에 main.js가 존재하고 있었다. 자 거의 다 왔다. 여기서 경로를 보면 src="main.js"라고 나와있다. /와 같은 경로 없이 main.js만 존재한다면 상대 경로로 파일을 찾는다. 만약 /main.js라고 되어있다면 절대 경로로 파일을 찾았을 것이다. 상대 경로로 파일을 찾았기에 /restaurants/main.js를 찾고 있는 것이었고 없어서 위와 같은 에러를 만나게 된 것이었다. 다 왔다. /restaurants/main.js가 아닌 우리가 main.js를 갖고 있는 위치인 /main.js로 찾게 해 주면 되는 것이다. /main.js로 찾게 해주는 방법은 두 가지 방법이 있다.

 

절대 경로 설정

 해결하기 전까지에서 내용을 작성하다 거의 다 작성해버렸는데 현재 src="main.js"를 src="/main.js"와 같이 절대 경로로 설정해주면 된다.

 

<base /> 태그를 이용하여 상대 경로가 어디서 시작하는지 지정하는 방법

 윤석 님께서 알려주신 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base 참고하여 상대 경로가 어디서 시작하는 지 지정하는 방법을 통해 main.js의 위치를 지정해줄 수 있다. 다음과 같이 작성하면 된다.

마치며

 윤석 님께 너무너무 감사하다는 말씀을 이 글을 통해 또 전달드리고 싶다. 귀찮으셨다면 해결책 하나 툭 던지고 끝날 수도 있는 문제였는데, 먼저 지금 주어진 문제가 무엇인지 현상 자체를 분석하는 것부터 시작하여 내가 지금 알고 있는 것과 모르는 것을 바탕으로 모르는 것이 해결하는 데 있어 어떤 역할을 하는지 또 이걸 알아내려면 어떻게 알 수 있을지를 먼저 혼자 공부하는 과정을 통해 스스로 학습할 수 있도록 도와주시면서 해결책을 찾을 수 있게 해 주시는 과정이 너무나도 좋았다. 그러면 앞으로 나는 문제를 만났을 때 어떻게 해야 할까? 나만의 문제 해결 프로세스를 단계별로 정리해보자.

 

1. 주어진 문제가 무엇인지, 현상 자체를 분석해보는 것부터 시작하자. 무작정 복사 붙여 넣기로 구글링 하지 말고 앞으로 최소 10분이라도 검색해보기 전에 문제가 무엇인지 분석해보는 시간을 꼭 가지자.
2. 문제가 무엇인지 분석했으면, 하나하나 뜯어보면서 내가 아는 것과 모르는 것을 구분 지어보자. 아는 것은 문제 해결할 때 어떤 도움이 될 수 있을지, 모르는 것은 내가 가지고 있는 것들 중에서 먼저 확인해보고 없거나 정말 갈피를 못 잡겠다면 그때 검색해서 찾아보자.
3. 아는 것과 모르는 것을 알 수 있도록 배워서 이 둘을 엮어 해결해볼 수 있도록 노력해보자. toss에서 진행하는 found라는 프로그램에서 대부분의 문제는 해결할 수 있다는 말을 들은 적이 있는데 앞으로 내가 마주할 문제들 또한 거의 다 해결할 수 있는 문제들일 것이다.

사랑합니다, 코드숨.