Uncaught TypeError: Cannot read property '0' of undefined 에러가 발생합니다. 해결방법이 있을까요?

강좌 동영상에 같은 에러를 해결하시는 부분이 나오는데 

app.js 에  '/posts'  동일한 라우터가 존재해서 삭제후 해결하시는 부분이

나오는데 ..  다른문제로 보입니다. routes/posts.js  파일  include  Image 를 넣어주어도 해도 해결이 안되네요..

FRONT

pages/index.js

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import PostForm from '../components/PostForm';
import PostCard from '../components/PostCard';
import AppLayout from '../components/AppLayout';
import { LOAD_POSTS_REQUEST } from '../reducers/post';
import { LOAD_USER_REQUEST } from '../reducers/user';


const Home = () => {
    const dispatch = useDispatch();
    const { me } = useSelector((state) => state.user);
    const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post);

    useEffect(() => {
      dispatch({
        type: LOAD_USER_REQUEST,
      })
      dispatch({
          type: LOAD_POSTS_REQUEST,
      });
    }, []);

    useEffect(() => {
        function onScroll() {
          if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {

            if (hasMorePosts && !loadPostsLoading) {
              dispatch({
                type: LOAD_POSTS_REQUEST,

              });
            }
          }
        }
        window.addEventListener('scroll', onScroll);
        return () => {
          window.removeEventListener('scroll', onScroll);
        };
      }, [ hasMorePosts, loadPostsLoading, mainPosts]);

    return (
        <AppLayout>
            {me && <PostForm />}
            {mainPosts.map((post) => <PostCard key={post.id} post={post} />)}
        </AppLayout>
    );
};

export default Home;


sagas/post.js


import { all, fork, put, takeLatest, delay, throttle, call } from 'redux-saga/effects';
import axios from 'axios';

import { 
    LOAD_POSTS_REQUEST,
    LOAD_POSTS_SUCCESS,
    LOAD_POSTS_FAILURE,

    ADD_POST_REQUEST, 
    ADD_POST_SUCCESS, 
    ADD_POST_FAILURE,

    ADD_COMMENT_REQUEST, 
    ADD_COMMENT_SUCCESS, 
    ADD_COMMENT_FAILURE,
    
    REMOVE_POST_REQUEST,
    REMOVE_POST_SUCCESS,
    REMOVE_POST_FAILURE,
    
} from '../reducers/post';

import { 
    ADD_POST_TO_ME, 
    REMOVE_POST_OF_ME,
} from '../reducers/user';


function addCommentAPI(data) {
    return axios.post(`/post/${data.postId}/comment`, data);    // POST /post/1/comment
};

function* addComment(action) {
    try {
        const result = yield call(addCommentAPI, action.data);

        yield put({
            type: ADD_COMMENT_SUCCESS,
            data: result.data,
        });
    } catch (err) {
        yield put({         // put => dispatch 다.
            type: ADD_COMMENT_FAILURE,
            data: err.response.data,
        });
    };
};


function loadPostsAPI(data) {
    return axios.get('/posts', data);
};

function* loadPosts(action) {
    try {
        const result = yield call(loadPostsAPI, action.data);

        yield put({
            type: LOAD_POSTS_SUCCESS,
            data: result.data,

        });
    } catch (err) {
        console.error(err);
        yield put({         // put => dispatch 다.
            type: LOAD_POSTS_FAILURE,
            data: err.response.data,
        });
    }
}


function addPostAPI(data) {
    return axios.post('/post', { content: data });
};

function* addPost(action) {
    try {
        const result = yield call(addPostAPI, action.data);

        yield put({
            type: ADD_POST_SUCCESS,
            // data: action.data,
            data: result.data
        });
        yield put({
            type: ADD_POST_TO_ME,
            data: result.data.id,
        });
    } catch (err) {
        console.error(err);
        yield put({        
            type: ADD_POST_FAILURE,
            data: err.response.data,
        });
    };
};


function removePostAPI(data) {
    return axios.delete(`/api/post/${data.postId}/comment`, data);
};

function* removePost(action) {
    try {

        // const result = yield call(removePostAPI);
        yield delay(1000);
        yield put({
            type: REMOVE_POST_SUCCESS,
            data: action.data,
        });
        console.log('removePost');
        yield put({
            type: REMOVE_POST_OF_ME,
            data: action.data,
        });
    } catch (err) {
        console.error(err);
        yield put({         
            type: REMOVE_POST_FAILURE,
            data: err.response.data,
        });
    };
};


function* watchLoadPosts() {

    yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts);  
};

function* watchAddPost() {
    yield takeLatest(ADD_POST_REQUEST, addPost);  
};

function* watchAddComment() {
    yield takeLatest(ADD_COMMENT_REQUEST, addComment);   
};

function* watchRemovePost() {
    yield takeLatest(REMOVE_POST_REQUEST, removePost);   
};

export default function* postSaga() {
    yield all([             
        fork(watchAddPost),
        fork(watchLoadPosts),
        fork(watchRemovePost),
        fork(watchAddComment),
    ]);
};



BACK

routes/posts.js

const express = require('express');
const { Post, User, Image, Comment } = require('../models/');

const router = express.Router();

router.get('/', async (req, res, next) => {      // GET /posts
    try {
        const posts = await Post.findAll({
        limit: 10,
        order: [['createdAt', 'DESC']],
        inculude: [{
            model: User,
            attributes: ['id','nickname'],
        }, {
            model: Image,
        }, {
            model: Comment,
            include: [{
                model: User,
                attributes: ['id','nickname'],
            }],
        }],
    });
        res.status(200).json(posts);
    } catch (error) {
        console.log(error);
        next(error);
    }
});

module.exports = router;

로그인 창도 안뜨고 에러가 떳었는데.

include 를 모두 해주니  정상적으로 로그인도 되고 게시글도 등록됩니다.

하지만 등록후 바로 다시 위와 똑같은 에러가 동일하게 뜹니다.

PostCard 에 key 관련 에러로 추측됩니다.

BACK

routes/posts.js