sosbp / comment-subject

코멘토 직무부트캠프 과정 - React, Node.js

코멘토 컴포넌트 단위 웹개발 실습안

해당 레포지토리를 통해 Atomic design 원칙에 따라 컴포넌트 단위 설계 웹개발 실습을 진행합니다 (해당 레포지토리의 코드는 2주차부터 진행할 과제를 위함입니다, 다만 1주차 과제를 끝내신 분들은 먼저 살펴보셔도 좋습니다)

레포지토리 시작해보기

1. local 에 클론받으시고(git clone)
2. terminal 을 열어 해당 디렉토리로 이동 후, yarn install, yarn dev 실행
3. 브라우저를 열어 localhost:3000 입력하시면 페이지 접속 가능합니다

1주차 과제 시작 전 해야 할 실습

• React todo list 만들기 (typescript): https://withseungryu.tistory.com/42 (해당 포스팅 1,2,3 따라해보기)
• Nextjs getting started ~ Basic features 따라해보기: https://nextjs.org/docs/getting-started

1주차 과제 진행 방법

1. Atomic design 원칙(https://bradfrost.com/blog/post/atomic-web-design/) 읽으며 이해하기
2. figma(https://www.figma.com/file/byszU5JLY8iBWquQKYpM0a/comento?node-id=0%3A1) 보면서 컴포넌트를 어떻게 쪼개야(atomic design 원칙에 맞춰서 분류해야) 할지 고민 후, 이를 바탕으로 컴포넌트 설계 문서 작성하기 (참고 포스팅: https://velog.io/@thsoon/%EC%93%B8%EB%95%8C%EC%97%86%EC%9D%B4-%EA%B3%A0%ED%80%84%EC%9D%B8-%ED%88%AC%EB%91%90%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-FE-2.-%EB%B7%B0-%EC%84%A4%EA%B3%84)

Output

• 컴포넌트 설계 문서 (문서는 컴포넌트 이름을 짓고, 각 카테고리인 atoms, molecules, organisms 등에 맞춰 컴포넌트를 분류해서 작성합니다)
• fork 하신 본인의 git repository