프로그래머스 데브코스 75일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 프로젝트를 진행해 보겠습니다. 오늘은 로그인부터 메인 화면의 도서 목록 화면을 구현해 보겠습니다.

 

📖Book Store 프로젝트

📄Zustand

이전 프로젝트에서 사용했던 Redux와 같은 전역 상태 관리 도구입니다. Redux와 같은 용도이지만 사용 방법이 다릅니다.

 

자세한 내용은 공식 홈페이지에서 확인할 수 있습니다.

Zustand Documentation

 

📄로그인

로그인을 하게 되면 token을 받아 저장하게 되는데 이를 localSotrage와 zustand를 활용해 구현했습니다. localStorage를 활용해 받아온 token을 저장하고 해당 token의 존재 여부에 따라 로그인 여부를 확인하는 방식입니다.

 

📑http Authorization 설정

axios를 활용해 연결을 하는 과정에서 백엔드와 협업을 통해 http headers에 Authorization 속성에 값으로 token을 넘겨주기 했습니다.

import axios, { AxiosRequestConfig } from "axios";

const axiosInstance = axios.create({
  baseURL: BASE_URL,
  timeout: DEFAULT_TIMEOUT,
  headers: {
    "content-type": "application/json",
    Authorization: getToken() ? getToken() : "",// Authorization 속성 추가
  },
  withCredentials: true,
  ...config,
});

 

📑error handling

axios의 인터셉트 기능을 통해 성공했을 때의 동작과 실패했을 때의 동작을 관리할 수 있습니다. 이를 활용해 login에 실패했거나 권한이 부족해 서버의 응답으로 status가 401이 오는 경우 로그인 화면으로 이동하도록 동작합니다.

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) { // 401 에러 발생 시 로그인 화면 이동
      removeToken();
      window.location.href = "/login";
      return;
    }
    return Promise.reject(error);
  }
);

 

📄쿼리 스트링 활용하기

🍯tip! 쿼리 스트링을 이용하게 되면 1. 상태 공유, 2. 재사용성 보장, 3. 검색엔진 최적화, 4. 데이터 분석에 유리하다는 장점을 가지고 있다.

 

📑URLSearchParams 객체

URL의 쿼리 스트링을 컨트롤할 수 있는 유틸리티를 제공합니다.

 

자세한 설명은 공식 문서에서 확인할 수 있습니다.

URLSearchParams - Web API | MDN

 

📑useLocation() in react-router-dom

제공되는 useLocation() 함수를 통해 현 URL의 path와 쿼리 스트링을 알 수 있습니다.

const location = useLocation();

console.log(location);
// 제공되는 정보
// {pathname: '/books', search: '?view=grid', hash: '', state: null, key: 'bgg7nl48'}

 

📑useSearchParams() in react-router-dom

URLSearchParams를 리액트에서 상태처럼 사용할 수 있도록 만들어진 커스텀 훅입니다. 해당 함수와 URLSearchParams를 활용하면 쿼리 스트링을 조작할 수 있습니다.

const [searchParams, setSearchParams] = useSearchParams();

const handleSwitch = (value: ViewMode) => {
  const newSearchParams = new URLSearchParams(searchParams);

  newSearchParams.set(QUERYSTRING.VIEW, value);
  setSearchParams(newSearchParams);
};

🍯tip! 더미 데이터 활용. 더미 데이터를 이용하면 실제 서버가 없더라도 프론트엔드 개발자가 작업을 진행할 수 있기 때문에 잘 사용하면 좋다.

 

📄타입스크립트

📑Pick

타입스크립트에서 제공하는 유틸리티 타입 중 하나로 interface에서 원하는 속성과 타입을 꺼내올 수 있습니다.

 

자세한 설명은 해당 사이트를 참고할 수 있습니다.

Documentation - Utility Types

🍯tip! 상수만 따로 모았을 때 좋은 점? 자주 사용되는 값의 경우 매번 수정할 필요 없이 한 번의 수정으로 전부 수정할 수 있다. 즉, 유지보수가 쉬워진다.

 

자세한 코드는 Github에 있습니다.

ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool

 

❔▪❓

Q. 왜 네이밍 컨벤션이 중요한가?

A. 수많은 에러를 발생시킬 수 있다... 강제로 알게 되었고 이름을 잘 지어야 편하다는 것을 느꼈다.

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의