23.05.13

오늘 한 일

알고리즘 문제 풀이 7990b1f
프로그라피 팀 모임
쿠버네티스 Kubernetes Engine으로 배포 관리 수강
익스텐션 개발
- crxjs를 사용해서 개발 환경 구성

프로그라피 팀 모임

추가 기획 회의 후, 프로젝트 세팅을 다시 했다.

아직 디자인이 완성되지 않았지만, 와이어프레임을 봤을 때는 MVP 까지 오래 걸리지 않을 것 같다.

이번에 기술스택을 정할 때, 안 써본 것 위주로 정했다. 상태관리 라이브러리는 zustand를 사용하고, 이번에 Next.js 13버전의 app router가 stable 되어서 바로 적용했다.

그리고 패키지 매니저는 yarn berry를 사용해서 zero install로 개발 환경을 구성했다.

app 디렉토리 방식이 서버 컴포넌트와 클라이언트 컴포넌트를 구분하는 방식이라서 살짝 헷갈렸다. 모든 컴포넌트들은 서버 컴포넌트로 되어있고, 클라이언트 컴포넌트로 사용하려면 코드 상단에 'use client' 를 추가해야 한다.

이에 맞춰서 컨벤션도 맞춰야 할 것 같다. 클라이언트 컴포넌트는 파일명에 xxx.client.tsx 형식으로 작성하는 것도 고려해봐야겠다.

마지막으로 폰트 추가하고 카카오 맵 api를 사용해서 지도를 띄우는 것까지 구현했다.

본격적인 개발은 아마 다음주 쯤 디자인 나오면 시작할 것 같다. 그 전까지 익숙하지 않은 기술들을 공부해야겠다.

익스텐션 개발

이제까지 크롬 익스텐션 개발했을 때 여러 불편한 점들이 있었다.

직접 DOM에 접근해야 하는 경우가 많아 테스트할 때마다 매번 빌드하고 업로드하는 번거로움이 존재

dev 환경에서 개발하는게 한계가 있음

버전 업이 될 때, package.json과 manifest.json의 버전을 일일이 수정해야 하는 번거로움이 존재

이런 문제들을 해결하기 위해 crxjs 라는 라이브러리를 사용해서 개발 환경을 구성했다.

설정은 간단하다. vite.config.ts 파일에 crxjs 플러그인을 추가하고 조금 손 보면 되는 정도였다.

import { crx } from '@crxjs/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';

import manifest from './manifest.config';

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  plugins: [react(), crx({ manifest }), tsconfigPaths(), svgr()],
});

그리고 manifest.config.ts 파일을 만들어서 crxjs 플러그인에 넘겨줄 manifest.json 파일을 만들었다.

import { defineManifest } from '@crxjs/vite-plugin';

import packageJson from './package.json';
const { version } = packageJson;

const [major, minor, patch] = version.replace(/[^\d.-]+/g, '').split(/[.-]/);

export default defineManifest(async env => ({
  manifest_version: 3,
  name:
    env.mode === 'staging'
      ? '[INTERNAL] Gachon Tools - 사이버캠퍼스 확장프로그램'
      : 'Gachon Tools - 사이버캠퍼스 확장프로그램',
  description: '가천대학교 사이버캠퍼스 확장프로그램',
  version: `${major}.${minor}.${patch}`,
  version_name: version,
  action: {
    default_title: 'popup',
    default_popup: 'src/pages/popup/index.html',
  },
  icons: {
    '16': 'logo16.png',
    '48': 'logo48.png',
    '128': 'logo128.png',
  },
  background: {
    service_worker: 'src/pages/background/index.ts',
  },
  content_scripts: [
    {
      matches: ['https://cyber.gachon.ac.kr/*'],
      exclude_matches: ['https://cyber.gachon.ac.kr/login.php*'],
      js: ['src/pages/content/main.tsx'],
    },
  ],
  web_accessible_resources: [
    {
      resources: ['assets/js/*.js', 'assets/css/*.css'],
      matches: ['*://*/*'],
    },
  ],
  options_page: 'src/pages/options/index.html',
}));

바꾸고나서의 장점은 다음과 같다.

vite의 HMR 기능을 사용할 수 있어서 개발 속도가 빨라짐

yarn build 후 yarn dev를 키고 익스텐션을 로드하면 된다.

버전 업이 될 때, package.json과 manifest.json의 버전을 일일이 수정할 필요가 없어짐

package.json의 버전만 수정하면 된다.
그리고 manifest.json 파일이 자동으로 생성되므로 manifest.json 파일을 따로 관리할 필요가 없어졌다.

앞으로 개발할 때 HMR을 사용할 수 있어서 개발 속도가 빨라질 것 같다.

Q. 그럼 저번에 시도했었던 Suspense와 React.lazy를 사용한 코드 스플리팅이 지금은 가능할까? A. 가능하다. vite.config.ts에서 build옵션에 modulePreload를 false로 하면 된다. 공식문서 참고

내일 할 일

알고리즘 문제 풀이
함수형 프로그래밍 파트 2 챕터 10,11 읽기
쿠버네티스 스터디 마무리
nest.js 섹션 1 마무리(1주차)
바닐라 JS로 리액트 만들기 스터디 공부 및 정리
포트폴리오 리뉴얼하기

23.05.13

오늘 한 일​

프로그라피 팀 모임​

익스텐션 개발​

내일 할 일​

오늘 한 일

프로그라피 팀 모임

익스텐션 개발

내일 할 일