수달씨의 개발공간

[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()를 활용하여 더 효율적인 코드 작성이 가능! 🚀

vscode에서 javascript 디버깅 방법 정리

javascript 파일이 열려 있는 상태에서 [F5] 를 누르거나 Run > Start Debugging 을 선택

Select environment 에서 원하는 브라우저 선택

launch.json 수정

기본생성

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

- url을 남겨두면 계속 url로 접속시도를 하므로 삭제

- webroot을 file로 수정

수정 후

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

debugging 방법

javascript 파일을 열고, 원하는 디버깅 위치에 [F9]를 눌러서 브레이크 포인트 생성

[F5] 또는 Run > Start debugging을 선택하여 디버깅 시작

빨간 네모의 디버그 컨트롤 창이 생성 되고 해당 브라우저의 창이 뜹니다.

브레이크 포인트에 걸리면 위와 같이 표시가 됩니다.

F5, F10, F11 등 키보드를 통해 조작하거나 디버그 컨트롤 창을 직접 클릭해서 사용하면 됩니다.