Skip to content

Update README.md #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shroqkf merged 1 commit into from
May 22, 2025
Merged

Update README.md #80

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ UI는 직관적으로, 정보는 짧게 핵심만. **가치 있는 소비**, 이

## 👩🏻‍💻 FE Developers

| <img src="https://avatars.githubusercontent.com/u/113417326?v=4" width="150" height="150"/> | <img src="https://avatars.githubusercontent.com/u/137189866?v=4" width="150" height="150"/> |
| <img src="https://avatars.githubusercontent.com/u/137189866?v=4" width="150" height="150"/> | <img src="https://avatars.githubusercontent.com/u/113417326?v=4" width="150" height="150"/> |
| :-----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
| 원윤서<br/>[@dbstj0403](https://github.com/dbstj0403) | 노찬영<br/>[@shroqfk](https://github.com/shroqfk) |
| 노찬영<br/>[@shroqfk](https://github.com/shroqfk) | 원윤서<br/>[@dbstj0403](https://github.com/dbstj0403) |

<br>

Expand All @@ -42,20 +42,20 @@ UI는 직관적으로, 정보는 짧게 핵심만. **가치 있는 소비**, 이

| 역할 | 종류 | 선정 이유 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Library** | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black) | 컴포넌트 기반 구조로 생산성 높은 UI 개발이 가능하고, 커뮤니티와<br/> 생태계가 풍부하여 프론트엔드 개발 시 유지보수 및 확장 용이. |
| **Programming Language** | ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black) | 정적 타입 지원으로 코드 안정성을 높이고,<br/> 디버깅 및 유지보수성 강화. |
| **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)| 코드 일관성을 유지하고 커밋 전 자동 검사로<br/> 오류 발생 가능성을 낮춤. |
| **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) | 모바일 친화적인 슬라이드 구현이 간편하고,<br/> 다양한 커스터마이징 가능. |
| **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 컴포넌트로 변환하거나<br/> 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 설정을 손쉽게 할 수 있음. | |

</div>
<br>
Expand Down