#api호출

react native로 dart api를 사용하고 싶습니다.

react natvie로 dart api를 활용한 미니프로젝트를 진행하려고 합니다. 그런데 api 사용을 위해서 각 기업의 고유번호를 받아오는 과정에서 api를 호출하면 zip파일을 받게됩니다. 여기서 문제입니다. 그동안 json으로만 받아봐서 zip파일은 경험이 없습니다. react native에서 api호출시 zip파일로 받아서 저장하는 방법이 있을까요? 서버없이 구현하고 싶습니다. 제가 해보니 axios.get으로 받을경우 CORS오류가 발생됬습니다.. react 혹은 react native로 api 호출시 zip파일을 받아서 저장하는 방법을 알고계신다면 알려주시길 부탁드리겠습니다.

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

자식 컴포넌트 suspense 적용 질문 드립니다.

안녕하세요, 다름이 아니라 suspense컴포넌트를 사용하려는 중, 작은 문제가 있어 질문글을 올리게 되었습니다. 페이지 헤더가 있고 헤더의 부모래퍼 영역에서 모든 api호출이 일어나고 props drilling으로 자식 컴포넌트에 데이터를 적용합니다. 하지만 부모 영역은 헤더 전체이므로 스켈레톤 처리가 어렵습니다. 단, 자식 영역은 데이터가 로드 될 때 까지 스켈레톤 처리를 하고싶은데, 이 때 suspense를 어떻게 하면 적용할 수 있는지 궁금합니다. 현재는 react-query를 사용하여 isLoading 변수를 받아 해당 변수에 따라 명령형으로 스켈레톤 처리를 진행하고있습니다.

스프링부트 메모리 문제

스프링부트 프로젝트를 war로 말아서 리눅스 외장톰캣에 올려서 사용 중인데 올리고 2주정도 지나면 api호출시 응답이없어서 리눅스 서버에 가서 top로 확인해보니 메모리가 30정도 먹고 있네요 ( 보통 바로 띄웠을때 5 정도 먹습니다 ) 이러고 톰캣을 내렸다 올리면 정상적으로 작동합니다. 어디선가 쓰레드나 메모리 누수가 있는 것 같은데 이걸 하나하나 다 까볼수도 없고 actuator같은 모니터링 도구를 사용해야 할까요? 사용한다해서 특정로직이나 객체에서 문제가 있는걸 확인 할 수 있을까요..?

자바스크립트 api호출 질문입니다.

안녕하세요 현재 한 인강을 보면서 api를 호출하는 공부를 하고 있습니다. 이미지처럼 코드를 작성하고 마지막에 data를 콘솔로 찍어보니 콘솔에 이렇게 에러가 나더라구요. 현재는 맥북으로 코드작성하고있고 크롬 브라우저를 사용하는데 계속 이렇게 에러가 뜹니다. 어제부터 이런 에러가 나서 집에 있는 데스크탑으로 하니 데스크탑에는 정상적으로 데이터가 콘솔에 들어오는데 맥북문제인지 계속 이렇게 에러가 나더라구요. 찾아보니 cors? 프록시? 이런 말이 나오는데 해결방법도 뭔지 모르겠더라구요. 인강에서는 프록시라던지 cors 이런말이 없어서...어떤문제인지 모르겠습니다.

React 버튼 클릭 시 api 호출 후 페이지 이동하면 api호출이 취소됩니다..

제목 그대로 버튼 클릭 시 onClick함수에 react-query로 axios api 통신하는 함수 2개를 호출 후 페이지를 이동하는데 페이지가 이동하면서 api 호출이 취소됩니다.. 비동기라 그런것인지 통신 후 페이지가 이동되게 할 수는 없을까요?

react에서 state를 잘 관리하는 방법 질문 드립니다

안녕하세요 왕킹왕짱짱초보 프론트 개발자입니다 현재 react와 recoil을 사용하여 프로젝트를 개발중입니다 구조는 간단하게 도메인별로 (ex pages 디렉토리 하위 login 디렉토리 하위 action, model, component 이런식으로 구조를 잡아뒀습니다 다른 도메인들도 똑같이 잡아서 사용하고있습니다 서론은 저는 recoil을 그저 로그인 데이터나 다국어 정보등 localstorage와 연관된 정보나 말 그대로 프로젝트 전체 범위에 영향을 끼치는 상태들만 관리하는 용도로 사용하고있습니다 그런데 프로젝트를 진행하다보니 각 도메인별로 컴포넌트 개수가 많아지고 특히 Modal을 사용하거나 api호출 시 isLoading과 같은 상탯값을 다룰때 이게 상태가 많아지고 넘기는 값이 많아지니까 제가 만든 코드를 제가 구분하기 힘든 지경에 이르러버렸습니다... 본론은 도메인별로 api, model, compnent를 관리할때 recoil이나 redux같은 전역 상태도 각 domain별로 atoms 디렉토리나 store 디렉토리로 관리해도 괜찮을까요?? 전역 상태 관리 남용이나 오용은 아닌지 걱정도 되고.. 잘 몰라서 해도 되는지 확신이 안 서네요.. 🙇

신입 프로그래밍 습관

안녕하세요. 신입으로 회사에 입사했으나, 회사가 일정에 쫓기며 신입이 봐도 문제있는 코드(예를들어 중복 api호출...)들로 짜여져있습니다. OJT기간도 없고 토이프로젝트도 없이 바로 실무투입되었습니다. 실력은 인정받아 세미시니어 정도로 근무 중입니다. 하지만.. 좋은 코드 습관을 배우지못하고 나쁜 코딩 습관을 가지게 될까봐 걱정입니다. 좋은 코드 습관을 배울 방법이 깃에 들어가서 보는 방법밖에 없을까요? 이직하는게 답일까요..?

테스트 시 DB에 저장되는 데이터는 무엇과 비교해야 하나요?

안녕하세요. Flask로 프로젝트를 진행중인 대학생입니다. 개발한 api를 테스트 하기 위해 unittest 라이브러리로 테스트 코드를 작성하는데 api 호출 결과가 DB에 올바르게 저장됐는지 확인하고 싶을때는 어떻게 해야하나요? 지금까지는 api호출 이후, DB에 저장되는 결과로 예상되는 데이터를 하드코딩해서 테스트 시 api호출 후 DB에 저장된 값과 비교했습니다. 하지만 결과값이 하드코딩 돼있으니 데이터 구조가 변경되면 일일히 값을 변경해줘야 하는 문제 때문에 더 나은 방법이 있지 않을까? 하는 고민이 생겼습니다. +추가 api호출시 내부에서 랜덤한 값을 결정하는 코드의 경우 테스트 환경에서 멱등성을 보장하는 모듈을 추가로 구현해서 사용하는게 좋을까요?

react에서 api호출 함수 관리 어떻게하나요?

현재 api 호출 함수들을 도메인 별로 나눠서 관리하고 있습니다. 폴더 구조가 /api폴더 아래에 각 도메인 파일을 만들었습니다. 예) 검색 api - /api/search.js 고민은 각 도메인 파일안에서 함수들을 어떤식으로 코드를 짜야 좋은가입니다. 제 생각엔 방법은 2가지인 것 같은데요 1. 모든 함수에 export 붙여서 함수형으로 가져간다. 예) export function searchName(){} 2. class형으로 만들어서 static 메소드로 관리한다. 예) class Search { static searchName(){} } 보통 어떤식으로 관리할까요?

vue3 화면 진입 시 api호출

vue3 composition API사용하여 개인프로젝트 만들어보고 있는데 현재는 버튼 눌렀을때 개발자도구-네트워크에 API호출되는것을 확인할수있습니다. 화면 진입시 api호출하려면 어떻게해야하나요? <template> <h1>API에서 받아온 데이터</h1> <button @click="apiTest">API 호출</button> </template> <script setup lang="ts"> //API 호출 const apiTest = async () => { try{ const res: any = await ApiCert.get(API.url) ... } catch(err:any) { console.log('error', err) } } </script>

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("회원가입 실패"); } }); };