🔥 소개

TailwindCSS 스타일의 색상 시스템은 직관적이고 확장성이 뛰어나 React Native에도 잘 어울립니다.
이번 글에서는 blue_100, gray_900처럼 단계별 색상 정의, 다크모드 대응, alpha 값 추가, 그리고 자동완성 가능한 타입 정의까지 한 번에 구성하는 방법을 소개합니다.

📁 폴더 구조

먼저, 색상 관련 파일을 모아둘 theme 디렉토리를 만들어 아래처럼 구성합니다.

src/
└── theme/
    ├── colors.ts              # Tailwind 색상 팔레트
    ├── darkColors.ts          # 다크모드 색상
    ├── alphaColor.ts          # alpha 유틸
    ├── theme.ts               # 라이트/다크 테마 설정
    ├── useThemeColor.ts       # 현재 테마 기준 색상 반환
    ├── tailwindColors.d.ts    # 타입 정의 (자동완성 지원)
    └── index.ts               # export 모음

🎨 Tailwind 색상 정의

colors.ts에서 Tailwind 스타일로 색상을 정의합니다. 아래는 일부 예시이며, 필요에 따라 추가할 수 있습니다.

const colors = {
  blue: {
    100: '#DBEAFE',
    500: '#3B82F6',
    900: '#1E3A8A',
  },
  gray: {
    100: '#F3F4F6',
    500: '#6B7280',
    900: '#111827',
  },
  red: {
    100: '#FEE2E2',
    500: '#EF4444',
    900: '#7F1D1D',
  },
  // 추가 색상: green, yellow, indigo, etc...
}

export default colors

🌙 다크모드 색상 정의

다크모드에서는 gray 계열을 반전시켜 사용하면 좋습니다.

const darkColors = {
  ...colors,
  gray: {
    100: '#18181B',
    500: '#71717A',
    900: '#F4F4F5',
  },
  background: '#0f172a',
  foreground: '#f8fafc',
}

export default darkColors

💧 Alpha 값 유틸 함수

투명도를 추가하고 싶다면 아래처럼 alpha를 붙여주는 유틸을 만듭니다.

export function withAlpha(hex: string, alpha: number): string {
  const bounded = Math.max(0, Math.min(1, alpha))
  const alphaHex = Math.round(bounded * 255).toString(16).padStart(2, '0')
  return hex + alphaHex
}

🧠 현재 테마 기반 색상 가져오기

React Native의 useColorScheme() 훅을 활용해 현재 테마에 맞는 색상을 가져옵니다.

export function useThemeColor(color: 'blue' | 'gray', shade: 100 | 500 | 900) {
  const theme = useColorScheme() === 'dark' ? 'dark' : 'light'
  return themes[theme].colors[color][shade]
}

🧾 타입 선언으로 자동완성 지원

타입스크립트를 쓰는 경우, 색상 이름과 단계 타입을 미리 정의해두면 IDE 자동완성과 에러 방지에 큰 도움이 됩니다.

export type TailwindColorName =
  | 'gray' | 'blue' | 'green' | 'red' | 'yellow' | 'indigo' | 'purple'

export type TailwindColorShade = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

✅ 사용 예시

const bgColor = useThemeColor('blue', 100)
const textColor = useThemeColor('gray', 900)
const transparent = withAlpha(bgColor, 0.5)

return (
  <View style={{ backgroundColor: transparent, padding: 16 }}>
    <Text style={{ color: textColor }}>Tailwind 스타일 색상 예제</Text>
  </View>
)

🏁 마무리

Tailwind 스타일 색상 시스템을 React Native에 도입하면 코드 일관성, 유지보수성, 확장성이 모두 향상됩니다.
이번 구성은 디자인 시스템의 기반이 되므로 프로젝트 초기부터 도입해보세요!

✍️ 본문

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

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 붙이자!"
그게 깔끔하고, 나중에 에러도 줄여줘요. 😊

안드로이드 앱을 개발할 때, 삼성 갤럭시 기기에서 직접 테스트해보는 것은 매우 중요합니다. 다행히 안드로이드 스튜디오에서는 삼성에서 제공하는 갤럭시 에뮬레이터 스킨을 추가해 실제 기기와 유사한 테스트 환경을 구성할 수 있습니다. 이번 글에서는 각 단계별로 캡처 이미지를 함께 보며 갤럭시 에뮬레이터를 설정하는 방법을 안내드리겠습니다.

1️⃣ 삼성 개발자 사이트에서 스킨 다운로드

• Samsung Developers - Galaxy Emulator Skin 페이지로 이동합니다.
• 원하는 기종(예: Galaxy S25, Galaxy Z Flip 등)의 에뮬레이터 스킨을 선택하여 다운로드합니다. - 가입 필요

2️⃣ 압축 해제 및 스킨 폴더 복사

• 다운로드한 .zip 파일의 압축을 해제합니다.
• 해제된 폴더 전체를 Android SDK 디렉토리 내 skins 폴더에 복사합니다.
  • Windows: C:\Users\사용자명\AppData\Local\Android\Sdk\skins
  • macOS: /Users/사용자명/Library/Android/sdk/skins
• 저는 편의를 위해 Documents 폴더에 압축을 해제하여 사용했습니다.

3️⃣ Android Studio에서 가상 디바이스 생성

• Android Studio를 실행한 후 Projects > More Actions > Virtual Device Manager로 이동합니다.
• 상단의 Create Device (+버튼) 을 클릭합니다.
• 원하는 디바이스 (예: Phone > Pixel 5)를 선택하거나 New Hardware Profile을 통해 새 디바이스를 생성합니다.

4️⃣ 스킨 설정 적용하기

• Device Name 을 입력합니다.
• 스킨에 맞는 Screen Size를 입력합니다.
  • https://developer.samsung.com/galaxy-emulator-skin/galaxy-s.html

5️⃣ 시스템 이미지 선택 및 AVD 생성 완료

• 원하는 Android API 버전의 시스템 이미지를 선택하고 다운로드합니다.
• 이름과 설정을 확인한 후 Finish를 클릭해 AVD를 생성합니다.

6️⃣ 에뮬레이터 실행 및 확인

• 생성한 갤럭시 에뮬레이터 옆의 ▶ 아이콘을 클릭하여 실행합니다.
• 실제 갤럭시 디바이스처럼 UI 프레임이 보이며 실행되는 것을 확인할 수 있습니다.

🏁 마무리

이제 Android Studio에서도 삼성 갤럭시 디바이스와 유사한 환경에서 앱을 테스트할 수 있게 되었습니다. 특히 국내 사용자 비중이 높은 갤럭시 스마트폰을 기준으로 테스트하면 더 안정적인 품질 확보가 가능하겠죠.

이 과정을 잘 따라오셨다면, 갤럭시 에뮬레이터를 여러 기종으로 추가해가며 다양한 해상도 및 성능 조건도 함께 점검해 보세요! 🚀

[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[] 배열의 최소값과 최대값을 효과적으로 찾을 수 있습니다! 🚀

🖼️ WebP를 PNG로 변환하는 간단한 파이썬 코드

WebP 파일을 PNG로 변환할 일이 생겨서 급하게 파이썬 코드로 작성했다. 간단한 코드지만 필요할 때 유용할 것 같아 공유한다.

🔍 WebP와 PNG란?

✅ WebP란?

WebP는 Google이 개발한 차세대 이미지 포맷으로, 높은 압축률과 우수한 품질이 특징이다. JPG, PNG보다 파일 크기가 작아 웹사이트 로딩 속도를 개선하는 데 유용하다. 하지만 일부 프로그램에서 지원이 제한적이라 PNG 변환이 필요할 때가 있다.

✅ PNG란?

PNG(Portable Network Graphics)는 무손실 압축을 지원하는 이미지 포맷으로, 배경 투명도를 유지할 수 있어 디자인 작업이나 웹 개발에서 자주 사용된다. 다만, JPG나 WebP보다 파일 크기가 크다는 단점이 있다.

🛠️ WebP를 PNG로 변환하는 파이썬 코드

Python의 Pillow 라이브러리를 사용하면 간단하게 WebP 이미지를 PNG로 변환할 수 있다.

✨ 단일 파일 변환

from PIL import Image
import os

def convert_webp_to_png(input_path, output_path=None):
    """
    WebP 파일을 PNG로 변환하는 함수
    
    :param input_path: 변환할 .webp 파일 경로
    :param output_path: 저장할 .png 파일 경로 (기본값: 원본 파일명 유지)
    """
    if output_path is None:
        output_path = os.path.splitext(input_path)[0] + ".png"

    with Image.open(input_path) as img:
        img.save(output_path, "PNG")
    
    print(f"변환 완료: {input_path} -> {output_path}")

# 예제 실행
convert_webp_to_png("example.webp")

위 코드를 실행하면 example.webp가 example.png로 변환된다.

📂 여러 개의 WebP 파일 변환

만약 한 폴더 안의 모든 WebP 파일을 변환하고 싶다면 아래 코드를 실행하면 된다.

import glob

# 현재 폴더의 모든 .webp 파일을 .png로 변환
for webp_file in glob.glob("*.webp"):
    convert_webp_to_png(webp_file)

🏆 마무리

이제 WebP 파일을 쉽게 PNG로 변환할 수 있다. WebP의 압축률은 좋지만, PNG처럼 모든 프로그램에서 지원되는 건 아니라 필요할 때마다 변환해서 사용하면 좋을 듯하다!