전체 글 (51) 썸네일형 리스트형 자바스크립트로 객체 지향 프로그래밍 이해하기 객체 지향 프로그래밍(OOP(Object-Oriented Programming))이란?객체(Object)를 중심으로 구성된 프로그래밍 방식입니다."현실 세계의 개념을 코드로 모델링" 한다고 보면 이해가 쉬워요.예를 들어:강아지 → 이름, 종, 짖는다 → 객체자동차 → 브랜드, 속도, 달린다 → 객체OOP의 4대 핵심 개념캡슐화데이터와 동작을 하나로 묶고 외부 접근 제한private 필드, 메서드상속부모 객체의 속성과 기능을 자식이 물려받음extends 키워드다형성같은 메서드가 상황에 따라 다르게 동작메서드 오버라이딩추상화복잡한 내부 구조는 숨기고 필요한 기능만 제공클래스, 인터페이스 1. 캡슐화 (Encapsulation): 객체 내부의 데이터와 기능을 하나로 묶고, 외부에 꼭 필요한 것만 보여줍니다cl.. 클로저(Closure)와 메모리 관리 클로저란?클로저(Closure)는 내부 함수가 외부 함수의 변수에 접근할 수 있는 특성을 의미합니다. 이를 통해 외부 함수가 종료된 후에도 내부 함수가 외부 함수의 변수에 접근할 수 있습니다.function outer() { let count = 0; return function inner() { count++; console.log(count); };}const counter = outer();counter(); // 1counter(); // 2 위 코드에서 inner 함수는 outer 함수의 count 변수를 참조하고 있습니다. outer 함수가 실행되고 종료되었음에도 count 변수에 접근할 수 있는 이유가 바로 클로저 덕분입니다.메모리 관리와 클로저클로저를 사용할 때 중요.. WeakMap과 WeakSet WeakMap과 WeakSet은 일반 Map과 Set과 비슷하지만 메모리 관리 측면에서 중요한 차이가 있습니다. WeakMap은 키가 객체일 경우만 저장할 수 있으며, 가비지 컬렉션이 가능한 자료구조입니다. 객체가 더 이상 참조되지 않으면, 해당 키-값 쌍은 자동으로 삭제됩니다. 이 때문에 메모리 관리가 용이합니다.let obj = {};let weakMap = new WeakMap();weakMap.set(obj, 'some value');obj = null; // obj가 더 이상 참조되지 않음// 가비지 컬렉션에 의해 WeakMap에서 자동으로 삭제됨 WeakSet은 값이 객체일 경우만 저장할 수 있으며, WeakMap과 마찬가지로 가비지 컬렉션이 지원됩니다. 객체가 더 이상 참조되지 않으면, 해.. 자바스크립트의 런타임 구조와 비동기 처리의 기초 자바스크립트 런타임 구조와 싱글 스레드자바스크립트는 기본적으로 싱글 스레드(Single Thread) 환경에서 동작합니다. 이는 자바스크립트가 한 번에 하나의 작업만 처리하는 방식이라는 뜻입니다. 한 번에 여러 작업을 동시에 처리하지 않고, 순차적으로 처리하는 구조입니다.하지만 자바스크립트는 비동기 프로그래밍을 통해 여러 작업을 동시에 처리하는 것처럼 보이게 할 수 있습니다. 이를 위해 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue), 호이스팅(Hoisting) 등의 개념을 사용합니다. 1. 싱글 스레드(Single Thread)란?싱글 스레드는 프로그램이 한 번에 하나의 작업만 처리하는 방식입니다. 자바스크립트는 싱글 스레드 언어로 설계되어, 한 번에 하나의 작업을 순차적으로 .. data-* 속성: HTML에서 사용자 정의 데이터 다루기 1. data-* 속성 소개HTML에서 data-* 속성은 사용자 정의 데이터를 HTML 요소에 저장할 수 있는 방법을 제공합니다. 이는 HTML의 표준 속성으로, JavaScript와 연동하여 동적인 웹 애플리케이션을 개발하는 데 유용합니다. data-* 속성은 HTML에서 데이터를 보관하고, 자바스크립트를 통해 이를 쉽게 가져오고 처리할 수 있도록 도와줍니다.2. data-* 속성 기본 사용법data-* 속성은 data-로 시작하는 이름을 가진 속성을 정의합니다. 여기서 *는 개발자가 원하는 이름을 자유롭게 정할 수 있습니다. 예를 들어, data-user-id, data-product-name과 같이 다양한 형식으로 이름을 지을 수 있습니다. 사용자 정보 위 코드에서 요소는 data-user-i.. React Query를 활용한 실시간 리뷰 수 업데이트 애플리케이션에서 데이터를 비동기로 처리할 때 React Query는 매우 유용한 도구입니다. 하지만 데이터를 업데이트하거나 갱신할 때 실시간 반영이 되지 않거나 예상한 대로 작동하지 않는 경우가 종종 발생합니다. 이번 글에서는 React Query를 사용하여 상품 목록에서 리뷰 수를 실시간으로 업데이트하는 방법을 소개하겠습니다.문제 상황최근에 상품 목록 페이지를 useInfiniteQuery로 구현하고 있었습니다. 각 상품에는 리뷰 수를 보여주고 있었는데, 리뷰를 추가한 후 상품 목록의 리뷰 수가 바로 갱신되지 않는 문제가 발생했습니다. 리뷰가 추가되었음에도 불구하고 새로고침을 해야만 리뷰 수가 반영되었고, 이는 사용자 경험을 저하시켰습니다.이 문제를 해결하려면 어떻게 해야 할까요?문제 원인 분석상품 목.. TypeScript with React 1. setState가 props로 전달될 때import React, { Dispatch, SetStateAction } from 'react';type ChildProps = { setCount: Dispatch>;};function Child({ setCount }: ChildProps) { return setCount(prev => prev + 1)}>증가;} 2. useRef 타입 지정import React, { useRef } from 'react';function MyComponent() { const inputRef = useRef(null); return ;} 두 가지 방법이 있습니다 첫 번째, forwardRef를 사용하여 ref 전달하기 import React, { forwa.. 고급 TypeScript 문법 1. 제네릭 (Generics)제네릭은 함수, 클래스, 인터페이스 등을 정의할 때 구체적인 타입을 미리 정의하지 않고 나중에 실제 사용될 때 그 타입을 지정할 수 있게 해줍니다. 즉, 여러 타입에 대해 유연하게 대응할 수 있는 기능 function wrap(value: T): T[] { return [value];}const num = wrap(10); // [10] - T가 number로 추론const str = wrap("hi"); // ["hi"] - T가 string으로 추론 는 임의의 타입을 의미하며, 함수나 클래스, 인터페이스에 다양하게 사용할 수 있습니다. 2. 유틸리티 타입TypeScript는 이미 자주 쓰이는 패턴을 위한 유틸리티 타입을 기본으로 제공합니다.1) Partial객체의 .. 이전 1 2 3 4 5 6 7 다음
