분류 전체보기

🚩 IntersectionObserverhttps://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API특정 요소가 뷰포트 또는 다른 특정 요소와 교차하는지를 비동기적으로 감지할 수 있게 해준다.  기존에는 scroll 이벤트를 통해 두 요소 사이의 가시성을 감지했지만, IntersectionObserver는 관찰 대상 요소가 뷰포트에 들어오거나 나갈 때만 콜백 함수를 실행한다. 이 과정은 비동기적으로 이루어지므로, 메인 스레드의 작업을 방해하지 않고 필요한 경우에만 콜백 함수를 실행한다. 옵션 설정const options = { root: document.querySelector("#scrollArea"), rootMargin: "0p..

📌 transform-origin 속성은?transform의 기준점을 설정하는 속성이다. 기준점을 변경하면 회전, 확대/축소 등의 변환 효과가 어디를 기준으로 발생할지 결정할 수 있다.기본값은 요소의 중앙(50% 50%)이다. 이미지 출처https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin  See the Pen Untitled by presentKey (@reduaaws-the-styleful) on CodePen.

🏃‍♀️ 자바스크립트는 싱글 스레드자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드이다. 이는 한 작업을 처리하는데 시간이 오래 걸린다면 프로그램이 멈추는 blocking이 발생할 수 있다. 하지만 네트워크 요청, 타이머 등 작업이 발생했을 때, 프로그램이 멈추지 않고 다른 작업들이 실행되는 것을 볼 수 있다. 이는 setTimeout, Promise 등 Web APIs 중 비동기 작업을 자바스크립트 엔진이 아닌 브라우저가 담당하여 처리하기 때문이다. 🔥 자바스크립트 런타임 과정Call Stack: 함수 호출 시 함수 실행 컨텍스트가 콜 스택에 푸시되고 순차적 실행 된다. 실행이 완료되면 콜 스택에서 제거된다.Web APIs: setTimeout, Promise 등 비동기 작업을 콜 ..

🎁 Map1. 키-값 쌍을 저장하며, 키는 오직 단 하나만 존재한다.2. 키 값은 모든 값(객체와 원시 값)을 키로 사용할 수 있다.3. 키와 값의 삽입 순서를 기억한다. Map 기본 사용법 // Map(1) {'a' => 1} const map1 = new Map(); map1.set('a', 1); // Map(2) {'a' => 1, 'b' => 2} const map2 = new Map([ ['a', 1], ['b', 2], ]); Map과 Object의 차이점 MapObejct키 타입모든 값(객체와 원시값)문자열 또는 심볼키 순서삽입 순서 기억삽입된 순서와 다를 수 있음이터러블OX 이터러블(iterable)순회 가능한 객체를 뜻하며, for..of, 스프레드 문법, 구조분..

🛴 개선 전 애니메이션 'xxx마리' 숫자 영역 애니메이션 애니메이션 동작 방식은 css top 속성을 이용하여, 멈출 숫자의 위치로 이동합니다. css top을 이용해 요소의 위치를 변경했기 때문에, animation이 발생하는 동안 reflow가 계속 실행되는 것을 볼 수 있습니다. reflow: 브라우저 렌더링 과정 중 Layout → Paint → Composite 과정 재실행 🔧 성능 개선하기 성능 개선을 위해 reflow 대신 repaint를, repaint 대신 composite 과정만 발생되도록 하여 렌더링 비용을 줄일 수 있습니다. 요소 위치를 조정하기 위해 top 대신 transform 속성을 이용하면, 애니메이션 동작은 같지만 reflow가 발생하지 않고 composite 과정만 발생..

🔥 오류 발생 'JSX.IntrinsicElements' 인터페이스가 없으므로 JSX 요소는 암시적으로 'any' 형식입니다.ts(7026) 'react' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307) 🔧 설정 방법 1. yarn 버전 변경 (vscode 터미널 입력) yarn set version berry 2. vscode extension - ZipFs 설치 3. 에디터 SDK 설정 yarn dlx @yarnpkg/sdks vscode 명령어 입력 후, 등장하는 모달의 '허용' 버튼을 클릭하거나 ts, tsx 파일에서 ctrl + shift + p를 눌러 'TypeScript 버전 선택...' 클릭 '작업 영역 버전 사용' 클릭 4. yarn cache clean 5. yarn in..

📝 태그의 의미 브라우저는 서버가 응답한 HTML 파일을 바이트(2진수) 형태로 응답받는데, 브라우저에게 어떤 인코딩 방식을 사용할 지 알려주는 태그이다. html 문서를 지정된 인코딩 방식(UTF-8)을 기준으로 문자열 변환 UTF-8 인코딩 방식은 대부분의 문자를 표현하기에 적합하여 많이 사용되고, 다른 인코딩 방식(euc-kr 등)을 사용하면 일부 문자가 깨져보일 수 있다. 📝 인코딩 이란? 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것이다. ASCII 코드 예를 들면 문자 십진법 이진법 A 65 1000001 Z 92 1011010 a 97 1100001 z 122 1111010 문자열 세트(표)에 따라 'A' 문자를 컴퓨터가 이해할 수 있는 '1000001' 변환하고, 다시 사용자에..

📝 렌더링이란? HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 파싱(parsing, 구문 분석): 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문접적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 📝 렌더링 과정 1. 서버로부터 HTML 파일을 받는다. 2. HTML을 파싱하면서 CSS, 자바스크립트, 이미지 등 필요한 리소스를 요청. 3. DOM 트리 생성 4. CSSOM 트리 생성 5. DOM 트리와 CSSOM트리를 결합하여 Render 트리 생성 6. Layout - HTML 요소의 레이아웃(위치와 크기) 계산 7. Paint - 화면에 H..