테이블간의 부모 자식관계

React로 NodeBird SNS 만들기

작성

155

https://www.inflearn.com/questions/33032

이어서 질문 드립니다..

"개발자그룹"을 클릭하면 그그룹의 id에 업로드한 게시물을 로드되게 하고 싶은데요~

게시물 올리기와 로드하기 기능이 둘다 안되고 별다른 에러메세지 없이 업로드하는 폼만 나옵니다.

1. 댓글처럼 테이블간의 부모 자식관계가 있으면 불변성을 확보해 주어야 하나요?

2.별부분의 로직이 "부모가 되는 Gpost 테이블의 id가 있는 테이블 Post중 title 이 일치하는 게시물을 찾아라" 가 맞나요?

☆☆☆

<post.js/routes>

// 게시물 올리기 route : http://localhost:3060/post/100/개발자
router.post('/:id/:title', isLoggedIn, upload.none(), async (req, res, next) => { // POST /api/post : 게시글올리기라우터
  try {
    const gpost = await db.Gpost.findOne({ // 부모가되는 그룹포스트가있는지
      where: { id: req.params.id },
      include: [{
        model: db.Post,
        as: 'Posts',
        attributes: ['id'],
        where: { title : decodeURIComponent(req.params.title) }, //☆☆☆
      }],
    }); 
    if (!gpost) {
      return res.status(404).send('포스트가 존재하지 않습니다.');
    }
    
    const newPost = await db.Post.create({
      content: req.body.content, 
      UserId: req.user.id,
      GpostId: gpost.id, // 어떤 그룹에 속해있는지
    });
    await gpost.addPost(newPost.id);

    if (req.body.image) { // 이미지 주소를 여러개 올리면 image: [주소1, 주소2]
      if (Array.isArray(req.body.image)) {
        const images = await Promise.all(req.body.image.map((image) => {
          return db.Image.create({ src: image });
        }));
        await newPost.addImages(images);
      } else { // 이미지를 하나만 올리면 image: 주소1
        const image = await db.Image.create({ src: req.body.image });
        await newPost.addImage(image);
      }
    }
    const fullPost = await db.Post.findOne({
      where: { id: newPost.id },
      include: [{
        model: db.User,
        attributes: ['id', 'nickname'],
      },{
        model: db.Image,
      },{
        model:db.User,
        as:"Likers",
        attributes:['id'],
      }],
    });
    res.json(fullPost);
  } catch (e) {
    console.error(e);
    next(e);
  }
});

<post.js/routes>

// 게시물'들' 불러오기
router.get('/:id/:title', async (req, res, next) => { // GET /api/posts
  try {
    const gpost = await db.Gpost.findOne({ 
      where: { id: req.params.id },
      include: [{
        model: db.Post,
        as: 'Posts',
        attributes: ['id'],
        where: { title : decodeURIComponent(req.params.title) },
      }], 
    });
    if (!gpost) {
      return res.status(404).send('포스트가 존재하지 않습니다.');
    }
    const posts = await db.Post.findAll({
      where: {
        GpostId: req.params.id,
      },
      order: [['createdAt', 'ASC']],
      include: [{
        model: db.User,
        attributes: ['id', 'nickname'],
      },{
        model: db.Image,
      },{
        model: db.User,
        through: 'Like',
        as:'Likers',
        attributes:['id'],
      }],
      order: [['createdAt', 'DESC']],
    });
    res.json(posts);
  } catch (e) {
    console.error(e);
    next(e);
  }
});

react javascript

답변 3

제로초(조현영)

지식공유자

where: { GpostId: req.params.id }

이 부분만 추가적으로 있으면 되지 않나요? 실제 DB에서 워크벤치로 열어봐서 GpostId가 제대로 등록되어있나도 확인해보세요.

지니

질문자

1번 질문은 강의속 코드가 거의 같은 상태에서

그룹에 속해있는 게시물로 수정 해주게 되면, 게시물의 불변성을 해줘야 하는지 궁금해서 질문드렸었던거구요~!

백엔드서버코드를 저렇게 수정해주니 게시물이 업로드와 불러오기 둘다 안되서 추가해줘야할 사항이 있는지 궁금합니다ㅜㅜ

에러코드는 네트워크탭과 콘솔에서 뜨지 않아요..

리덕스 데브툴즈에서 Failure 뜨고 데브툴즈 속 Action의 data 부분에는 빈객체 { } 가 뜨면서 아무것도 담겨있지 않습니다.

// 게시물'들' 불러오기
router.get('/:id/:title', async (req, res, next) => { // GET /api/posts
  try {
    // const gpost = await db.Gpost.findOne({ 
    //   where: { id: req.params.id },
    //   include: [{
    //     model: db.Post,
    //     as: 'Posts',
    //     attributes: ['id'],
    //     where: { title : decodeURIComponent(req.params.title) },
    //   }], 
    // }); // 그룹이있는지
    // if (!gpost) {
    //   return res.status(404).send('포스트가 존재하지 않습니다.');
    // }
    const posts = await db.Post.findAll({
      // where: {
      //   GpostId: req.params.id,
      // },
      // order: [['createdAt', 'ASC']],
      include: [{
        model: db.User,
        attributes: ['id', 'nickname'],
      },{
        model: db.Image,
      },{
        model: db.User,
        through: 'Like',
        as:'Likers',
        attributes:['id'],
      }],
      order: [['createdAt', 'DESC']], // DESC는 내림차순, ASC는 오름차순
    });
    res.json(posts);
  } catch (e) {
    console.error(e);
    next(e);
  }
});

"(그룹의 id를 통해) 해당그룹에 속한 게시물들만 찾아서 불러와라" 라고 하고싶어서

저부분을 추가해준것인데,,, 다시 주석을 해주면 불러와지긴합니다만, 모든그룹에서 같은 게시물들이 모두 불러와 집니다.

추가해줘야할 사항, 수정해줘야할 부분이 있는지 알려주세요 제로초님.....!

백엔드 부분 ch5, ch6 반복적으로 복습해줘도 생각해준대로 코드짜려니 잘안되네요ㅠ

유투브 리액트 게임 무료강좌도 다보고 왔는데도 아직 어려운 부분이 많아요~~..

제로초(조현영)

지식공유자

1. 불변성이라는 게 부모자식관계와 어떤 관련이 있는지 모르겠습니다. 불변성은 react에서 데이터가 변경되었음을 감지하기 위해 사용하는 것입니다.

2. where 조건은 합쳐서 생각하시면 됩니다. GPost의 아이디가 req.params.id면서 거기에 연결된 post의 title은 그것인 GPost를 가져오는 것입니다.(post들도 같이 넣어서요)

인프런 커뮤니티 질문&답변

테이블간의 부모 자식관계