1886px 프론트엔드 스터디 세번째 과제입니다
안녕하세요🙂 프론트엔드 멘토링을 맡은 함초롬입니다.
세번째 과제는 리액트로 인기 투표 앱 만들기를 준비했습니다. 본 과제를 통해 리액트에 익숙해지셨으면 좋겠습니다.
개발에는 정답이 없습니다. 각자 고민하고 각자가 생각하는 가장 좋은 방식으로 본 과제를 구현해주시기 바랍니다.
모르는 게 생기면 먼저 고민하고 공부해 본 다음 이후에도 잘 모르겠으면 디스코드 질문방에 질문합니다. 모르는 내용을 정리해 전체 세션 시간에 공유하고 같이 답을 찾아갑니다.
- 리액트로 개발해봅니다.
- 컴포넌트 단위 개발을 이해해봅니다.
- 코드의 재사용성을 높이는 법을 이해해봅니다.
- React 컴포넌트의 생명주기를 이해하고 React Hooks를 사용해봅니다.
- props와 state를 이해하고 적용해봅니다.
styled-components사용 방법을 알고 익숙해집니다.- 여러 길이 단위를 알아봅니다.
- 코드 포매터가 무엇인지 알고,
Prettier를 도입해 사용합니다. (참고자료)
- 리액트를 사용해 인기 투표 앱을 위와 같이 구현합니다. (결과 화면)
- 스타일링 시
styled-components를 사용합니다. 길이 단위는 rem을 사용합니다. - props와 state를 둘 다 사용합니다.
- 사용자 프로필 카드 UI를 위 화면과 같이 구현합니다.
- 좋아요를 눌렀을 때 좋아요 수가 증가되도록 합니다.
- 기본 포맷은 지켜주시되, 스타일링은 자유롭게 해도 좋습니다. (색, 폰트 등)
- 주어진 파일 이외에 새 파일을 만들지 않습니다.
- 개발을 하다 기억이 안 나거나 잘 모르겠는 부분은 추가로 공부하고 정리합니다.
- git commit 할 때 한번에 하는 것이 아니라 기능별로 commit 합니다.
VSCode와Prettier을 사용합니다. (저장 시 format 되도록 설정합니다.)vercel을 사용해 배포합니다.
- JSX는 무엇일까요?
- 컴포넌트는 무엇이고, 컴포넌트 단위로 개발하는 이유는 무엇일까요?
- state와 props는 무엇일까요?
- 리액트 훅은 무엇일까요?
- 본 레포지토리를 fork합니다.
- fork된 레포지토리를
git clone을 통해 로컬에 다운받습니다. - 로컬에 다운 받은 이후 해당 디렉토리로 이동해
npm install을 해 필요한 패키지를 설치하고npm start로 시작합니다. - 코드 에디터는
VSCode를 사용해 작업합니다. - 브랜치를 자기 이름으로 판 다음 해당 브랜치에서 작업합니다. (예:
git checkout -b chorom) - 로컬에서 개발한 작업물을 원격 레포지토리에
push합니다. - 완성한 결과물을 본 레포지토리에
pull request로 보냅니다. - 코드 리뷰를 받고 수정합니다.
create-react-app을 사용해 시작한 프로젝트입니다.
제목: [과제 {과제번호}] {이름} 과제 제출합니다
내용:
배포한 링크와 블로그 포스팅 링크를 첨부합니다.
과제를 하며 배운 내용, 고민한 내용, 어려웠던 내용, 추가로 구현하고 싶은 내용 등을 정리합니다.
2021년 9월 18일 토요일 21시