본문 바로가기
반응형

Frontend/Javascript Typescript
30

[Javascript] Set, Map, 배열의 차이점과 활용법 Set, Map, 배열의 차이점과 활용법JavaScript에서는 데이터를 저장하고 관리하는 다양한 방법이 있다.배열(Array), Set, Map은 각각 고유한 특성을 가지며, 상황에 따라 적절한 자료구조를 선택해야 한다.1. 배열 (Array)특징순서가 있는 데이터 구조중복 허용index(숫자)를 기반으로 요소에 접근배열 사용 예제const arr = ["apple", "banana", "cherry", "banana"]; // 중복 허용console.log(arr[1]); // "banana"배열 사용 시 장점✔ 순서가 있는 데이터 저장이 가능✔ index 기반 접근(arr[0])이 가능✔ map(), filter(), reduce() 등 강력한 배열 메서드 지원단점중복 허용 (중복을 제거하려면 Se.. 2025. 3. 19.
[Javascript] Array.from() 활용하여 배열 생성하기 Array.from()을 활용한 배열 생성 방법Array.from()은 배열과 유사한 객체(Array-like object)나 이터러블 객체(Iterable object)를 배열로 변환하거나, 특정 로직을 적용해 배열을 생성하는 유용한 메서드이다.1. 배열과 유사한 객체를 배열로 변환arguments, NodeList, Set, Map 같은 유사 배열 객체 변환function example() { console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 } const arr = Array.from(arguments); // 유사 배열 → 배열 변환 console.log(arr); // [1, 2, 3]}example(1, 2, 3);유사 배열.. 2025. 3. 19.
DOM과 DOM 조작하기 1. DOM (Document Object Model) 개념DOM(Document Object Model)은 HTML 문서를 트리 구조로 표현하여 JavaScript에서 요소를 조작할 수 있도록 하는 API이다.브라우저가 HTML을 로드하면, DOM 트리 형태로 변환하여 JavaScript에서 접근하고 수정할 수 있도록 만든다.DOM 트리 구조 예시 Hello, DOM! Welcome to DOM manipulation.이 HTML 문서는 다음과 같은 DOM 트리 구조를 가진다.document ├── │ ├── │ │ ├── DOM Example │ ├── │ ├── Hello, DOM! │ ├── Welcome to DOM manipulatio.. 2025. 3. 18.
[Javascript] 함수 선언식, 함수 표현식, 화살표 함수 비교 JavaScript 함수 선언 방식 정리1. 함수 선언식 (Function Declaration)function 키워드를 사용하여 선언하는 전통적인 방식호이스팅(hoisting)이 발생하여 선언 전에 호출 가능function sayHello() { console.log("Hello!");}sayHello(); // 호출 가능 (호이스팅 O)특징함수 선언식은 호이스팅(hoisting)이 되어, 함수 선언 전에 호출할 수 있음function 키워드를 사용하여 선언this는 함수를 호출한 객체를 가리킴전역 스코프에서 선언하면 window(브라우저 환경) 또는 global(Node.js 환경)의 속성이 됨 단점무조건 함수가 선언됨(선언과 동시에 메모리에 등록됨). 필요 없는 경우에도 메모리를 차지할 수 있.. 2025. 3. 14.
[Javascript] var를 쓰지않고 let, const써야되는 이유(스코프, 중복선언, 호이스팅) var, let, const 차이 정리1. 스코프(Scope) 차이키워드스코프종류 설명var함수 스코프 (Function Scope)함수 내부에서 선언되면 해당 함수 내에서만 접근 가능. 블록({}) 내부에서 선언해도 함수 바깥에서 접근 가능.let블록 스코프 (Block Scope){} 블록 안에서 선언되면 그 블록 내부에서만 접근 가능. 블록 바깥에서는 접근 불가.const블록 스코프 (Block Scope)let과 동일하지만, 재할당 불가.예제 (스코프 비교)function testVar() { if (true) { var x = 10; } console.log(x); // 10 (함수 내부이므로 접근 가능)}testVar();function testLet() { .. 2025. 3. 7.
[Javascript] split(), splice(), slice() 비교 split, splice, slice는 JavaScript에서 문자열과 배열을 다룰 때 자주 사용하는 메서드이다. 메서드적용 대상기능반환값원본 변경 여부split문자열문자열을 지정한 구분자를 기준으로 분할하여 배열로 반환새로운 배열원본 변경 없음splice배열배열에서 요소를 추가, 삭제, 변경하는 데 사용변경된 배열 (삭제된 요소)원본 배열 변경slice배열/문자열배열 또는 문자열의 일부를 추출하여 새로운 배열 또는 문자열을 반환새로운 배열 또는 문자열원본 변경 없음1. split (문자열에서 사용)let str = "apple,banana,orange";let arr = str.split(","); // 구분자를 기준으로 문자열을 배열로 분리console.log(arr); // ["apple", ".. 2025. 1. 15.
[Typescript] 제네릭을 사용하는 타입 정의 두 가지 타입 정의의 주요 차이는 제네릭을 사용하는지 여부와 유연성이다.1. 제네릭을 사용하는 타입 정의type ButtonProps = { href?: string; color?: string; size?: string; className?: string; children: React.ReactNode;} & ComponentPropsWithoutRef;특징(예시 설명)제네릭(T) 사용:T는 기본값으로 'button'을 가지며, ElementType(React에서 사용 가능한 HTML 태그 또는 컴포넌트 유형)을 확장.개발자가 Button을 사용할 때 T를 통해 해당 컴포넌트의 타입을 동적으로 설정할 수 있다.유연성:ButtonProps를 사용하는 컴포넌트가 또는 등 다양한 요소를 렌더링할.. 2024. 12. 11.
삼항연산자보다 더 간결하게 쓰기(논리연산자, nullish 널 병합연산자 `??`) image src에 previewImgUrl 값이있으면 previewImgUrl없으면 '/images/common/noImage.png'을반환하게 일반적으로는 삼항연사자를 사용한다.근데 previewImgUrl가 중복되니 좀 더 간결하게 쓰고싶어진다.논리연산자 ||||는 previewImgUrl이 null, undefined, false, 0, ''(빈 문자열)일 때 기본 값을 적용한다.const previewImgUrl = ''; // 빈 문자열// 실제 src: '/images/common/noImage.png'빈 문자열이 기본 값으로 대체된다.빈 문자열이 falsy하기때문에 유효한 값일때는 ??을 사용nullish coalescing 연산자 ????는 previewImgUrl이 null 또는 und.. 2024. 12. 9.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바