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

https://www.numble.it/ad330222-fbe1-4bbb-9b2b-23ea21b965af?t=1641164990
인스타 보다가 발견한 개인 프로젝트 사이트, 넘블이 목표를 정해주고 나는 그걸 수행한다.

• 1월 7일 오후 6시부터 1월 16일 오후 6시까지 10일 간 클론 코딩을 진행하며 서버에 배포하고 챌린지 결과물을 제출
• 네카라쿠배당토 및 삼성전자 출신 프론트엔드 개발자가 대상자 전원에게 피드백을 제공하고, 더 자세한 코드 리뷰와 개선 피드백 or 축하금 10만원 중 선택한 보상 1개를 드려요!
• 넘블 참여자 중 유능한 인재로 인정받아 다른 챌린지의 백엔드 개발자, 기획자, 디자이너 상위 10%이 모여 있는 팀원 모집 풀에 들어갈 수 있어요. 거기서 인정받은 사람들과 팀을 꾸려 실제 런칭부터 운영까지 하는 후속 챌린지가 열려요!

혼자 할 수도 있겠지만, 강제적인 프로젝트 시작과 백그라운드 정보가 필요했기에 참가하기로 했다.

챌린지 미션

• Class101의 디자인 시스템을 적용해서 메인페이지 카피하기
  • https://ui.class101.dev/
  • 옛날에 구글링하다가 class101의 디자인 시스템은 접해본적이 있었다.
    실제로 사용해볼 생각은 못했는데, 이번기회에 해보는 걸로.
• 조건
  • React Framework를 사용할 것
  • javascript보다 Typescript를 활용할 것
  • 서버에 배포할 것 (Vercel과 같은 서비스를 이용해 보세요)
• 결과물 제출 형식
  • 배포한 서비스 URL
    • ex. https://www.numble.it
  • 깃허브 주소
    • Public 저장소에 올려주세요
  • 블로그 주소
    • 기술블로그에 작성
    • 포함 할 내용
      • 주요코드에 대한 설명
        • 주요 로직(ex.소비자 구매 로직)과 그 이유
        • 코드내에서 고려한 특정 유저 행동과 그에 대한 대처
      • 활용한 라이브러리와 그 이유
      • 프로젝트를 진행할 때 어려웠던 점/고민했던 부분과 해결방법

사전조사

• 디자인 시스템
• Typescript
• 서버 배포
  • Vercel