불필요한 리소스 제거를 통한 성능 최적화

웹 애플리케이션에서는 성능 최적화가 중요한 이슈 중 하나입니다. 성능이 좋지 않은 웹 애플리케이션은 사용자 경험을 저하시키고, 더 나아가 서비스 이용에 대한 만족도를 떨어뜨릴 수 있습니다. 웹 프론트앤드 환경에서는 각종 데이터들을 주고 받으며 화면을 띄우고 화면을 업데이트하는 과정 속에서 비용을 소모하며, 웹 프론트앤드 성능 개선을 위해서 웹 개발자는 최소한의 비용으로 가장 빠른 시간에에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야만 합니다.

이를 위해 모행 대다수의 로직은 비동기로 작성되었으나 어느 정도 개발이 완성된 후 우리는 더 나은 성능을 위해 불필요한 리소스를 제거하는 방안을 모색했습니다.

아래는 그 중 하나였던 북마크 추가에 대한 코드의 일부입니다.

const addBookmark = () => {
    {...}
    const response = async () => {
      await axios.post(
        `/api/place/bookmark/${placeId}`,
        {...}
        ;
    };
    response()
{...}
        .then(() => {
          **appDispatch(getPlaceBookmark(accessToken));**
        });
    });
  };

export const getPlaceBookmark = createAsyncThunk(
  "mypage/placebookmark",
  async (token: string) => {
    const response = await axios.get(`/api/myPage/place/bookMark`, {
      {...}
    return response.data.data;
  }
);

위 코드는 여행지 페이지에서 북마크 추가 요청을 보내고, 요청에 대한 서버의 응답이 성공적으로 왔을 때, 마이페이지에서 사용하는 북마크 상태를 API 호출을 통해 업데이트하는 코드입니다. 그러나 저는 이 방식이 리소스적으로 비효율적이라고 생각했습니다.

예를 들어, 사용자가 북마크 On/Off를 연속으로 시도한 경우 매 시도마다 현재 사용자가 보고 있는 여행지 페이지에서 북마크 상태를 변경하는 것은 필연적입니다. 그러나 현재 렌더링이 되어있지 않은 마이페이지의 북마크 상태를 업데이트하는것은 불필요하게 리소스를 낭비한다고 생각했습니다.

useEffect(() => {
appDispatch(getCourseBookmark(accessToken));
appDispatch(getPlaceBookmark(accessToken));
}, []);

따라서, 저는 마이페이지의 북마크 컴포넌트 가 렌더링될 때만 북마크 상태를 업데이트하도록 결정했습니다. 해당 코드가 추후 수정된 코드입니다. 이 로직은 useEffect 훅을 통해 마이페이지 컴포넌트가 렌더링될 때 동작하며, getCourseBookmark와 getPlaceBookmark 로 북마크 상태를 업데이트합니다.

마이페이지가 아닌 이외의 페이지에서 북마크 상태를 변경할 때마다 API를 호출하는 것이 아니라, 마이페이지가 렌더링되어 해당 상태가 필요할 때에만 API 호출과 상태 업데이트가 되도록 구현하는 방식이 리소스를 더욱 효율적으로 사용할 수 있다고 느꼈기 때문에 해당 방식으로 코드 로직을 구현하게 됐습니다.

리소스와 관련한 논의중에 모행은 방대한 데이터를 담고 있는 정보성 웹 사이트기에 다량의 데이터를 DB에서 불러올 때 많은 시간이 소요됩니다. 따라서 현재 렌더링 되어있지 않아 당장에 불필요한 상태(state) 일지라도 서버의 데이터가 변경될 때 마다 상태 업데이트를 진행하는 것이 낫지 않겠냐는 의견도 있었습니다. 하지만 해당 경우에는 불필요한 API 호출과 상태 업데이트가 빈번히 일어날 수 있다고 판단해 현재의 방식을 차용해 성능을 최적화시키는 방안으로 코드를 작성하였습니다.

현재도 모행은 계속 리팩토링 중이며 성능 최적화와 반응형 CSS를 적용해나가고 있습니다. 개발자로서 한 프로젝트를 빠르게 완료하는 것도 중요하지만 끊임없이 더 나은 방향을 향해 고민하고 적용하여 완벽한 프로젝트를 완성하는 것이 중요하다는 것을 느꼈습니다.