#api요청

서버 배포 시기 및 협업

안녕하세요, Django와 RN을 이용해서 팀프로젝트를 진행하고 있습니다. 아직 경험이 많이 없는 학생이라 AWS 배포는 처음입니다. (무료 호스팅만 이용해봤습니다) 현재 개발 초기 단계이고, 회원가입 로그인 정도만 API 개발된 상태입니다. 프론트에서 서버를 요청해서 AWS서버를 구축하려 하는데, 1. 지금 이 시기가 AWS 서버 구축을 하는 게 맞는지?(프리 티어여도 개발이 진행 중인 상황에서 서버를 벌써 시작하는 게 맞는 지 궁금합니다) 2. AWS 실제 서버를 구축하지 않고도 프론트와 백엔드의 연결 즉 API요청을 프론트 측에서 할 수 있는지? -> 서치해 본 결과로는 ngrok 등을 이용해서 서버를 구축하지 않고도 프론트가 백엔드의 코드에서 테스트 해볼 수 있다는 것 같은데 이 방법을 더 자주 이용하는 편인지, 다른 방법이 있는지 가 궁금합니다! 프론트도 백엔드의 코드를 받아볼 수는 있으나 RN개발 환경과 백엔드의 코드를 둘 다 띄우기에 컴퓨터 자체가 어렵다고 하여 서버 배포를 고민 중에 있었습니다.. 많이 헤매고 있지만 여기서 많은 도움 받고 있습니다! 경험해보신 분들의 조언 부탁드립니다!

리액트 새창열고 데이터 주는방법

안녕하세요:) 웹 개발 중에 궁금한 점이 있어서 질문드립니다. 리액트로 사이트를 개발중입니다. 리액트로 된 www.aaa.com 사이트 에서 버튼 클릭 시 리액트로 된 www.bbb.com사이트를 새창으로 열려고 합니다. 새창 연결 시, data를 넘겨 주어야하고 B사이트에서는 data를 가지고 조회를 해서 화면에 보여 주어야 하는데요 B사이트는 그냥 라우터 www.bbb.com 하나로 되어있고, api요청시 www.bbb.com/api/data 이렇게 요청을 보내 화면에 보여주는 역할을 합니다. 어떻게 해야할까요? 누구라도 알려주시면 너무 감사하겠습니당 ㅜㅜ

리액트 쿼리에서 사용자 인증관련 코드 질문있습니다.

아래 코드처럼 리액트쿼리로 사용자 인증 코드를 구현했습니다. ( 외국 개발자분 코드 분석해서 거의 복붙하고 조금 수정 ) 간단히, api요청을 해서 유저 정보를 받아 로컬스토리지에 저장해서 사용하는 코드입니다. 이 훅을 프라이빗 라우터 및 로그인 버튼 or 사용자 이름 표시 UI 에 사용중인데요 쿼리 캐시 때문에 계속 요청을안하고 그값만 계속 사용중인데 이 사용자의 토큰 유효기간이 지났는데도 계속 그 값만 사용중입니다. 이 분기처리를 어떻게 해줘야할지를 모르겠습니다. 처음엔 refetchOnMount: false,를 true로 바꿔주고 토큰 유효값이 지나면 에러를 뱉어주는거를 보고 흡족해했으나 네트워크탭을 살펴보니 새로고침, 페이지 인아웃 할때마다 계속 요청을하고있어서 다시 고민에빠졌습니다. 어떤식으로 해줘야 할까요?.. 가장 생각나는건 statleTime 값을 토큰 유효기간 값만큼 설정해주면 될까 인데.. 이렇게해줘도되나요?

앱에서 공공데이터를 이용하려고 할 때 api가 아닌 json을 이용하는게 좋을까요?

졸업 프로젝트로 식단, 체성분 관리 앱을 개발하고 있는 대학생입니다. "전국통합식품영양성분정보표준데이터"를 이용하여 사용자가 섭취한 식품의 영양소를 제공하려고 합니다. api를 사용하면 사용자가 식품 이름을 검색할 때마다 요청을 보내야 하므로 요청이 많아질 경우 제한에 걸리고, api서버 속도의 영향도 받고, 위와 같은 이유로 api요청 보다는 json 데이터를 다운받아서 DB에 저장하고 사용하는 방식을 생각 중입니다. 비슷한 경우에는 어떻게 처리하는지 알고 싶습니다! 조언 부탁드리겠습니다!

Next.js로 프로젝트 중인데, 팀원과 의견조율이 잘 안돼서 도움 부탁드립니다.

안녕하세요, 저는 백엔드 개발자로 일한지 이제 2년차가 된 개발자입니다. 사이드프로젝트에서는 프론트 개발을 하고 있고 현재 Next.js를 사용하고 있습니다. 백엔드팀도 따로 있어서 Next.js의 API routes는 BFF같은 느낌으로 사용하고 있습니다. [Next pages] <-> [Next API] <-> [백엔드 서버] 현재 상황은 유저의 로그인정보를 어떻게 관리하냐로 이야기를 하고 있습니다. 1. 마이페이지 -> 프로필 수정 페이지 2. 로그인 -> 메인페이지 이렇게 유저의 프로필 정보가 많이 쓰이다보니까 이걸 매번 GET해서 가져올까, 전역상태로 관리할까 이야기를 하는데 좀처럼 의견이 좁혀지지가 않는 상황이라 다른 분들의 의견을 여쭙고 싶습니다. (참고로 저희 둘 다 프론트 개발경험이 그리 많지 않습니다) A: 그냥 매번 GET하자.(넥스트 API 캐싱을 사용하자) - 전역상태관리보다 코드 복잡도가 줄어들 것 같다. - 넥스트의 API 최적화를 사용하는 게 더 Next스러운 방식같다. B: 전역 상태로 관리하자. - useEffect로 현재 모든 GET 요청을 하고 있기 때문에 윌업데이트에 변경이 일어나면 재렌더링이 일어남 - (하지만 컨텍스트 정보가 바뀌지 않으면 최초 렌더 이후 리렌더 되지 않음) - 캐싱한 데이터를 받아오더라도 결국 불필요한 api요청을 보내는 것이며 api요청을 보내는 것보다 전역 상태에서 가져다 쓰는 것이 더 바람직하지 않나 서로 비슷한 실력에 사람도 둘 밖에 없어서 결정을 내리기 힘들어서, 다른 분들의 의견을 좀 들어보고 싶습니다. 읽어주셔서 감사합니다.

node.js express.js 백엔드 개발 시 자동 로그아웃 관련

안녕하세요 헬스케어 콘텐츠 개발팀에서 근무하고있는 이제 1년 2개월이된 서버개발자입니다. 서버쪽은 저 혼자라서 서버쪽 도움을 요청할분이 없기에 이렇게 도움을 요청 드리게 되었습니다! node.js express.js로 개발중인데요! 클라이언트쪽은 다른분이 unity로 개발중에있습니다. 앱에서 로그인하고 일정시간동안 아무 이벤트가없으면 자동로그아웃이 되도록 구현하려고합니다. 알아보니 setInterval를 사용하면 될 것같아 구현은했는데 postman으로 테스트시 console에 자동 로그아웃 성공되는 부분까지 확인이 되었습니다. 그런데 클라이언트쪽 return에 대해서는 아무 반응이 없다보니 이렇게 처리하는게 맞나라는 생각이 듭니다. 개발하고 unity 클라이언트 앱 쪽과 api 통신을할껀데 setInterval로 자동 로그아웃 기능을 구현면 어떻게 unity 클라이언트쪽에서 확인하고 팝업창을 띄우거나 로그인 페이지로 돌릴지 감이 잡히지않아 이렇게 요청드립니다..!! 정리하자면.. node.js로 백엔드 개발중 일정 시간이 지나도록 이벤트(마우스,키보드,api요청)가 전혀없을때 setInterval로 만들어 놓은 자동 로그아웃이 실행되고 return 값을? unity 클라이언트쪽에서 받아서 팝업창에 띄우는 흐름대로 하려고하는데 관련 키워드나 해결방법을 알고싶어 도움 청하게 되었습니다..!!! 혹시나 제가 처리하려는 흐름이나 setInterval로 접근하는게 잘못된것일까요..?

react 프로젝트 컴포넌트 재사용

안녕하세요! 프로젝트 진행 중 어떤 방법이 더 나을지 모르겠어서 질문드립니다! 리스트 UI는 똑같고 배열 내용(api응답)만 다른 게시판 페이지가 두개 필요할 때 1. 페이지 하나만 만들고 url에 따라 내용(api요청)을 바꾼다 장점: 코드 작성이 적어짐 단점: 네이밍이 애매해짐 (복잡해질 수 있음) 2. 페이지 두개 만들고 스타일 컴포넌트를 재사용한다 장점: 네이밍이 구분됨 단점: 위 방법보다 코드 작성이 많아질 듯 좀 더 나은 방법과 이유 좀 무엇인지 부탁드립니다ㅠ 또는 위 방법이 아닌 더 좋은 방법이 있다면 알려주셔도 감사하겠습니다!!

리액트쿼리 고수분들 도와주세요

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!

[Nest.js] Kakao, Google Oauth 로그인 CORS 문제 ㅠㅠ (+ React)

안녕하세요 Nest.js 처음부터 공부하면서 혼자 프로젝트를 진행중인데... React(5173 port) + Nest.js(3000 port) 로 Oauth를 구현하고있습니다. ! 현재 Nest.js 쪽에서 @Get('/auth/kakao') @UseGuard(KakaoGuard) @Get('/auth/kakao/callback') @UseGuard(KakaoGuard) 로 요청을 받고있습니다. (Google도 동일) React에서 button click시에 localhost:3000/auth/kakao 로 api요청을 날리면 301 Found가 뜨게되고 'https://accounts.kakao.com/login?continue=~~~~~~~~~~' 로 리디렉션 되지만 CORS 오류가 나옵니다...... ㅠㅠㅠㅠ (구글도 구글 url로 리디렉션) 해당 도메인을 복사하여 브라우저에 직접입력하면 해당 카카오 혹은 구글 로그인 페이지로 접속이 잘되지만... 왜 프론트엔드에선 CORS가 나고있고 어떻게 해결하면 좋을지 모르겠어서 질문 남깁니다 ! 추가로 oauth에 등록하는 리디렉션 url은 http://localhost:3000/auth/kakao/callback 이며, 카카오 웹 플랫폼, 구글 자바스크립트 원본은 http://localhost:5173 입니다 !

사이드프로젝트중 proxy관련 질문있습니다.

현재 사이드프로젝트를 진행중인 취준생입니다. 프론트엔드측에서 로컬에서 원활한 API통신을 위해 proxy를 설정하여 cors를 우회하였는데요. Nextjs13을 사용중이고 rewrites 함수를 next.config 에서 사용하였습니다. 문제는 프로덕션이었습니다. 현재 저희는 Vercel 로 간편하게 배포를 해두었는데요. 프론트 개발서버에서는 cors를 우회하여 api요청과 응답이 정상적이었지만 배포된곳에서는 뜬금없이 403에러가 발생합니다. 혹시 proxy때문에 403에러가 발생하는것일까요?

코딩공부 4개월차입니다..

부트캠프에서 프로젝트를 진행중입니다. 풀스택과정이라 스프링부트와 리액트를 사용해서 게시판을 만드려고 하는데 타임리프로 만들어져 있는 게시판을 리액트로 변환하고 싶습니다. html로 작성되어 있는 파일들을 리액트로 새로만들어주면 되는건가요? Axios나 fetch를 사용하여 API요청하라고 하는데 무슨소리인지 이해가 잘안갑니다 ㅜㅜ

자바 ㅡ 인터셉터와 필터 사용

현재 자바로 진행 중인 프로젝트에서 필터에서는 로그인 체크 및 user 각각을 분류하고 ex) 의료진이라면 의사,임상병리사,연구자 등으로 분리하고, 인터셉터에서는 각 컨트롤러에 들어오는 Api요청들의 허가 관리를 하려고 합니다. 필터와 인터셉터는 실행시점이 servlet 이전, 이후 시점이라는 것이 다르다는 것만 알고, 구체적으로 이렇게 실행했을 때 어떤 이득이 생길지, 이득의 여부조차도 쉽게 판단하기 어렵네요. 큰 이득이 없을 경우 인터셉터에서 전부 처리하려 하는데 조언 좀 부탁드립니다.ㅠㅠ

response 타입 공유?

안녕하세요 타입스크립트를 사용하여 nextjs와 nestjs로 풀스택 토이프로젝트를 진행 중입니다. 다름이 아니라 백엔드 단에서 보내주는 응답 객체들의 타입을 프론트에서 어떻게 관리해야하는지 의문이 생겨서 질문 남깁니다.. 프론트에서 api요청을 통해 유저 정보 객체를 응답으로 받았다면, 그 유저정보 객체의 타입을 어떻게 확인할 수 있을까요.. 저는 혼자 풀스택으로 진행 중이니 swagger 문서를 보고, 혹은 백엔드의 코드를 보고 프론트에서는 따로 types 폴더에 모아 작성을 해두고 있습니다만 뭔가 비효율적이라는 생각이 드네요. 실무에서는 어떤식으로 프론트와 백이 타입을 공유하는지 궁금합니다! 회의를 통해 타입을 정의해 놓은 파일을 따로 만들어두고 이를 양측이 공유한다는 말을 들었던 것 같기도 한데 다른 선배님들은 어떻게 진행하고 계신가요??

react-query가 데이터를 캐싱하는거 맞나요?

이번에 react-query를 처음 사용해 보는데요. 데이터를 키에 캐싱해서 보여준다고 공식문서에 적혀있던데 사용해보면서 느낀건 캐싱되고 있는거 맞는지 의문점이 생깁니다. 가장 큰 이유는 데이터를 계속 불러오기 때문입니다. 캐싱된 데이터를 가지고 어느정도 API요청을 줄이고 효율적으로 사용할 수 있을 줄 알았는데 매번 hook을 실행할 때마다 혹은 데이터와 관련없는 버튼을 누를때도 렌더링 될때마다 API요청이 일어나더라고요. 물론 제가 처음이라 잘 사용하는 방법을 몰라서 그렇기도 한데 이렇게 사용하는 거라면 더 비효율적인것 같아요 ㅜㅜ

자바스크립트 http 통신 할 때 왜 fetch를 사용하지 않고 라이브러리 사용하는 이유

학원에서 API요청이라는 것을 처음 배우고 fetch를 통해 API request를 통해 response를 받았습니다. 그런데 학원에서 이제 원리를 알았으니 라이브러리를 사용하라고 하네요 axios 라는 라이브러리를 사용하라고 하는데 axios라이브러리는 필수 인가요? 왜 fetch를 사용안하고 axios라는걸 써야하는걸까요?