19.12.24 모델 테이블간의 관계

파일 구조
backend
routes/user.js

frontend
components/UserProfile.js

routes/user.js

...
router.post('/login', (req, res, next) => { // POST /api/user/login
  passport.authenticate('local', (err, user, info) => {
    if (err) {
      console.error(err);
      return next(err);
    }
    if (info) {
      return res.status(401).send(info.reason);
    }
    return req.login(user, async (loginErr) => {
      try {
        if (loginErr) {
          return next(loginErr);
        }
        // req.user를 불러오는데
        // 그 유저와 연관된 post, 팔로워, 팔로윙도 같이 불러오는
        // 정보에 포함시킨다
        const fullUser = await db.User.findOne({
          where: { id: user.id },
          include: [{
            model: db.Post,
            as: 'Posts',
            attributes: ['id'],
          }, {
            model: db.User,
            as: 'Followings',
            attributes: ['id'],
          }, {
            model: db.User,
            as: 'Followers',
             // req.user가 팔로워한 유저를 불러오는데
             // 팔로워 유저의 비밀번호까지 불러오면 보안이슈가 나니
             // id만 불러오는 것으로 설정
            attributes: ['id'],
          }],
          attributes: ['id', 'nickname', 'userId'],
        });
        console.log(fullUser);
        return res.json(fullUser);
      } catch (e) {
        next(e);
      }
    });
  })(req, res, next);
});

components/UserProfile.js

...
        <Card
        actions={[
            <div key="twit">짹짹<br />{me.Posts.length}</div>,
            <div key="following">팔로윙<br />{me.Followings.length}</div>,
            <div key="follower">팔로워<br />{me.Followers.length}</div>,
        ]}
        >
            <Card.Meta
                avatar={<Avatar>{me.nickname[0]}</Avatar>}
                title={me.nickname}
            />
            <Button onClick={onLogout}>로그아웃</Button>
        </Card>
...