💛카부커넥션💛 : vite + eslint +react + react-query + zustand + emotion + axios + prettier 프로젝트 세팅

이슈 생성하기

---

 

 feature/#1 브랜치 생성

git checkout -b feature/#1

---

vite + eslint +react + react-query + zustand + emotion + axios + prettier

 

🌻 Vite

차세대 프론트엔드 빌드 도구

현대적인 자바스크립트 프레임워크(예: React, Vue.js 등)를 사용한 프로젝트를 빠르고 효율적으로 개발할 수 있게 해줌

 Vite는 빠른 개발 환경과 최적화된 빌드 성능을 제공하기 위해 설계

1. 빠른 개발 서버: Vite는 즉시 사용할 수 있는 개발 서버를 제공하며, HMR(Hot Module Replacement) 기능을 통해 코드 변경 시 브라우저가 자동으로 갱신됩니다. 이로 인해 개발 속도가 크게 향상됩니다.
2. 모듈 기반 빌드 시스템: Vite는 브라우저의 기본 ES 모듈 시스템을 활용하여, 프로젝트를 빌드할 때 필요한 모듈만을 로드합니다. 이로 인해 초기 로드 시간이 단축됩니다.
3. 최적화된 프로덕션 빌드: Vite는 Rollup을 사용해 프로덕션 빌드를 수행합니다. 이 과정에서 코드 스플리팅, 트리 쉐이킹, 미니파이 등의 최적화 작업이 수행됩니다.
4. 플러그인 생태계: Vite는 플러그인 시스템을 지원하여, 다양한 기능을 쉽게 확장할 수 있습니다. 예를 들어, 이미지 최적화, 스타일 시트 처리 등의 작업을 플러그인으로 처리할 수 있습니다.
5. 범용성: Vite는 React, Vue, Svelte 등 다양한 프레임워크와 쉽게 통합될 수 있습니다. 기본적으로 지원하는 템플릿이 존재하며, 프로젝트를 빠르게 시작할 수 있습니다.

Vite는 특히 큰 규모의 프로젝트에서 개발 속도를 크게 개선할 수 있어 최근 인기를 얻고 있는 도구

 

전에 썼던 Webpack 같은 거임!

 

 

npm install @emotion/react @emotion/styled
npm install --save-dev prettier
npm install zustand 
npm install  @tanstack/react-query
npm install axios
npm install --save-dev eslint

 

🌻 Emotion

css in js 라이브러리

• @emotion/react: Emotion의 핵심 패키지로, React 컴포넌트에 CSS를 적용할 수 있게 해줌
• @emotion/styled: styled API를 통해 CSS를 스타일링된 컴포넌트로 적용할 수 있음

 

🌻 Zustand

간단하고 가벼운 상태 관리 라이브러리

React 애플리케이션에서 전역 상태를 관리하기 위해 사용

Zustand는 사용하기 쉬운 API와 성능 최적화를 제공하며, 작은 크기로 인해 프로젝트에 부담을 주지 않으면서도 강력한 기능을 제공

1. 간단한 API: Zustand는 상태를 관리하기 위한 매우 직관적인 API를 제공합니다. 전역 상태 관리를 위해 별도의 복잡한 설정이나 파일 구조를 필요로 하지 않습니다.
2. 선택적 구독: Zustand는 컴포넌트가 필요한 상태에만 구독하게 하여, 불필요한 렌더링을 방지합니다. 이는 성능 최적화에 크게 기여합니다.
3. 미니멀한 크기: Zustand의 크기는 매우 작아, 번들에 큰 영향을 주지 않으면서 필요한 상태 관리 기능을 제공합니다.
4. React와의 높은 호환성: Zustand는 React와 자연스럽게 통합되며, 클래스 컴포넌트나 함수형 컴포넌트 모두에서 사용할 수 있습니다.
5. 중첩 상태 관리: Zustand는 중첩된 상태 관리에도 효과적입니다. 복잡한 상태 트리를 쉽게 관리할 수 있습니다.
6. 미들웨어 지원: Zustand는 Redux와 유사하게 미들웨어를 지원하여, 상태 변화 시 추가 작업(예: 로깅, 비동기 작업)을 처리할 수 있습니다.

🌻 Prettier

• 코드 포매터로, 일관된 코드 스타일을 유지하는 데 매우 유용

+ Prettier를 ESLint와 통합 : elist 컨피그 파일 수정

plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier: prettierPlugin,
    },
    extends: [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
    ],

🌻 ESLint

• 자바스크립트 및 타이프스크립트 코드의 품질을 분석하고 개선하기 위한 정적 코드 분석 도구

 

🌻 React Query

React 애플리케이션에서 서버 상태를 관리하고, 비동기 데이터 페칭 및 캐싱을 간편하게 처리할 수 있게 해주는 라이브러리

 서버에서 가져온 데이터를 쉽게 관리하고, 복잡한 비동기 로직을 단순화할 수 있도록 설계

React Query는 특히 REST API 또는 GraphQL API와의 상호작용을 다루는 애플리케이션에서 유용하게 사용

1. 데이터 페칭과 캐싱:
   • React Query는 데이터를 가져오고(fetch) 이를 캐싱하여 성능을 최적화합니다. 이미 캐싱된 데이터는 새로고침 없이도 사용할 수 있으며, 캐시 만료 정책 등을 설정할 수 있습니다.
2. 자동 리페치(Refetching):
   • 데이터가 변경되거나, 인터넷 연결이 복구되었을 때, 또는 브라우저가 포커스를 다시 얻었을 때 자동으로 데이터를 리페칭할 수 있습니다.
3. 비동기 데이터 관리:
   • useQuery, useMutation 등의 훅을 사용해 비동기 작업을 쉽게 관리할 수 있습니다. 이러한 훅은 데이터 로딩, 성공, 에러 상태를 다룹니다.
4. 쿼리 무효화(Invalidation):
   • 특정 데이터가 변경되었을 때, 관련된 쿼리를 무효화하여 자동으로 데이터를 다시 가져올 수 있습니다. 이는 데이터를 항상 최신 상태로 유지하는 데 유용합니다.
5. 백그라운드에서 데이터 동기화:
   • 백그라운드에서 데이터를 동기화하여 사용자가 최신 데이터를 사용할 수 있도록 합니다. 예를 들어, 특정 간격으로 데이터를 자동으로 새로고침할 수 있습니다.
6. 반응형 데이터:
   • 사용자의 네트워크 상태에 따라 데이터를 가져오는 전략을 조정할 수 있습니다. 예를 들어, 네트워크가 느리거나 오프라인 상태일 때 데이터를 캐싱된 데이터로 제공하고, 네트워크가 복구되면 데이터를 자동으로 새로고침할 수 있습니다.
7. 개발자 도구:
   • React Query Devtools를 사용하면 쿼리 상태를 시각적으로 확인할 수 있어 디버깅이 쉽습니다.

---

커밋 컨벤션을 맞춰서 커밋한다

---

로컬 브랜치를 원격 저장소에 푸시 / 해당 브랜치와 원격 브랜치를 연결(set upstream)

git push --set-upstream origin feature/#1

---

 

github 에서 push나 PR(pull request) 할때 issue 연결하기

dev 브랜치에 #1 이슈를 닫으며 PR을 쏜다

세호오빠랑 주리언니가 승인해주면 머지 될 거다

---

세호오빠가 업데이트해준 

PR 템플릿!

## 🔍 What is the PR?
 <!-- PR 내용을 리스트로 작성-->

 ## 📸 Screenshot 
 <!-- 작업한 화면의 스크린 샷 -->


 ## 🙏 To Reviewers 
 <!-- 리뷰어에게 주목했으면 하는 점 or 바라는 점 -->


 ## ✅ Check List
 - [ ]  Merge 하는 브랜치가 올바른가?
 - [ ]  코딩 컨벤션을 준수하는가?
 - [ ]  PR과 관련없는 변경사항이 없는가?
 - [ ]  내 코드에 대한 자기 검토가 되었는가?


 ## 💭 Related Issues 
 <!-- 작업한 이슈번호를 # 뒤에 붙여주세요. -->    
 - Resolved: #3

이건 이슈 템플릿!

---
 name: 이슈 템플릿
 about: 해당 이슈 템플릿을 사용하여 이슈를 생성해주세요!
 title: ''
 labels: ''
 assignees: ''

 ---

 ## 🛠 Issue
 <!— 이슈에 대해 간략하게 설명해주세요(글, 사진) —>
 - 

 ## 📝 To-do
 <!— 진행할 작업에 대해 자세히 적어주세요 —>
 - [ ]

프론트도 이번에 버셀이 아니라 CI/CD 직접 구축할 것 같다!

난 클라우드는 잘 모르니까 PR이랑 머지 잘 봐야겠다!

---

저 고양이 귀여움

꾸시꾸시