728x90 반응형 JavaScript19 react-query) staleTime 과 gcTime, 그리고 InfiniteQuery useInfiniteQuery를 사용하여 무한 스크롤을 구현하던 중 문제가 발생했다.새로운 데이터를 넣고 invalidateQueries 메서드로 해당 키의 데이터를 stale 상태로 바꾸고,무한 스크롤로 구현한 조회 페이지의 들어갔을 때,네트워크 요청이 내가 스크롤해서 불러온 요청한 수만큼 한 번에 서버에 요청이 들어간 것이다. 예) 조회 페이지에서 스크롤링하여 4번 데이터 불러옴. -> 데이터 등록 페이지에서 새로운 데이터 추가 -> 조회 페이지로 이동 -> 한 번에 4번 요청. 현재 우리 페이지는 최신순으로 데이터를 정렬하므로새로운 데이터가 제대로 들어갔는지 확인만 하려고 하는 것이라면 굳이 스크롤하지 않을 것이기 때문에최상단의 데이터 1번만 요청하면 되는데, 그동안 보았던 페이지만큼 다시 fetc.. 2024. 5. 16. JavaScript ) 숫자형 다루기 0이 많이 붙은 큰 숫자 0의 개수를 'e'뒤에 추가한다. ex) 123e6은 0이 6개인 숫자, 123000000을 나타낸다. 'e'다음에 음수가 오면, 음수의 절대값만큼 10을 거듭제곡합 숫자로 주어진 숫자를 나눈다. ex 123e-6은 0.000123을 나타낸다. 다양한 진법 사용하기 16진수(0x), 8진수(0o), 2진수(0b)를 사용할 수 있게 지원한다. ex)0xff, 0o377, 0b11111111, -> 255 parseInt(str, base)를 사용하면 str을 base진수로 바꿔준다. (단, 2 100 parseFloat('12.3em') -> 12.5 partseInt('12.3em') -> 12 소수 처리하기 Math.floor(num) 소수점 첫째 자리에서 내림(버림). ex).. 2022. 3. 1. JavaScript ) 래퍼 객체 원시값은 빠르고 가볍게 유지하면서, 원시값을 다룰 때, 메서드를 사용하면 작업을 수월하게 할 수 있게 하기 위해서 래퍼 객체라는 개념이 만들어졌다. 래퍼 객체는 원시 자료형의 이름을 그대로 차용해, String, Numberm, Bigint, Boolean, Symbol이라고 부른다. null과 undefined은 래퍼 객체도 없고, 메서드도 제공하지 않는다. str.toUpperCase()와 같이 원시값에 메서드를 불러들 때 원시값의 자료형으로 임시로 래퍼 객체를 만들어진다. 래퍼 객체의 메서드가 실행되고 새로운 원시값을 반환하며, 임시 래퍼 객체는 파괴된다. 2022. 3. 1. JavaScript 객체의 형변환 객체는 논리 평가시 단 하나의 예외도 없이 true를 반환한다. (null은 type 검사시 객체로 뜨지만 null객체는 모든 경우에서 따로 평가된다) ToPrimitive 객체 형 변환은 세 종류로 구분되는데, 'hint'라 불리는 값이 구분 기준이 된다. hint 가 string이 될 때 객체를 출력하려고 할 때 alert(obj); 객체를 프로퍼티 키로 사용할 때 outerobj[innerobj] = 123; hint 가 number가 될 때 명시적 형 변환 let num = Number(obj); 이항 덕셈 연산을 제외한 수학 연산 let n = +obj; // 단항 덧셈 연산 let delta = date1 - date2; 크고 작음 비교 let greater = user1 > user2; hi.. 2022. 2. 25. JavaScript 심볼형 '심볼(Symbol)'은 유일한 식별자를 만들고 싶을 때 사용한다. Symbol([description])을 사용하면 심볼값을 만들 수 있다. let id = Symbol(); let id = Symbol("id"); 심볼은 유일성이 보장되는 자료형이기 때문에, description이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. let id1 = Symbol("id"); let id2 = Symbol("id"); alert( id1 == id2 ); // false 심볼형 값은 다른 자료형으로 암시적 형 변환(자동 형 변환)되지 않는다. let id = Symbol("id"); alert( id ); // TypeError alert( id.toString() ); // 'Symbol(id)'가.. 2022. 2. 14. JavaScript this와 체이닝 this는 함수가 호출될 때 사용된 객체를 나타낸다. 객체 내의 함수인 메서드를 사용할 때 this를 사용하여 메서드가 자신을 포함하는 객체에 접근할 수 있다. 자바스크립트의 this는 다른 프로그래밍 언어의 this와 다르게 모든 함수에 this를 사용할 수 있다. 그래서 엄격 모드가 아닐 때는 this가 전역 객체를 참조하기도 한다. 브라우저 환경에선 window라는 전역 객체를 참조하게 된다. function makeUser() { return { name: "Jack", ref: this }; }; let user = makeUser(); // 이 때 makeUser()함수가 호출되면서 this가 값을 참조함. alert( user.ref.name ); // Error: Cannot read pr.. 2022. 2. 10. JavaScript 가비지 컬렉션 자바스크립트에서 메모리를 관리하는 시스템이다. 엔진에서 자동으로 실행하는 것으로 개발자가 제어할 수 없다. 저수준 최적화가 필요한 상황일 때, 알 필요가 있다. 기본적으로 '도달가능성(reachability)'을 검사하여 도달할 수 없는 값을 메모리에서 삭제한다. 내부 알고리즘 루트(root) 정보를 수집하고 이를 기억한다. 루트가 참조하고 있는 모든 객체를 방문하고 이것들을 기억한다. 기억된 모든 객체에 방문하고, 그 객체들이 참조하는 객체도 기억한다. 이 때, 한번 기억한 객체는 다시 방문하지 않는다. 루트에서 도달 가능한 모든 객체를 방문할 때까지 3의 과정을 반복한다. 기억되지 않은 모든 객체를 메모리에서 삭제한다. 루트의 종류 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 .. 2022. 2. 10. JavaScript 객체의 동작방식 원시 타입 - 문자열, 숫자, 불린 값, null, unsigned) 객체 - 프로퍼티 key : value 들로 구성된 데이터 집합 또는 복잡한 개체 원시값은 값 그대로 저장,할당되고 복사되는 반면에, 객체는 참조에 의해(by reference : 객체가 저장되어있는 '메모리 주소')저장되고 복사된다. 따라서 객체를 복사하여 같은 키값을 가지고 있을 때, 그 키의 값을 바꾸면 원본과 복사된 객체 모두의 키값이 바뀐다. let user = { name : 'Mike' }; let admin = user; admin.name = 'Jack'; alert( user.name ); // Jack이 출력됨. 참조값을 복사하기 때문에 동일한 객체를 만들었다하더라도 복사된 객체가 아니면 동등 연산자나 일치 연산자 .. 2022. 2. 10. JavaScript break/continue와 레이블 여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우 쓰인다. 레이블(label)은 반복문 앞에 콜론과 함께 쓰이는 식별자로 labelName: for(...) { for(......) { ... break labelName; } } 또는 labelName: for(...) { for(...) { ... break labelName; } } break대신 continue지시자를 레이블과 함계 사용하는 것도 가능하다. continue labelName을 사용하면 레이블이 붙은 반복문의 다음 이터레이션이 실핸된다. *주의* 레이블은 마음대로 '점프'할 수 있게 해주지 않는다. 레이블은 반드시 break이나 continue 지시자 위에 있어야하고, break와 continue는 반복문 안에서만 사용할 수 있.. 2022. 1. 20. JavaScript nullish병합연산자 '??' null도 아니고 undefined도 아닌 값을 찾을 수 있다. let result = value1 ?? value2 ?? value3 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다. 값이 null도 아니고 undefined도 아니면 그 값을 반환한다. 피연산자를 모두 평가했을 때 모든 피연산자가 null또는 undefined로 평가되는 경우 마지막 피연산자 값를 반환한다. '??'와 '||'의 차이 let age = 0; alert( age || 19 ); // 19 alert( age ?? 19); // 0 '||'은 0을 falsy한 값으로 취급하기 때문에 null이나 undefined를 할당 한 것과 동일하게 처리한다. 반면에 '??'의 평가 결과는 정확하게 null이나 u.. 2022. 1. 19. JavaScript 논리연산자 OR연산자 || 첫 번째 truthy를 찾아준다. 모든 피연산자가 falsy이면 마지막 피연산자를 반환한다. let result = value1 || value2 || value3; 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다. 각 피연산자를 불린형으로 변환하고 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다. 피연산자를 모두 평가했을 때 모든 피연산자가 false로 평가되는 경우 마지막 피연산자의 변환 전 원래 값를 반환한다. ex) alert( nickName || name || "익명" ) // 모든 변수가 falsy이면 "익명"이 출력된다. ref) alert( alert(1) || 2 || alert(3) ) // alert메서드는 값을 .. 2022. 1. 19. JavaScript 동등연산자'=='와 일치연산자'===' 동등연산자 '==' 자료형이 다른 피연산자들을 계산할 때 숫자형으로 변환하여 계산한다. 숫자 0과 문자열 "0"을 불린형으로 바꾸면 숫자 0은 false, 문자열 "0"은 true이지만 두 피연산자를 동등연사자로 직접 비교하면 true로 서로 동등하다고 인식합니다. let a = 0; let b = "0"; alert( Boolean(a) ); // false alert( Boolean(b) ); // true alert( a==b ); // true *주의* 예외적으로 null과 undefined를 비교할 경우 null과 undefined는 각각 숫자형으로 변환할 때 0과 NaN으로 다르게 변환되지만 동등연산자'=='는 둘을 같다고 판단한다. 다른 비교 연산자에서는 제대로 숫자형으로 변환되어 계산된다... 2022. 1. 19. 이전 1 2 다음 728x90 반응형
