HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📎
운영진을 위한 문서 모음
/
🤧
주차별 액션 안내
/
🌮
14~18주차
/
✈️
기동팀 16주차 과제 리뷰
✈️

기동팀 16주차 과제 리뷰

상태
리뷰 완료
코드리뷰 기간(멘토)
Nov 26, 2021
과제 수행기간(멘토)
Nov 26, 2021
배정
속성

🏃🏼‍♂️ [11/20 ~ 11/26] 리액트 과제 리뷰

1️⃣ 과제 내용 및 레포

과제 내용
이 과제는 실제 프론트엔드 신입 채용 과제임으로 각별히 외부 유출에 주의해 주시기 바라며, 특히 블로그 포스팅에 유의해 주시기 바랍니다.

💡 과제 안내

  • 과제 기간: 11월 12일(금) ~ 11월 19일(금) 오후 23시 59분
  • 리뷰 기간: 11월 20일(일) ~ 11월 26일(금)
  • 내용: 포맷팅 가능한 input 컴포넌트 작성하기와 확정 가능한 DataTable 컴포넌트 구현 둘 중 하나를 선택해서 과제를 완성해 주세요. 예시로든 라이브러리 코드는 가급적 참고하지 않고 구현하는 것을 추천합니다.
  • 2가지 과제 중 택 1 진행, 시간이 된다면 2가지 다 구현해보셔도 됩니다.

포맷팅 가능한 input 컴포넌트 작성하기

자신이 가장 잘 쓸 수 있는 웹 프레임워크, 라이브러리를 통해 포멧팅 가능한 input 컴포넌트를 구현합니다. 휴대폰 번호, 날짜, 시간, 숫자 등을 포함해 최대한 많은 기능을 사용할 수 있도록 작성해 보세요.
ex) 날짜의 경우 20191225라고 입력하면 2019-12-25으로 입력과 동시에 포맷팅 ex) 숫자의 경우 123456789라고 입력하면 123,456,789으로 입력과 동시에 포맷팅
라이브러리 예
  • https://nosir.github.io/cleave.js
  • https://github.com/s-yadav/react-number-format

확장 가능한 DataTable 컴포넌트 구현

자신이 가장 잘 쓸 수 있는 웹 프레임워크, 라이브러리를 통해 rowspan, colspan, floating header, sort, search, group, selectable, expandable, custom styling 등 확장 가능한 테이블 컴포넌트를 설계, 구현해 보세요. 최대한 많은 기능이 있을 수록 좋습니다.
라이브러리 예
  • https://vuetifyjs.com/en/components/data-tables/
  • https://jbetancur.github.io/react-data-table-component/
레포 주소:

2️⃣  출제자가 전하는 리뷰 포인트

컴포넌트를 역할에 맞게 잘 나누었는가?
컴포넌트를 응집도있게 만들었는가?
요구사항을 만족했는가?
예외처리를 잘 만들었는가?
적절한 Hook을 사용했는가?
최적화를 했는가?
네이밍이 적절한가?
확장성을 고려했는가?