import 세이노라이프

수학 공식이나 머신러닝 관련 수식을 티스토리 블로그에 작성해보신 분들이라면 이런 경험 있으실 거예요:

d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}

분명 LaTeX 문법으로 썼는데, 그대로 텍스트로 보이기만 한다고요?

그 이유는 티스토리는 기본적으로 수학 공식(LaTeX)을 렌더링하는 기능이 없기 때문입니다.
하지만 걱정 마세요! 아주 간단한 설정만 해주면 수학 공식을 예쁘게 수식 형태로 표시할 수 있습니다.
이번 글에서는 KaTeX을 활용한 설정 방법과 사용 예시까지 알려드릴게요.

✅ KaTeX란?

KaTeX는 LaTeX 문법으로 작성된 수학 공식을 웹에서 빠르게 렌더링해주는 라이브러리입니다.
MathJax보다 가볍고 빠르기 때문에 블로그나 기술 문서에 매우 적합합니다.

🔧 티스토리에 KaTeX 설정하는 방법

1단계. 티스토리 관리자 페이지 접속

[티스토리 관리 > 꾸미기 > HTML/CSS 편집] 메뉴로 이동합니다.

2단계. </head> 태그 바로 위에 아래 코드를 추가

<!-- KaTeX for LaTeX math rendering -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body, {
          delimiters: [
            {left: '$$', right: '$$', display: true},
            {left: '$', right: '$', display: false}
          ]
        });">
</script>

💡 이 스크립트는 $...$ 또는 $$...$$로 감싼 수식을 자동으로 감지하고 렌더링해줍니다.

✍️ 수식 입력 예시

▶ 인라인 수식 (본문 중간에 넣는 방식)

$E = mc^2$

결과:
👉 E = mc²

▶ 디스플레이 수식 (가운데 정렬되는 블록 형태)

$$
d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}
$$

결과:

👉

d(x,y)=∑i=1n(xi−yi)2d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}d(x,y)=i=1∑n​(xi​−yi​)2​

📌 주의사항

• 미리보기에서는 수식이 제대로 보이지 않을 수 있습니다.
  → 실제 블로그 포스트로 발행 후 확인하세요.
• 티스토리 에디터에서는 HTML/텍스트 모드를 사용하는 것이 안전합니다.
• 글에 수식이 많은 경우 페이지 로딩이 살짝 느려질 수 있으니 중요한 수식만 표시하는 것도 팁!

✅ 마무리 요약

🔗 참고 링크

데이터를 자동으로 분류할 수 있는 클러스터링 알고리즘 중 가장 널리 사용되는 K-means Clustering!
이번 포스트에서는 이론적인 배경부터, 저사양 CPU에서도 무리 없이 돌릴 수 있는 실습 코드까지 깔끔하게 정리해볼게요.

목차

1. K-means Clustering이란?
2. 작동 원리 (알고리즘 흐름)
3. 수학적 개념 정리
4. 장점과 단점
5. 실행 가능한 예제 코드 (CPU 저사양 OK!)
6. 마무리 요약

1.  K-means Clustering 이란?

K-means는 데이터를 **K개의 클러스터(군집)**로 나누는 대표적인 비지도 학습(Unsupervised Learning) 알고리즘입니다.
각 클러스터는 중심점(centroid)을 가지며, 데이터는 가장 가까운 중심점에 소속됩니다.

📌 예를 들어, 고객을 3개의 소비 성향 그룹으로 나누고 싶을 때 사용할 수 있어요.

2.  작동 원리

K-means는 아래 4단계를 반복하며 군집을 형성합니다.

1. 초기 중심점 설정 (보통 랜덤 또는 K-means++ 방식)
2. 데이터 포인트를 가장 가까운 중심점에 할당
3. 각 클러스터의 평균으로 중심점 업데이트
4. 중심점 변화가 없으면 종료 (또는 max 반복 횟수까지)

3.  수학적으로 살펴보기

 유클리드 거리

데이터 간의 거리는 보통 **유클리드 거리(Euclidean Distance)**로 계산합니다:

$$d(x, y) = \sqrt{\sum_{i=1}^{n}(x_i - y_i)^2}$$​

 최적화 목표 (Objective)

K-means는 Within-Cluster Sum of Squares (WCSS) 를 최소화하는 것이 목표입니다:

$$J = \sum_{i=1}^{k} \sum_{x \in C_i} \|x - \mu_i\|^2$$

• $C_i$​: i번째 클러스터
• $\mu_i$: 클러스터 중심점

4.  장점과 단점

장점

• 구현이 매우 간단하고 빠름
• 대용량 데이터에서도 확장 가능
• 널리 사용됨

단점

• K를 미리 알아야 함
• 이상치(outlier)에 민감
• 구형(원형)이 아닌 클러스터에 부적합

5.  실습 코드: 저사양 CPU에서도 OK!

아래 코드는 scikit-learn을 이용한 간단한 2D 데이터 클러스터링 예제입니다.
저사양 환경(CPU 1코어, 1GB RAM 정도)에서도 무리 없이 실행됩니다.

필요한 라이브러리 설치

pip install numpy matplotlib scikit-learn

전체 코드

import numpy as np
import matplotlib.pyplot as plt
from sklearn.datasets import make_blobs
from sklearn.cluster import KMeans

# 1. 2D 클러스터 데이터 생성
X, y_true = make_blobs(n_samples=300, centers=3, cluster_std=0.60, random_state=0)

# 2. K-means 모델 학습
kmeans = KMeans(n_clusters=3, random_state=0, n_init='auto')
kmeans.fit(X)

# 3. 클러스터 예측 결과
y_kmeans = kmeans.predict(X)

# 4. 시각화
plt.scatter(X[:, 0], X[:, 1], c=y_kmeans, s=40, cmap='viridis')

# 중심점 시각화
centers = kmeans.cluster_centers_
plt.scatter(centers[:, 0], centers[:, 1], c='red', s=200, alpha=0.5, marker='X')
plt.title("K-means Clustering 결과")
plt.xlabel("X1")
plt.ylabel("X2")
plt.show()

결과

• 3개의 색깔로 나뉜 점들이 각각 클러스터
• 빨간 X는 각 클러스터의 중심점

마무리 요약

🔗 참고 자료

“What's my story?” & “My Parallel Universe Job” 아바타 세트 아이디어 ✨

요즘 AI 이미지 생성으로 재미있는 프로필 이미지를 만드는 게 유행이죠?
하지만 단순히 지브리 스타일이나 픽사풍 이미지 말고, 더 창의적이고 특별한 방식으로 자신을 표현할 수는 없을까요?

오늘은 **내 취미와 상상력을 담은 ‘프리미엄 아바타 수집 세트’**라는 콘셉트로, 두 가지 기발한 프롬프트를 소개합니다.
이 아이디어들은 당신만의 개성을 담은 프로필 이미지나, 블로그・SNS 아바타, 혹은 자기소개 콘텐츠로 활용하면 어떨까요!

1️⃣ “What's my story?” 아바타 세트

Create a premium wooden box-style collectible avatar display titled “What’s my story?” for a 45-year-old.
The central figure is a stylized cartoon portrait of the person in the photo, slightly smiling and full of character. The figure is surrounded by a collection of highly detailed miniature items placed in labeled compartments:

• a tiny notebook
• a retro handheld game console
• a classic robot figurine
• wireless headphones
• running shoes
• a folded bicycle
• a compact fishing rod & colorful lures
• a mug of black coffee
• a desk plant
• a miniature open laptop with code on screen

All items should look realistic but with a playful, collectible figure aesthetic (like Nendoroid or Bearbrick style).
The wooden box background should be warm and grainy, with engraved text:

Top: "What’s my story?"
Bottom: "Age: 45 | Hobbyist. Dreamer. Explorer."

The overall vibe is cozy, creative, and slightly nostalgic — perfect for a modern avatar with personality and charm.

이 프롬프트는 마치 당신의 삶을 장난감 상자에 담아낸 듯한 느낌을 줍니다.
실제 자신이 좋아하는 아이템들을 미니어처로 구성하면서, 그 자체가 자기소개가 되는 거죠.

2️⃣ “My Parallel Universe Job” 아바타 세트

Create a wooden-box style premium collectible avatar display titled "My Parallel Universe Job" for a 45-year-old.
The central figure is a stylized cartoon avatar of the person in the photo, reimagined as a “Time-Traveling Librarian” — wearing steampunk-inspired gear, with brass goggles, a book satchel, and a glowing compass.

Surround the avatar with labeled compartments, each holding magical or sci-fi themed mini items:

• An enchanted floating book
• A mini time compass
• A scroll with glowing runes
• A tiny steampunk coffee machine
• A magical plant that reacts to sound
• A pocket-sized AI assistant in a crystal orb
• Mini shelves of otherworldly books
• A holographic cat companion
• A star map

The wooden box is dark walnut with celestial engravings.

Top label: "My Parallel Universe Job"
Bottom label: "Time-Traveling Librarian | Age 45 | Keeper of Stories & Time"

The entire display should have a mystical, cozy, and geeky charm — like a collectible from a fantasy convention.

이건 정말 상상력을 자극하는 프롬프트입니다.
평행세계에서의 나의 직업을 테마로 설정해, 마치 영화 속 캐릭터처럼 나를 새롭게 재해석할 수 있죠.
'시간 여행하는 사서' 말고도 우주 요리사, 몬스터 유치원 선생님, 드림 엔지니어 등으로도 확장할 수 있어요.

🪄 마무리 팁

이 프롬프트들은 DALL·E, Midjourney, Leonardo AI 같은 이미지 생성 AI에 넣으면 꽤 괜찮은 결과물이 나옵니다.
조금만 편집해서 SNS 프로필, 명함, 웹사이트, 소개 슬라이드 등에 넣어보세요.
지브리풍도 좋지만 그와 다른 기억에 남을 캐릭터를 만들 수 있을 거라 생각합니다.

Node.js 개발에서 TypeScript를 도입할 때 가장 먼저 마주치는 고민 중 하나는 바로 이것입니다.

TypeScript를 전역으로 설치할까? 로컬로 설치할까?

이 글에서는 두 방식의 차이점, 장단점, 실제 추천 시나리오까지 한번에 정리해드립니다.

✅ 전역 설치란?

전역 설치는 시스템 전체에 TypeScript를 설치하여 어느 프로젝트 디렉토리에서도 tsc 명령어를 사용할 수 있게 하는 방식입니다. 다음과 같은 명령어로 설치합니다:

npm install -g typescript

설치 후에는 터미널 어디에서나 다음 명령이 작동합니다:

tsc --version
tsc yourfile.ts

전역 설치의 장점

• tsc 명령을 터미널 어디서든 바로 쓸 수 있다
• CLI 툴 사용 시 빠르게 실행 가능
• 전역 설정에 익숙한 개발자에게 편리

전역 설치의 단점

• 버전 충돌 가능성: 프로젝트마다 TypeScript 버전이 다를 경우 문제 발생
• 팀 협업에서 위험: 다른 개발자의 시스템에 같은 버전이 설치되어 있다고 보장할 수 없음
• CI/CD 파이프라인에서 재현 불가

✅ 로컬 설치란?

로컬 설치는 해당 프로젝트 폴더 안에 TypeScript를 설치하는 방식입니다. 보통 개발 의존성으로 추가합니다:

npm install --save-dev typescript

설치 후에는 전역 명령 대신 npx를 사용해 실행합니다:

npx tsc
npx tsc --init

로컬 설치의 장점

• 프로젝트별로 TypeScript 버전을 고정할 수 있어 안정성 확보
• 모든 팀원이 동일한 환경에서 작업 가능
• CI/CD 환경에서도 100% 재현 가능
• package.json만 보면 어떤 버전이 쓰였는지 알 수 있다

로컬 설치의 단점

• tsc를 직접 실행하려면 npx 또는 경로를 지정해야 한다
• 여러 프로젝트를 오가며 전역 설치처럼 쓰고 싶으면 약간 번거로움

🔍 어떤 상황에 어떤 설치를 써야 할까?

• 혼자 실습하거나 빠르게 테스트하는 경우
  전역 설치도 무방합니다.
• 팀 프로젝트, 버전 관리, 협업, CI/CD 구성이 필요한 경우
  반드시 로컬 설치가 권장됩니다.

요즘 대부분의 실제 프로젝트는 typescript를 로컬로 설치하고 npx tsc 또는 tsc npm script로 실행합니다.

🧙 마무리

전역 설치는 빠르고 편리하지만, 협업과 재현성을 위해서는 로컬 설치가 훨씬 안전하고 추천되는 방식입니다.

최종적으로는 다음과 같은 전략을 추천합니다:

• CLI 툴 실습이나 글로벌 테스트용 → 전역 설치
• 실제 서비스, 팀 프로젝트, 오픈소스, CI/CD → 로컬 설치 (with --save-dev)

🎯 참고 명령어 요약

# 전역 설치
npm install -g typescript

# 로컬 설치
npm install --save-dev typescript

# 로컬 실행
npx tsc

🔍 ??란?

??는 null 병합 연산자 (Nullish Coalescing Operator) 입니다.
JavaScript(ES2020)부터 도입된 문법으로, 값이 null 또는 undefined일 때 대체값(default value) 을 설정하는 데 사용됩니다.

const result = value ?? defaultValue;

📘 동작 방식

let name = null ?? "익명";       // "익명"
let age = undefined ?? 30;       // 30
let isActive = false ?? true;    // false ← 주의!
let count = 0 ?? 10;             // 0 ← 주의!

✅ false, 0, "" 는 null이 아님! → ??는 무시하고 그대로 반환

🔁 || (OR 연산자)와 차이점?

||는 falsy 값 전체를 체크

let title = "" || "기본 제목";  // "기본 제목"

??는 null / undefined 만 체크

let title = "" ?? "기본 제목";  // ""​

결론:

• ||는 많이 비우고 싶을 때
• ??는 정말 null/undefined일 때만 대체하고 싶을 때 사용하세요.

🧱 실전 예시

✅ 환경 변수 기본값 설정

const PORT = process.env.PORT ?? 3000;

→ PORT가 설정되지 않았을 때만 기본값 3000 사용

✅ 사용자 입력 처리

function getUserName(user) {
  return user.name ?? "손님";
}

→ user.name이 null 또는 undefined일 때만 "손님" 반환

✅ 객체 병합

const defaultOptions = {
  retry: 3,
  timeout: 5000
};

const userOptions = {
  timeout: null
};

const config = {
  retry: userOptions.retry ?? defaultOptions.retry,
  timeout: userOptions.timeout ?? defaultOptions.timeout
};

console.log(config); // { retry: 3, timeout: 5000 }

→ timeout: null은 무시하고 default 사용

❌ 에러 주의: 옵셔널 체이닝과 혼용 시

let username = user?.info?.name ?? "익명";

• user 또는 info가 없으면 undefined
• ??로 "익명" 설정됨 → 매우 강력한 조합

작년 11월에 구매했던 에어맥스 플러스 TN 두 모델 

리복 퓨리와 나이키 에어맥스 95, 플러스 TN 모델을 좋아해서 살때 두세켤레 사서 돌려신는 편인데

나이가 들수록 퓨리는 너무 단단한 미드솔때문에 발이 아프더라구요

에어맥스가 쿠션이 단단한듯하지만 과체중을 잘 받쳐주는 느낌이 있어 최근엔 맥스류만 신게 되네요

파리 생제르맹과 콜로보한 제품인데 텅에 있는 생제르맹 엠블럼이 맘에 안들었지만 어퍼컬러가 맘에 들어서 샀습니다

인기가 없어서인지 할인도 많이 해서 10만원 이하로 떨어졌던 것도 한몫 했습니다

정면에서 바라본 어퍼 생상과 흰색의 웨이브 패턴의 조합이 꽤 맘에 듦니다
TN 고유의 패턴입니다

측면의 색은 그라데이션 처리가 되어 있습니다

스우시는 과하지 않은 크기에 금색으로 포인트를 주었네요

에어는 앞축은 95같고 뒤축은 조금 다른 구조로 되어 있어서 아웃솔의 모양이 조금 다릅니다

설포는 고정되어 있지 않습니다. 설포 중간에 끈을 넣어 고정하는 부분도 없어서 신다보면 설포가 바깥쪽으로 심하게 돌아갑니다

나온지도 오래된 제품인데 개선점이 없이 나오는건 많이 아쉽더라고요

저만 그런걸까요?

두번째 모델은 화이트 블랙 볼트 색상 입니다. 에어 내부가 형광색이여서 선택했는데요

스우시도 형광색으로 깔맞춤 되어 있습니다.

생제르맹은 앞에서 뒤로 그라데이션인데 이모델은 위에서 아래로 그라데이션 처리가 되어 있습니다

중간쯤 보면 플라스틱이 있는데 중족부 지지대로 발의 뒤틀림을 방지해 준다고 하네요

발등 부분은 흰색으로 되어 있습니다
설포에 나이키 에어 앰블럼이 들어가 있는데 생제르맹과의 또 다른 차이점 이네요 

플러스 TN제품의 어퍼는 거의 직물인 경우가 많은 생제르맹 제품과 이 제품의 직물이 좀 촘촘하고 단단한 느낌이 있습니다

이게 내구성이 좋을지는 신어봐야 알겠지만 예전에 신었어 맥스 270과 최근까지 신고 있는 유니버시티 레드 색의 TN의 뱀프는 찢어지는 문제가 있었습니다

현재 신고 있는 TN인데 걸을때 접히는 부분의 바깥쪽이 찢어지고 있네요

예전부터 느끼지만 나이키 제품이 은근히 내구성이 약한거 같습니다  

그리고 뒤축이 찢어지는 이슈

지하철에서 종종 밟히다 보니 찢어지는건데 TN이나 95나 둘다 그러네요

착화감은 꽤 괜찮은 편입니다

95는 발을 아늑하게 꽉 잡아주는 느낌이라면 TN은 부드럽게 감싸는 느낌이랄까요

사이즈는 반업이 적당했습니다

제가 느끼는 맥스 플러스 TN은 요즘 나오는 운동화들보다 무겁고 단단한 미드솔의 느낌이 있지만 반발력과 지지력이 나쁘지 않아 일상화로 괜찮지 않나 생각합니다

5~6개월 전인가 한창 리뷰가 나오던 다이소 아크릴 마커펜을 한달 전에 구매하게 되었네요.

동네 매장에는 품절이었고 다이소 공식몰에서 품절이라고 했는데 방문 수령으로 하니 강남 본점에 소량 재고가 있더라고요.

재고가 있는데 온라인 주문은 안되고 방문 수령만 되는건 왜 일까요?

아무튼 두개 주문해서 받아왔는데 최근에 다른 매장에 가보니 재입고 되었는지 재고량이 여유있어 보였습니다.

3천원에 무려 12가지 색이 들어있습니다.

건담 도색을 하지 않으면 사실상 그리 와닿지 않을거 같은 말이죠

저는 가조립위주로 건프라를 즐기는 사람이라 이 제품이 이슈가 됐을때도 감흥이 없었는데요

붓도색을 시도해보고 마커펜도 사볼까란 생각이 들어 건프라 마커펜을 찾아보니 다이소 제품이 왜 인기가 있는지 알겠더라고요.

펜의 아래와 손가락 파지하는 부분의 색이 표현되어 있어 추측을 할 수는 있지만 12가지 색이 어떤색인지는 써있지가 않네요.

이것은 건담마커 어드밴스드 세트인데요 무려 19,500원 입니다. 최저가로 찾아보면 더 저렴한 제품들이 있겠지만 저는 하비팩토리를 애용하기에 딱히 찾아보진 않았네요.

3000원 vs 19,500원 

가격만 보면 다이소 제품이 정말 말도 안되는 가격에 나왔다는걸 알 수 있습니다.

건담 마커펜은 펜촉을 눌러서 아크릴 도료가 나오면 도색하는 형태이고 다이소 제품은 일반 펜처럼 바로 사용 할 수가 있습니다.

펜촉의 형태도 확연히 다르게 생겼습니다.

위에는 다이소 마커 아래는 건담 마커를 사용해서 종이에 선을 그어서 비교해보았습니다.

다이소 마커펜도 옆으로 많이 눕히면 넓게 도색이 될거 같긴하지만 그래도 넓은면 도색은 마커펜이 조금 더 좋을 듯 하네요.

다이소 마커펜을 이용해서 도색을 해보았습니다. 

어두운 회색으로 갑옷의 일부분을 칠해봤는데 발림성이 굉장히 좋았습니다.

발색도 맘에 들었습니다.

표면서페이서를 바르거나 사포로 문지르지 않아도 색 표현력이 충분히 좋았습니다.

물론 저는 도색에 진심이 아니다 보니 그럴수도 있겠지만 재미삼아 사용하기엔 충분하지 않나 싶네요. 

기존에 스티커가 붙어있던걸 떼어내고 칠해보았습니다.

면적이 조금 더 넓어지니 덧칠의 필요성이 눈에 보이네요.

마른 뒤 덧칠을 해주었습니다. 면적이 넓으면 최소 한번은 덧칠을 해주어야 할거 같습니다.

전체가 빨간색으로 되어 있는 병사 로봇을 칠해 보았습니다.

역시 넓은 면적에는 부분적으로 도색이 미흡한게 눈에 띄네요.

그리고 펜축이 굵다 보니 원치않는 위치에 색칠이 되는 문제가 있습니다. 

그럼에도 불구하고 건프라의 오리지널리티가 중요하지 않다면 충분히 재미있게 도색을 해볼 수 있지 않을까 생각되네요.

기본적으로 new Date()는 UTC 기준으로 동작합니다. 이를 **KST(한국 표준시, UTC+9)**로 변환하는 방법을 설명합니다.

🚀 1. Intl.DateTimeFormat 사용 (권장)

JavaScript의 Intl.DateTimeFormat API를 사용하면 타임존 변환이 간단합니다.

const date = new Date();

const kstDate = new Intl.DateTimeFormat('ko-KR', {
  timeZone: 'Asia/Seoul',  // ✅ KST 적용
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false, // ✅ 24시간제 사용
}).format(date);

console.log(`📌 KST 시간: ${kstDate}`);

💡 출력 예시:

📌 KST 시간: 2024. 02. 25. 15:30:45

✅ Intl.DateTimeFormat을 사용하는 이유

• 최신 표준 지원 (ECMAScript 국제화)
• 시간대 자동 적용
• 성능 최적화

🚀 2. toLocaleString() 사용

toLocaleString()을 사용하여 KST로 변환할 수도 있습니다.

const date = new Date();
const kstDate = date.toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' });

console.log(`📌 KST 시간: ${kstDate}`);

💡 출력 예시:

📌 KST 시간: 2024. 2. 25. 오후 3:30:45

✅ toLocaleString()은 간편하지만, 시간 형식이 다소 달라질 수 있음.

🚀 3. moment-timezone 사용 (강력한 기능 제공)

moment-timezone을 사용하면 더 다양한 포맷 지정 가능.

📌 설치

npm install moment-timezone

📌 코드 예제

const moment = require('moment-timezone');

const kstDate = moment().tz("Asia/Seoul").format("YYYY-MM-DD HH:mm:ss");

console.log(`📌 KST 시간: ${kstDate}`);

💡 출력 예시:

📌 KST 시간: 2024-02-25 15:30:45

✅ moment-timezone 사용 시 장점

• 여러 타임존 변환 가능
• 포맷 지정 가능
• Date 객체와 연동 가능

🚀 4. Date 객체에서 직접 변환 (UTC 오프셋 적용)

UTC 시간에 9시간을 추가하여 KST로 변환할 수도 있습니다.

const date = new Date();
const kstDate = new Date(date.getTime() + (9 * 60 * 60 * 1000)); // ✅ UTC+9 적용

console.log(`📌 KST 시간: ${kstDate.toISOString().replace('T', ' ').slice(0, 19)}`);

💡 출력 예시:

📌 KST 시간: 2024-02-25 15:30:45

✅ 직접 Date 객체를 변환하는 방법이지만, Intl.DateTimeFormat보다 추천하지 않음.

✅ 🎯 정리 (어떤 방법을 선택할까?)

✅ 📌 추천 방법

• 최신 프로젝트 & 표준 지원이 필요하면 → Intl.DateTimeFormat()
• 간단하게 변환하려면 → toLocaleString()
• 강력한 포맷팅이 필요하면 → moment-timezone
• UTC에서 오프셋 변환하려면 → Date + 9시간 추가