← Dev Log

2023년 05월 03일

·4 min read

오늘 한 일

  • gachon-extension 개발
  • 함수형 프로그래밍 스터디(4주차 - 챕터8)
  • 알고리즘 문제 풀이 ffe46e5

gachon-extension 개발

기존에 있는 필터 기능을 개선했다. 그리고 필터링 기능을 하는 순수함수를 만들었다.

const filterAssignmentList = (assignmentList: Assignment[], courseId: string) => {
  if (courseId === '-1') {
    return assignmentList;
  }

  return assignmentList.filter(assignment => assignment.courseId === courseId);
};

const sortAssignmentList = (assignmentList: Assignment[]) => {
  if (sortType === '마감일 순') {
    return assignmentList.sort(
      (a, b) => new Date(a.deadline).getTime() - new Date(b.deadline).getTime()
    );
  }

  return assignmentList.sort((a, b) => Number(b.id) - Number(a.id));
};

const filterAssignmentStatus = (assignmentList: Assignment[]) => {
  if (StatusType === '진행중인 과제') {
    return assignmentList.filter(
      assignment => new Date(assignment.deadline).getTime() > new Date().getTime()
    );
  }

  return assignmentList;
};

근데 이걸 사용하려고 보니까 너무 가독성이 떨어졌다.

filterAssignmentStatus(
	sortAssignmentList(
		filterAssignmentList(assignmentList, selectedCourse.id)
	)
).map(assignment => (
	  <AssignmentItem
	    key={assi**gnment.id}
	    assignment={assignment}
	    courseName={courseList.find(course => course.id === assignment.courseId).name}
	  />
)**)

그래서 pipe 함수를 만들어 가독성 좋게 구현했다. 함수형 코딩 스터디 하면서 최대한 액션과 계산을 분리해서 순수함수를 만들어보려고 이런 식으로 구현했다.

function pipe<T>(value: T, ...funcs: ((value: T) => T)[]) {
  let acc = value;
  for (const f of funcs) {
    acc = f(acc);
  }
  return acc;
}

// ...

pipe(
  assignmentList,
  assignmentList => filterAssignmentList(assignmentList, selectedCourse.id),
  assignmentList => sortAssignmentList(assignmentList, sortType),
  assignmentList => filterAssignmentStatus(assignmentList, StatusType)
).map(assignment => (
  <AssignmentItem
    key={assignment.id}
    assignment={assignment}
    courseName={courseList.find(course => course.id === assignment.courseId).name}
  />
));


개발 중 겪은 오류

크롬 익스텐션 개발하던 중 오류가 떴다.

React.lazy를 사용하여 dynamic import를 하고, React.Suspense를 사용하여 fallback을 설정했다. 근데 빌드를 하면 에러가 떴다.

이게 왜 떴냐하면, custom-dynamic-imports 플러그인 때문에 생긴 오류이다.

import type { PluginOption } from 'vite';

export default function customDynamicImport(): PluginOption {
  return {
    name: 'custom-dynamic-import',
    renderDynamicImport() {
      return {
        left: `
        {
          const dynamicImport = (path) => import(path);
          dynamicImport(
          `,
        right: ')}',
      };
    },
  };
}

이 플러그인이 없으면 다음과 같이 번들링된다.

__vitePreload(
  () => import('../../../assets/js/main.d077a1b9.js').then((n) => n.m),
  true ? ['assets/js/main.d077a1b9.js', 'assets/js/client.10179973.js'] : void 0
)

그래서 플러그인을 지우고 빌드하면 잘 된다.
하지만 또 한 가지 문제가 있다. React.lazy를 사용했을 때 익스텐션 테스트 시 브라우저 콘솔에서 export를 읽을 수 없다는 에러가 뜬다.

이 오류 때문에 7시간 정도 헤맸다. 하지만 결국 해결하진 못했다.

정리해보자.

  1. vite의 rollupOptions를 통해 build를 커스텀 해서 생긴 오류인가?
    • rollupOptions를 지우고 번들링된 파일만 가지고 manifest를 작성해서 테스트해보자
  2. 그냥 chrome extension에서 지원하지 않는 건가?
    1. 테스트해도 변함 없이 에러가 뜬다면, 이슈를 올려야겠다.

내일 할 일

  • 바닐라JS로 리액트 만드는 스터디 노션 정리 후 발표 (VirtualDOM)
  • 알고리즘 문제 풀이
  • gachon-extension 개발
    • 오류 테스트 후 해결 안되면 이슈 올리기(vite)
    • 새로고침 버튼 추가, Framer Motion 적용
← 2023.05.04