JavaScript
-
[JavaScript] RTK Query: Automated Re-fetchingJavaScript 2023. 1. 6. 18:43
Automated Re-fetching | Redux Toolkit RTK Query > Usage > Automated Refetching: cache invalidation management redux-toolkit.js.org query 엔드포인트에 구독을 추가하게 되면, 캐시 데이터가 존재하지 않는 경우에만 요청이 전송되고 존재하는 경우 기존의 데이터가 제공된다. RTK Query는 "cache tag" 시스템을 사용하여 mutation 엔드포인트에 영향을 받는 데이터가 있는 query 엔드포인트에 대해 re-fetching을 자동화한다. 각 엔드포인트 + 파라미터의 조합은 'queryCacheKey'를 제공한다. "cache tag"시스템을 사용하면 RTK Query에 특정 쿼리 캐시가 특정 ..
-
[JavaScript] 특정 요소에 따른 스크롤 자동 조정 : scrollIntoView()JavaScript 2023. 1. 3. 22:49
element.scrollIntoView scrollIntoView()를 호출하면 호출된 요소가 사용자에게 보여지도록 상위 요소의 스크롤이 이동된다. element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean 파라미터 element.scrollIntoView(scrollIntoViewOptions); // Object 파라미터 alignTop true : 상단을 기준으로 스크롤 - scrollIntoViewOptions: {block: "start", inline: "nearest"}와 동일하다. false : 하단을 기준으로 스크롤 - scrollIntoViewOptions: {block: "end", inline: "nearest..
-
[JavaScript] checkbox 체크 확인, select, radio 값 가져오기JavaScript 2022. 10. 11. 21:10
input 값이 변할 때마다 상태를 저장해야 했다. 입력값이 변할 때마다 작업을 해야하니 onChange 이벤트를 사용하고 이벤트가 발생할 때 changeHandler라는 이름의 함수를 만들어 등록하였다. 또한 이벤트가 발생했을 때의 값을 넘겨줘야 했다. (편의상 매개변수를 값만 넘겨주기로 가정) checkbox 체크박스의 경우 체크를 하였는지 확인만 하면 되었다. 이때 e.target.checked로 체크여부를 진리값으로 줄 수 있었다. changeHandler(e.target.checked)} /> name select option value 속성에 각각 자신의 선택되었을 때의 값을 명시하였다. 그리고 e.target.value로 사용자가 선택한 값을 넘겨주었다. changeHandler(e.targ..
-
[JavaScript] FileReader 객체JavaScript 2022. 9. 11. 19:27
FileReader 객체란 FileReader는 Blob(따라서 File도) 객체에서 데이터를 읽는 것을 목적으로 하는 객체이다. *blob 객체 : 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체 속성 FileReader.error : 파일을 읽는 도중에 발생한 에러를 나타냄 FileReader.readyState : FileReader의 상태를 나타내는 숫자 EMPTY : 0 : 아직 데이터가 로드 되지 않았음. LOADING : 1 : 데이터가 로딩 중. DONE : 2 : 모든 읽기 요청이 완료됨. FileReader.result : 파일의 컨텐츠 이벤트 핸들러 FileReader.onabort : 읽기 작업이 중단 될 때마다 발생 FileReader.onerror : 읽기 작업에 에러가..
-
[JavaScript] use strictJavaScript 2022. 8. 30. 22:55
use strict 이 생겨난 이유 1. ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경 2. 하위 호환성 문제가 발생 3. 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 변경사항이 활성화되게 해놓음. use strict "use strict" 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다. 스크립트 최상단이 아니면 엄격 모드가 활성화되지 않을 수 있다. (주석 가능) "use strict"; 브라우저 콘솔 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점에 주의해야 한다. 해결 : 'use str..
-
[JavaScript] var let const 차이점JavaScript 2022. 8. 8. 17:56
자바스크립트에서 변수를 선언할 때 키워드로는 var, let, const가 있다. let과 const는 ES6에 추가된 키워드이다. var let const Function-level scope 재선언 가능 재할당 가능 Block-level scope 재선언 불가능 재할당 가능 Block-level scope 재선언 불가능 재할당 불가능 Function-level scope와 Block-level scope Function-level scope 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. Block-level scope 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 재선언 let과 const를 사용시, 변수..
-
[JavaScript] 키보드 이벤트: 특정키 확인 (key, code, keyCode)JavaScript 2022. 7. 18. 18:19
⌨️ KeyboardEvent.code 키보드의 물리적인 키 반환 입력 장치가 물리적 키보드가 아니라 가상 키보드 또는 접근성 장치인 경우 리턴값은 물리적 키보드에서 발생하는 것과 최대한 일치하도록 브라우저에서 설정하여 물리적 키보드 간의 호환성을 최대화한다. 이 속성은 해당 키와 연결된 문자가 아닌 입력 장치의 물리적 위치를 기반으로 키를 처리하려는 경우에 유용하다. (키보드 키를 사용하는 게임의 입력을 처리하는 코드를 작성할 때) ⌨️ KeyboardEvent.key 사용자가 누른 키의 값 반환 ⌨️ KeyboardEvent.keyCode 현재 Deprecated 이므로 권장되지 않는다. key 값을 code로 반환한다.
-
[JavaScript] Throttle 와 DebounceJavaScript 2022. 6. 23. 23:19
Throttle 와 Debounce - 성능 최적화를 위해 이벤트의 횟수를 제어하는 기법 - 스크롤 이벤트 리스너를 등록하면 스크롤 할 때마다 수 많은 스크롤 이벤트가 발생한다. window.addEventListener("scroll", () => console.log("scroll!")); Throttle 이벤트를 일정한 주기마다 한 번만 발생하도록 한다. 일정 주기를 1초로 설정한다면, 10초 동안 계속 이벤트를 발생시켜도 10번만 호출이 된다. Debounce 특정 시간이 지나야 이벤트가 한 번 발생한다. 연속되는 이벤트 호출이 그룹으로 묶이게 된다. ex) - 검색 API 호출 (자동완성) : "안녕"을 검색하면 'ㅇ', '아', '안' '안ㄴ', '안녀' 과 같이 불필요한 요청들을 막아준다. ..