React native expo axios통신 관련 질문 남깁니다!

Expo 에서 axios를 사용해서 서버와 통신하는데, 외부 앱에서 인증을 받아야하는 로직이 포함되어 있어서, 인증을 받고 돌아오면 ERR_BAD_RESPONSE가 돌아옵니다. 어떻게 해야 앱이 백그라운드로 갔을 시에도 axios 통신을 유지할 수 있는지 질문 드립니다. 감사합니다.

Next.js App dir에서 fetch API를 사용할 때 interceptor는 어떻게 설정할 수 있나요?

axios의 interceptor를 사용한 로직이 있었는데, Next의 App dir에서는 getServerSideProps 등이 fetch API 로 대체된걸로 알고 있어요. 이러면 axios의 interceptor를 사용하려면 어떻게 해야할까요? 그리고 fetchAPI가 400번이나 500번 정도의 에러 코드를 제대로 잡지 못한다는 말을 들은 적이 있는데 이건 어떻게 대응할 수 있을까요?

안녕하세요 cors로 고통받고 있는 주니어 개발자입니다ㅜㅜ

현재 안드로이드 + 리액트로 하이브리드 앱을 개발하고 있습니다. 웹뷰 UI작업 이후에 서버와 Rest API 통신을 하려 합니다. axios를 이용해서 서버와 통신하려고 하는데 SOP로 인한 CORS 에러로 통신을 못하고 있습니다.. 현재 안드로이드에서 사용하고 있는 웹뷰 주소가 192.100.200.300:3000 이라고 가정하고 서버의 주소가 106.100.200.300:4000이라고 가정한다면 어떤 방법으로 통신할 수 있을까요..? 여기저기 알아보니까 서버에서 Access-Control-Allow-Origin을 ‘*’ 등으로 설정하고 웹뷰에서 axios를 실행할 때 header에 Access-Control-Allow-Origin을 추가하면 되는 것 같는데 맞나요?? 현재 서버는 수정할 수가 없어서 웹뷰에서만 수정이 가능한데 방법은 없는건가요ㅠㅜ

try catch 가 예외처리가 맞나요?

제가 알기로 try catch는 오류가 아니라 예외가 발생했을 때 잡아주는 걸로 알고 있는데 아래 코드에서 axios 콜에서는 응답을 받으면 성공인거 아닌가요?? 근데 axios에서 400대 코드를 주면 캐치로 넘어가는데..ㅠㅠ

리액트에서 데이터 불러올 때 오류

안녕하세요, react에서 데이터를 불러오고 있습니다. 코드에서 res.data를 return 값에서 불러오려고 하는데요, {posts && posts.map(post => <p key={post.id}>{post.title}</p>)} 이렇게 불러오면 에러가 뜹니다 ㅠㅠ 어떤 부분이 잘못되었는지 말씀해 주시면 감사하겠습니다..!

Axios 를 사용해서 로그인 API 를 구현하고 있는데 궁금한점이 있습니다.

Axios를 사용하여 로그인 기능을 구현하려고 하는데, 401 응답이 발생했을 때 refresh token을 재발급해야 할까요? 그리고 언제 로그인 화면으로 리다이렉트 되어야 하는지 궁금합니다! (헷갈리는 부분) axios intercept 안에서 401요청 핸들링 할 때에, - 리프레시 토큰 요청 -> 거부 -> 리로그인 - 리프레시 토큰 요청 -> 액세스 토큰 업데이트 -> api 재요청 이렇게 되는 걸까요?

react-native) 안드로이드에서만 api서버가 401에러 발생

서버 api 호출하는 코드인데요. ios에서는 토큰 가져와서, 호출 잘 되는데, 안드로이드에서는 토큰은 잘 가져오는데.... 호출을 하면 권한이 없다고 나옵니다. (401에러 unauthorized) 물론 헤더 넘기지 않는 로그인 같은것은 성공적으로 수행됩니다. 유저 정보를 가져오는 이 부분만 android에서 에러가 발생하네요 ㅜㅜ 혹시 이런 이슈 해결하신분 있을까요? api서버는 django입니다. useEffect(() => { const getTokenAndRefresh = async () => { try { const token = await EncryptedStorage.getItem('accessToken'); if (!token) { return; } console.log('스토리지에 token있음:', token); const API_URL = Platform.OS === 'ios' ? IOS_API_URL : ANDROID_API_URL; const response = await axios.get(`${API_URL}/me`, { headers: { Authorization: `Token ${token}`, }, }); console.log(response.data); dispatch( userSlice.actions.setUser({ userInfo: response.data, accessToken: token, }), ); } catch (error) { console.error(error); console.error('me호출 에러'); } } }; getTokenAndRefresh(); }, [dispatch, isAccessToken]);

react axios 로 api호출시 recoil value 전달 실패

회원가입 마지막 단계 페이지인 관심태그 페이지입니다. 이미 nickName, email, phoneNum, pwd, subGroup, workYear는 recoil의 userState에 저장된 상태입니다. 다음 코드를 실행하면 api 호출에는 성공하는데, isSuccess가 false가 되면서 '이메일을 입력해주세요'라는 message가 뜨고 회원가입 실패 alert 창이 뜹니다. 아무래도 recoil value의 전달에 실패한 것 같은데 왜 그럴까요? 참고로 api 주소는 가짜로 적었습니다. function InterestTag() { const [user, setUser] = useRecoilState(userState); const [interestIdx, setInterestIdx] = useRecoilState(userState); const [buttonColor, setButtonColor] = useState("f1f4f7"); const nickName = useRecoilValue(userState).nickName; const email = useRecoilValue(userState).email; const phoneNum = useRecoilValue(userState).phoneNum; const pwd = useRecoilValue(userState).pwd; const subGroup = useRecoilValue(userState).subGroup; const workYear = useRecoilValue(userState).workYear; const handleTagClick = (interestIdx) => { setInterestIdx(interestIdx); setUser({ ...user, interestIdx: interestIdx, isLogin: true, }); setButtonColor("#36f"); }; console.log(interestIdx); const navigate = useNavigate(); const handleSubmit = () => { axios .post("https://abcd.shop/users", { data: { nickName: nickName, email: email, phoneNum: phoneNum, pwd: pwd, subGroup: subGroup, workYear: workYear, interestIdx: interestIdx, }, }) .then((response) => { console.log(response.data); if (response.data.isSuccess === true) { alert("회원가입 성공"); navigate("/"); } else { alert("회원가입 실패"); } }); };

uri 인코딩할 때 encodeURI vs encodeURIComponent 어떤 함수를 사용하는게 맞을까요?

axios를 사용해서 한글이나 특수문자를 보내야하는 경우가 있습니다., 이때 데이터를 encode하려고 합니다. 보통 encodeURI 또는 encodeURIComponent를 사용하는 것 같은데 하나로 통일하는게 맞을까요? 사용한다면 어떤 함수가 좋을지 또는 다른 인코딩 방법이 있으면 공유해주시면 감사하겠습니다.

리액트 axios로 api 호출해서 파일 url을 받았는데요, 이걸 다운로드할 수 있을까요?

<a> 태그를 사용하여 파일을 다운로드하려고 하니, 새 창에서만 열리고 다운로드는 되지 않는 문제가 있습니다. <a href= { fileData.map((e)=>{ return ( e.fileurl ) }) } download> 다운로드 </a> 대략적인 코드는 아래와 같습니다. axios로 api를 호출하면, json 형식으로 간단한 파일 정보와 파일 url이 넘어오는 구조입니다. [ { "id": "1", "fileurl": "https://도메인/filename", }, ] /** 파일 정보 가져오기 */ const [fileData, setFileData] = useState([]); const FILECONFIG = { method: "POST", // [요청 타입] url: "/apiURL", // [요청 주소] params: { "id" : id, }, // [요청 데이터] headers: {}, // [요청 헤더] } // [axios 요청 수행 실시] useEffect(() => { const fetchData = async () => { const response = await axios(FILECONFIG) .then(function(response) { setFileData(response.data); }) .catch(function(e) { console.log(e); }); }; fetchData(); }, [id]);

리액트 axios로 받은 데이터 state에 담아서쓰기

제가 혼자 포폴만들어볼 겸 만들어보는중인데 데이터 자료들은 서버를 만들진못해서 json으로 깃허브에 올려서 사용중입니다. 깃허브에 올려둔 json을 axios로 받아와서 state에 넣어서 사용하려는데 에러가나서 질문합니다..ㅠ 코드는 현재 사진처럼 작성했는데요 에러가나는게 저렇게 작성했을 땐 에러가안나는데 SwiperSlide 태그 안에 img에 puzzledata[0].img를 [1], [2], 로 변경하면 그때 에러가납니다. 아마 위에 puzzledata 이름으로 만든 state에 임시로 만든 배열객체를 늘려주면 에러가 고쳐질거같긴한데 좋은방법인지 잘 모르겠습니다.. 보통 이럴땐 어떻게 코드를 수정하나요? 에러가 나는이유가 useEffect로 데이터를 변경해주기전에 html을 구성해버려서 에러가 발생하는것같은데 맞나요? 해결방안을 알려주시면 감사하겠습니다!.. 상단에 import는 다 해왔습니다.