Daily log

Javascript : 「5」건

  1. Theme: {theme}
    2026.02.26
  2. TypeScript 타입 조합/확장 문법 정리
    2025.06.22
  3. Js & Ts & React 문법 1
    2025.06.12
  4. Javascript - 구조분해 할당 (Destructuring Assignment)
    2025.06.01
  5. React - 이벤트 핸들링(Event Handling)
    2025.06.01

Theme: {theme}

React Context API와 Redux는 React 애플리케이션에서 상태 관리를 위한 두 가지 주요 방법입니다. 이 글에서는 Context API와 Redux의 특징을 비교 분석하고, 어떤 상황에서 어떤 방법을 선택하는 것이 효율적인지 알아봅니다.왜 상태 관리가 필요할까?React 애플리케이션은 컴포넌트 기반으로 구축되는데, 컴포넌트 간에 데이터를 효율적으로 공유하고 관리하는 것이 중요합니다. 특히 규모가 큰 애플리케이션에서는 여러 컴포넌트가 동일한 데이터에 접근하고 수정해야 하는 경우가 많습니다. 이때 상태 관리가 제대로 이루어지지 않으면, 데이터 흐름이 복잡해지고 예측 불가능해져 애플리케이션의 유지보수가 어려워집니다.① Props Drilling 문제React에서 기본적으로 데이터를 전달하는 방..
개발/React 2026. 2. 26. 09:40

TypeScript 타입 조합/확장 문법 정리

1. & (Intersection, 교차 타입)여러 타입을 합쳐서 모든 속성을 가지는 새 타입을 만든다.중복되는 속성이 있다면, 마지막에 선언된 타입 기준으로 덮어쓴다.type A = { id: number; name: string }type B = { name: string; age: number }type AB = A & B// AB는 { id: number; name: string; age: number }가 된다.2. | (Union, 유니언 타입)여러 타입 중 하나를 가질 수 있다.if/else나 switch 문, 타입 가드로 분기 처리 가능type Status = "loading" | "success" | "error"function printStatus(s: Status) { // s는 세..
개발/Typescript 2025. 6. 22. 00:54

Js & Ts & React 문법

JavaScript / TypeScript / React 문법 정리 (기초 + 심화)📌 JavaScript 문법 정리1. 변수 선언 방식// var: 함수 레벨 스코프, 중복 선언 가능, 호이스팅됨 (초기화는 undefined)var x = 1;// let: 블록 레벨 스코프, 중복 선언 불가, 호이스팅됨 (초기화 전 참조 불가)let y = 2;// const: 블록 레벨 스코프, 재할당 불가, 상수 값 정의에 사용const z = 3;2. 화살표 함수 (Arrow Function)// 인자가 2개일 때const add = (a, b) => a + b; // return 생략 가능// 인자가 1개일 때 괄호 생략 가능const square = x => x * x;// 인자가 없을 때는 괄호 필수con..
개발/Javscript 2025. 6. 12. 23:12

Javascript - 구조분해 할당 (Destructuring Assignment)

구조분해 할당은 JavaScript의 ES6 문법 중 하나로, 객체나 배열의 값을 변수에 손쉽게 추출할 수 있도록 도와주는 문법이다.1. 배열 구조분해배열의 각 요소를 변수로 쉽게 꺼낼 수 있다.const arr = [1, 2, 3];const [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3사용 시 주의: 배열 순서가 중요하다.기본값 지정const [x, y = 100] = [10];console.log(x); // 10console.log(y); // 100 (undefined를 기본값으로 대체)2. 객체 구조분해객체의 프로퍼티를 변수에 바로 할당할 수 있다.const user = { name: "John", ag..
개발/Javscript 2025. 6. 1. 17:50

React - 이벤트 핸들링(Event Handling)

Event Handling→ 이벤트가 발생했을 때 그것을 처리하는 것→ 버튼 클릭시 경고창 노출과 같은 동작const Button = ({ children, text, color = "black" }) => { // 이벤트 객체 e const onCLickButton = (e) => { console.log(e); //SyntheticBaseEvent: 합성 이벤트 객체 console.log(text); }; return ( {text} - {color.toUpperCase()} {children} );};export default Button; SyntheticBaseEvent → 합성 이벤트 객체→ 크롬, 사파리, 웨일 등 서로 다른 브라우저의 규격..
개발/React 2025. 6. 1. 08:48
◀ 1 ▶

티스토리툴바