자바스크립트 엔진(V8)의 작동 원리

V8과 자바스크립트 엔진 개요 1. 자바스크립트는 어떻게 실행되는가?자바스크립트는 사람이 작성한 텍스트 코드를 브라우저 나 Node.js 내부의 자바스크립트 엔진(V8 등)이 해석하고 실행한다.자바스크립트 실행 과정은 크게 파싱 -> 컴파일 -> 실행 순으로 진행되며, 최적화도 동시에 수행된다.2. 엔진이 무엇이고 V8은 왜 유명한가?자바스크립트 엔진은 JS 코드를 실행하는 핵심 시스템이고, V8은 성능과 범용성에서 가장 뛰어난 엔진이다.엔진 : 자바스크립트 코드를 파싱, 컴파일, 실행하는 시스템V8 : 구글이 만든 JS 엔진으로, 빠른 속도, JIT 컴파일, Node.js에서 사용되면서 JS 생태계를 주도2.1. 자바스크립트 엔진의 정의자바스크립트 엔진은 JS 소스 코드를 읽고(파싱) -> 기계어로 바..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 4. 12.
• textsms

웹 성능 최적화 - 애니메이션 최적화

🎞️ 애니메이션 최적화💥 쟁크(Jank) 현상애니메이션이 부드럽지 않고 끊기는 현상 DOM 업데이트 시 Reflow가 발생함Reflow는 레이아웃 계산과 Paint 재수행을 유발이로 인해 프레임 드랍과 성능 저하 발생📐 Reflow레이아웃을 다시 계산하는 과정 처리 순서DOM + CSSOM 파싱Render Tree 생성Layout 계산 및 배치PaintComposite🎨 Repaint레이아웃 재계산 없이 화면을 다시 그리는 과정예: color, background-color 변경 등 처리 순서DOM + CSSOM 파싱Render Tree 생성Layout 계산 및 배치 (변경 없을 시 생략 가능)PaintComposite 🚀 애니메이션 성능 최적화 전략부드러운 애니메이션을 위해 Reflow/Rep..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 4. 2.
• textsms

React Testing Tutorial(9) - findBy

findByReact Testing Library에서 DOM요소를 찾을 때 많이 쓰이는 메서드 중 하나인 findBy는 비동기적으로 요소를 찾을 때 유용하다.API 호출이나, 타이머처럼 일정 시간이 지난 후에 렌더링 되는 요소를 테스트할 때 주로 사용된다.findBy는 Promise를 반환한다. 지정된 시간 내에 해당 요소를 찾으면 resolve, 그렇지 않으면 reject 된다. 사용시기데이터 패칭 이후 나타나는 요소setTimeout, setInterval 등으로 일정 시간이 지난 후 나타나는 요소상태 변경으로 인한 렌더링 결과물findBy와 getBy는 유사하지만 비동기 요소를 기다린다는 점에서 다르다.promise를 반환하기 때문에 주로 async/await와 함께 사용된다.const elemen..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 18.
• textsms

React Testing Tutorial (8) - getAllBy..., textMatch

getAllBy-이전까지 getBy-를 이용해서 한 개의 요소를 찾는 방법을 배웠다. 여러 개의 요소가 있는 상황을 테스트하는 상황도 있을 것이다. 이때 사용할 수 있는 방법으로 getAllBy-가 있다. getAllBy-는 getBy-와 비슷하지만, 여러 개의 요소를 찾을 때 사용한다.이전 글들은 1개의 요소를 찾을 때 사용했지만, 이번 글에서는 여러 개의 요소를 찾을 때 사용하는 방법을 알아보자.사용법const elements = screen.getAllByRole("textbox")expect(elements).toHaveLength(2) // textBox가 2개 있을 때주의사항getAllBy-는 요소가 없을 때 에러를 발생시킨다.getAllBy-는 요소가 1개일 때도 에러를 발생시킨다.getAl..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 11.
• textsms

React Testing Tutorial(7) - getByDisplayValue, getByAltText, getByTitle, getByTestId

getByDisplayValue()폼 요소(, 등)에 표시된 텍스트 값을 기반으로 DOM요소를 찾는 데 사용된다.주로 폼 입력 필드의 값을 확인하거나 해당 값을 가진 요소를 대상으로 테스트할 때 유용하다.사용 예시import { render, screen } from '@testing-library/react';test('input 요소에 입력된 값을 찾습니다.', () => { render(); const inputElement = screen.getByDisplayValue('테스트 값'); expect(inputElement).toBeInTheDocument();});위 코드에서 getByDisplayValue('테스트 값')은 value 속성이 '테스트 값'인 input 요소를 찾는다.get..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 8.
• textsms

React Testing Tutorial(6) - getByLabelText(), getByPlaceholderText(), getByText()

1. getByLabelText()getByLabelText 함수는 폼 요소를 테스트할 때 주로 사용되다. 요소에 연결되어 있는 폼 요소(ex: input, textarea 등)를 쉽게 찾을 수 있게 도와준다.label에 연결된 폼 요소는 보통 접근성을 위해서 사용되며, getByLabelText를 사용하면 사용자가 실제로 인터페이스와 상호작용하는 방식과 유사한 방식으로 테스트할 수 있다.사용 예시아래와 같은 폼 요소가 있을 때UsernamePassword테스트 코드를 작성 시 getByLabelText()를 이용해서 input요소를 선택할 수 있다.text('폼 요소 테스트', () =>{ render() const usernameInput = screen.getByLabelText("Use..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 1.
• textsms