소주제 : 리액트와 Next.js 기초 & 이모션

1. Froggy와 Flex - 다음 게임을 13단계까지 완료하세요.

자료: https://flexboxfroggy.com/#ko

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ad5e54aa-b543-4353-aa1b-8d7267c4d506/Untitled.png

2. UI 감각 기르기 - 다음 퀴즈를 끝까지 완료하세요.

자료: https://cantunsee.space/

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/75ac7797-0697-43a0-8baa-ef4297fcd3c7/Untitled.png

3. Emotion 연습 - 다음 FAQ 화면을 만드세요.

자료: https://www.figma.com/file/n9aihmT8tAoo8x4LMACacV/잇츠로드-FAQ

폴더: create-next-app을 이용해 Desktop 경로에 class_quiz 프로젝트를 생성해주세요. (수업 자료 참고)

경로: class_quiz/pages/01/index.js

조건: 1) 아이콘 등 모든 그림은 피그마와 동일하게 만들어 주세요.

     2) flex의 많은 정렬 방법을 연습할 수 있는 화면입니다. flex를 많이 사용해 주세요.
     3) 맨 윗줄의 회색 라인(와이파이, 배터리 등)은 만들지 않습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5d8d1abc-fe30-4cce-9d4a-b96c5f1ae03f/Untitled.png

소주제 : 리액트 훅스 (React-hooks)

<aside> 📢 class_quiz 퀴즈를 시작하기에 앞서, quiz 전용 class_quiz라는 Next.js 프로젝트를 새로 만들어주세요! 수업 때 class와 freeboard_frontend를 만들었던 것처럼 class_quiz를 만든 다음 그 안에서 Daily Quiz를 수행해주시면 됩니다.

</aside>