[FE] React-NodeBird 에서 발생한 문제(3)

1. Prop-Types에서 문법 오류가 있었다

Invariant Violation: Calling PropTypes validators
directly is not supported by the `prop-types` package. 
Use `PropTypes.checkPropTypes()` to call them. Read more 
at http://fb.me/use-check-prop-types

• 원인 : arrayOf 를 array로 사용하였다
• 해결방법 : 다음과 같이 수정
  

2. 다시 발생한 오류 원인 : prop-types의 첫글자를 대문자로 사용하였다

Warning: Component PostImages declared `PropTypes` 
instead of `propTypes`. Did you misspell the property assignment?
    in PostCard (at pages/index.js:19)
    in div
    in Col (at AppLayout.js:43)
    in div
    in Context.Provider

• 해결방법 : propTypes의 첫글자를 소문자로 변경

PostCard.propTypes = {
    post: propTypes.shape({
        id: propTypes.number,
        user: propTypes.object,
        content: propTypes.string,
        createdAt: propTypes.object,
        Comments: propTypes.arrayOf(propTypes.object),
        Images: propTypes.arrayOf(propTypes.object),
    }).isRequired,
};

출처: https://stackoverflow.com/questions/67112114/error-component-componentname-declared-proptypes-instead-of-proptypes-d

3. 객체 참조 오류, 정의되지 않은 컴포넌트 사용

• 원인 : import 하지 않은 컴포넌트를 JSX문법 안에서 사용, post.User로 객체 내부 값을 불러와야 하는데 post.user(소문자 사용)으로 잘못 입력해서 post.user=undefined가 되었다

• 해결방법 : 제작 전까지 주석처리하였고 User를 대문자로 시작하도록 수정

ReferenceError: Image is not defined
    at PostCard (webpack-internal:///./components/PostCard.js:125:12)

TypeError: Cannot read properties of undefined (reading 'nickname')
    at PostCard (webpack-internal:///./components/PostCard.js:133:18)

4. Uncaught TypeError: Cannot read properties of undefined (reading '0')
   

원인 : dispatch로 데이터를 담아줄 때 배열 안에 객체만 담았어야 했는데 배열로 감싼 객체를 넣어서 selector가 값을 찾지 못했다

해결방법 : reducer에서 dispatch로 들어오는 데이터([{여기:1234}])에서 배열안에 있는 객체값만 들어가도록 수정

• 이전 코드

const reducer = (state = initialState, action) => {
			 // 이 부분이 에러 발생의 원인
    mainPosts: [dummyPost.mainPosts, ...state.mainPosts],
              
                  //...이하생략

• 수정된 부분
  : dummyPost.mainPosts를 ...dummyPost.mainPosts로 수정

// 수정 후
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_POST:
            return {
                ...state,
              mainPosts: [...dummyPost.mainPosts, ...state.mainPosts],
              postAdded: true,
            };
        default:
            return state;
    }
};

export default reducer;

5. Element type is invalid
   

• 원인 : 16번째 줄에 <Input.TextArea /> 라고 써야 하는데 Input.Textarea(소문자 a)를 사용해서 해당 Element를 찾지 못했다
  
  

• 해결방법 : 대문자로 수정
  <Input.TextArea />