안녕하세요 😻 23기 프론트엔드 운영진 원채영입니다.
이번 주에는 투두리스트를 넘어, 새로운 프로젝트인 Messenger 구현을 진행합니다.
이번 과제는 디자이너와 협업하여 진행되는 프로젝트로, 디자인 파트에서 리디자인한 메신저 화면을 직접 구현해보는 경험을 하게 됩니다.
또한, 이번 주부터는 TypeScript와 Tailwind CSS를 필수로 적용하여 개발을 진행합니다.
프로젝트 규모가 커질수록 컴포넌트의 props도 점점 복잡해지는데요, 이때 TypeScript를 활용하면 props의 구조와 타입을 명확하게 관리할 수 있고, 자동완성을 통해 개발 생산성을 높일 수 있습니다.
아울러, 이번 과제에서는 React Hooks에 더욱 익숙해지는 것을 목표로 합니다. 특히 useState, useEffect, useRef를 중심으로 활용해보며, React에서 자주 사용되는 핵심 개념을 확실히 익혀보시길 바랍니다.
그럼 이번 과제도 파이팅입니다!! 🎉
- TypeScript를 사용해봅시다.
- useState로 컴포넌트의 상태를 관리합니다.
- useEffect와 useRef의 사용법을 이해합니다.
- Tailwind CSS의 사용법에 익숙해집니다.
- 2026년 3월 28일 토요일 23:59까지
-
디자이너와 협업하며 전달받은 자료 (피그마 링크, 캡처본, 커뮤니케이션 과정 등)
-
JSX / JS / TSX / TS의 개념과 각각의 차이점, 사용 이유
-
TypeScript를 사용하는 이유
-
SSR과 CSR의 개념 및 차이점
- 피그마 Dev Mode를 통해 결과화면을 구현합니다.
- 디자인 시스템을 구축합니다.
- tailwind CSS를 사용합니다.
- 메세지를 보내면 채팅방 하단으로 스크롤을 이동시킵니다.
- 메세지에 유저 정보(프로필 사진, 이름)를 표시합니다.
- user와 message 데이터를 json 파일에 저장합니다.
- UI는 반응형을 제외하고 피그마파일을 따라서 진행합니다.
- 채팅방 상단의 프로필을 클릭하면 사용자를 변경할 수 있습니다.
- 더블 클릭 하면 감정표현을 추가합니다.
- 그 외 추가하고 싶은 기능이 있다면 마음껏 추가해 주세요!
이번 과제는 다음 과제까지 이어지는 만큼, 확장성을 충분히 고려해 주세요. 4주차 과제에서는 유저 및 기능 추가, Routing 구현이 진행될 예정입니다.
이를 대비해, zustand를 활용한 상태 관리도 미리 적용해보시는 것을 추천드립니다!