Frontend136 효율적인 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. [Javascript] call, apply, bind call, apply, bind? ✔️ 함수 호출 방식과 관계없이 this를 지정할 수 있음. call ✔️ 모든 함수에 서 사용할 수 있으며, this를 특정값으로 지정할 수 있다.' const mike = { name:"mike", }; const tom = { name:"tom", }; function showThisName(){ console.log(this.name); } function update(birthYear, occupation){ this.birthYear = birthYear; this.occupation = occupation; } //call의 첫번째 매개변수는 this에 들어갈 객체 //call의 두번째 매개변수부터는 해당 함수의 매개변수 자리에 들어갈 인수들을 넣어준다. u.. 2022. 1. 19. [Javascript] 이벤트: change, input, cut, copy, paste 이벤트 : change ✔️ 요소 변경이 끝났을 때 발생 //텍스트 필드에 글자를 입력하는 동안엔 이벤트가 발생하지 않고, 포커스를 다른 곳으로 옮기는 순간 발생. 이벤트 : input ✔️ 사용자가 값을 수정할 때마다 발생 oninput : input.oninput = function(){ result.innerHTML = input.value; } 2022. 1. 18. [Javascript] focus와 blur focus / blur 이벤트 ✔️ focus 사용자가 클릭하거나 tab 키를 눌러 요소로 이동해 해당 요소에 포커스가 되었을 때 발생 이벤트 핸들러에서 주로 focus 되었을 때 에러 메시지를 숨김. ✔️ blur 포커스를 잃을 때 발생 이벤트 핸들러에서 이메일이 잘 입력되었는지 확인하고 잘 입력되지 않은 경우엔 에러를 보여줌. 이메일에 @가 들어가지 않으면 invalid 클래스를 추가해 에러를 알림 focus 되었을때는 에러를 사라지게 만듬. 이메일 : focus, blur 메서드 ✔️ elem.focus()와 elem.blur() 메서드를 사용하면 요소에 포커스를 주거나 제거할 수 있다. ✔️ 이벤트 핸들러에서 방문자가 유효하지 않은 것을 입력하면 해당 요소에서 focus를 빠져나가지 못하게 할 수.. 2022. 1. 18. [Javascript] 형 변환 문자형으로 변환 ✔️ String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수 있다. let value = true; alert(typeof value); //boolean value = String(value); alert(typeof value); //string 숫자형으로 변환 ✔️ 숫자형이 아닌 값에 +,-,/,* 등의 수식을 더해주면 숫자형으로 자동 변환함 ✔️ Number(value) 함수로 변환 // 부등호로 숫자형 자동변환하기 let value = +"5"; console.log(typeof value); //number //Numver() 함수로 숫자형 변환하기 let str = "123"; console.log(typeof str); //string let num = .. 2022. 1. 18. 이전 1 2 3 4 ··· 23 다음 반응형
