inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

실전 리액트 프로그래밍

서버 API 호출하기

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

656

Din p

작성한 질문수 2

0

이유를 알수 있을가요?

react redux

답변 1

1

이재승

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

0

Din p

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

1

이재승

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

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

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

0

Din p

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

0

이재승

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

0

Din p

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

1

이재승

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

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

0

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 코드입니다 혼자 해결해보고 싶은데 안되네요

0

이재승

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

0

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;
이렇게 되어있는데 맞나요?

0

이재승

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

0

Din p

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

1

이재승

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

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

 

0

Din p

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

자동완성기능이 안되네요 ..

0

499

3

화면에 에러가나네요 ...

0

515

2

setValue 함수 질문 있습니다.

0

840

1

찾아야한다 실습 문의

0

468

1

훅 기초 익히기 - 배치 처리와 순차적 처리의 차이

0

469

1

cra, next.js 관련 질문 드립니다!

0

604

1

useState 배열 비구조화 문법 질문!

0

252

1

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

1

1081

2

Saga 오류 이거 혹시 왜이런지 알수 있을까요?

0

369

2

match

1

494

1

버튼이 생성되지 않습니다 .

0

285

1

혹시 import 옆에 파일 사이즈 표시 어떻게 하나요?

0

262

1

saga 문제

0

248

1

에러가 발생하는데 이유가뭘까요..?

0

388

2

선생님과 똑같이 했는데 다 rendering 됩니다.

0

202

1

컴포넌트와 컨테이너의 기준

0

314

1

커스텀훅의 개념과 함수차이

1

1197

1

useEffect 실전 활용법(1) 강의에서 질문있습니다.

0

337

1

리덕스, 사가파일들의 관리

0

206

1

useImperativeHandle 질문 입니다.

0

279

1

컴파일 문의드립니다.

0

201

1

React.memo 관련 질문이 있습니다.

0

373

1

Context API vs Redux 사용 빈도

0

210

1

10분도 안들었는데 환불안됩니까?

0

275

1