수달씨의 개발공간

✍️ 본문

👋 이런 코드 본 적 있으세요?

import { type User } from './types';

처음 보면 이런 생각 들죠.

"User는 타입인 거 뻔히 아는데... 굳이 type을 붙여야 하나요?"

저도 처음엔 안 붙여도 되는 줄 알았어요.
그런데 알고 보니, 붙이는 게 더 안전하고 좋은 습관이더라고요.

✅ 일단 User는 타입이에요

예를 들어 이런 타입이 있다고 해볼게요:

// types.ts
export type User = {
  name: string;
  age: number;
};

그럼 우리가 사용할 때는 보통 이렇게 쓰죠.

import { User } from './types';

const me: User = { name: '홍길동', age: 30 };

이거... 아무 문제 없어 보여요. 실제로도 잘 돌아가고요.

❗ 근데 왜 type을 붙일까요?

import { type User } from './types';

이렇게 쓰면 "나는 User를 타입으로만 쓸 거야!" 라고 명확하게 알려주는 거예요.

이게 왜 중요하냐면…

⚠️ 안 붙이면 생길 수 있는 문제

1. 불필요한 코드가 앱에 들어가요
   → 타입인데도 실제 JS 코드에 포함돼서 번들(최종 파일)이 커져요.
2. 런타임 에러가 날 수 있어요
   → 어떤 환경(특히 React Native)에서는 User가 실제 JS 값인 줄 알고 실행 중에 에러가 나기도 해요.

✅ 그래서 이렇게 구분하면 좋아요

상황 어떻게 import?

💡 결론

• type을 꼭 붙여야 하는 건 아니에요
• 하지만 붙이면 더 안전하고, 번들 크기도 줄고, 코드도 명확해져요!
• 특히 React Native나 Vite 같은 환경에서는 실행 중 오류를 막는 데 도움이 돼요

📌 기억할 것 하나!

"타입만 쓸 거면 type 붙이자!"
그게 깔끔하고, 나중에 에러도 줄여줘요. 😊

[TypeScript] 문자열을 배열로 변환하고 다시 문자열로 합치기 - split() & join() 활용

📌 문자열을 배열로 변환하고 다시 합치는 이유

TypeScript와 JavaScript에서는 문자열을 배열로 변환하거나, 배열을 다시 문자열로 합치는 작업이 매우 중요합니다.

• 텍스트 데이터 처리: 문장을 단어별로 나누거나 재구성할 때 유용함
• 공백 제거 및 정규화: 불필요한 공백을 제거하고 데이터 정리 가능
• 알고리즘 최적화: 문자열을 효율적으로 변환하고 다룰 수 있음

이 글에서는 split()과 join()을 활용한 문자열 변환 방법을 정리합니다. 🚀

✅ 1️⃣ split() - 문자열을 배열로 변환

📌 기본 사용법

split() 메서드는 특정 구분자를 기준으로 문자열을 나누어 배열로 변환합니다.

const sentence = "The quick brown fox";
const words = sentence.split(" ");
console.log(words); // ["The", "quick", "brown", "fox"]

✅ 공백(" ")을 기준으로 단어를 나누어 배열로 변환

📌 특정 문자 기준으로 나누기

const csv = "apple,banana,grape,orange";
const fruits = csv.split(",");
console.log(fruits); // ["apple", "banana", "grape", "orange"]

✅ 콤마(,)를 기준으로 문자열을 분리

📌 모든 문자 단위로 나누기

const text = "hello";
const letters = text.split("");
console.log(letters); // ["h", "e", "l", "l", "o"]

✅ 빈 문자열("")을 기준으로 나누면 모든 문자가 배열의 요소로 저장됨

📌 연속된 공백 처리 (split(/\s+/))

const messySentence = "  The   quick brown    fox ";
const cleanedWords = messySentence.trim().split(/\s+/);
console.log(cleanedWords); // ["The", "quick", "brown", "fox"]

✅ 정규식 /\s+/를 사용하면 연속된 공백을 하나로 압축 가능!

✅ 2️⃣ join() - 배열을 문자열로 변환

📌 기본 사용법

join() 메서드는 배열의 요소를 특정 구분자로 연결하여 하나의 문자열로 변환합니다.

const wordsArray = ["The", "quick", "brown", "fox"];
console.log(wordsArray.join(" ")); // "The quick brown fox"

✅ 공백(" ")을 사용하여 단어들을 하나의 문장으로 합침

📌 특정 구분자 사용하기

const fruitsArray = ["apple", "banana", "grape", "orange"];
console.log(fruitsArray.join(", ")); // "apple, banana, grape, orange"

✅ 콤마와 공백(", ")을 사용하여 문자열을 조합

📌 구분자 없이 연결하기

const lettersArray = ["h", "e", "l", "l", "o"];
console.log(lettersArray.join("")); // "hello"

✅ 빈 문자열("")을 사용하면 모든 요소가 연결됨

✅ 3️⃣ split()과 join()을 함께 사용하기

📌 불필요한 공백 제거 및 문자열 정리

const original = "  The   quick brown    fox ";
const cleaned = original.trim().split(/\s+/).join(" ");
console.log(cleaned); // "The quick brown fox"

✅ 공백을 정리하여 깔끔한 문장으로 변환 가능

📌 문자열을 배열로 변환 후 순서 변경하여 다시 합치기

const sentence = "The quick brown fox";
const reversedWords = sentence.split(" ").reverse().join(" ");
console.log(reversedWords); // "fox brown quick The"

✅ 문장을 단어 단위로 분할 후 뒤집어서 다시 조합 가능

📌 최종 정리

메서드 역할 예제

💡 이제 split()과 join()을 활용하여 문자열을 더욱 효과적으로 변환할 수 있어요! 🚀

#TypeScript #JavaScript #split #join #문자열처리

[TypeScript] 배열 조작 - unshift(), push(), pop() 활용 및 문자열 최적화

📌 배열 조작이 중요한 이유

JavaScript와 TypeScript에서 배열(Array)은 데이터를 저장하고 조작하는 가장 기본적인 자료구조입니다. 배열을 효과적으로 다루는 방법을 익히면 문자열 최적화, 데이터 처리 속도 개선 등 다양한 이점을 얻을 수 있습니다.

이 글에서는 unshift(), push(), pop()을 활용한 배열 조작과 문자열 최적화 방법을 정리합니다. 🚀

✅ 1️⃣ push() - 배열의 끝에 요소 추가

배열의 마지막에 새로운 요소를 추가하는 가장 일반적인 방법입니다.

const words: string[] = [];
words.push("Hello");
words.push("World");
console.log(words); // ["Hello", "World"]

✅ 새로운 요소를 배열의 끝에 추가할 때 유용

📌 여러 개의 요소 추가 가능

words.push("TypeScript", "is", "great");
console.log(words); // ["Hello", "World", "TypeScript", "is", "great"]

✅ 한 번에 여러 개의 요소를 추가 가능

✅ 2️⃣ pop() - 배열의 마지막 요소 제거

배열의 마지막 요소를 제거하고, 제거된 값을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
const lastNumber = numbers.pop();
console.log(numbers); // [1, 2, 3, 4]
console.log(lastNumber); // 5

✅ 마지막 요소를 제거하면서 해당 요소를 반환

📌 빈 배열에서 pop() 실행 시

const emptyArray: number[] = [];
console.log(emptyArray.pop()); // undefined

✅ 배열이 비어있으면 undefined 반환

✅ 3️⃣ unshift() - 배열의 앞쪽에 요소 추가

배열의 맨 앞에 새로운 요소를 삽입할 때 사용됩니다.

const queue: string[] = ["Second", "Third"];
queue.unshift("First");
console.log(queue); // ["First", "Second", "Third"]

✅ 배열 앞부분에 요소를 추가할 때 유용

📌 여러 개의 요소 추가 가능

queue.unshift("Zero", "Start");
console.log(queue); // ["Zero", "Start", "First", "Second", "Third"]

✅ 여러 개의 요소를 한 번에 추가 가능

✅ 4️⃣ 배열을 활용한 문자열 최적화

문자열 조작 과정에서 배열을 활용하면 성능이 크게 향상됩니다.

🚀 기존 방식 (문자열 직접 수정 - 비효율적)

let result = "";
const words = ["quick", "brown", "fox"];
for (const word of words) {
  result = word + " " + result;
}
console.log(result.trim()); // "fox brown quick"

✅ 매 반복마다 새로운 문자열을 생성하므로 O(N^2)의 성능 문제가 발생할 수 있음.

🚀 배열을 활용한 최적화된 방식

const wordsArray: string[] = [];
const sentence = "The quick brown fox";
sentence.split(" ").forEach(word => wordsArray.unshift(word));
console.log(wordsArray.join(" ")); // "fox brown quick The"

✅ 배열을 활용하면 O(N)의 성능을 유지하면서 문자열 조작 가능!

📌 최종 정리

메서드 역할 예제

💡 이제 배열을 다룰 때 더 효과적으로 조작할 수 있어요! 🚀

#TypeScript #JavaScript #배열조작 #push #unshift

[TypeScript] 문자열 다루기 - trim(), split(), join(), reverse() 활용

📌 문자열 조작이 중요한 이유

JavaScript와 TypeScript에서 **문자열 조작(String Manipulation)**은 데이터 처리에서 필수적인 기능입니다. 특히 알고리즘 문제를 풀거나, 텍스트 데이터를 변환할 때 유용하게 사용됩니다.

이 글에서는 trim(), split(), join(), reverse() 메서드를 활용하여 문자열을 효과적으로 처리하는 방법을 정리합니다. 🚀

✅ 1️⃣ trim() - 문자열 앞뒤 공백 제거

📌 기본 사용법

const str = "   Hello World!   ";
console.log(str.trim()); // 출력: "Hello World!"

✅ trim()은 문자열 앞뒤 공백을 제거할 때 사용합니다.

📌 trimStart()와 trimEnd()

• trimStart() → 문자열의 앞 공백만 제거
• trimEnd() → 문자열의 뒤 공백만 제거

console.log(str.trimStart()); // "Hello World!   "
console.log(str.trimEnd());   // "   Hello World!"

✅ 필요에 따라 앞뒤 공백만 제거할 수도 있음

✅ 2️⃣ split() - 문자열을 배열로 변환

📌 기본 사용법

const sentence = "The quick brown fox";
const words = sentence.split(" ");
console.log(words); // 출력: ["The", "quick", "brown", "fox"]

✅ split(delimiter)을 사용하면 특정 구분자로 문자열을 나눠 배열로 변환할 수 있음

📌 공백이 여러 개일 때 (split(/\s+/))

const messy = "  The   quick brown    fox ";
const cleanWords = messy.trim().split(/\s+/);
console.log(cleanWords); // ["The", "quick", "brown", "fox"]

✅ 정규식 /\s+/를 활용하면 연속된 공백을 하나로 줄일 수 있음!

✅ 3️⃣ join() - 배열을 문자열로 변환

📌 기본 사용법

const wordsArray = ["The", "quick", "brown", "fox"];
console.log(wordsArray.join(" ")); // "The quick brown fox"

✅ 배열을 join(delimiter)로 다시 문자열로 변환 가능

📌 split()과 join()을 함께 사용하기

const original = "  The   quick brown    fox ";
const cleaned = original.trim().split(/\s+/).join(" ");
console.log(cleaned); // "The quick brown fox"

✅ 불필요한 공백 제거 + 문자열 변환을 한 번에 수행 가능!

✅ 4️⃣ reverse() - 문자열을 뒤집기

📌 배열을 활용한 문자열 뒤집기

const text = "hello";
const reversed = text.split("").reverse().join("");
console.log(reversed); // "olleh"

✅ 문자열을 배열로 변환 후 뒤집은 뒤 다시 문자열로 변환 가능

📌 단어 순서 뒤집기

const sentence = "The quick brown fox";
const reversedWords = sentence.split(" ").reverse().join(" ");
console.log(reversedWords); // "fox brown quick The"

✅ 단어 순서를 뒤집어야 할 때 유용!

📌 최종 정리

메서드 역할 예제

💡 이제 문자열을 다룰 때 더 효과적으로 조작할 수 있어요! 🚀

[JavaScript & TypeScript] Record, Map, Array 순서대로 순회하는 방법

📌 Record, Map, Array란?

JavaScript와 TypeScript에서 데이터를 저장하는 주요 구조로 Record, Map, Array가 있습니다. 이들은 각기 다른 방식으로 데이터를 저장하고 순서에 대한 규칙이 다릅니다. 따라서 데이터 순서를 보장하면서 반복(iterate)하는 방법을 이해하는 것이 중요합니다. 🚀

✅ 1️⃣ Record 순회하기

📌 Record란?

Record<K, V>는 객체(Object)와 동일한 방식으로 동작하는 키-값 저장 구조입니다.

const record: Record<string, number> = {
  A: 1,
  B: 2,
  C: 3,
};

객체는 기본적으로 삽입 순서를 유지하지만 보장되지는 않습니다. 따라서 정렬이 필요한 경우 명시적으로 처리해야 합니다.

📌 for...in을 사용한 반복문

for (const key in record) {
  console.log(`Key: ${key}, Value: ${record[key]}`);
}

✅ 객체의 키를 순회할 수 있지만, 순서는 보장되지 않을 수 있음

📌 Object.keys()를 이용한 순회

Object.keys(record).forEach((key) => {
  console.log(`Key: ${key}, Value: ${record[key]}`);
});

✅ 배열로 변환 후 순회하면 명확한 순서를 보장 가능

📌 Object.entries()를 이용한 키-값 순회 (추천)

for (const [key, value] of Object.entries(record)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

✅ 키와 값을 동시에 다루기에 가장 효율적!

📌 Object.values()를 이용한 값만 순회

Object.values(record).forEach((value) => {
  console.log(`Value: ${value}`);
});

✅ 값만 필요할 경우 간결하게 순회 가능

✅ 2️⃣ Map 순회하기

📌 Map이란?

Map<K, V>은 삽입 순서를 유지하는 키-값 저장 구조입니다.

const map = new Map<string, number>([
  ["A", 1],
  ["B", 2],
  ["C", 3],
]);

✅ 객체(Record)와 달리, Map은 삽입된 순서를 보장함

📌 for...of을 사용한 순회 (추천)

for (const [key, value] of map) {
  console.log(`Key: ${key}, Value: ${value}`);
}

✅ 키-값을 한 번에 처리 가능하며, 순서를 보장함

📌 map.forEach()를 이용한 순회

map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

✅ 키와 값을 동시에 다룰 때 유용

📌 map.keys(), map.values(), map.entries() 활용

console.log([...map.keys()]);    // 출력: ['A', 'B', 'C']
console.log([...map.values()]);  // 출력: [1, 2, 3]
console.log([...map.entries()]); // 출력: [['A', 1], ['B', 2], ['C', 3]]

✅ 배열 변환을 통해 순서를 유지하면서 조작 가능

✅ 3️⃣ Array 순회하기

📌 Array란?

배열(Array)은 순서를 보장하는 데이터 구조입니다.

const array = [1, 2, 3, 4, 5];

✅ 항상 삽입된 순서대로 요소가 저장됨

📌 for...of을 이용한 순회 (추천)

for (const value of array) {
  console.log(`Value: ${value}`);
}

✅ 배열의 요소를 순서대로 처리 가능

📌 forEach()를 이용한 순회

array.forEach((value) => {
  console.log(`Value: ${value}`);
});

✅ 콜백 함수를 활용하여 반복 가능

📌 map()을 이용한 순회 및 변환

const doubled = array.map((num) => num * 2);
console.log(doubled); // 출력: [2, 4, 6, 8, 10]

✅ 배열을 변환하면서 순회할 때 유용

📌 최종 정리

자료구조 순서 유지 여부 추천 순회 방식

✅ 순서를 보장하려면 Map 또는 Array를 사용하는 것이 가장 안전함! 🚀

[JavaScript & TypeScript] Math.max()와 slice() 완벽 정리

📌 JavaScript & TypeScript에서 Math.max()와 slice() 활용하기

JavaScript와 TypeScript에서 배열의 최대값을 찾는 Math.max()와 배열을 자르는 slice()는 자주 사용되는 핵심 메서드입니다. 이 글에서는 각 메서드의 동작 방식과 최적의 활용법을 정리합니다. 🚀

✅ 1️⃣ Math.max() - 배열의 최대값 찾기

📌 기본 사용법

Math.max()는 주어진 숫자 중 가장 큰 값을 반환합니다.

console.log(Math.max(1, 5, 3, 7)); // 출력: 7

📌 배열에서 최대값 찾기 (Spread Operator 활용)

배열을 전달하려면 Spread Operator(...)를 사용해야 합니다.

const numbers = [3, 7, 2, 8, 5];
const maxVal = Math.max(...numbers);
console.log(maxVal); // 출력: 8

✅ 장점:

• 직관적이고 코드가 간결함
• 작은 배열에서는 효과적

❌ 단점:

• 배열 크기가 클 경우 스택 오버플로우 위험 (Math.max(...largeArray))

📌 reduce()를 활용한 최대값 찾기 (안전한 방법)

큰 배열에서는 reduce()를 사용하면 안정적입니다.

const maxVal = numbers.reduce((max, num) => Math.max(max, num), -Infinity);
console.log(maxVal); // 출력: 8

✅ 대량 데이터에서도 안전하게 실행 가능! 🚀

✅ 2️⃣ slice() - 배열 일부 잘라내기

📌 기본 사용법

slice(start, end)는 start부터 end-1까지의 요소를 복사하여 새로운 배열을 생성합니다.

const arr = [0, 1, 2, 3, 4, 5];
console.log(arr.slice(1, 4)); // 출력: [1, 2, 3]

📌 slice()의 특징

메서드 원본 배열 변경 여부 반환 값

✅ 즉, slice()는 원본 배열을 유지하며 부분 배열을 만들 때 사용

📌 slice()를 활용한 배열 복사

const original = [1, 2, 3, 4];
const copy = original.slice();
console.log(copy); // 출력: [1, 2, 3, 4]

✅ 배열을 변경하지 않고 복사할 때 slice() 사용 가능!

📌 Math.max()와 slice()를 함께 활용한 예제

🚀 LeetCode 문제 해결 (배열 내 최댓값 찾기)

const arr = [3, 7, 1, 9, 4, 2];
const maxInSubarray = Math.max(...arr.slice(1, 5));
console.log(maxInSubarray); // 출력: 9 (1~4번 인덱스에서 최댓값)

✅ 배열의 특정 부분에서 최대값을 찾을 때 Math.max(...slice()) 조합 활용 가능!

📌 최종 정리

🚀 Math.max() 요약

• 단일 값의 최대값 찾기: Math.max(a, b, c, ...)
• 배열의 최대값 찾기 (Spread Operator 사용): Math.max(...arr)
• 대량 데이터 처리 시 안전한 방법: arr.reduce((max, num) => Math.max(max, num), -Infinity)

🚀 slice() 요약

• 배열 일부 가져오기: arr.slice(start, end) → end는 포함되지 않음
• 배열 복사: arr.slice()
• splice()와 다름 (원본 배열 변경 X)

✅ 이제 Math.max()와 slice()를 활용하여 더 효율적인 코드 작성이 가능! 🚀

[TypeScript] 배열에서 최소값(Min)과 최대값(Max) 구하는 방법

📌 TypeScript에서 배열의 최소값과 최대값 구하는 방법

TypeScript에서 number[] 배열의 최소값과 최대값을 구하는 여러 가지 방법이 있습니다. 🚀

✅ 1️⃣ Math.min() 및 Math.max() 사용 (Spread Operator 활용)

가장 간단한 방법은 Math.min()과 Math.max()를 Spread Operator (...) 와 함께 사용하는 것입니다.

const nums: number[] = [5, 2, 8, 1, 3];
const minVal = Math.min(...nums);
const maxVal = Math.max(...nums);
console.log(minVal, maxVal); // 출력: 1 8

✅ 장점:

• 코드가 짧고 직관적
• 작은 배열에서는 매우 효과적

❌ 단점:

• 배열 크기가 매우 클 경우 Math.min(...nums)는 스택 오버플로우가 발생할 수 있음

✅ 2️⃣ reduce() 함수 사용 (최적화 가능)

reduce()를 사용하면 배열을 한 번만 순회(O(N))하면서 최소값과 최대값을 찾을 수 있습니다.

const nums: number[] = [5, 2, 8, 1, 3];
const minVal = nums.reduce((min, curr) => Math.min(min, curr), Infinity);
const maxVal = nums.reduce((max, curr) => Math.max(max, curr), -Infinity);
console.log(minVal, maxVal); // 출력: 1 8

✅ 장점:

• 대량의 데이터에서도 안전하게 작동 (스택 오버플로우 위험 없음)
• reduce()는 배열이 비어 있어도 기본값(Infinity, -Infinity)을 설정 가능

❌ 단점:

• 코드가 Math.min(...nums)보다 약간 더 길어짐

✅ 3️⃣ for 루프 사용 (가장 빠름, O(N))

반복문을 사용하여 최소값과 최대값을 직접 비교하면서 구하는 것이 가장 효율적입니다.

const nums: number[] = [5, 2, 8, 1, 3];
let minVal = Infinity;
let maxVal = -Infinity;

for (const num of nums) {
  if (num < minVal) minVal = num;
  if (num > maxVal) maxVal = num;
}

console.log(minVal, maxVal); // 출력: 1 8

✅ 장점:

• 대량 데이터에서도 가장 효율적 (O(N))
• Math.min()이나 reduce()보다 성능이 뛰어남

❌ 단점:

• Math.min(...nums)보다 코드가 약간 더 길어질 수 있음

✅ 4️⃣ sort() 사용 (비효율적, O(N log N))

배열을 정렬한 후 첫 번째와 마지막 요소를 선택하는 방법도 있지만, 비효율적이므로 추천하지 않습니다.

const nums: number[] = [5, 2, 8, 1, 3];
const sorted = nums.sort((a, b) => a - b);
const minVal = sorted[0];
const maxVal = sorted[sorted.length - 1];
console.log(minVal, maxVal); // 출력: 1 8

❌ 단점:

• 정렬 과정에서 불필요한 연산(O(N log N)) 발생
• 단순히 최소/최대값을 찾는 데에는 비효율적

✅ 대신 정렬이 필요한 상황이라면 유용할 수 있음

📌 최적의 방법 선택 가이드

방법 코드 시간 복잡도 특징

✅ 배열이 작다면 Math.min(...nums), 크다면 reduce() 또는 for 루프를 추천! 🚀

📌 최종 정리

• 배열의 최소값: Math.min(...nums), reduce(), for 루프 중 선택
• 배열의 최대값: Math.max(...nums), reduce(), for 루프 중 선택
• 대량 데이터에서는 for 루프가 가장 빠름
• 정렬(sort())은 비효율적이므로 사용하지 않는 것이 좋음

💡 이제 TypeScript에서 number[] 배열의 최소값과 최대값을 효과적으로 찾을 수 있습니다! 🚀

[JavaScript/TypeScript] -0과 0의 차이와 처리 방법

📌 -0과 0의 차이점

JavaScript와 TypeScript에서는 -0과 0이 다르게 인식될 수 있습니다.

🚀 -0이 발생하는 경우

console.log(1 / Infinity);  // 0
console.log(1 / -Infinity); // -0
console.log(-0 === 0); // true

✅ -0과 0은 === 비교에서는 동일하지만, 내부적으로 다르게 저장됩니다.

📌 Object.is()를 사용하면 구분 가능

console.log(Object.is(-0, 0));  // false (-0과 0은 다름)
console.log(Object.is(-0, -0)); // true

✅ Object.is()를 사용하면 -0과 0을 구별할 수 있습니다.

📌 -0을 0으로 변환하는 방법

1️⃣ 삼항 연산자 사용 (val === 0 ? 0 : val)

const normalizeZero = (val: number) => (val === 0 ? 0 : val);
console.log(normalizeZero(-0)); // 0

✅ -0을 0으로 변환하는 가장 간단한 방법입니다.

2️⃣ Math.abs() 활용

console.log(Math.abs(-0)); // 0
console.log(Math.abs(0));  // 0

✅ Math.abs()를 사용하면 자동으로 -0이 0으로 변환됩니다.

3️⃣ Object.is()를 활용한 정확한 변환

const fixNegativeZero = (val: number) => (Object.is(val, -0) ? 0 : val);
console.log(fixNegativeZero(-0)); // 0
console.log(fixNegativeZero(5));  // 5

✅ Object.is()를 사용하면 -0만 정확히 감지하여 변환할 수 있습니다.

📌 -0을 고려해야 하는 경우

• 배열에서 -0 제거

const arr = [0, -0, 1, 2];
const normalizedArr = arr.map(fixNegativeZero);
console.log(normalizedArr); // [0, 0, 1, 2]

✅ map()을 사용하여 -0을 0으로 변환할 수 있습니다.

• JSON 변환 시 -0 유지 문제

console.log(JSON.stringify([-0, 0])); // "[0,0]" (-0이 자동으로 0으로 변환됨)

✅ JSON.stringify()는 -0을 0으로 자동 변환합니다.

📌 결론

• -0과 0은 === 비교에서는 같지만, Object.is()로 구별할 수 있음.
• Math.abs(), Object.is(), 삼항 연산자를 사용하여 -0을 0으로 변환 가능.
• JSON.stringify()는 -0을 자동으로 0으로 변환함.

✅ 이제 -0을 다루는 법을 확실히 이해했나요? 🚀

[TypeScript] Map 사용법 정리 - 키-값 기반 데이터 관리

📌 TypeScript Map이란?

Map은 키(Key)와 값(Value) 쌍을 저장할 수 있는 데이터 구조입니다. TypeScript에서 Map은 ES6 Map을 기반으로 하며, 빠른 검색, 추가, 삭제가 가능합니다.

📌 1. Map 생성 및 기본 사용법

const myMap = new Map<string, number>();
myMap.set("apple", 10);
myMap.set("banana", 20);
myMap.set("orange", 30);

console.log(myMap);
// Map { 'apple' => 10, 'banana' => 20, 'orange' => 30 }
console.log(myMap.size); // 3

✅ 키-값 쌍을 저장 가능
✅ size 속성으로 요소 개수 확인 가능

📌 2. 요소 추가 (set()) & 조회 (get())

const map = new Map<string, number>();
map.set("apple", 5);
map.set("banana", 10);
console.log(map.get("apple")); // 5
console.log(map.get("banana")); // 10
console.log(map.get("grape")); // undefined (없는 키)

✅ set()을 사용하여 키-값 쌍을 저장
✅ get(key)를 사용하여 값 조회 가능

📌 3. 요소 존재 여부 (has())

console.log(map.has("apple")); // true
console.log(map.has("grape")); // false

✅ has()를 사용해 특정 키가 존재하는지 확인 가능

📌 4. 요소 삭제 (delete()) & 전체 삭제 (clear())

map.delete("banana");
console.log(map); // Map { 'apple' => 5 }
map.clear();
console.log(map); // Map {}

✅ delete(key)를 사용해 특정 키 삭제
✅ clear()를 사용하면 모든 요소 삭제

📌 5. Map 순회 (forEach(), for...of)

const map = new Map([
  ["apple", 5],
  ["banana", 10],
  ["orange", 15]
]);

map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// apple: 5
// banana: 10
// orange: 15

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

✅ forEach()와 for...of를 이용해 Map을 순회 가능

📌 6. Map → Array 변환

const entries = Array.from(map.entries());
console.log(entries);
// [ [ 'apple', 5 ], [ 'banana', 10 ], [ 'orange', 15 ] ]

const keys = Array.from(map.keys());
console.log(keys); // [ 'apple', 'banana', 'orange' ]

const values = Array.from(map.values());
console.log(values); // [ 5, 10, 15 ]

✅ 키 또는 값을 배열로 변환 가능

📌 7. Object → Map 변환

const obj = { apple: 5, banana: 10, orange: 15 };
const map = new Map(Object.entries(obj));
console.log(map);
// Map { 'apple' => 5, 'banana' => 10, 'orange' => 15 }

✅ 객체를 Map으로 변환 가능

📌 8. Map → Object 변환

const map = new Map([
  ["apple", 5],
  ["banana", 10],
  ["orange", 15]
]);

const obj = Object.fromEntries(map);
console.log(obj);
// { apple: 5, banana: 10, orange: 15 }

✅ Map을 객체로 변환 가능

📌 9. Map과 Object 비교

기능 Map Object

✅ 대량 데이터를 저장하고 빠르게 검색하려면 Map이 유리
✅ 일반적인 객체 데이터 저장은 Object 사용이 적합

📌 정리

• Map은 키-값 쌍을 저장하는 효율적인 데이터 구조
• 모든 데이터 타입을 키로 사용할 수 있음
• 객체보다 빠른 검색 및 데이터 관리가 가능
• 배열과 쉽게 변환 가능하며 순회 및 조작이 유연함

✅ 이제 Map을 자유롭게 활용할 수 있겠지? 🚀
추가 질문이 있으면 알려줘! 😊

[TypeScript] Set 사용법 정리 - 중복 없는 데이터 관리

📌 TypeScript Set이란?

Set은 중복을 허용하지 않는 고유한 값들의 집합을 저장하는 자료구조입니다.
TypeScript에서 Set은 ES6 Set과 동일하게 동작하며, 유일한 값 저장, 빠른 검색 및 삭제에 적합합니다.

📌 1. Set 생성 및 기본 사용법

const mySet = new Set<number>(); // 숫자형 Set 생성
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(2); // 중복 추가 → 무시됨

console.log(mySet); // Set { 1, 2, 3 }
console.log(mySet.size); // 3

✅ 중복된 값은 자동으로 제거됨
✅ size 속성을 사용해 요소 개수 확인 가능

📌 2. 요소 추가 (add())

const set = new Set<string>();
set.add("apple");
set.add("banana");
set.add("apple"); // 중복 → 추가되지 않음

console.log(set); // Set { 'apple', 'banana' }

📌 3. 요소 삭제 (delete())

const set = new Set([1, 2, 3]);
console.log(set.delete(2)); // true (성공적으로 삭제됨)
console.log(set.delete(5)); // false (존재하지 않는 값)
console.log(set); // Set { 1, 3 }

✅ delete()는 삭제 여부를 true / false로 반환

📌 4. 요소 확인 (has())

const set = new Set([10, 20, 30]);
console.log(set.has(20)); // true
console.log(set.has(40)); // false

✅ has()를 사용하면 특정 요소가 존재하는지 빠르게 확인 가능

📌 5. 모든 요소 삭제 (clear())

const set = new Set(["A", "B", "C"]);
set.clear();
console.log(set.size); // 0

✅ clear()를 호출하면 Set의 모든 요소가 삭제됨

📌 6. Set 순회 (forEach(), for...of)

const set = new Set(["A", "B", "C"]);

set.forEach((value) => {
  console.log(value);
});
// 출력: A B C

for (const value of set) {
  console.log(value);
}
// 출력: A B C

✅ forEach()와 for...of를 이용해 Set을 순회 가능

📌 7. Set → Array 변환 (Array.from(), 스프레드 연산자)

const set = new Set([1, 2, 3, 4]);
const arr1 = Array.from(set);
const arr2 = [...set];

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

✅ 배열로 변환하면 인덱스를 활용한 접근이 가능함

📌 8. Array → Set 변환 (new Set())

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueSet = new Set(arr);

console.log(uniqueSet); // Set { 1, 2, 3, 4, 5 }

✅ 배열에서 중복 요소를 제거할 때 유용함

📌 9. Set을 활용한 유니크 배열 생성

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

✅ Set을 사용하면 간단하게 중복 제거 가능

📌 10. Set과 Map 비교

기능 Set Map

📌 Set 사용 시 주의점

1. 인덱스가 없기 때문에 특정 위치 요소를 직접 접근할 수 없음.

   const set = new Set([10, 20, 30]);
   console.log(set[1]); // undefined
   

2. 객체를 Set에 추가할 경우 참조(Reference) 비교가 적용됨.

   const obj1 = { id: 1 };
   const obj2 = { id: 1 };
   const set = new Set();
   
   set.add(obj1);
   set.add(obj2);
   
   console.log(set.size); // 2 (객체가 다르다고 인식됨)
   

📌 정리

• Set은 중복을 허용하지 않는 고유한 값의 집합을 저장하는 자료구조.
• 빠른 삽입/삭제 (O(1)) 가능하지만, 인덱스 접근은 불가능.
• Array.from(set) 또는 [...set]을 활용하여 배열로 변환 가능.
• 배열의 중복을 제거하는 용도로 유용.
• 특정 요소가 존재하는지 확인하려면 has() 사용.

✅ 이제 Set을 자유롭게 사용할 수 있겠지? 🚀 추가 질문이 있으면 알려줘! 😊