나디아 성장 일기

📌 리액트 컴포넌트 순수성 리액트 컴포넌트는 순수해야 한다순수 함수와 부수 효과의 분리해야 한다. (= 계산과 액션 분리)컴포넌트 내부에 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..

05. 반응 속도 테스트반응 속도 테스트 github  반응 속도 테스트 📌화면 UI 클래스: 대기 화면, 준비 화면, 측정 화면 등 다양한 클래스 준비 후 변경텍스트 변경: 상황에 따라 텍스트 내용 변경타이머: 랜덤하게 화면 UI를 변경 구현리액트 공부 때문에 스타일링에 신경을 많이 쓰지 못했다.setTimeout()과 Math 메서드들이 낯설었는데 이번에 써보면서 꽤 익숙해진 것 같다.   프로젝트 목표 및 달성✊UI ✅ 여러 클래스 준비 후 상황마다 클래스 변경하기자바스크립트 ✅ 타이머 API 사용하기 ✅ 템플릿 리터럴하기 ✅ 랜덤 숫자 사용하기    순서도💻

📌 React 설치 ✅ CDN 방식  ✅ ESM 방식import React from 'https://esm.sh/react';import ReactDOM from 'https://esm.sh/react-dom';  📌 React && Vite 설치확장자Web 표준에서는 확장자 필수(.js, .jsx 등)Vite는 확장자 필요 X 📍 Vite 오토 스캐폴딩pnpm create vite@버전 pnpm create vite@latest --template react- 타입 스크립트를 사용하는 템플릿을 해당 폴더에 만드는 명령어pnpm create vite@latest (learning-react) -t reat-ts   ✨ 배포할 땐 배포용 모듈을, 개발할 땐 개발용 모듈을 사용해야 함    ✨ reac..

📌 React 컴포넌트 : 사용자 인터페이스(UI)를 구성하는 부품 재사용 매커니즘(클래스 또는 함수)를 사용하여 리액트 요소를 반환하는 것 컴포넌트 명웹 컴포넌트: 케밥 케이스(kebab-case) 리액트 컴포넌트: 파스칼 케이스(CamelCase)    ✅ 컴포넌트 속성(Props) : 컴포넌트에 전달되는 입력값 props는 항상 객체, 읽기 전용컴포넌트를 다양하게 재사용 할 수 있게 한다. 컴포넌트에 전달된 속성에 따라 마크업을 동적으로 생성 가능 함수형 컴포넌트 props props를 매개변수와 인자로 받음function Greeting(props) { return Hello, {props.name}!;}  클래스형 컴포넌트 props props를 this로 접근class NumberList ..

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

Rocks!   - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/noscript" data-og-image="https://scrap.kakaocdn.net/dn/bojftm..

📌 React : React 애플리케이션을 정의하고 구성하는 데 필요한 주요 기능과 API를 제공 React  컴포넌트 정의 React 의 핵심 기능(상태 관리, 생명주기 메서드 및 Context API) 제공 JSX와 컴포넌트의 선언 처리    📌 React DOM : React 애플리케이션을 실제 DOM에 렌더링하는 데 필요한 기능을 제공 브라우저의 DOM과 상호작용을 담당 DOM에 변경 사항을 적용      ✅ React.createElement() : React 요소 생성 createElement(type, props, ...children)- type: 생성할 요소의 타입(HTML 태그 이름, 컴포넌트 등)- props: 요소에 대한 속성(properties) - children: 요소의..

📌 DOM(실제 문서 객체 모델) : HTML 코드를 웹 브라우저가 해석해서 생성한 객체 모델 🟰 HTML markup 상속되는 조상이 많아서 복잡하다. 👉 유지보수 비용 많이 듬// 부모(상위) 요소const figureElement = document.createElement('figure');// 자식(하위) 요소const figcaptionElement = document.createElement('figcaption');// 요소 간 관계 형성figureElement.append(figcaptionElement);// figure 객체의 children에 figcation이 생김console.dir(figureElement); // figure 객체// 렌더링const actualDomEl..