♻️ Refactor the project for better DX

[nbsp1221]

안녕하세요, 오랜만입니다.

개발의 편의성을 위해 프로젝트 구조를 정리하고 메인 로직 작업 후 웹팩으로 빌드한 결과물을 매번 커밋에 포함시키지 않아도 되도록 전체적으로 리팩토링을 진행하였습니다. 이제는 확장 프로그램을 구동할 수 있는 모든 파일이 빌드를 수행하면 자동으로 dist 폴더에 들어가게 됩니다. 개발하면서 테스트할 때나 배포할 때에는 dist 폴더를 기준으로 진행해 주시면 됩니다.

코드와 개발 방법에 많은 변화가 생겼기 때문에 PR로 올렸습니다.

변경 사항

• 로직과 관련된 코드는 src 폴더에, 확장 프로그램에서 접근할 수 있는 파일은 public 폴더로 정리했습니다.
• 확장 프로그램 구동에 필요한 모든 파일은 웹팩을 거쳐 dist 폴더로 모이게 됩니다. 개발 테스트 및 배포는 dist 폴더가 기준이 됩니다.
• 빌드된 메인 로직을 커밋으로 관리할 필요가 없습니다.
• 메인 로직뿐만 아니라 확장 프로그램에서 동작하는 코드도 TypeScript로 작성할 수 있게 되었습니다.
• 앞으로 새로운 의존성을 추가할 때에는 파일을 주입하는 방식이 아닌, npm install 및 import 문을 사용해 쉽게 이용할 수 있습니다.

개발 방법

1. npm install로 의존성을 설치합니다.
2. npm run dev로 빌드 후 dist 폴더를 확인합니다.
3. 브라우저에서 dist 폴더를 선택하여 확장 프로그램을 로드합니다.
4. KLAS 사이트에 접속한 뒤에 테스트를 진행합니다.
5. 변경 사항이 발생할 경우 파일을 저장하면 자동으로 빌드가 진행됩니다. 사이트에서 새로고침만 하면 즉시 변경 사항을 테스트할 수 있습니다.

프로젝트 구조

.
├── CONTRIBUTING.md
├── LICENSE
├── README-EN.md
├── README.md
├── hot-reload.js
├── manifest.json
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   │   ├── css
│   │   │   └── jquery.modal.min.css
│   │   ├── images
│   │   │   ├── github.png
│   │   │   ├── help-circle.png
│   │   │   ├── icon-128x128.png
│   │   │   ├── icon-16x16.png
│   │   │   ├── icon-32x32.png
│   │   │   ├── icon-48x48.png
│   │   │   ├── icon-disabled-128x128.png
│   │   │   ├── icon-disabled-16x16.png
│   │   │   ├── icon-disabled-32x32.png
│   │   │   └── icon-disabled-48x48.png
│   │   └── js
│   │       ├── Chart.min.js
│   │       ├── FileSaver.js
│   │       ├── jquery.modal.min.js
│   │       └── jszip.min.js
│   ├── dark.css
│   ├── popup.css
│   ├── popup.html
│   └── switch.css
├── src
│   ├── app.ts
│   ├── background.ts
│   ├── content-main.ts
│   ├── content-style.ts
│   ├── content-video.ts
│   ├── core
│   │   └── browser.ts
│   ├── functions
│   │   └── bypassCertification.ts
│   ├── internal.ts
│   ├── popup.ts
│   ├── routes
│   │   ├── evaluation.js
│   │   ├── home.js
│   │   ├── index.d.ts
│   │   ├── index.js
│   │   ├── lecture-home.js
│   │   ├── lecture-plan-std.js
│   │   ├── lecture-plan-view.js
│   │   ├── login.js
│   │   ├── online-lecture.js
│   │   ├── rank.js
│   │   ├── root.js
│   │   ├── score-toeic.js
│   │   ├── score.js
│   │   ├── syllabus-graduate.js
│   │   ├── syllabus.js
│   │   ├── take-lecture.js
│   │   └── timetable.js
│   └── utils
│       ├── dom.ts
│       ├── math.ts
│       ├── score.ts
│       └── string.ts
├── tsconfig.json
├── types
│   └── window.d.ts
├── update
│   └── manifest.json
└── webpack.config.ts

[mirusu400]

고생하셨습니다! 날 밝으면 한번 확인후 수정이나 궁금한 사항 있으면 남겨두겠습니다

다만 잠깐 확인해봤는데 줄 개행 린팅 관련 문제가 있는데 npm run lint:fix 한번만 해주시고 커밋 부탁드려도 될까요?

[nbsp1221]

@mirusu400 확인 감사합니다! npm run lint:fix는 해봤는데 아무런 변경 사항이 생기진 않네요. 혹시 어떤 문제인가요?

[mirusu400]

@nbsp1221

제가 확인했을땐때는 일부 파일이 위와같이 줄 개행 린트 오류가 있었고 npm run lint:fix 했을시 수정되었었는데 안되실까요?

[nbsp1221]

@mirusu400 확인해 보니까 리눅스 환경(저는 WSL을 사용합니다)에서 git clone을 받으면 문제가 없는데, 윈도우 환경에서 git clone을 받으면 문제가 생기는 것 같습니다.

https://stackoverflow.com/questions/2517190/how-do-i-force-git-to-use-lf-instead-of-crlf-under-windows

여기를 참고해서 윈도우에서 git config --global core.autocrlf false를 실행한 뒤 윈도우에서 git clone을 받으면 됩니다.

.gitattributes를 추가하는 것으로도 해결이 가능하다고 했는데, 메인 브랜치에 해당 파일이 없어서 그런지 제가 테스트했을 땐 동작하진 않았습니다. 이 PR이 머지된 후에 다시 테스트해봐야 할 것 같습니다.

[nbsp1221]

• KLAS 웹사이트 구조 변경으로 인한 오류 수정 #16 해당 이슈의 수강인원 조회 기능 미작동 오류를 해결했습니다. (9d4f861)
• KLAS 구조 변경으로 코드를 업데이트하면서 누락됐던 검색어 없이 강의계획서를 검색할 수 있는 기능을 다시 추가했습니다. (2e0acc6)

[mirusu400]

경로 문제로 일부 제대로 리소스를 못불러 오는 영역을 수정하였습니다

나머지는 전반적으로 괜찮아서 한번 빌드해서 테스트해보시고 머지해도 좋을것같아요

이제 타입스크립트를 배워야 될때가 왔군요 ㅠㅠ

[nbsp1221]

커밋해주신 부분 확인해봤는데 확장 프로그램을 로드할 때 프로젝트의 루트 경로가 아닌, dist 폴더를 기준으로 작성했기 때문에 이건 원래 값 그대로 가야할 것 같습니다.

빌드 후 dist 폴더를 확인해보면 여기에도 manifest.json 파일이 있고, 이 파일을 기준으로 로드하면 됩니다.

이렇게 한 이유는 확장 프로그램에서 불필요한 코드(package.json이나 TypeScript 코드 등)를 포함하지 않게 하기 위해서입니다.

개발 테스트 또는 배포할 때 프로젝트 루트가 아닌, dist 폴더에 있는 파일만으로 진행해주시면 됩니다.

[mirusu400]

@nbsp1221 앗 제가 기본적인 실수를 했네요,, 마지막 커밋은 취소해놨습니다 머지해도 좋을것같습니다~

[nbsp1221]

확인 감사합니다! 저도 빌드해서 테스트해봤고 정상 동작했습니다. 머지하겠습니다