1. propTypes를 설정안해줘서 생긴 eslint 에러
하단과 같은 에러가 생겼다.
'scheduleData' is missing in props validation eslint (react/prop-types)
하단의 코드처럼 propTypes를 설정해주었더니 괜찮아졌다.
ScheduleListItem.propTypes = {
scheduleData: PropTypes.shape({
title: PropTypes.string.isRequired,
reservationTime: PropTypes.string.isRequired,
}),
};
2. 코드에서 변수 선언을 함수보다 밑에 두었을 때 생긴 에러
Uncaught ReferenceError: Cannot access 'ScheduleListItem' before initialization
at ./src/components/ScheduleListItem.jsx
하단 처럼 propTypes를 정의된 함수 컴포넌트보다 위에 코드를 작성해버리면 생겨버린다.
생각해보면 ScheduleListItem이라는 컴포넌트가 정의되어 있지도 않은데 먼저 해당 컴포넌트에 대한 propTypes를 상단에 써버리면
오류가 날 수 밖에 없을 것이다.
3. 객체의 propTypes 설정해주기
하단과 같은 형식으로 설정해주면 된다.
// 객체의 속성값 타입을 정의
// {color: 'green', weight: 82} -> 참
info: PropTypes.shape({
color: PropTypes.string,
weight: PropTypes.number
})
Component.propTypes = {
profileProp: PropTypes.shape({
id: PropTypes.number,
fullname: PropTypes.string,
gender: PropTypes.oneOf(['M', 'F']),
birthdate: PropTypes.instanceOf(Date),
isAuthor: PropTypes.bool
})
}
https://blog.logrocket.com/validating-react-component-props-with-prop-types-ef14b29963fc/
https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95
그래서 나도 이런식으로 설정했다.
4. npm과 yarn의 차이
팀원 중에 한 분이 npm과 yarn을 혼용해서 사용해도 되냐고 여쭤보셨다.
나도 대략 감으로는 통일하는게 좋겠다고 생각했는데 구체적으로 팀원에게 설명하기 어려워 검색을 해보았다.
https://norwayy.tistory.com/390
'👩🏻💻 팀 프로젝트 > HUHS 동아리방 예약 시스템' 카테고리의 다른 글
2022.06.19 (0) | 2022.06.20 |
---|---|
2022.06.05 (0) | 2022.06.05 |
2022.06.01 (0) | 2022.06.02 |
2022.05.31 (0) | 2022.05.31 |
2022.05.28 (0) | 2022.05.29 |