NavKatoons

NavKatoons는 웹툰을 네이버, 카카오, 카카오페이지 세가지에서 모두 보기엔 불편하니 한 곳에서 링크를 타고 들어가면 찾아보기 편하지 않을까 하고 만든 사이드 프로젝트이다. 올해 깔짝해서 만들어놓고 방심했더니 페이지가 갑자기 고장이났다,,, 분명히 잘 작동하는 것을 확인하고 배포를 해놓았었는데 무슨일인가! 하고 알아봤더니

API 출처: https://github.com/HyeokjaeLee/korea-webtoon-api

API를 만드신 분이 최근에 업데이트를 하셨던거다. 물론 구글링해서 사용하긴 했지만 기존 api를 사용하던 주소와 파라미터를 몇가지 바꿔야했다. 이번에 에러 수정하면서 코드 좀 이쁘게 잘 짜노을걸 하는 생각을 했다. 막상 바꿔야지하고 오랜만에 코드를 켜보니 어질어질하다. 어디부터 손을 봐야하나,,,

에러 해결

우선 제일 크고 간단한 것부터 해결했다. API의 형식과 주소가 좀 많이 바뀌었더라. axios의 create를 통해 만들어둔 Instance에 baseUrl부터 바꿔주었다.

export const apiInstance = axios.create({
  baseURL: "https://korea-webtoon-api-cc7dda2f0d77.herokuapp.com",
});

원래는 api뒤쪽의 문자열이 없었는데 Swagger를 사용하면서 붙은 것 같다. 그리고 주로 사용하는 api의 URI가 모두 /webtoons가 붙었었는데 그냥 baseURL에 붙여버릴걸 그랬나? 그래도 다른 API를 사용해서 어떤기능을 넣을지 모르니 일단 놔두었다.

파라미터들 또한 명칭이 바뀌었더라. 네이버나 카카오같은 서비스는 service였는데 provider로 바뀌었고 요일과 provider 또한 필요로 하는 값이 모두 대문자로 바뀌어 api를 요청할 때 toUpperCase()를 적용해서 한번에 처리했다.

로직 수정

간단하게 에러 수정을 하고 나선 Pagination도 로직을 변경했다. 아직 미완성이다. 그 전에는 웹툰 서비스 회사 별로 전체 웹툰의 갯수가 나왔는데 API가 변경된 후로 요일이나 서비스 별로 전체 웹툰 갯수가 나오게 되었다. 때문에 그전에는 페이지네이션을 하드코딩을 통해 했는데 이번 기회에 동적으로 수정할 수 있게 되었다.

페이지네이션은 react-paginate라는 라이브러리를 사용하였다.

그 전엔 막

switch(service){
  case 'naver':{
    if(week==="MON"){
      return 110;
    }
  }
    ...

이런 무식한 하드코딩으로 페이지 개수를 세어 만들었는데

  const getPageNumber = () => {
    return Math.ceil(page.total / 25);
  };

total 개수가 나온 덕분에 동적으로 리턴할 수 있게 되었다.

진짜 무식하게 코딩해놓긴 했다.

의도치 않게 간단한 유지보수를 경험하게 되었다. 진짜 나중엔 코드 이쁘게 짜야지. 이 페이지도 업로드나 완결 딱지같은 이런 추가적인 UI를 만들어 두어야 겠다.

URL: https://navkatoons.vercel.app/
Github: https://github.com/Leekee0905/Navkatoons