에러

VSCODE에서 색깔이 preview되지 않는경우

아래 그림처럼 vscode 하단에 language를 클릭하고 css로 바꿨다가 다시 이전것으로 바꿔보자.

Module not found: Error: Can't resolve '@components/IssueList/Atoms/Issue'

: tsconfig에서 설정한 alias를 파싱하지 못해서 나타나는 에러이다. babel-plugin-module-resolver 설치 한다음에 .bablerc의 plugin안에 아래 옵션을 추가해준다.

 [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "@components": "./components",
         
        }
      }
    ],

useInfiniteQuery의 initialData

: initialData와 queryFunc이 리턴하는 데이터가 달라서 initialData가 나타났다가 바로 없어지는 이슈가 있었다.

initialData도 1페이지이면 queryFunc는 2페이지를 리턴해야 자연스럽게 이어질 줄 알았는데 랜더링 되는 페이지가 달라서 이런 이슈가 생겼다. 랜더링 되는 페이지를 둘다 1페이지로 맞추어주니 해결되었다.

아쉬운 점

다크모드 유지 안 됨

: localstorage에 darkmode를 저장하고 페이지가 로딩되면 저장된 darkmode상태를 추출하여 theme을 적용하려고 했으나 style className이 server 와 client가 다르다는 오류가 떴다.

next js 공식홈페이지에 나와있는 방법대로, useEffect를 이용해서 다시 한 번 darkmode가 바뀔때마다 싱크를 맞추려 했지만 오류가 계속 떴다. 게다가 , Issue컴포넌트는 다크모드가 적용되는데 background는 다크모드가 적용되지 않는 이슈가 있었다. 로그를 찍어보니 터미널에 찍인 isDarkmode와 브라우저 로그에 찍힌 isDarkmode가 달랐다.

서버와 클라이언트의 상태를 동등하게 유지해줄 방법을 찾아보자

제네릭 타입

: 아래처럼 GitHubIssueServiceImp에서 유연하게 httpClient를 받아오고 싶어서 generic을 썼다 어떻게 쓰는게 좋을까?

import type { AxiosInstance, AxiosResponse } from 'axios';
import { axiosInstance } from './customAxios';

interface GitHubIssueService {
  getIssuesByPage(page: number): Promise<AxiosResponse>;
  getIssues(): Promise<AxiosResponse>;
}

class GitHubIssueServiceImp<I extends AxiosInstance>
  implements GitHubIssueService
{
  private httpClient: I;
  constructor(httpClient: I) {
    this.httpClient = httpClient;
  }

  get client() {
    return this.httpClient;
  }

  async getIssuesByPage(page: number) {
    const result = await this.httpClient.get(
      `/repos/facebook/create-react-app/issues?state=open&sort=comments&direction=desc&per_page=20&page=${page}`
    );

    return result.data;
  }

  async getIssues() {
    const result = await this.httpClient.get(
      `/repos/facebook/create-react-app/issues`
    );
    return result.data;
  }
}

httpClient가 fetch가 될 수 도 있고 다른 api 라이브러리가 될 수 도 있어서 제네릭 변수를 써보았는데 맞게 쓴것인지 잘 모르겠다. contructor에 httpClient가 injection 되는 순간 타입이 정해지는 것을 의도해서 이렇게 코드를 짜보았다. 제네릭을 좀 더 연습해야겠다.

느낀점

:3일정도 밖에 걸리지 않았지만 또 다시 참 많은것을 배운 경험이었다. 나름 단순한 기능이었지만 반응형, 색깔의 조합, 데이터 랜더링, 에러처리 등 파고들기만 하면 고려해야할 부분들이 굉장히 많다는 것을 알 수 있었다.

개발자는 장인정신을 가져야한다는 말이 실감되는 순간이었다. 단순히 돌아가는 코드가 아닌, 성능과 가독성, 유지보수 측면에서 모두 best practice인 코드를 짜고 싶다는 생각이 들었다.

물론 그런거 따지지 말고 신속하게 돌아가기만 하는 코드를 짜야하는 순간도 있겠지만 , 좋은 코드습관이 몸에 자연스레 배일 수 있도록 평소에 훈련하는 경험이 필요할것 같다.