나디아 성장 일기

✅ 컴포넌트 종류 Stateless Component(Presebtational Component): 표현 목적의 컴포넌트(마크업, 스타일링) Stateful Component(Container Component): 상태가 있는(변경되는) 컴포넌트   ✅ 리액트가 다루는 데이터 타입 1. 컴포넌트 속성(props): 읽기 전용 수정 ❌ 2. 컴포넌트 상태(states): 읽기 / 쓰기 컴포넌트 트리(렌더 트리 A)➡️ 화면 렌더링 컴포넌트 트리(렌더 트리 Z) ➡️ 화면 업데이트 시간의 흐름에 따라 화면 갱신(업데이트)👉 상태(state) 사용  📌 State(상태) : 컴포넌트 내부의 데이터를 기억하는 것     📌 useState : 컴포넌트에 state 변수를 추가할 수 있는 React Hoo..

📌 명령형 프로그래밍(Imperative Programming): 프로세스의 세부 동작을 직접 제어하고 관리하는 방식어떻게 수행해야 하는가(HOW you do something) - 집에 가는 길을 구구절절 설명함(먼저 버스를 타고...) 애플리케이션이 상태를 어떻게 변화시키고, UI를 어떻게 업데이트할지에 대해 직접 지시 웹 API + JavaScript 사용  예제) 체크박스 // 대상 찾기const container = document.getElementById('imperative-programming');const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement; // 타입 단언(Type Asser..

: 머리글, 줄임말title 속성을 통해 부가 설명"abbreviation(약어)"  사용 태그로 약어를 감싼다.title 속성에 약어의 의미를 명시한다.See the Pen abbr by nadia kwon (@nadia-kwon) on CodePen.   - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.m..

📌 컴포넌트 테스트  ✅ 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) 코드가 빌드되거나 번들링될 때 생성불러오는 모..

📌 리액트 컴포넌트 순수성 리액트 컴포넌트는 순수해야 한다순수 함수와 부수 효과의 분리해야 한다. (= 계산과 액션 분리)컴포넌트 내부에 Side Effects 로직이 포함되서는 안된다.    ✅ 순수 함수 (Pure function) : 입력이 동일할 경우, 결과도 동일한 함수 같은 입력이 주어졌다면, 같은 결과를 반환해야 한다. 👉 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않는다. 일정한 결과가 필요할 때 사용(마크업 렌더링 등) 부수 효과 ❌계산 (동일 입력 → 동일 출력)결과 예측 가능 ➡ 에러를 줄인다⏬function sumPure(x, y, z) { return x + y + z;}console.log(1, 2, 3); // 6console.log(1, 2, 3); /..

📌 컴포넌트 속성 타입 검사(Prop Types Validation) 컴포넌트는 정확한 마크업을 위해 외부로부터 전달받은 데이터인 속성(props)의 타입을 지정해야 한다. 1. 타입 스크립트 파일을 생성하여 타입 검사를 하나로 모아둔다.// type.d.jsimport { oneOf, arrayOf, exact, string } from 'prop-types';import { IMAGE_TYPES, statusMessages } from '../data/learn';export const StatusMessagesType = arrayOf(oneOf(statusMessages));export const ImagesType = oneOf(IMAGE_TYPES);export const ItemType =..

📌 JSX(JavaScript XML): JavaScript 파일에서 HTML과 비슷한 마크업을 작성할 수 있는 함수 JavaScript를 확장한 문법JSX는 함수⭕ (HTML ❌❌❌)웹 표준이 아니다 ❌ (브라우저에서 해석 불가)  * 템플릿 리터럴을 JSX 대신 사용하지 않는 이유템플릿 리터럴은 긴 DSL을 내장하는 데 잘 작동하지만, 내장된 ECMAScript 표현식과 식별자 범위를 사용할 때 문법적으로 혼잡하다. 📌 JSX 문법   ✅ 멀티 라인(Multi-line)  ⏩ JSX 구문은 괄호() 안에 감싸서 사용한다. function WhatIsJSX() { return ( JSX란? JSX를 사용하면 React Components 내부에서 HTM..