[Chrome Extension] 웹 크롤링 크롬 익스텐션 (학교 홈페이지에서 과제 정보 모아오기)

 오늘은 미루고 미루던 크롬 익스텐션 개발에 대한 포스팅이다. 지금은 153명 정도 사용 중이다. 

 

 나의 첫 번째 사이드 프로젝트를 무엇으로 할지 고민이 많았었다. 구글링을 해봤는데, 드래그앤 드롭 (DND)를 구현한 프로젝트와 작은 블로그 만들기 등 멋진 프로젝트 들이 많았다. 그중에서도 영상 과제 정보를 불러오는 크롬 익스텐션은 참 인상 깊었다. JS의 기본적인 문법조차 모르던 내가 무작정 머리부터 들이밀며 타입스크립트 + 리액트로 크롬익스텐션 개발을 시작했다. 사실 이 정도 크기의 익스텐션으로는 순수 JS만으로도 구현이 충분히 가능하다. 하지만 당시에 듣던 리액트와 타입스크립트 인강에서 배운 내용들을 내 것으로 만드는 데에는 직접 만들기보다 좋은 방법이 없다고 생각했다. 지금은 그저 당연한 코드고 난잡한 코드지만, 그때 당시에는 코드 한 페이지가 이해가 안 돼서 이틀이고 3일이고 읽었던 것 같다.

 

  많은 사람들이 크롬 익스텐션에 대한 포스팅을 했지만, 가장 기초적인 구조에 대해서만 언급하여 프로젝트 만드는데에도 오래 걸렸다. 심지어 리액트와 타입스크립트를 사용해야 했고, 흔히 쓰던 Create React App으로 만들고 싶지 않았다. 핫하다고 하는 것은 다 써보고 싶었다.

 https://ykss.netlify.app/translation/react_libraries_for_2024/?utm_source=substack&utm_medium=email#%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%8C%A8%ED%82%A4%EC%A7%80-%EB%A7%A4%EB%8B%88%EC%A0%80

(번역) 2024 리액트 라이브러리

 

 2024 리액트 트렌드 포스팅에서 본 Vite를 사용하여 앱을 빌드하고, UI 라이브러리도 사용해보고 싶어서 MUI를 선택했다. 기본적인 컴포넌트들은 MUI에서 제공해 주었지만 그 당시에는 tailwind css 도 사용해보지 않아서 MUI 컴포넌트의 속성이 무슨 의미인지 파악하기 힘들었다. 나는 tailwind는 사용하지 않았지만 나의 상황과 비슷한 보일러 플레이트를 찾아서 그대로 fork 했다. https://github.com/JohnBra/vite-web-extension

GitHub - JohnBra/vite-web-extension: Vite web extension template. Setup with React, Typescript and TailwindCSS

 폴더를 보면 eslint, manifest.json, package.json, tailwind.config.cjs, tsconfig.json, vite.config.ts,. gitignore 파일과 public, src 폴더가 있다. 이 중에서 전공시간에 배운 gitignore 파일 빼고 단 한 개도 알지 못했는데, 혹시라도 나와 같은 사람이 있을 수 있으니 짧게라도 알아보자. (물론 요즘은 GPT에게 물어보면 다 알려준다.)

eslintrc : ESLint 설정 파일로서, ESLint는  JS 코드의 스타일과 패턴을 검사하는 도구다. 이를 통해 코드 스타일을 일관되게 유지하고 잠재적 오류를 찾을 수 있다. 보통 협업 단계에서 코드 스타일을 통일하기 위해 사용하는 도구 중 하나라고 알고 있다.

. gitignore : 프로젝트가 git 원격 디렉토리에 올라갈 때 이 파일에 쓰인 파일들은 제외되고 push 된다. 보통 크기가 큰 node module과 민감한 정보들 같은 것들이 포함된다.

. nvmrc :  프로젝트에서 사용해야 하는 Node.js 버전을 지정한다. 예를 들어, v14.17.0이라고 적혀있으면 해당 node 버전을 사용한다.

LICENSE : 프로젝트의 사용 및 배포 조건을 명시하는 라이센스 정보다. (Ex MIT Apache 2.0)

README.md : 프로젝트의 설명서로 개발자가 직접 어떤 프로젝트인지 설치법 사용법에 대해 설명한다. Markdown 형식으로 작성.

manifest.json : 크롬 익스텐션의 이름, 버전, 권한, 배경 스크립트 등이 정의되는 파일이다.

package.json: 프로젝트의 메타데이터와 의존성을 관리한다. 예를 들어 처음 프로젝트를 fork 하여 로컬로 가져왔을 때, npm i 명령어로 의존성들을 설치하는데,  이때 package.json내에 있는 라이브러리들이 같이 설치된다. 

나머지 tsconfig, viteconfig, tailwindconfig 파일들은 각각의 기술에 대한 설정 파일들이다. 보통 프로젝트 처음 설정을 마치고 잘 들여다보지 않는 것 같다.

 

 

다음 포스팅에서는 Content, Background, PopUp에 대해 알아보고 만났던 오류에 대해 포스팅을 이어가겠다.