diff --git a/README.md b/README.md index eed6e70..52db073 100644 --- a/README.md +++ b/README.md @@ -30,9 +30,9 @@ UI는 직관적으로, 정보는 짧게 핵심만. **가치 있는 소비**, 이 ## 👩🏻‍💻 FE Developers -| | | +| | | | :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: | -| 원윤서
[@dbstj0403](https://github.com/dbstj0403) | 노찬영
[@shroqfk](https://github.com/shroqfk) | +| 노찬영
[@shroqfk](https://github.com/shroqfk) | 원윤서
[@dbstj0403](https://github.com/dbstj0403) |
@@ -42,20 +42,20 @@ UI는 직관적으로, 정보는 짧게 핵심만. **가치 있는 소비**, 이 | 역할 | 종류 | 선정 이유 | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Library** | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) | 컴포넌트 기반 구조로 생산성 높은 UI 개발이 가능하고, 커뮤니티와
생태계가 풍부하여 프론트엔드 개발 시 유지보수 및 확장 용이. | -| **Programming Language** | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) | 정적 타입 지원으로 코드 안정성을 높이고,
디버깅 및 유지보수성 강화. | +| **Library** | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) | 컴포넌트 기반 구조로 생산성 높은 UI 개발이 가능하고, 커뮤니티와 생태계가 풍부하여 프론트엔드 개발 시 유지보수 및 확장 용이. | +| **Programming Language** | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) | 정적 타입 지원으로 코드 안정성을 높이고, 디버깅 및 유지보수성 강화. | | **Styling** | ![TailwindCSS 3](https://img.shields.io/badge/TailwindCSS-3-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white) ![PostCSS](https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white) | 유틸리티 클래스 기반으로 빠르게 UI를 구성하고, 반응형 대응 용이. | | **Data Fetching** | ![Axios](https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white) ![TanStack Query](https://img.shields.io/badge/TanStack%20Query-FF4154?style=for-the-badge&logo=react-query&logoColor=white) | 서버 상태와 비동기 요청을 효율적으로 캐싱 및 동기화 가능. | | **API Documentation** | ![Swagger](https://img.shields.io/badge/Swagger-85EA2D?style=for-the-badge&logo=Swagger&logoColor=black) | API 문서화를 위한 표준 도구로, 팀 간 소통과 유지보수 용이. | | **Routing** | ![React Router](https://img.shields.io/badge/React%20Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) | SPA 라우팅을 선언적으로 구성할 수 있어 페이지 전환과 인증 흐름 관리에 적합. | -| **Linter & Formatter** | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![Stylelint](https://img.shields.io/badge/stylelint-333333?style=for-the-badge&logo=stylelint&logoColor=white") ![Husky](https://img.shields.io/badge/Husky-000000?style=for-the-badge&logo=husky&logoColor=white) ![Lint-Staged](https://img.shields.io/badge/Lint_Staged-000000?style=for-the-badge&logo=lint-staged&logoColor=white)| 코드 일관성을 유지하고 커밋 전 자동 검사로
오류 발생 가능성을 낮춤. | +| **Linter & Formatter** | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![Stylelint](https://img.shields.io/badge/stylelint-333333?style=for-the-badge&logo=stylelint&logoColor=white") ![Husky](https://img.shields.io/badge/Husky-000000?style=for-the-badge&logo=husky&logoColor=white) ![Lint-Staged](https://img.shields.io/badge/Lint_Staged-000000?style=for-the-badge&logo=lint-staged&logoColor=white)| 코드 일관성을 유지하고 커밋 전 자동 검사로 오류 발생 가능성을 낮춤. | | **Animation** | ![Framer Motion](https://img.shields.io/badge/Framer_Motion-EF008F?style=for-the-badge&logo=framer&logoColor=white) | 자연스러운 UI 전환 애니메이션으로 사용자 경험을 향상. | | **Chart** | ![Recharts](https://img.shields.io/badge/Recharts-FF6384?style=for-the-badge&logo=recharts&logoColor=white) | 직관적인 API와 반응형 차트 지원으로 데이터 시각화에 적합. | -| **Swiper UI** | ![Swiper](https://img.shields.io/badge/Swiper-6332F6?style=for-the-badge&logo=swiper&logoColor=white) | 모바일 친화적인 슬라이드 구현이 간편하고,
다양한 커스터마이징 가능. | +| **Swiper UI** | ![Swiper](https://img.shields.io/badge/Swiper-6332F6?style=for-the-badge&logo=swiper&logoColor=white) | 모바일 친화적인 슬라이드 구현이 간편하고, 다양한 커스터마이징 가능. | | **State Management** | ![Zustand](https://img.shields.io/badge/Zustand-000000?style=for-the-badge&logo=zustand&logoColor=white) | 가볍고 직관적인 API로 글로벌 상태 관리를 간결하게 구현 가능. | | **Package Manager** | ![Yarn](https://img.shields.io/badge/Yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white) | 의존성 관리를 빠르고 효율적으로 처리하며, workspace 기능으로 프로젝트 관리가 용이. | | **Deployment** | ![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white) | GitHub와의 연동으로 푸시만으로도 자동 배포가 가능해 프로젝트의 빠르고 쉬운 배포를 지원. | -| **Bundler & Plugin** | ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) ![Vite PWA](https://img.shields.io/badge/Vite_PWA-646CFF?style=for-the-badge&logo=pwa&logoColor=white) ![SVGR](https://img.shields.io/badge/SVGR-FFB13B?style=for-the-badge&logo=svgr&logoColor=white) | 번들링 속도가 빠르고, SVG를 React 컴포넌트로 변환하거나
PWA 설정을 손쉽게 할 수 있음. | | +| **Bundler & Plugin** | ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white) ![Vite PWA](https://img.shields.io/badge/Vite_PWA-646CFF?style=for-the-badge&logo=pwa&logoColor=white) ![SVGR](https://img.shields.io/badge/SVGR-FFB13B?style=for-the-badge&logo=svgr&logoColor=white) | 번들링 속도가 빠르고, SVG를 React 컴포넌트로 변환하거나 PWA 설정을 손쉽게 할 수 있음. | |