1회차

쿠팡코딩 챌린지를 시작했다. 

한참 기본 문법을 공부했고, 더 알아가고 싶지만, 어떤 챌린지를 하면서 사람들의 인사이트나 경험을 얻고싶었던 난 쿠팡코딩 챌린지를 발견했고, api에 a자도 몰랐지만 리액트는 알자나! 라는 마음에 시작했다.

 

1회차 미션은

로그인을 위해 필요한 Data Fetching 모듈을 만들어볼 것입니다.

주어진 Interface에 맞게 Class 및 Function들을 만들어보며 지속가능한 모듈 설계와 프론트엔드에서의 객체지향에 대해서 고민해봅니다.

라는 간략한 두 줄 이었고,.. 역시 처음엔 너무나 막막했다.

 

먼저 타입스크립트, 리액트쿼리, next.js 중에서 내가아는건 타입스크립트 밖에 없어서 공부를 했다. 

그리곤, 깃허브에서 저장소를 클론해서 미션을 수행하기 시작했다.

 내가 할 일은,

class AuthService {
  /** refreshToken을 이용해 새로운 토큰을 발급받습니다. */
  async refresh() {
    const refreshToken = cookies.get("refreshToken");
    if (!refreshToken) {
      return;
    }

    const { data } = await axios.post(
      process.env.NEXT_PUBLIC_API_HOST + "/auth/refresh",
      null,
      {
        headers: {
          Authorization: `Bearer ${refreshToken}`,
        },
      }
    );

    cookies.set("accessToken", data.access, { expires: 1 });
    cookies.set("refreshToken", data.refresh, { expires: 7 });
  }

  /** 새로운 계정을 생성하고 토큰을 발급받습니다. */
  async signup(
    email: string,
    password: string,
    name: string,
    phoneNumber: string,
    agreements: SignupAgreements
  ) {
    const { data } = await axios.post(
      process.env.NEXT_PUBLIC_API_HOST + "/auth/signup",
      { email, password, name, phoneNumber, agreements }
    );

    cookies.set("accessToken", data.access, { expires: 1 });
    cookies.set("refreshToken", data.refresh, { expires: 7 });
  }

  /** 이미 생성된 계정의 토큰을 발급받습니다. */
  async login(email: string, password: string) {
    const { data } = await axios.post(
      process.env.NEXT_PUBLIC_API_HOST + "/auth/login",
      { email, password }
    );

    cookies.set("accessToken", data.access, { expires: 1 });
    cookies.set("refreshToken", data.refresh, { expires: 7 });
  }
}

export default new AuthService();

이 AuthService클래스를 리팩토링 하는 것..!

우선 겹치는 것과 겹치는 걸 따로 떼어내서 extend를 이용해 간략하게 만들 수 있을까 살펴보았다.

내눈엔 데이터를 가져오고 저장하는게 가장 많이보여서 먼저, cookie에 get / set하는 클래스를 만들었다.

class Token {
  tokenGet() {
    const refreshToken = cookies.get("refreshToken");
    if (!refreshToken) {
      return;
    }
    return refreshToken;
  }
  tokenSet (data: any) {
    cookies.set("accessToken", data.access, { expires: 1 });
    cookies.set("refreshToken", data.refresh, { expires: 7 });
  }
}

그리곤, Token 클래스를 받아서 아래의 코드를 다시 짰다.

class AuthService extends Token {
  constructor() {
    super()
  } 
  async refresh() {
    const { data } = await axios.post(
      process.env.NEXT_PUBLIC_API_HOST + "/auth/refresh",
      null,
      {
        headers: {
          Authorization: `Bearer ${super.tokenGet()}`,
        },
      }
    );
    super.tokenSet(data);
  }

  async login(email: string, password: string) {
    const {data} = await axios.post(
      process.env.NEXT_PUBLIC_API_HOST + "/auth/login",
      {email, password}
    );
    super.tokenSet(data);
  }

  async signup(email: string, password: string, name: string, phoneNumber: string, agreements: SignupAgreements) {
    const { data } = await axios.post(
      process.env.NEXT_PUBLIC_API_HOST + "/auth/signup",
      { email, password, name, phoneNumber, agreements }
    );
    super.tokenSet(data);
  }
}

export default {Token, AuthService}

이렇게 짜고보니, 각각 post요청을 하는 url부분이 겹치지만 axios에 유능하지 못해, 정리할 자신이 없어서 여기까지,...!

 

이제 두 번째 할 일은 useRequest라는 api request모듈을 작성해보는 것이다.

가장 먼저, 공부한건 CRUD였던 것 같다. CRUD를 공부하고 useQuery 즉, 리액트 쿼리에 대해 공부했다. 공부할 땐 

리액트 쿼리가 좋다 좋다 라고 하니까 좋은건가 하곤 다시 코드를 작성해보려고 오면 막막했다. 

 

결국.. 실패;; 사람들이 공유한걸 바탕으로 실제로 코드짜는 법을 공부해야 할 것 같다.

내가 아는 문법들이 그저 문법일 뿐,, 프로젝트나 실전을 좀 더 겪어야겠다고 생각한다.