부트캠프 80일차 후기

기존의 Thymeleaf를 활용한 HTML을 자바스크립트를 활용한 axios로 바꾸는 작업을 하였다.

 

지금까지 배운 Kotlin + Spring Boot가 아닌 순수 JavaScript 작업이였기 때문에, 생각보다 많은 고생을 했다.

개인적으로 HTML 구조를 선호하지 않는 입장에서, 들여쓰기 없는 HTML은 고역이다.

 

일단은 가장 기본적인 메인 페이지를 바꾸는데, 성공했다. 시간이 없으니 주말에도 좀 작업을 하는 것을 고려해봐야겠다.

가장 시간을 많이 소모한 오류는 매핑이 안되는 오류였다. 서버는 정상적으로 돌아감에도, 해당 경로를 가진 HTML을 매핑을 찾지 못해서 오류가 발생했다. 생각보다 기본적인 곳에서 막혀서 상당히 당황했다.

 

아무리 기존 프로젝트와 비교해보며 사소한 오타를 고쳐보고, 여러가지를 시도했음에도 계속 매핑을 못했다. 여러 시도를 한 결과 문제는 gradle에 Thymeleaf를 추가하지 않아서 발생한 문제점이였다. 왜 이게 Thymeleaf와 연관되었는지 이해는 안되지만, 일단 해결되었으니, 나중에 비슷한 일이 생길 때를 대비해 기억해두자.

 

또 다른 오류로 페이지 자체를 열 수 없었던 오류가 발생했다. console.log와 디버깅 모드로도 찾을 수 없어서 많이 곤란했다. 결국 오류가 발생한 부분을 떼고, console.log로 확인을 해본 결과 axios.get에서 데이터를 가져오지 않아서 발생했던 것이였다. get의 URL을 자세히보니 뒤에 슬래쉬가 붙었고, 사용하려는 Rest-API는 value 값이 없어서 여기서 오류가 발생했었다. 즉 뒤에 슬래쉬가 없는 것과 있는 것의 차이가 있다는 것을 이번에 알게 되었다. 그렇게 수정을 거치자 이제야 홈페이지가 정상적으로 열렸다.

어쨌든 어떻게든 한 페이지를 완성했다. 이제 어느정도 요령을 잡았으니 다음엔 그렇게 오래걸리진 않을 것이다. 어쨌든 빨리빨리하자.