개선사항

개선 사항

issue-tracker 프로젝트 중 코드리뷰를 받거나 공부한 내용에 따라 코드를 개선한 내용을 정리한 페이지입니다.

📌 개선 1) 소스코드에서 메세지 데이터 분리하기

url 이나 메세지data등이 하드 코딩되어있었다. 이런 부분은 따로 관리하기가 어렵기 때문에 한 곳에 모아 관리할 필요가 있음

❖ 이전 코드

한계: 하드코딩 되어 있는 부분은 유지/보수 시 일일히 찾아서 수정해야 하는 번거로움이 있다.

//url 분리가 안된 경우
import Loader from './layout/Loader';

const Callback = ({ history, location }: RouteComponentProps): JSX.Element => {
  const authUri = `http://localhost:8080/api/web/auth`;

❖ 개선 사항

기대효과: 객체리터럴 형태로 메세지와 url을 보관함으로써 데이터 관리가 한곳에서 이루어지며 사용 부분에서 직관적으로 느낄 수 있다.
ex) const.ts

export const URL = {
  AUTH: 'http://issue-tracker.pyro-squad.com/api/web/auth',
  LOGIN:
    'https://github.com/login/oauth/authorize? } 
};

 <Logo type={B.LARGE} name={LOGO_TITLE} />
        <a href={U.LOGIN}>

---

📌 개선 2) OAuth token의 docoded 관리

Github 로그인 후 token을 받아온 후에 token 내 정보를 활용하기 위해서는 매번 docoded를 해야했다.

❖ 이전 코드

한계: 이를 해결하기 위해 token을 받아온 후에 자주 사용되는 name,profileImg 를 localStorage에 decoded하여 보관했는데,
개인정보가 localStorage에 전부 저장되기 때문에 변경이 필요하다는 조언을 받았다.

localStorage.setItem('token', data.token);

        const token = localStorage.getItem('token');
        if (!token) return;

        const decoded =
          jwtDecode<{ name: string; profileImageUrl: string }>(token);

        localStorage.setItem('name', decoded.name);
        localStorage.setItem('profileImageUrl', decoded.profileImageUrl);

        history.push(P.ISSUE_LIST);

❖ 개선 사항

Recoil을 활용하여 token만 localStorage에 넣어두고 decoded한 data (name,profileImg)는 따로 Recoil atom으로 관리
기대효과: 개인정보를 노출하지 않으면서 여러 component에서 자유자재로 필요한 사용자 정보를 가져와 사용할 수 있다.

export const decodedToken = atom({
  key: 'decodedToken',
  default: {
    name: '',
    profileImageUrl: '',
  },
});