회고 (220516 - 220522)

지난 주와 비슷하게 이번 주도 밥 먹고 자는 시간 외에는 컴퓨터 앞에 앉아있었고, 어제 중간 발표시간을 가진 이후 팀원분과 소통하는 시간을 가지고 다시 작업에 들어갔다.
저녁에 너무 피곤해서 일찍 컴퓨터를 끄고 잠자리에 들었는데
피로누적인지 약 14시간을 자다왔다..

많이 피곤했었나 보다.

한 주의 기록

✅ 기본적인 뷰 구성

전반적인 뷰를 만들었다. 뷰를 전부 뽑아놓고 기능을 추가하는게 편할거라는 생각을 했다.

✅ useLocation을 활용한 데이터 전달

취향조사 부분에서 유저가 선택한 항목을 다음 페이지로 전달해주어야했다.

// TasteSurvey01.tsx
...
  const navigate = useNavigate();

  const [selectAnswer, setSelectAnswer] = useState(0);

  const handleToNextPage = () => {
    if (selectAnswer === 0) {
      alert('답변을 선택해주세요!');
      return;
    }
    navigate('../02', { state: { acidity: selectAnswer } });
  };
...

// TasteSurveyLoading.tsx
...
import { useLocation } from 'react-router-dom'
...

const navigate = useNavigate();
const tasteList = location.state;
...

useNavigate 훅을 사용해 state로 유저가 선택한 값을 다음 페이지로 전달하고 useLocation 훅으로 state를 확인해 결과 값을 활용하였다.

해당 방법은 페이지별로 라우팅 처리를 하게 되는데 매우 안 좋은 방법이라는 피드백을 받았다.

기능 구현이 완료된 후에 리팩토링을 거칠 예정이다.

✅ localstroge 유틸 함수 생성

// localStorage.tsx

export const setLocalStorage = (key: string, value: any) => {
  localStorage.setItem(key, value);
};

export const getLocalStorage = (key: string) => {
  localStorage.getItem(key);
};

export const removeLocalStorage = (key: string) => {
  localStorage.removeItem(key);
};

// 배열이나 객체는 JSON.stringify(), JSON.parse()를 이용해야 합니다.

export const setObjLocalStorage = (key: string, value: any) => {
  localStorage.setItem(key, JSON.stringify(value));
};

export const getObjLocalStorage = (key: string) => {
  const storageValue = localStorage.getItem(key) as any;
  return JSON.parse(storageValue);
};

취향조사 결과를 임시적으로 localstorage에 저장하기위해 유틸함수를 만들었다.
임시적으로 any로 값을 받아오게 작성하였다.

✅ HTTP → HTTPS

중간 발표때 백엔드 부분 트러블 슈팅부분에 적혀 있던 내용이다.

문제정의

프로젝트 초기에 클라이언트와 서버간 HTTP 통신으로 진행하다가 HTTPS 통신으로 변경 후 Header값을 Authorization이 아닌 데이터는 서버에서 받지 못하는 이슈

사실수집

HTTPS는 HTTP 요청과 응답 데이터가 네트워크 계층을 거치기 전에 암호화된다.
HTTPS는 HTTP 하부에 SSL과 같은 보안 계층을 따로 제공하여 동작한다.
SSL은 RFC라는 제약 조건이 존재한다. (Header에 실어 전송할 수 있는 데이터 규약도 포함)

원인추론

HTTPS 에서는 Request Header로 정의되어 있는 규약에 맞는 것만 전송할 수 있다.

조치방안

기존 방식은 Headers의 키값으로 Authorization 이 아닌 ACCESS-TOKEN, REFRESH-TOKEN 으로 토큰을 전송해 주었다.(HTTP 통신)
-> 액세스 토큰이 만료되면 Authorization 에 리프레시 토큰값을 넣고 별도로 API를 만들어서 액세스 토큰을 재발급 해주는 형식으로
변경하였다.(HTTPS 통신)

JWT를 사용할때 헤더로 ACCESS TOKEN, REFRESH TOKEN을 구분하여 보냈는데, HTTPS에서는 Authorization으로만 전달을 받을 수 있었다.

백엔드 분들과 얘기를 끝내고 axios instance 함수부분을 수정하고 추가 API를 생성하기로 결정하였다.

✅ axios instance 수정

위의 문제 해결과 함께, Authorization에 Bearer undefined가 계속 담기는 문제가 있었다.

// axios.ts
...
instance.interceptors.request.use((config: AxiosRequestConfig) => {
  const accessToken = getAccessTokenFromCookie();
  config.headers!['Content-Type'] = 'application/json; charset=utf-8';
  config.headers!['Access-Control-Allow-Origin'] = '*';
  config.headers!['Access-Control-Allow-Credentials'] = true;
  config.headers!['Authorization'] = `Bearer ${accessToken}`;
  (config.headers!.withCredentials = true),
    console.log('request config입니다 \n', config);
  return config;
});
...

임시적으로 instance 내에 쿠키에서 토큰을 가져오는 함수를 생성하여 해결을 했다.

✅ 메인화면 추가 생성

기존에 메인 화면은 1가지였으나, 이게 메인인지 구분이 잘 안간다는 팀원들의 의견이 있었다. 디자이너 분들과 협의 끝에 메인 페이지를 하나 더 만들기로 결정하였다.

(좌: 기존 메인 페이지, 우: 추가한 메인 페이지 일부)

메인 페이지는 취향조사를 한 사람, 취향조사를 하지 않은 사람 둘에게 다른 정보가 보여지게 된다.

✅ extraRuducer를 이용한 리렌더링 막기

메인페이지나 원두 리스트 페이지에 라우팅 될때마다 계속 API를 호출해주었다.
육안으로는 문제가 없으나 성능적으로 문제가 있을거라는 판단에
리덕스에 isSimilarLoaded: false isLoaded: false을 각각 추가해주고 extraReducer 설정을 통해 이를 해결했다.

// taste.ts

...
  extraReducers: (builder) => {
    // getSimilarBeans API 재요청을 막기 위함입니다.
    builder.addCase(getSimilarBeans.fulfilled, (state, action) => {
      state.isSimilarLoaded = true;
    });
    // 다시 취향조사를 하게되면 시작됩니다.
    builder.addCase(postTasteSurvey.pending, (state, action) => {
      state.isSimilarLoaded = false;
    });
  },
...

// MainYesTasteSurvey.tsx
...

  useEffect(() => {
    // 리덕스에 데이터가 null일 경우 API를 요청합니다.
    !tasteList.beanName && appDispatch(getTasteSurvey());
    !tasteList.isSimilarLoaded && appDispatch(getSimilarBeans());
  }, [tasteList.beanName, tasteList.isSimilarLoaded, appDispatch]);
...

한 주를 보내며

실전 프로젝트를 진행하면서 실력적으로도 그렇고 마인드 면에서도 그렇고 매일 성장하는 기분이 든다.

개발에 흥미가 없으면 이 일 못한다는 말이 이제는 어느정도 이해가 된다.

간단한 HTML, CSS, Javscript를 시작으로 그게 전부일 줄 알았던 안일한 생각이 공부를 하면 할수록 배워야할 게 너무나 많다는 것을 느꼈고, 아직도 배움과 성장에 대한 열망이 강하다.

공부한지 고작 1년 정도 되었지만, 어느정도 순항 중이라 생각하고 있고 이제 시작이라는 생각 뿐이다.

중간 발표가 끝나고 약간의 긴장이 풀리는 기분이 없지 않아 있다. 아직 프로젝트가 끝난게 아니고 최종 제출까지 8일 발표까지 2주정도 남았다.
남은 2주도 열심히 달려보자