나디아 성장 일기

📌 컴포넌트 테스트  ✅ Vitest 설치 및 구성  ⏩ Vitest 패키지 설치pnpm add -D vitest   ⏩ Vitest UI 설치pnpm i -D @vitest/ui   ⏩ test, test:ui 명령 등록 package.json{ "scripts": { "test": "vitest", "test:ui" : "vitest --ui" }}   ⏩ Vitest 사용pnpm vitest   ⏩ 테스트 코드 작성 기능 js 파일과 기능.test.js 파일 생성// sum.jsexport function sum(a, b) { return a + b}// sum.test.jsimport { expect, test } from 'vitest'import { sum } from './..

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

📌 이벤트(사용자 액션) 처리하기사용자 액션(행동) → UI 업데이트   ✅ 컴포넌트 영역(순수)와 이벤트 영역(부수) ⏩ 컴포넌트 함수 영역사용자가 행동하지 않아도 진행되는 부분렌더링 시점에 함수가 실행이 되는 부분👉 순수 함수 사용⏩ 이벤트 핸들러 함수 영역사용자가 행동을 취해야 진행되는 부분사이드 이펙트(부수 효과)를 위한 최고의 위치렌더링 시점에 함수가 실행되지 않는 부분👉 사이트 이펙트(부수효과) 함수 사용  ex) 프로필 목록 컴포넌트서버에 데이터를 요청해 응답 받아 데이터를 가져와야 한다면 "부수 효과" 응답 받은 데이터를 기반으로 리스트 렌더링 하는 것은 "순수 함수"  📢 컴포넌트 함수 내부의 이벤트 핸들러 함수에서 부수효과를 다루는 이유 👉 렌더링 될 때 이벤트 핸들러 함수가 ..

📌 UI 트리 (Virtual DOM 트리): 리액트는 UI를 ➡ 트리로 모델링한다.   ✅ 렌더 트리 (Real DOM 트리)  : 컴포넌트(노드) 간의 관계 (부모 컴포넌트는 다른 컴포넌트의 자식이 될 수 있다.)Real DOM 트리 브라우저가 화면에 표시할 콘텐츠를 그리기 위해 사용하는 트리 구조 브라우저에서 DOM을 렌더링할 때 생성 컴포넌트만 캡슐화한다.👉 리액트 앱에서 처리    ✅ 모듈 의존성 트리 (Module Dependency Tree): 각 노드의 모듈을 불러와서(import) 형성하는 트리  애플리케이션의 모듈을 어떻게 결합하고 로딩할지(번들할 모듈)를 결정하는 데 사용👉 번들러(Vite, CRA)에서 처리 (리액트에서 처리 X) 코드가 빌드되거나 번들링될 때 생성불러오는 모..