JavaScript82 React 기본 개념 1. JSX (JavaScript XML)JSX는 JavaScript에서 HTML을 작성할 수 있는 문법.React에서 UI를 선언적으로 표현할 때 사용.1️⃣ JSX 기본 문법JSX는 HTML과 유사하지만, JavaScript 표현식을 {} 안에 포함할 수 있습니다.const name = "희성";const element = Hello, {name}!;ReactDOM.render(element, document.getElementById("root"));HTML과 차이점class → className 사용onclick → onClick (camelCase로 작성)JavaScript 코드 사용 시 {} 중괄호로 감싸야 함2️⃣ JSX에서 속성 사용하기className (HTML의 class 대신 사용)c.. 2025. 3. 21. React 프로그래밍을 위한 javascript 기본 ES6+ 문법 let과 constES6에서는 var 대신 블록 스코프를 가지는 let과 불변 변수인 const가 추가됨.let x = 10;x = 20; // 가능const y = 30;y = 40; // 에러 (const는 재할당 불가능)let → 재할당 가능const → 재할당 불가능화살표 함수 (()=>{})ES6에서 함수 선언을 간결하게 표현하는 방법.// 일반 함수 표현식function add(a, b) { return a + b;}// 화살표 함수const add = (a, b) => a + b;console.log(add(2, 3)); // 5특징return을 생략 가능 (한 줄 코드일 때)this가 기존 함수와 다르게 동작 (lexical this)const obj = { value.. 2025. 3. 21. Zod vs zod-validator Zod vs zod-validatorZod와 zod-validator는 모두 TypeScript에서 데이터 검증을 수행하는 라이브러리이다.주요 차이점:Zod → 런타임 데이터 검증 및 TypeScript 타입 안전성 보장zod-validator → Zod 기반의 추가적인 확장 기능 제공 (Express 미들웨어 지원 등)1️⃣ Zod란?Zod는 TypeScript에서 데이터 검증을 위한 가장 널리 사용되는 라이브러리 중 하나런타임에서 JSON, API 응답, Form 데이터 등을 검증TypeScript의 타입 시스템과 잘 통합되어 정적 + 동적 타입 안전성을 제공기본 사용법import { z } from "zod";const UserSchema = z.object({ name: z.string().mi.. 2025. 3. 19. Zod Zod 기본 개념 (TypeScript에서 스키마 기반 데이터 검증)Zod란?Zod는 TypeScript에서 스키마 기반 데이터 검증을 수행하는 라이브러리이다.TypeScript의 타입 시스템은 컴파일 단계에서만 타입을 체크하지만, Zod는 런타임에서도 데이터를 안전하게 검증할 수 있도록 도와준다.TypeScript 타입만 사용한 경우 (런타임에서 오류 검출 불가)type User = { name: string; age: number;};const data = JSON.parse('{"name": "Alice"}'); // `age` 없음const user: User = data; // ❌ 컴파일 시 문제 없음 (하지만 실행 시 오류 가능)console.log(user.age.toFixed(2)); .. 2025. 3. 19. 모듈과 네임스페이스, 프로젝트 설정 및 최적화 모듈과 네임스페이스 (Modules & Namespaces)TypeScript에서 **모듈(Modules)**과 **네임스페이스(Namespaces)**는 코드를 모듈화하고 관리하는 방법이다.모듈은 ES6 표준을 따르며, 네임스페이스는 내부적인 코드 조직화를 위한 기능으로 사용된다.1️⃣ import와 export 사용법TypeScript에서 모듈을 사용하면 코드를 여러 파일로 나누어 관리할 수 있으며,import와 export 키워드를 사용하여 모듈 간의 의존성을 연결할 수 있다.기본적인 export와 importmath.ts (모듈 파일)export function add(x: number, y: number): number { return x + y;}export function subtract(.. 2025. 3. 19. 객체 지향 프로그래밍 (OOP) in TypeScript 객체 지향 프로그래밍 (OOP) in TypeScriptTypeScript는 **객체 지향 프로그래밍(Object-Oriented Programming, OOP)**을 지원하며,클래스(Class), 상속(Inheritance), 접근 제한자(Access Modifiers), 정적(static) 속성 및 메서드 등의 기능을 제공한다.1️⃣ 클래스 (Class)TypeScript에서 클래스는 객체를 생성하는 청사진 역할을 한다.ES6의 클래스 문법을 기반으로 하며, 추가적인 타입 안정성을 제공한다.class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age .. 2025. 3. 19. 함수와 고급 타입 시스템 함수와 고급 타입 시스템 (Functions & Advanced Type System)TypeScript에서 **함수(Functions)**는 매개변수와 반환 타입을 명확하게 정의하여 코드의 안정성과 가독성을 높일 수 있다.1️⃣ 함수 타입 정의 (Function Types)함수의 매개변수와 반환값의 타입을 명시할 수 있다.TypeScript는 반환 타입을 추론할 수 있지만, 명시적으로 지정하는 것이 권장된다.기본적인 함수 타입 정의function add(x: number, y: number): number { return x + y;}console.log(add(5, 3)); // 8x와 y는 number 타입을 받으며, 반환 값도 number로 지정되었다.화살표 함수 타입 정의 ((x: number.. 2025. 3. 19. TypeScript의 타입 시스템 TypeScript의 타입 시스템 기본 타입 (Primitive Types)① string (문자열)let message: string = "Hello, TypeScript!";let username: string = 'John Doe';let greeting: string = `Welcome, ${username}!`;② number (숫자)TypeScript의 숫자 타입은 정수(int), 실수(float), 16진수(hex), 2진수(binary), 8진수(octal) 등을 모두 포함한다.let age: number = 25;let pi: number = 3.14;let hex: number = 0xff; // 16진수let binary: number = 0b1010; // 2진수let octal: .. 2025. 3. 19. TypeScript 기본 개념 1. TypeScript 기본 개념**TypeScript(TS)**는 Microsoft에서 개발한 JavaScript의 슈퍼셋(Superset)으로, 정적 타입 시스템을 제공하는 언어이다.즉, JavaScript의 기능을 모두 포함하면서도 타입을 명시적으로 지정할 수 있어 코드의 안정성을 높이고 유지보수를 쉽게 만든다.TypeScript를 사용하는 이유:정적 타입 검사 (Static Type Checking)코드 작성 단계에서 타입 오류를 잡아줌 → 런타임 에러 감소자동 완성 및 코드 가이드 (IntelliSense 지원)타입 정보를 기반으로 IDE(예: VS Code)에서 코드 자동 완성 기능 제공가독성 및 유지보수성 향상명확한 타입 명시로 협업 및 리팩토링이 용이함최신 JavaScript 기능 지원E.. 2025. 3. 19. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
