2022.06.03

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/

PropTypes in React: A complete guide - LogRocket Blog

https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95

[React] PropTypes 쓰는 이유, 방법

그래서 나도 이런식으로 설정했다. 

 

 

4. npm과 yarn의 차이

 

팀원 중에 한 분이 npm과 yarn을 혼용해서 사용해도 되냐고 여쭤보셨다. 

나도 대략 감으로는 통일하는게 좋겠다고 생각했는데 구체적으로 팀원에게 설명하기 어려워 검색을 해보았다. 

 

https://norwayy.tistory.com/390

yarn과 npm을 혼용하면 안되는 이유