나디아 성장 일기

📌 IntersectionObserver 객체 : 웹 페이지에서 특정 요소가 화면에 보이거나 사라지는 것을 감지할 수 있는 도구 ex)  사용자가 페이지를 스크롤할 때 이미지가 화면에 나타나는 순간에만 그 이미지를 불러오게 하려는 상황에서 사용될 수 있다.      📌 intersectionObserve(): 새로운 IntersectionObserver 객체를 생성, 반환교차 관찰자 API브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰한다.➡︎ 사용자 화면에 지금 보이는 요소인지( 요소가 뷰포트에 포함되는지)를 구별하는 기능을 제공한다.사용 상황이미지나 동영상 로딩: 스크롤할 때, 이미지가 화면에 보이는 순간 이미지를 로딩하게 하고 싶을 때 사용된다.이를 통해 페이지 ..

📌 URL.createObjectURL(): Blob 객체나 File 객체를 사용하여 URL을 생성할 수 있게 해주는 메서드 자바스크립트의 웹 API 중 하나브라우저에서 동적으로 생성한 파일 데이터를 참조할 필요가 있을 때 사용한다.특징일회성 URL: URL.createObjectURL()로 생성된 URL은 페이지가 열려 있는 동안만 유효하다.브라우저가 해당 페이지를 새로 고침하거나 닫으면 더 이상 사용할 수 없다.메모리 사용: 생성된 URL은 메모리를 사용하므로, 사용이 끝난 후 URL.revokeObjectURL() 메서드를 호출하여 URL을 해제해야 한다.브라우저 호환성: 거의 모든 현대적인 브라우저에서 지원된다.사용 상황파일 업로드: 사용자가 업로드한 파일을 미리보기할 때 사용동적 이미지 생성:..

📌 crypto.randomUUID(): JavaScript에서 고유한 식별자(UUID, Universally Unique Identifier)를 생성하는 메서드 crypto 모듈에서 제공되며, UUID v4 형식으로 랜덤하게 생성된 문자열을 반환하여 식별자로 사용한다. 생성된 UUID는 128비트 길이의 8-4-4-4-12 형식의 32자리 16진수 문자열로 구성된다.ex) 123e4567-e89b-12d3-a456-426614174000cryptographically secure(암호학적으로 안전한)한 방식으로 난수를 생성하여 고유성을 보장한다.사용하는 상황데이터베이스에서 각 레코드에 고유한 ID를 부여할 때 사용된다.파일 이름을 중복되지 않도록 고유하게 생성할 때 사용된다.세션 ID, 토큰 등을 ..

📌 FormData: 웹 브라우저에서 HTML form(폼) 데이터를 쉽게 다루기 위해 제공되는 API폼 데이터를 JavaScript에서 읽거나 서버로 전송할 때 유용하다.기능폼 데이터 수집HTML 폼 요소의 데이터를 JavaScript 객체로 변환해서 수집할 수 있다.폼 데이터 전송AJAX 요청 등을 통해 서버에 폼 데이터를 전송할 때 편리하다.   ☑️ 메서드append(name, value): FormData 객체에 새 키-값 쌍을 추가하거나, 기존 키에 새로운 값을 추가한다.- 키가 없으면 새로 추가하고, 있으면 값이 추가된다.set(name, value): FormData 객체 내에서 주어진 키에 새 값을 설정하거나, 키가 없으면 새로 추가한다.delete(name): FormData 객체에서..

📌 clsx(): 자바스크립트에서 조건부로 클래스 이름을 결합하고 관리하는 데 사용되는 유틸리티 함수 여러 개의 클래스를 조건에 따라 동적으로 쉽게 결합할 수 있도록 도와준다. 불필요한 빈 문자열이나 null, undefined 같은 값들을 자동으로 걸러준다. 조건부 UI를 만들 때 매우 유용하다. 주로 React 프로젝트에서 많이 사용한다.  ⏩ 설치 npm install --save clsx   ✅ 사용 clsx 불러오기 import clsx from 'clsx';// orimport { clsx } from 'clsx';   ☑️ 기능 여러 개의 문자열 결합 clsx('foo', 'bar'); // 'foo bar' 배열 형태로 클래스 이름 결합clsx(['foo', 'bar']); // 'foo..

📌 AbortController : 웹 요청을 취소할 수 있는 기능 비동기 작업을 취소할 수 있도록 돕는 기능다양한 비동기 작업을 중단할 때 사용한다.(ex. Fetch API, 네트워크 요청 취소, 타이머 중단, 이벤트 리스너 제거 등)사용: 사용자가 취소하거나 중단할 수 있는 작업 ex 1) 사용자가 파일 다운로드를 시작했지만, 중간에 취소 버튼을 클릭하면 다운로드 요청을 중단 ex 2) 컴포넌트가 사라지거나 페이지가 이동되면 이전에 실행 중이던 네트워크 요청이 더 이상 필요하지 않으므로 중단ex 3) 네트워크 상태가 좋지 않아서 요청이 너무 오래 걸리는 경우, 일정 시간이 지나면 요청을 자동으로 중단  ⏩ 작동 방식 AbortController()는 signal 객체를 생성 ➡︎ 이 signal ..

📌 Debounce & Throttle: 자주 사용되는 이벤트나 함수의 실행되는 빈도를 줄여서, 성능의 유리함을 가져오기 위한 개념사용자의 의도와 무관한 요청을 줄이기 위한 기능 (input 입력 이벤트, API로 데이터를 가져오는 이벤트 등)스크롤, 윈도우 리사이즈, 마우스 이동 등의 빈번한 이벤트에서 성능을 최적화하는 데 유용 이벤트가 과도하게 발생하는 것을 제한   ✅ Debounce: 입력 주기가 끝남과 동시에 이벤트를 호출한다.같은 이벤트가 반복되게 발생하는 경우, 반복적으로 발생하던 이벤트가 일정 시간동안 다시 발생하지 않으면 콜백 함수를 실행 아무리 많은 이벤트가 발생해도 모두 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때 딱 한번만 마지막 이벤트를 발생시킨다.키워드 검색, ..

✨ this를 명시적으로 바인딩 = 함수가 실행될 때 this가 참조하는 객체를 명확하게 지정하는 것 this 값을 제어하거나 함수의 실행 방식을 조정함수의 실행 컨텍스트를 유연하게 변경하고 제어 📌 call(): 함수에 인자를 개별적으로 풀어서 전달함수.call(thisArg, arg1, arg2, ...);함수를 호출할 때 this 값을 설정하고, 그 이후에 이어지는 인수들을 개별적으로 전달함수 즉시 호출 주로 상속이나 메서드 호출 시 유용  function greet(greeting, punctuation) { console.log(greeting + ", " + this.name + punctuation);}const person = { name: "Alice" };greet.call(pe..

📌 scrollIntoViewelement.scrollIntoView(alignToTop, {scrollIntoViewOptions}); : 호출 된 요소가 화면에 보이도록 스크롤   ⏩ alignToTop: boolean 값true: 요소의 상단으로 스크롤`scrollIntoViewOptions: {block: "start", inline: "nearest"}`와 일치기본 값false: 요소의 하단으로 스크롤`scrollIntoViewOptions: {block: "end", inline: "nearest"}`와 일치  ⏩ scrollIntoViewOptions: 속성을 포함하는 객체behavior: 애니메이션 적용 "auto": 스크롤이 계산된 값에 의해 결정"smooth": 부드럽게 애니메이션을 ..

📌 className : 요소의 클래 값을 읽거나 쓸 수 있는 프로퍼티 클래스 이름을 문자열로 직접 조작 기존 클래스 이름을 새 문자열로 덮어쓰기 가능  클래스 전체를 문자열 형태로 반환 클래스 전체를 관리 // HTMLHello, world!Change Class Namefunction changeClassName() { const element = document.getElementById('myElement'); element.className = 'new-class another-class'; // 기존 클래스가 모두 제거되고 새로운 클래스만 적용}  📌 classList : 요소의 클래스를 조작하는데 사용 요소의 클래스 목록에 접근 클래스 리스트를 배열처럼 다룰 수 있다..