more j

아하 네네 이후 강의들어보시면 받아오는 주소를 따로 빼게되거든요 저는 최종코드라 좀 다르긴한데 우선 공유드릴게요 !surveyState.js<pre><code class="language-javascript">import { atom } from 'jotai';

import getSurvey from '../../../survices/getSurvey';

const surveyState = atom(async (get) => {
 const res = await getSurvey(window.location.pathname.split('/')[2]);
 return res.data;
});

export default surveyState;</code></pre>getSurvey.js<pre><code class="language-javascript">import mainApi from './apis/mainApi';
function getSurvey(surveyId) {
 return mainApi.get(`/surveys/${surveyId}`);
}
export default getSurvey;</code></pre>mainApi.js<pre><code class="language-javascript">import axios from 'axios';

const mainApi = axios.create({
 baseURL: 'http://localhost:3001',
});

export default mainApi;</code></pre>&nbsp;추가적으로 제가 헤맸던부분은 questionLengthState.js인데 이건 atomWithQuery 얘 설치하셔야돼요 ! 강의 내용엔 제가 작성한 코드처럼 api를 직접 호출하지않고 import해서 사용하는데 이상하게 그렇게 하면 오류가 나서 저는 직접호출했어요 ! <pre><code class="language-javascript">import { atomWithQuery } from 'jotai-tanstack-query';

import getSurvey from '../../../survices/getSurvey';
const questionLengthState = atomWithQuery(() => ({
 queryKey: ['surveyData'],
 queryFn: async () => {
 try {
 const res = await getSurvey(window.location.pathname.split('/')[2]); // API 직접 호출
 return res.data?.questions?.length ?? 0; // 방어 코드 추가 (questions가 없을 경우 0 반환)
 } catch (error) {
 console.error('❌ 설문 데이터를 가져오는 중 오류 발생:', error);
 return 0; // 오류 발생 시 기본값 0 반환
 }
 },
 suspense: true, // Suspense 활성화하여 로딩 상태 자동 처리
}));

export default questionLengthState;</code></pre>해보시고 모르시겠는거 알려주시면 또 공유드릴게요 ~!

jotai로 변경했을 때 코드

어떤 부분에서 막히셨을까요 ? 알려주시면 코드 공유해드릴게요

more j

Posts