[React] 디자인시스템 FOCUS 챌린지 시작

React 디자인 시스템 FOCUS 챌린지

개발 동아리 동료가 추천해준 React 디자인 시스템 챌린지이다.
내 실력을 테스트 해볼수 있고 상위 10%안에 들 경우 네카라쿠배당토 출신 개발자분들의 자세한 리뷰를 받아볼 수 있는 좋은 기회라 참가를 결심했다.

디자인 시스템 활용

이번 챌린지에서는 디자인 시스템을 적극 활용해야 한다.
Class101 UI 에서 제공하는 디자인 시스템을 활용하여 Class101의 메인 페이지를 클론코딩 하는것이 이번 챌린지의 내용이다.

---

👍이런 분들께 권장해요

단기간에 React Framework를 이용해
디자인 시스템에 기반한 프로젝트를 만들어보고 싶은
취준생 및 1년차 이하 개발자

더 자세히는?

• React 에 대한 기본 지식을 학습하신 분
• React 공식 문서와 스스로의 검색 실력을 통해 자주적으로 개발해보고 싶으신 분
  배웠던 지식을 실전을 통해 체득하고 싶으신 분
• 체계적인 디자인 시스템을 통해 아토믹한 코드를 짜보고 싶으신분
• 같은 취준생분들과 경쟁하며 motivation을 얻고 정해진 시간 안에 프로젝트를 진행해보고 싶으신 분
• 같은 취준생분들과 경쟁해 상위 10% 안에 들어 보상을 받고 싶으신 분
• 보상이 아니어도 의미있는 프로젝트를 진행하며 프론트엔드 개발자로서 성장하고 싶으신 분

---

📘 Skills

이번 챌린지에서 내가 사용할 기술 스택은 다음과 같다.

• React
• Typescript
• styled-component
• Recoil Or Redux-Toolkit
• Storybook
• heroku Or vercel

Recoil과 Redux-Toolkit은 고민중이다.

Recoil은 쉽고 React스럽지만 레퍼런스가 부족하고 메모리 누수 이슈가 있다고 한다.
Redux-Toolkit은 복잡하지만 레퍼런스가 많고 안정적이다.

Storybook을 통해 단위 컴포넌트를 테스트하며 개발을 진행할 예정이다.

배포는 heroku 혹은 vercel로 진행할 것이다.
heroku는 경험이 있어서 크게 어렵지는 않을것 같으나 vercel도 한번 해보고싶다.

---

📋 챌린지 방식

• 단독 프로젝트이지만 Agile 방법론을 따른다.
• 스프린트 기간은 챌린지가 진행되는 10일로 한다.
• 매일 오후 8시에 데일리 스크럼을 진행한다. ( velog 작성 )
• 챌린지가 종료되면 3L 스프린트 회고를 진행한다.

---

📁 프로젝트 구조

• component 단위 컴포넌트 폴더
  • index.tsx 컴포넌트 로직
  • styles.tsx 컴포넌트 스타일
• pages 페이지 폴더
• redux or recoil 전역 상태 관리 폴더 (redux or recoil)
• stories 스토리북 테스트 폴더

---

이제 시작!

[React] 디자인 시스템 FOCUS 챌린지 - 1