들어가기 앞서
안녕하세요! 프론트엔드 찍먹 스터디 멘토 박유빈입니다.
3주차 Component 나눠 담기 
수강하시느라 고생하셨습니다! 
수강하시느라 고생하셨습니다! 이번 주에는 하나의 화면을 여러 Component로 나눠보고, Props · Array · map을 활용해 같은 구조의 UI를 여러 번 만들어봤습니다.
이번 과제에서는 정해진 화면을 그대로 따라 만들지 않습니다!
제공된 실습 파일을 바탕으로, 이번 주에 배운 내용을 활용해 여러분이 원하는 반복 UI를 자유롭게 만들어보세요.
완벽하거나 예쁜 결과물을 만드는 것보다, 화면을 어떻게 나눌지 고민하고 직접 코드로 표현해보는 것에 집중해주세요!
다시보기
과제
목표
1. WIL(Weekly I Learned) 작성하기
이번 주에 배운 내용을 wil.md에 자유롭게 기록해주세요.
강의에서 새롭게 알게 된 내용, 기억에 남았던 내용, 직접 해보면서 알게 된 점 등을 자유롭게 작성하면 됩니다.
WIL은 공백 포함 300자 이상 작성해주세요. (300자 이하는 제출 불가입니다)
작성 형식은 자유지만, AI 활용보다는 직접 작성하는 것을 권장드립니다!
잘 정리된 글보다는, 이번 주에 직접 배우고 느낀 점을 여러분의 언어로 남겨주세요!
작성한 WIL은 추후 우수 스터디원 선정 시 참고할 예정입니다.
이번 기회에 Markdown 문법도 다양하게 활용해보세요!
2. 나만의 반복 UI 만들어보기
첨부된 3주차 실습 파일을 활용해 원하는 UI를 자유롭게 만들어주세요!
이번 과제에는 정해진 완성 화면이 없습니다.
게시글, 프로필 카드, 메뉴, 상품 목록, 플레이리스트 등
비슷한 모양이 여러 번 반복되는 화면이라면 무엇이든 좋습니다.
수업에서 배운 내용을 활용해 직접 화면의 구조와 데이터를 구성해보세요.
이번 과제에서는 아래 내용을 활용해주세요.
•
화면의 일부를 Component로 나누기
•
여러 개의 데이터를 Array에 담기
•
map()을 활용해 데이터를 화면에 반복해서 보여주기
예를 들어 여러 사람의 프로필을 보여주고 싶다면,
const members = [
{ id: 1, name: "짱구", role: "유치원생" },
{ id: 2, name: "철수", role: "유치원생" },
{ id: 3, name: "유리", role: "유치원생" },
];
JavaScript
복사
처럼 데이터를 만들 수도 있고, 하나의 Profile Component를 만들어 여러 데이터를 화면에 보여줄 수도 있습니다.
{members.map((member) => (
<Profile
key={member.id}
name={member.name}
role={member.role}
/>
))}
JavaScript
복사
무엇을 만들지는 자유입니다!
이번 과제에서는 결과물을 얼마나 화려하게 만들었는지보다, "어디까지를 하나의 Component로 나눌까?""반복되는 내용 중 어떤 것을 데이터로 만들까?""이 데이터를 어떻게 화면에 반복해서 보여줄까?"를 직접 고민해보는 것이 중요합니다.
(필수) Component · Array · map을 활용한 반복 UI를 1개 이상 만들면 과제 완료!
(선택) 조금 더 만들어보고 싶다면 Component를 더 나눠보거나, 데이터의 종류를 늘리거나, CSS를 수정하는 등 자유롭게 도전해보세요
제출해야 할 파일과 파일 경로
📂 week3
├── src
│ ├── ...
│ └── App.jsx
├── ...
└── wil.md
Plain Text
복사
실습 파일의 기존 폴더 및 파일 구조는 그대로 유지해주세요.
추가 명세
•
wil.md는 공백 포함 300자 이상 작성해주세요.
•
Component를 1개 이상 직접 만들어 사용해주세요.
•
반복해서 보여줄 데이터를 Array로 작성해주세요.
•
작성한 Array를 map()을 활용해 화면에 보여주세요.
•
UI의 주제와 디자인은 자유입니다.
마감 기한
11/1(일) 23:59 까지
제출 방법
자신의 레포지토리에 week3 폴더를 생성해 wil.md 파일을 제출합니다.
더 자세한 사항은 아래 링크를 참조해주세요.
