[환경] 개발 경험(DX) 개선

[junghaesung79]

• Close [환경] 개발 환경 개선 #625

What is this PR? 🔍

• 기능 : 개발 경험 개선
• issue : [환경] 개발 환경 개선 #625

Changes 📝

1. 개발 전용 의존성 위치 이동
   • 원래 devDependencies에 있어야 자연스러운 라이브러리들이 dependencies에 있어서 이를 재설치
   • 테스트 관련, ts 타입정의 관련, typescript, web-vitals, sass 재설치
   • 초기 js 번들 크기 2~3MB 감소
2. prettier 설치
   • 기존: 따로 개인적으로 prettier를 적용
   • 새로운 개발자는 적용하기 전까지 직접 코드를 lint에 맞게 수정해야 했음
   • prettier 설치 후 간단한 명령어로 소스코드 전체를 새로운 규칙으로 포매팅 가능
   • 개발자들이 동일한 lint 설정을 공유
   • eslint, stylelint 둘 다 적용함 (js, jsx, ts, tsx, css, scss)
3. unused-import, 절대 경로 참조 우선 세팅
   • workspace의 설정을 수정하여 자동 참조되는 import의 경로를 절대 경로로 변경
   • 파일을 만든 후 첫 참조 import에서 상대경로로 되어서 그것을 수정하는 수고가 없어짐
   • 사용하지 않는 import는 지워지도록 하는 기능도 추가
   • 이로써 로직을 만드는 중간에 import 그룹을 확인/수정하지 않아도 됨

---

• 루트 위치의 파일들을 제외하면 대부분 lint 수정으로 인한 변경 파일들입니다. 이 부분들은 넘기셔도 문제 없습니다.
• package.json의 변경사항이 많아 보이는데 이는 사실 들여쓰기를 통일하여 diff가 된 부분으로 실제 변경 사항은 다음과 같습니다.
  • 일반 의존성에 있던 라이브러리들을 개발 의존성으로 이동
  • prettier 설치
  • 소스코드 전체를 포매팅할 수 있는 스크립트 추가
• eslint, prettier, stylelint의 설정파일을 보시고 추가하고 싶은 규칙이나 빼야 하는 규칙이 있다면 코멘트로 남겨주십시오.
• lint 수정 커밋들은 로컬에서 yarn lint 했을 때 안 나오다가 푸시하고 액션에서 나온 오류를 하나씩 해결한 것들입니다.

ScreenShot 📷

Test CheckList ✅

• test 1
• test 2
• test 3

Precaution

✔️ Please check if the PR fulfills these requirements

• It's submitted to the correct branch, not the develop branch unconditionally?
• If on a hotfix branch, ensure it targets main?
• There are no warning message when you run yarn lint

[junghaesung79]

추후 각각의 보완점들을 반영하여 개별 pr로 분리할 예정입니다!
관련 스레드