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

김건희

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

제로초님 질문있습니다

작성

191

질문1.

postForm.js에서

const onSubmit = useCallback(() => {

    if (!text || !text.trim()) {
      return alert('게시글을 작성하세요.');
   }

trim은 공백을 없애는 문법이잖아요? 그런데 !text.trim은 무엇을 의미하는지 궁금합니다.

질문2. postForm.js에서 onSubmit버튼을 눌러 디스패치가 실행되면 밑의 코드 리듀서가 실행되잖아요?

return dispatch({
      type: ADD_POST_REQUEST,
      data: formData,
   });

그런데

 case ADD_POST_REQUEST:
      draft.addPostLoading = true;
      draft.addPostDone = false;
      draft.addPostError = null;
      break;

이게먼저 실행되는지

export const addPost = (data) => ({
  type: ADD_POST_REQUEST,
  data,
});

이게 먼저 실행되는지 궁금합니다.

질문3.

팔로잉 버튼을 눌렀을 때 route폴더의 user.js의

router.patch('/:userId/follow', isLoggedIn, async (req, res, next) => { // PATCH /user/1/follow
  try {
    const user = await User.findOne({ where: { id: req.params.userId }});
    if (!user) {
      res.status(403).send('없는 사람을 팔로우하려고 하시네요?');
    }
    await user.addFollowers(req.user.id);
    res.status(200).json({ UserId: parseInt(req.params.userId, 10) });
  } catch (error) {
    console.error(error);
    next(error);
  }
});

가 실행되잖아요?

그다음 await user.addFollowers(req.user.id);로 인해

[

{

"FollowingId": 8,

"FollowerId": 7,

"createdAt": "2020-12-25T07:10:19.621Z",

"updatedAt": "2020-12-25T07:10:19.621Z"

}

]

follow모델에 이러한 관계가 설정되는데 궁금한게 await user.addFollowers(req.user.id);에서 (req.user.id) 때문에 FollowerId가 설정되는건 이해가 가는데 FollowingId는 어떻게 저절로 팔로잉 된 아이디를 넣어주는 것이죠?

질문4. 닉네임 수정을 눌렀을때 router폴더의 user.js에서

router.patch('/nickname', isLoggedIn, async (req, res, next) => {
  try {
    await User.update({
      nickname: req.body.nickname,
    }, {
      where: { id: req.user.id },
    });
    res.status(200).json({ nickname: req.body.nickname });
  } catch (error) {
    console.error(error);
    next(error);
  }
});

위의 코드가 실행되잖아요? 그런데 사가로부터 얻은 정보는

function changeNicknameAPI(data) {
  return axios.patch('/user/nickname', { nickname: data });
}

nickname일 뿐인데 where : {id:req.user.id}로 찾을 수 있는 것은

passport폴더의 index.js의

passport.deserializeUser(async (id, done) => {
    try {
      const user = await User.findOne({ where: { id }});
      done(null, user); // req.user
    } catch (error) {
      console.error(error);
      done(error);
    }
 });

이 코드로 인해 찾을 수 있는 것인가요?

redux nodejs react express Next.js

답변 7

제로초(조현영)

지식공유자

아뇨 안 찍히죠. 지금처럼 dispatch를 하면 리듀서와 사가가 실행되지 addPost가 실행되지 않습니다. dispatch(addPost(data))를 해야 addPost가 실행되니 찍히겠죠.

김건희

질문자

네 저장했습니다 제가 하려던것은 postForm.js의 onSubmit버튼을 누르면

return dispatch({
      type: ADD_POST_REQUEST,
      data: formData,
   });

가 실행되고

reduser폴더의 post.js의

export const addPost = (data) => ({
  type: ADD_POST_REQUEST,
  data,
});

와

case ADD_POST_REQUEST:
      draft.addPostLoading = true;
      draft.addPostDone = false;
      draft.addPostError = null;
      break;

두개가 실행되잖아요? 이때 어떤것이 먼저 실행되는지 확인하기 위해서

export const addPost = (data) => {
  console.log("111111");

  return {
    type: ADD_POST_REQUEST,
    data,
  }
};

 case ADD_POST_REQUEST:
      console.log("22222");
      draft.addPostLoading = true;
      draft.addPostDone = false;
      draft.addPostError = null;
      break;

이렇게 콘솔을 찍어보았습니다.

addpost함수는 제로초님이 바꾸라는대로 바꾸었구요 그런데 콘솔이 2222만 찍히고 addpost함수의 111111은 찍히지 않습니다..

원래 addpost함수의 111111도 찍혀야 정상인것이죠??

제가 addpost함수에 콘솔찍는걸 잘못찍은건 아닌가요??

제로초(조현영)

지식공유자

addPost 함수가 실행되는데 어떻게 콘솔이 안 찍힐수가 있죠...? 저장은 하셨나요?

김건희

질문자

제로초님 여러가지 시도중 잘 안되어서 다시 질문드립니다 죄송합니다 ㅜㅜ

export const addPost = (data) => 
{
  console.log("1111111");
  return { 
  type: ADD_POST_REQUEST,
  data,
  }
};

이렇게 하는게 맞나요?... 이렇게해도 콘솔이 안찍히더라구요.. addpost함수는 실행됩니다

제가 뭘 잘못한걸까요...ㅜ

제로초(조현영)

지식공유자

화살표함수를 return 있게 만들어서 그 위에 콘솔로그를 찍으세요.

김건희

질문자

제로초님

말씀하신 대로 addpost 함수가 실행될 때 콘솔로 찍으려 하니까 이러한 오류가 뜨는데 저런 경우 어떻게 콘솔로그를 찍어야하나요?...

제로초(조현영)

지식공유자

1. !text.trim()은 ' '같은 띄어쓰기만 있는 문자가 아닌지 걸러냅니다.

2. 두 개에 콘솔로그 넣어서 누가 더 먼저 실행되는지 보시면 됩니다.

3. user는 윗줄에서 findOne으로 찾은 사람입니다. 거기의 id가 FollowingId가 됩니다.

4. 네 deserializeUser가 라우터 전에 실행되어 req.user를 넣어줍니다.

김건희

작성한 질문수

전체 Q&A

질문하기