강의

멘토링

커뮤니티

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

지니님의 프로필 이미지
지니

작성한 질문수

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

CORS 문제 해결하기

post 요청이 가지 않습니다.

작성

·

346

0

코드를 아래와 같이 제대로 작성하였고, 백엔드 서버도 잘 돌아가는거 확인했습니다. 그런데 서브밋 버튼을 누르고 데브툴 네트워크 탭을 보면 post 리퀘스트가 전혀 뜨지 않습니다. 의심되는 이유는 에러메세지

'4. WrappedApp created new store with withRedux(App) {initialState: undefined, initialStateFromGSPorGSSR: undefined}'

가 뜨는데, 리덕스의 이니셜 스테이트가 undefined이라니 왜 이렇게 된걸까요? 리듀서에 스테이트들 다 잘 적혀있는데 혹시 이 에러 때문에 디스패치 자체가 안되고 있는 걸까요? 리듀서 문제라기엔 백엔드 서버 없이 더미데이터로 돌리면 잘 됐었기 때문에 왜인지 도통 모르겠습니다.

<회원가입 관련 리듀서>

import produce from "../util/produce";

export const initialState = {
  signUpLoading: false,
  signUpDone: false,
  signUpError: null,
  me: null,
  signUpData: {},
  loginData: {},
  userList: {},
};

export const SIGN_UP_REQUEST = "SIGN_UP_REQUEST";
export const SIGN_UP_SUCCESS = "SIGN_UP_SUCCESS";
export const SIGN_UP_FAILURE = "SIGN_UP_FAILURE";

const dummyUser = (data) => ({
  id: data.id,
  nickname: "Jin Choi",
  Posts: [{ id: 1 }],
  Followings: [
    { nickname: "Elle" },
    { nickname: "Mazzie" },
    { nickname: "Lori" },
  ],
  Followers: [
    { nickname: "Coco" },
    { nickname: "Mephis" },
    { nickname: "WillB" },
  ],
  password: data.password,
});

const reducer = (state = initialState, action) =>
  produce(state, (draft) => {
    switch (action.type) {
      case SIGN_UP_REQUEST:
        draft.signUpLoading = true;
        draft.signUpError = null;
        draft.signUpDone = false;
        break;
      case SIGN_UP_SUCCESS:
        draft.signUpLoading = false;
        draft.signUpDone = true;
        break;
      case SIGN_UP_FAILURE:
        draft.signUpLoading = false;
        draft.signUpError = action.error;
        break;
      default:
        break;
    }
  });

export default reducer;

<회원가입 관련 사가>

import { all, delay, fork, put, takeLatest, call } from "redux-saga/effects";
import axios from "axios";
import {
  SIGN_UP_FAILURE,
  SIGN_UP_REQUEST,
  SIGN_UP_SUCCESS,
} from "../reducers/user";

function signUpAPI(data) {
  return axios.post("https://localhost:3065/user", data);
  //only post, put, patch can pass data
}

function* signUp(action) {
  try {
    const result = yield call(signUpAPI, action.data);
    console.log(result);
    yield put({
      type: SIGN_UP_SUCCESS,
      data: action.data,
    });
  } catch (err) {
    console.error(err);
    yield put({
      type: SIGN_UP_FAILURE,
      error: err.response.data,
    });
  }
}

function* watchSignUp() {
  yield takeLatest(SIGN_UP_REQUEST, signUp);
}

export default function* userSaga() {
  yield all([
    fork(watchSignUp),
  ]);
}

<백엔드 라우트>

const express = require("express");
const router = express.Router();
const bcrypt = require("bcrypt");
const { User } = require("../models");
router.post("/", async (req, res, next) => {
  try {
    //email existence check
    const exUser = await User.findOne({
      where: {
        email: req.body.email,
      },
    });
    if (exUser) {
      return res.status(403).send("The email is in use");
    }
    const hashedPassword = await bcrypt.hash(req.body.password, 10);
    await User.create({
      //inserting data to table asynchronously
      email: req.body.email,
      nickname: req.body.nickname,
      password: hashedPassword,
    });
    res.status(200).send("ok");
  } catch (error) {
    console.error(error);
    next(error);
  }
});

module.exports = router;

조언부탁드립니다. 감사합니다.

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

회원가입 dispatch 하는 쪽도 보여주시면 좋을 것 같고요.

watchSignUp, SignUp, SignUpApi 제일 윗줄에 콘솔로그 넣어서 어떤 부분부터 실행이 안 되는지 봐야할 것 같습니다.

지니님의 프로필 이미지
지니
질문자

말씀하신대로 라인마다 콘솔로그 찍어보니 사가는 제대로 연결된 것을 확인했고, 디스패치가 안되고 있었습니다. Antd의 Form에 onFinish로 넣은 서브밋 액션이 반응을 아예 안하는 것 같아서 리서치해보니 Form.item 쓸때 validation이 민감한 것 같네요. 일단 선생님 코드대로 div로 바꿔주니 정상 작동하게 되었습니다. 빠른 답변 감사합니다. :)

지니님의 프로필 이미지
지니

작성한 질문수

질문하기