들어가기 앞서
안녕하세요! 프론트엔드 찍먹 스터디 멘토 박유빈입니다.
4주차 Interaction 간 보기 
수강하시느라 고생하셨습니다! 
수강하시느라 고생하셨습니다! 이번 주에는 React의 Event · State · useState · useEffect를 살펴보고, 사용자의 행동에 화면이 반응하는 과정을 알아봤습니다.
이번 과제에서는 코드를 필수로 구현하지 않아요! 대신 평소 사용하는 서비스를 직접 관찰하며, 화면의 반응이 사용자에게 어떤 도움을 주는지 조금 더 자세히 생각해봅니다.
예쁘거나 화려한 움직임을 찾기보다, 사용자가 자신의 행동과 결과를 이해하도록 돕는 Interaction에 집중해 주세요!
다시보기
과제
먼저 week4 폴더를 생성해주세요!
목표
1. WIL(Weekly I Learned) 작성하기 (필수
)
평소 사용하는 서비스에서 사용자의 행동에 반응하는 장면 하나를 찾아 관찰해 주세요.
좋아요 버튼, 로딩 화면, 전송 완료 알림, 오류 안내, 결제 완료 화면, 화면 전환 등 어떤 사례든 좋습니다.
관찰한 인터랙션과 그에 대한 생각을 wil.md에 아래 질문의 답을 공백 포함 300자 이상 작성해주세요. (300자 이하는 제출 불가입니다)
어떤 내용을 작성해야 할지 막막하다면 아래 질문을 참고해 보세요. 모든 질문에 답할 필요는 없습니다.
1.
어떤 서비스의 어떤 장면을 관찰했나요?
2.
사용자는 무엇을 하기 위해 행동했나요?
3.
행동하기 전과 후의 화면은 어떻게 달라졌나요?
4.
사용자는 그 반응을 통해 무엇을 알 수 있었나요?
5.
아무런 반응이 없다면 어떤 불편이 생길까요?
6.
반응이 너무 크거나 오래 이어진다면 사용자는 어떻게 느낄까요?
7.
직접 만든다면 어떤 반응을 유지하거나 바꾸고 싶나요? 그 이유는 무엇인가요?
단순히 “예뻤다”, “신기했다”라고 평가하기보다, 그 반응이 사용자의 목적을 어떻게 도왔는지 자신의 언어로 작성해 주세요.
가능하다면 관찰한 화면의 캡처나 GIF를 함께 첨부해도 좋습니다. 단, 개인정보가 보이지 않도록 주의해 주세요.
이번 과제는 직접 관찰하고 판단하는 과정이 중요하므로, AI가 작성한 내용을 그대로 제출하기보다 자신의 경험과 생각을 중심으로 작성해 주세요.
작성한 WIL은 추후 우수 스터디원 선정 시 참고할 예정입니다.
2. 지난주 게시글에 Interaction 더하기 (선택)
코드를 조금 더 경험해보고 싶다면 3주차에 만든 React 게시글을 이어서 수정해 보세요.
•
onClick으로 하트에 클릭 이벤트 연결하기
•
useState로 좋아요 상태 관리하기
•
하트를 누르면 모양과 좋아요 수가 바뀌게 만들기
•
다시 누르면 원래 상태로 돌아오게 만들기
•
여유가 있다면 useEffect를 활용해 무언가 해보기!
선택 과제는 완성하지 못하거나 제출하지 않아도 괜찮습니다. 저는 기능을 많이 만드는 것보다 사용자가 자신의 행동과 결과를 이해할 수 있도록 어떤 반응을 제공할지 고민하는 것이 더 중요하다고 생각해요!
제출해야 할 파일과 파일 경로
📂 week4
├── src
│ ├── ...
│ └── App.jsx
├── ...
└── wil.md
Plain Text
복사
마감 기한
11/8(일) 23:59까지
제출 방법
자신의 레포지토리에 week4 폴더를 생성해 wil.md 파일을 제출합니다.
더 자세한 사항은 아래 링크를 참조해주세요.
