Frontend/React21 효율적인 React Query 사용법 (Waterfall 방지와 병렬 처리) react query 의 성능과 waterfallreact query는 캐싱 측면에서 불필요한 API 요청을 줄여주기 때문에 많이 사용할수록 좋을 것 같습니다. 그러나 waterfall에 대해서 인지하고 있지 않으면 성능적으로 더 불리해질 수 있습니다. waterfall은 무엇일까요?네트워크에서 데이터 요청이 순차적으로 일어나면서 발생하는 성능 이슈를 의미합니다. 불필요한 순차적 요청으로 인해서 네트워크 요청이 지연되면 그만큼 느린 속도로 인해 성능이 저하될수도밖에 없습니다. 그래서 보통 이러한 waterfall 이슈를 없애기 위해서 병렬처리, prefetch, caching 등의 방법으로 해결합니다. react query를 클라이언트에서 사용할 때 발생할 수 있는 waterfall 케이스에 대해서 살펴.. 2024. 11. 17. Next.js SSR accesstoken 개선(Localstorage에서 cookie로) 개요현재 제가 담당하고 있는 웹사이트의 accessToken은 Localstorage에 보관하여 사용자 인증을 처리하고 있습니다. 초기에 Server side rendering을 사용하지 않기도 했고, 사용자 인증에 따른 큰 기능이 없었기 때문에 큰 문제는 없었습니다. 그러나 페이지들을 SSR으로 바꾸고, 인증정보가 중요해지는 결제 서비스 출시를 준비하면서 Localstorage의 한계를 크게 느끼게 되었습니다. next.js에서 token을 Localstorage에서 관리했을 때의 불편함은 이렇습니다.- 첫 진입 or 새로고침시 로그인이 풀려있는 UI가 잠깐 보인다.- 인증이 필요한 페이지는 항상 로딩이 필요하다. - 클라이언트단에서 인증 정보를 체크하는 잠깐의 텀이 항상 필요하게 됨. - 항상 .. 2024. 11. 9. [React] 함수형 컴포넌트에서 API 불러오기 import React from 'react'; import axios from 'axios'; function PortInfo({link, image, title, category}){ return( {title} {category} ) } class Portfolio extends React.Component{ state = { isLoading : true, ports : []//포트폴리오 내용을 저장할 곳 } getPorts = async() =>{ const { data : { data:{ports}, } } = await axios.get("https://webstoryboy.github.io/dothome1/portfolio.json"); // this.setState({isLoading :.. 2021. 8. 16. [React] axios(내용 추가하기) 1 axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 http 비동기 통신 라이브러리. 2 axios 특징 - 운영 환경에 따라 브라우저 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용. - Promise(ES6) API 사용 - 요청과 응답 데이터의 변형 - HTTP 요청 취소 및 요청과 응답을 json 형태로 자동 변경 2021. 8. 16. [React] map 응용2(portfolio) import React from 'react'; import Header from '../layout/Header'; import Layout from '../layout/Layout'; import Title from '../basics/Title'; import FooterInfo from '../basics/FooterInfo'; function Port({link, image, title, category}){ return( {title} {category} ) } const portfolioInfo = [ { id: "1", link: "https://webstoryboy.github.io/portfolio/port2/", image: "../img/port01.jpg", title: "PORT.. 2021. 8. 16. [React] map 응용하기 html 꿈을 설계하고 디자인 하다. 나는 공간을 만드는 것을 좋아한다. 어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다. 열심히 할수록 기회는 따른다. 운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해.. 2021. 8. 16. 이전 1 2 3 4 다음 반응형
