2021년 8월 셋째 주 내가 배운 것들

이번주 새로 알게된 내용 🤓

1. 테마 변수 파일을 만들어서 복수의 css라이브러리 테마 설정하기

• 프로젝트에서 총 3가지의 css라이브러리를 사용하고 있는데 디자인 시스템 통일을 위해서 각각의 config를 변경해줘야했다. 하드코딩으로 라이브러리 별 config를 설정할 경우 디자인 시스템 변경이 있을 때 각각의 라이브러리 config를 변경해줘야하는 번거로움이 있었다.
  이를 해결하기 위해서 theme이라는 모듈과 themeColor라는 모듈을 만들어 export시키고 각 라이브러리의 config에서 theme.primary와 같이 변수로 불러와 사용했다. 이 경우 디자인 시스템 변경이 생기면 themeColor에서 변경만 해주면 되기때문에 반복되는 작업을 방지할수 있었다!

2. next.js에서 페이지 인식 바꾸기

• 기본적으로 next.js에서는 pages폴더안에 있는 파일들을 라우팅 시킨다. (예를 들어pages/notice.tsx의 경우는 /notice의 경로로 페이지라우팅이 된다.) 이 때문에 페이지에서 컴포넌트와 로직을 분리할때 파일관리가 어려운 점이 있어 pages폴더 안에 있는 file명.page.tsx의 경우만 페이지로 인식하고 기타 파일명 규칙에 있어서는 페이지로 인식하지 않게 설정이 필요했다.
  이 경우 next.config.js에 pagesExtensions 프로퍼티를 추가해주면 된다.

    module.exports = {
    {...},
    pageExtensions: ['page.tsx', 'page.ts'],
    }
  
  

3. AxiosError와 일반 Error 구분하기

• 비동기 통신중에 에러가 발생했을 때, 발생한 에러가 비동기 통신과정에서의 에러인지 단순히 코드 오류에서 온 에러인지 확인이 필요하다. axios를 사용하면 통신에러와 일반 에러를 구분 할 수 있는 메서드가 존재하는데 바로 isAxiosError다. isAxiosError메서드의 인수로 에러를 보내면 해당 에러의 타입이 Error타입인지 AxiosError 타입인지 구분 할 수 있다. 관련 github issue

  .catch((err: Error | AxiosError) {
    if (axios.isAxiosError(error))  {
        // Access to config, request, and response
    } else {
        // Just a stock error
    }
  })
  

---

이번주를 보내며

입사한지 벌써 한달! 시간이 너무 빠르고 정신이 없다!🙃
머리속 코드속에만 있던 내용들을 매일 조금씩 정리해서 일주일에 한번 포스팅하는 형식으로 차근차근 정리해보려고 한다!
첫 한달은 적응기였다면 지금부터는 확실히 성장에 가속을 가하려고 더 노력해야겠다!
이번주도 수고했어~~~