[TIL] 엘리스 SW 엔지니어 트랙 Day 079

📖 오늘 배운 내용 - 2022.02.17

• 그래프 페이지 실제 api 연결 후 버그 수정
• 연간 그래프 코드 삭제
• 네브바 반응형 작업
• 그래프 페이지 반응형 작업

 

📝 실제 api 주소와 mock api 주소가 다를 때 처리 방법

🛠 webpack.config.js

 plugins: [
    ...
    ...
    new webpack.DefinePlugin({
      "process.env": {
        MODE: JSON.stringify("development"),
        // MODE: JSON.stringify("production"),
        SERVER_URL: JSON.stringify("http://localhost:8888"),
      },
    }),
  ],

 

🛠 src/utils/api.js

export const commitsTotalPerMonthURL =
  MODE === "production" ? "/api/users/commits/total/per/year" : "/month";

 

🛠 src/api/index.js

import {
  AXIOS,
  badgesURL,
  ...
  commitsTotalPerMonthURL,
  ...
  ...
} from "../utils/api";

// graph - 월간
export const getCommitsTotalPerMonth = async (year) => {
  try {
    const res = await AXIOS.get(`${commitsTotalPerMonthURL}/${year}`);
    return res.data;
  } catch (error) {
    return error;
  }
};

• json-server를 이용해서 mock데이터를 연결해서 프론트엔드 작업을 이어나가고 있었다.
• api가 열리고 나서 실제 주소와 연결해야 하는데 mock을 완전히 버릴 수는 없었다. 깃허브 api 요청이 5000번으로 제한되어 있기 때문에 계속해서 실제 api를 사용할 수 없는 상황이었다.
• 처음엔 mock 전용 폴더, 실제 api relase 브랜치를 clone 한 폴더를 따로 만들어서 작업하고 있었는데 비효율적이었다.
• 이러한 문제에 대해 팀장님이 위와 같은 아이디어를 내주셨고 해결해주셨다. 작업하는 중간에 에러가 생겨서 많은 시간을 소비하셨다. 무한한 감사를....!
• 웹팩 설정 - MODE에서 production인지 아닌지를 구분하여 실제 api주소, mock주소로 갈지 경로를 구분해주면 된다.

 

📝 useEffect cleanup 오류

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

언마운트된 컴포넌트에서는 상태를 추적할 수 없고, 상태를 추적하지 않기에 작업이 수행되지는 않지만, 메모리 누수가 발생할 수 있으니, useEffect의 cleanup 함수를 이용해라

• 실제 api를 연결하고 테스트하던 중 개발자 도구에서 이러한 에러를 만날 수 있었다.

 

📕 발생 이유

• fetch 등 비동기를 실행하는 실행 컨텍스트가 완료되기 전에 컴포넌트가 unmount가 된 후 setState가 실행이 될 때 발생한다.
• router 이동 후, 이동 전 컴포넌트에서 state를 바꾸려는 시도가 있을 때 발생한다.
• 비동기 처리 과정 중 발생한다.

 

💡 해결 방법 :: useEffect의 cleanup 함수 생성

useEffect(() => {
    getUsersReposLanguage();
    return () => {
        setDate(toDay);
        setReposLanguage();
        setLoading(false);
    };
}, []);

• useEffect에 return을 해줘서 clean을 해줘야 한다.

 

📝 CORS (Cross-Origin Resource Sharing)

• CORS에 대한 설명을 아래 링크에서 알아보고 오자.
• [TIL] 엘리스 SW 엔지니어 트랙 Day 054 - CORS
• CORS는 왜 이렇게 우리를 힘들게 하는걸까?

 

📕 우리 팀의 해결 방법

server cors 설정에 localhost를 넣어주고, client에서는 요청 시에 Cookie값을 실어서 보내기

// client 에 cookie 를 담고 서버에서는 cors 를 
app.use(
  cors({
    origin: "http://localhost:1111",
    credentials: true,
  }),
);

export const AXIOS = axios.create({
  baseURL: SERVER_URL,
  withCredentials: true, // true로 설정하면 쿠키를 같이 보내준다.
});

• [HTTP] CORS(Cross Origin Resource Sharing)란?

 

💡 오늘 깨달은 것

• 연간 데이터는 api 요청이 많아서 빼기로 결정했다.
• 초기 데이터를 받아오면 로컬 스토리지에 저장해서 그 값을 보여줄 수 있다.
  • 처음에는 상태 값이 없어서 default 값을 가져오고 api 요청 시 db에 있는 값을 가져오는데 이 부분을 없애기 위해서 로컬 스토리지를 사용할 수 있다.
  • React에서 웹 스토리지 사용하기
  • useLocalStorage 사용
  • 이렇게 한다면 우리 서비스는
    • 로딩 페이지(5초 소비)에 백에 모든 요청 가져와서 db에 저장 -> 5초 뒤 메인 페이지 접근 -> 프론트는 주소 그대로 요청해서 db 값 가져와서 로컬 스토리지에 넣어주고 -> 그 값을 빼서 화면에 뿌려주기
  • 페이지 이동시 깃허브 api를 요청하는 것이 아니고 db에 저장된 데이터를 빼오는 로직이다.
  • 데이터 갱신인 일정 시간 이후 요청을 받으면 갱신
• 깃허브 api는 1시간에 5000번의 리밋이 걸려있다. 최근 3개년 커밋 추이 그래프에서 약 1500번의 요청을 쓰기 때문에 다른 데이터를 못 받아올 수 있는 상황이 생겨 서비스를 정상적으로 운영하기 힘들다고 판단하여 과감하게 제거하기로 결정했다.

• tab 버튼으로 월간/연간을 나눠서 데이터를 가져와서 구조에 맞게 가공한 뒤 recharts 라이브러리에 넣어서 데이터 시각화를 해주는 부분이다.
• 실무에 가면 구현 완료했는데 기획 변경으로 인하여 코드를 삭제하고 새롭게 작성하는 경우도 있다고 하는데 이런 느낌이구나! 그래도 월간에서 사용하는 LineGraph 컴포넌트를 재사용하기 때문에 내가 작성한 코드가 완전히 삭제되는 건 아니다. tab 부분 코드만 삭제하면 된다.
• 이번 경험으로 인해 기획 부분에서의 api의 limit과 우리가 필요한 기능을 구현하는데 얼마나 많은 요청을 하는지 사전에 확인하고 기획을 했다면 프로젝트 후반부에 이런 상황이 발생하는 것을 방지할 수 있을 거 같다. 값진 경험이라고 생각한다!
• 이번 경험을 통해 다음번에는 기획 단계에서 꼼꼼하게 조사하고 지난번의 실수가 발생되지 않게 보완할 수 있으니까!
• Promise.allSettled()는
• 너무 많은 request 요청을 날리면 서버에 과부하를 줄 수 있다.
  • Promise.allSettled()를 사용하면 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환한다.
  • 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용한다.
  • Promise.all는 하라도 실패하면 에러로 빠지지만, Promise.allSettled()는 하나가 실패하더라도 모든 promise들의 결과를 받을 수 있다.
  • 하나가 실패하더라도 다른 값들은 사용해야 할 때 사용하면 좋다.

 

📌 참고

• React useEffect causing: Can't perform a React state update on an unmounted component
• Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
• react 컴포넌트가 unmount 된 후 setState가 실행되는 문제 해결 방법
• useEffect와 메모리 누수
• [react] useEffect 메모리 누수 Can't perform a React state update on an unmounted component...
• CORS and the Access-Control-Allow-Origin response header | Web Security Academy
• Nginx - Reverse Proxy 설정 및 요소 이해하기
• CORS는 왜 이렇게 우리를 힘들게 하는걸까?
• Changing Theme Color of Address Bar in Mobile Browsers
• PWA(Progressive Web Apps) Manifest 만들기
• Promise.allSettled 가 필요한 순간
• Promise.all 과 Promise.allSettled 의 차이