728x90 전체 글79 [Next.js] React-Query로 무한 스와이퍼 구현하기 (ft. useInfiniteQuery, getServerSideProps, react swiper) 📌 기존 코드의 문제점 영화 추천 프로젝트 리팩토링 과정에서 메인 페이지에서 카테고리 별 영화 리스트를 불러올 때 SSR을 적용하였다. (적용한 이유는 위 링크의 게시글에 기록해두었다) 기존 코드 처음 페이지 진입 시, Server-Side에서 불러온 데이터를 뿌려주고 사용자가 swiper를 넘기면 Client-Side에서 page=2, page=3..의 데이터들을 불러오게 된다. 불러온 데이터들은 state에 spread operator(스프레드 연산자)로 추가해주는 방식으로 동작했다. 그러나 이렇게 되면 다른 페이지에 있다가 돌아왔을 때 이전에 불렀던 데이터들이 리셋되어 다시 요청해야 하기 때문에 데이터 사용량이 늘어나게 되는 단점이 존재한다. // 메인 페이지 import type { InferGe.. 2023. 8. 14. [알고리즘] 백준 10811번 : JavaScript(Node.js) 풀기 📌 문제 📌 풀이 const [[n, m], ...input] = require('fs').readFileSync('/dev/stdin').toString().split('\n').map(x => x.split(' ').map(Number)); let arr = Array.from({length: n}, (_,i) => i + 1); const reverseBaskets = (baskets, i, j) => { while (i num - 1); r.. 2023. 8. 6. [알고리즘] 백준 10813번 : JavaScript(Node.js) 풀기 📌 문제 📌 풀이 const [[n,m], ...input] = require('fs').readFileSync('/dev/stdin').toString().split('\n').map(x => x.split(' ').map(Number)); let arr = Array.from({length: n}, (_,i) => i + 1); for (let idx = 0; idx num - 1); // index는 0부터 시작하므로 1씩 빼준다. const temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } console.log(arr.join(' ')); 배열 비구조화 할당을 이용해서, .. 2023. 7. 30. [Axios] Axios Interceptors 사용법 📌 Axios Interceptors ? Axios Interceptors는 axios의 then 또는 catch로 처리 되기 전에 요청과 응답을 가로챌 수 있다. 현재 진행하고 있는 영화 프로젝트의 리팩토링 과정에서 Axios Interceptors를 사용하기로 했다. Axios Interceptors를 사용할 경우, 인증 토큰 관리 : 요청 인터셉터에서 access token의 유효함을 확인하고, header에 실어 보내는 작업을 함 중복 코드 감소 : 요청과 응답을 처리하기 전에 공통적으로 적용되어야 하는 로직 중앙화 전역 오류 처리 : 모든 요청 및 응답에 대해 일관된 오류 처리 구현 📌 적용 코드 request : 요청을 보내기 전에 사용 axios.interceptors.request.use(.. 2023. 7. 29. 이전 1 ··· 8 9 10 11 12 13 14 ··· 20 다음 728x90
