[FEAT] admin 개발 환경 세팅

[rbgksqkr]

Issue Number

#442

As-Is

• admin 개발 환경 세팅 X

To-Be

• admin 개발 환경 세팅 O
  • vite, pnpm, emotion, tastack-query, react-router-dom, msw 설정
  • API 호출 함수 interface 맞게 모두 구현 + fetcher 기존 형태에서 url과 header 수정
  • msw API 명세대로 핸들러 모두 구현 (인증 로직 제외)

Check List

• 테스트가 전부 통과되었나요?
• 모든 commit이 push 되었나요?
• merge할 branch를 확인했나요?
• Assignee를 지정했나요?
• Label을 지정했나요?

Test Screenshot

• 설정 파일이 많아져 UI 퍼블리싱 작업, 스크립트 작업과 분리해서 PR 작성

(Optional) Additional Description

디렉토리 구조

frontend 내에 위치시키면 도메인을 다르게 가져가기 위해 별도의 빌드 도구를 사용해야 할 것 같은데, 그렇게 하려면 모노레포 구조가 꼭 필요해지는 거라고 이해했어요
근데 처음부터 모노레포를 도입하기엔 개발 환경 세팅에 많은 리소스를 들일 것 같아서, 그러한 고려 사항을 배제하기 위해 frontend, backend, frontend-admin으로 디렉토리를 관리하기로 결정하였습니다. 또한 중복되는 로직이나 컴포넌트가 거의 없어서 모노레포의 장점을 크게 느끼지 못할 것 같아서 좀더 고민해봐야 할 것 같습니당

pnpm 사용 이유

npm과 yarn clasic의 단점으로 나타나는 유령 의존성을 해결합니다. 직접 설치하지 않은 패키지까지 설치되는데, 이는 설치할 때 시간도 오래 걸리고 번들 최적화할 때도 문제를 겪게 만듭니다. pnpm을 사용하면 유령 의존성 없이 package.json에 명시된 패키지만 설치합니다.
두 번째는 모노레포를 고려한다는 점에서 선택하게 되었습니다. 모노레포 패키지 매니저를 보면 pnpm와 yarn berry가 나오는데, yarn berry는 zero-install을 사용했을 때 크게 유용함을 느낄 것으로 보입니다. 하지만 zero-install을 했을 때 깃 레포지토리가 커진다는 것과 워크스페이스 설정이 어렵다는 단점이 보여서 pnpm을 선택하였습니다.

vite 사용 이유

초기 개발 환경을 세팅하는 경우라면 webpack보다는 vite가 적절하다고 생각했습니다. webpack을 사용하는 이유 중 가장 큰 건 플러그인이나 커뮤니티가 활성화되어 있어서 래퍼런스가 많다는 장점이 있는데, admin에서 사용하는 설정으로는 vite로도 충분히 커버가 가능하다고 생각합니다.
또한 vite의 빠른 개발 서버 로드 속도와 HMR은 webpack을 썼을 때보다 훨씬 빨라서 생산성에 꽤나 영향을 준다고 생각합니다. 빌드하고 webpack dev server 열려면 컴퓨터 성능에 따라 10초 이상 걸리는데, vite는 1초 미만으로 서버가 올라가서 화면 켜지는 것까지 5초 이내로 동작합니다.

[novice0840]

Vite 기본 세팅과 추가적으로 API 쪽 공통함수가 추가된 것 같네요.
확인했습니다!

[useon]

환경 세팅의 달인 천재 개발자 조마루 .. 커밋 단위 넘 잘 쪼개어 놔서 보기 편했네욤 ^^ 그리고 PR에 선택 이유를 다 적어두셔서 궁금했던 부분이 바로 해소됐어요 멋진 소통 ^^ 멋 진 세 팅 감 사 바 로 어 프 루 브