[Pre-project] StackOverFlow clone 일지 8 : Redux-toolkit Thunk 작은 오류들

const thunkName = createAsyncThunk("슬라이스이름/액션이름", async 콜백)
const slice = createSlice({
	...
    extraReducers: (builder)=>{
      builder.addCase(thunkName.fulfilled, /*요청 끝나고 state 변경 방법 정의하는 콜백 함수*/)
      .addCase(/*생략*/)
      .addCase(/*생략*/)
      ...
})

createAsyncThunk의 async 콜백함수의 두번째 전달인자 오류

두번째 전달인자는 다른 형식으로 들어간다.
dispatch(addAnswer(url, answerBody));
{"requestId":"jImoglFGqcnwulvM6OSSC","signal":{}}

상황:
1. POST 요청을 보내기 위해 url path와 body를 전달인자로 넘겨주려고했었다.

dispatch(addAnswer(url, answerBody));

2.단순 문자열을 body에 담아서 보냈지만, console.log 로 확인하면 전달하지 않은 값이 전달된다.

export const addAnswer = createAsyncThunk(
  'postSlice/addAnswer',
  async (url, answerBody) => {
    console.log(url, answerBody); 
    // answerBody의 값 => {"requestId":"jImoglFGqcnwulvM6OSSC","signal":{}}
    const responseData = await axios.post(url, {
      body: JSON.stringify(answerBody),
      headers: { 'Content-Type': 'application/json' },
    });
    ...

해결방법 : 필요 데이터를 객체 Object로 가공하여 전달

// 화면 관련 컴포넌트 파일
const actionSample = {
      url: `/answers/${questionId}/add`,
      requestbody: answerBody, // store에서 꺼낸 값을 할당한 변수 answerBody 
    };

dispatch(addAnswer(actionSample)); //<----- 하나의 값으로 전달


// slice 파일
export const addAnswer = createAsyncThunk(
  'postSlice/addAnswer',
  async (actionSample) => {
    const responseData = await axios.post(actionSample.url, {
      body: JSON.stringify(actionSample.requestbody),
      // 추가로 여기 오류 발생할 예정
      // 참고로 단순 문자열은 JSON.stringify()하면 '"전달값"'으로 서버에 전달되므로 제거해야한다.
      headers: { 'Content-Type': 'application/json' },
    });
    try {
      return responseData.data.answer;
    } catch (error) {
      throw new Error('답변추가 에러');
    }
  }
);

슬라이스에서 store 값을 활용할 수 없다

Hook은 함수형 컴포넌트 내부에서만 사용할 수 있다.

Hook의 사용원칙 중 하나인 제약 조건에 의해 useSelector 를 사용할 수 없다.
그렇기 때문에 다른 슬라이스를 생성할 때 store에서 추출 할 수 없었다.

React에서 proxy 설정 후, CORS 에러 발생 할 때,

console.log()의 axios 전송 오류로 위의 사진처럼 cors 오류가 발생했을 때 localhost:3000 문제가 아니었다.
정말 사소한데 이문제로 한참 시간을 낭비해서 오늘 일지에 추가하는 내용이다. 응답코드 500번(서버 문제)이지만 백엔드 분이 잠시 외출하셔서 확인이 불가했고, 눈에 localhost:3000가 문제인 줄 알았다. 하지만 성공한 다른 요청할 때 같은 방식으로 가는 것 같았다. 콘솔에서 표기로 인해 혼란이 올 수 있으나 앞 부분은 package.json에서 정의한 proxy로 전달 되었다.

문제 해결 링크 : 재사용하는 특정 컴포넌트에서 baseURL이 이상하다..

갑자기 이상한 에러가 발생했다.
아래 사진을 보면 재사용하는 컴포넌트에서 axios 요청의 baseURL에 /question/ 이 자동으로 붙는 현상이 발생한걸 확인할 수 있다.
결론은 해결을 못했다. 어느부분에서 원인인지 확실치 않다. 다른 API 요청을 보내야하는 컴포넌튼데 아주 큰 문제이다.

임시로 해결하려고 path를 http:// 부터 입력해봤으나 COSR 오류가 발생한다. axios의 base-url 설정도 해봤으나 동일하게 COSR...

axios.post(
        `http://아이피:포트/answers/${questionId}/add`,
        sendingData
      )
// CORS 에러 발생

라우팅 과정에서 발생했다??

작업하고있는 페이지는 게시글 목록 페이지와 연결하면서 라우트 path에 :id 추가후에 발생했던 것 같다.

 <Route path="/questions/:id" element={<Post />}></Route>

현재 게시글 수정은 axios에 id만 전달해서 해결했지만, 답변글 관련해서 다른 여러 요청 작업은 막힌 상태이다...😰

오늘 총평

진짜 오늘 너무 어이없는 오류가 많았다. 그중 특히 axios url 입력값 전의 path 자동지정으로 답변글 제거가 불가능했다...왜지? 아직 오류를 못잡았다. 어떻게 검색해야하는건가.. 게다가 가장 큰 타격이였던 state에 push가 안되었던것... 그래도 해결했다. 역시 안풀리면 잠시 쉬어야하는건가🤔 게시글 조회 페이지에 너무 많은 기능이 있는데(심지어 스택오버플로우에서 엄청 제거한 건데도) 이걸 다 구현할 수 있을지... 아직 토글 같이 열리는 문제 해결이 안되서 제일 걱정이다. 그리고 북마크나 다른 버튼을 redux-toolkit으로 구현하려니 답답하다. 다행히 Thunk 들만 추가해서 해도될 것같은데 오늘 풀리지않는 url 문제라던지, 재활용하는 컴포넌트 내부에 들어가는 코멘트.. 아주 혼돈의 카오스다. toolkit 익숙해 진거 같으면서도 세세하게 문제가 발생하는 단계. 그래도 많이 배웠다.🫠

밀크티 마시는 개발자

이전 포스트

[Pre-project] StackOverFlow clone 일지 8 : Redux-toolkit Thunk 작은 오류들

[Group Project] StackOverFlow 클론코딩

오늘 한 일

JWT 토큰은 로그인 후 수신

비동기 Thunk 정의할 때,