[200제] 05. Formating해서 출력하기

 

✅ Formating(포맷팅)이란?

데이터를 보기 좋은 형태로 정리 혹은 특정형식에 맞춰 변환하는 것을 의미

프로그래밍에서는 Formating은 주로 출력 형태를 제어 하는데 사용

예시
숫자: 1234567    ⇨  1,234,567 천 단위 구분
소수점 3.151592   ⇨  3.14 소수점 두자리로 제한
문자열 이름:Roy, 나이: 36 ⇨ 가독성 좋게 정렬

 

✅ 왜 Formating이 필요할까?

• 가독성 향상 ⇨ 로그나 디버깅 시 데이터가 깔끔하게 보임
• 정보 전달력 강화 ⇨ 사용자에게 보기 좋은 형태로 출력
• 표준화 ⇨ 통일된 형식으로 출력시 유지보수가 쉬움

✅ console.log() vs 테스트 코드

개발 시 test 코드를 작성하여 메서드 단위로 검증하는 방식을 권장

그러나 console.log()를 사용하여 눈으로 데이터를 간단히 확인 하며 개발하는 방식이 더 많음.

✅ Formating의 종류

개발과정에서 다양한 테이터를 출력할 때 포맷팅 기법을 활용하면 가독성이 높아지고 유지보수가 쉬워짐

대표적으로 6가지 포맷팅 방식이 있다.

1️⃣ 문자열 포맷팅 (String Formating)

• 문자열 안에 변수값을 넣는 방식
• 가장 많이 쓰이는 방식은 탬플릿 리터럴( ` 백틱) 

const name = "Roy";

console.log(`안녕하세요, ${name}님!`); // 템플릿 리터럴

console.log("안녕하세요, " + name + "님!"); // 문자열 연결

console.log(name.padStart(10, '*')); // *****Roy

2️⃣ 숫자 포맷팅 (String Formating)

• 숫자를 원하는 형식으로 표현 하는 방법
• 소숫점 자리수, 천 단위 구분, 통화 표기 등에 사용

const price = 1234567.89;

console.log(price.toFixed(2)); // 소수점 2자리

console.log(price.toLocaleString()); // 천 단위 구분

console.log(new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(price));

// ₩1,234,568

3️⃣ 날짜/시간 포맷팅 (String Formating)

• 날짜와 시간을 가독성있게 출력하는 방법

const today = new Date();

console.log(today.toLocaleDateString('ko-KR')); // YYYY.MM.DD

console.log(today.toLocaleTimeString('en-US')); // HH:MM:SS AM/PM

4️⃣ Json 포맷팅 (String Formating)

• 객체나 배열을 보기 좋게 출력할 때 사용

const user = { name: "Roy", age: 30 };

console.log(JSON.stringify(user, null, 2)); // 들여쓰기 2칸 적용

console.table([{name: "Roy", age: 30}, {name: "Jane", age: 25}]); // 표 형태 출력

5️⃣ 커스텀 포맷팅 (String Formating)

• 로그를 특정 형식으로 맞추는 등 개발자가 직접 정의한 출력 형태

const log = (level, message) => {

    console.log(`[${level}] ${new Date().toISOString()} - ${message}`);

};

log('INFO', '서버가 시작되었습니다.');

6️⃣ C 스타일 포맷팅 (String Formating)

• Node.js의 console.log()는 C 언어 스타일의 포맷 문자열을 지원

기호	의미	설명
%s	string	문자열
%d	decimal	정수
%i	integer	정수 (10진수)
%f	float	부동소수점 숫자
%o	object	JavaScript 객체
%j	JSON	JSON 문자열

console.log("이름: %s, 나이: %d", "Roy", 30);

console.log("정수: %i, 소수: %f", 42, 3.14159);

console.log("객체: %o", {name: "Roy"});

console.log("JSON: %j", {age: 30});

---

참고:
본 내용은 「초보자를 위한 Node.js 200제」(김경록님, 정지현님)를 기반으로 하였으며,
본 글은 개인 공부용으로 작성되었으며 상업적 사용은 불가합니다.