인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

Din p님의 프로필 이미지
Din p

작성한 질문수

실전 리액트 프로그래밍

서버 API 호출하기

http://localhost:3001/user/search?keyword=u 이걸로 데이터를 보는데 저는 사이트에 연결할 수 없다고 나오네요

작성

·

529

0

이유를 알수 있을가요?

reactredux

답변 1

1

이재승님의 프로필 이미지
이재승
지식공유자

안녕하세요
혹시서버 실행을 하셨을까요?
참고로 서버 실행은 server 폴더에서 npm install 후에 npm start 입력하시면 됩니다

Din p님의 프로필 이미지
Din p
질문자

서버실행은 잘되었는데 전부 입력했는데도 autoComplete가 작동을 안함니다 keyword는 바뀌는데 autoComplete는 계속 비어있어요 파일을 올리려면 어떻게 해야하나요?

이재승님의 프로필 이미지
이재승
지식공유자

제가 봐드릴 수는 있지만 사실 이런 상황이 디버깅 스킬을 향상시킬 수 있는 기회이기도 합니다
아래 순서로 한 번 확인해보시길 추천드려요

1. 서버가 제대로 떠있는지 확인
  - 브라우저 주소창에 위에 입력하신 url을 입력해서 데이터가 잘 보이는지 확인
  - 만약 브라우저에서도 보이지 않는다면 서버에 문제가 있는겁니다
2. 1번이 제대로 동작한다면 클라쪽 문제입니다
  - 브라우저 콘솔창에 에러 메세지가 찍히는지 확인해보세요
  - 에러 메세지가 없다면 saga쪽에서 서버가 준 데이터를 console.log 를 이용해서 출력해보세요

디버깅을 해봐도 모르시겠다면 깃헙이나 구글 드라이브에 올리셔서 링크를 주시면 확인해보겠습니다

Din p님의 프로필 이미지
Din p
질문자

이렇네 나오는데 데이터가 안넘어 오는건가요? 

이재승님의 프로필 이미지
이재승
지식공유자

위 화면만 봐서는 서버의 문제인지 클라의 문제인지 알 수 없습니다
두 번째 탭에서는 3001번 포트로 요청하신 것 같은데, 화면에 뭐가 보이고 있나요?

Din p님의 프로필 이미지
Din p
질문자

두번째 탭에서는 영상처럼 데이터가 잘 나오고 있습니다 콘솔창에 에러메세지도 안나옵니다.

이재승님의 프로필 이미지
이재승
지식공유자

그럼 서버는 제대로 떠있네요
클라쪽 코드에 문제가 있는 것으로 보입니다
리덕스에 저장이 안된다고 하셨으니 saga쪽 코드를 확인해보셔야겠어요

잘 모르시겠다면 saga쪽 코드를 댓글로 남겨주세요

Din p님의 프로필 이미지
Din p
질문자

import { all, put, call, takeEvery } from "redux-saga/effects";
import { actions, Types } from "./index";
import { callApi } from "../../common/util/api";

function* fetchAutoComplete({ keyword }) {
  const { isSuccess, data } = yield call(callApi, {
    url: "/user/search",
    params: { keyword },
  });

  if (isSuccess && data) {
    yield put(actions.setValue("autoCompletes", data));
  }
}

export default function* () {
  yield all([takeEvery(Types.FetchAutoComplete, fetchAutoComplete)]);
}
saga 코드입니다 혼자 해결해보고 싶은데 안되네요
이재승님의 프로필 이미지
이재승
지식공유자

saga쪽 코드에는 문제가 없어보이네요
혹시 redux쪽 속성 이름이 autoCompletes 가 아니라 autoComplete 인가요? (끝에 s 없는 상태)
이전 댓글에서 autoComplete 라고 언급하셔서요

Din p님의 프로필 이미지
Din p
질문자

import {
  createReducer,
  createSetValueAction,
  setValueReducer,
} from "../../common/redux-helper";

 

export const Types = {
  SetValue: "search/SetValue",
  FetchAutoComplete: "search/FetchAutoComplete",
};

 

export const actions = {
  setValue: createSetValueAction(Types.SetValue),
  fetchAutoComplete: (keyword) => ({
    type: Types.FetchAutoComplete,
    keyword,
  }),
};

 

const INITIAL_STATE = {
  keyword: "",
  autoCompletes: [],
};

 

const reducer = createReducer(INITIAL_STATE, {
  [Types.SetValue]: setValueReducer,
});
export default reducer;
이렇게 되어있는데 맞나요?
이재승님의 프로필 이미지
이재승
지식공유자

잘 작성하신 것 같네요.
프로젝트 전체 코드를 봐야 원인 파악이 가능할 것 같습니다.
구글 드라이브(또는 깃헙) 등을 통해 코드 공개해주시면 확인 해볼게요
node_modules 폴더 제외하고 전체 압축하시면 됩니다

Din p님의 프로필 이미지
Din p
질문자

https://drive.google.com/file/d/1-BnJnDI2G6Hmo_KeUUXB-mzPh4izDpMq/view?usp=sharing

이재승님의 프로필 이미지
이재승
지식공유자

확인해보니 store.js 에 버그가 있었네요
아래처럼 searchSaga 를 호출해주시는 형태로 수정하시면 될 것 같습니다

function* rootSaga() {
  yield all([searchSaga()]);
}

 

Din p님의 프로필 이미지
Din p
질문자

아 오타가 있었군요 감사합니다 

Din p님의 프로필 이미지
Din p

작성한 질문수

전체 Q&A
질문하기