CodeGym /행동 /Frontend SELF KO /Date. 날짜 및 숫자 포맷팅

Date. 날짜 및 숫자 포맷팅

Frontend SELF KO

레벨 37 , 레슨 1

사용 가능

2.1 Date 객체

날짜와 숫자를 다루는 것은 웹 애플리케이션 개발에서 중요한 부분이야. JavaScript는 날짜와 숫자를 조작할 수 있는 내장 객체와 메서드를 제공해. 이 강의에서는 Date 객체, 그 메서드, 그리고 날짜 및 숫자 포맷팅 방법을 살펴볼 거야.

JavaScript의 Date 객체는 날짜와 시간을 나타내. 현재 날짜와 시간을 가져오거나 특정 날짜와 시간을 설정하고, 이를 포맷팅할 다양한 메서드를 가지고 있어.

Date 객체 생성하기

중요해!

파라미터 없이 Date() 객체를 생성하면, 그 순간의 현재 날짜와 시간을 가질 거야.

Date 객체는 여러 가지 방법으로 생성할 수 있어.

1. 현재 날짜와 시간:

JavaScript

    
      const now = new Date();

      console.log(now); // 현재 날짜와 시간을 출력

2. 특정 날짜와 시간 설정:

JavaScript

    
      const specificDate = new Date('2024-07-07T10:00:00');

      console.log(specificDate); // 2024년 7월 7일 날짜 출력

3. 숫자 값으로 날짜와 시간 설정:

JavaScript

    
      const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

      console.log(anotherDate); // 2024년 7월 7일 날짜 출력

2.2 Date() 객체 메서드

날짜 구성 요소 얻기:

getFullYear(): 연도 얻기 (네 자리)
getMonth(): 월 얻기 (0부터 11까지)
getDate(): 월의 일 얻기 (1부터 31까지)
getHours(): 시간 얻기 (0부터 23까지)
getMinutes(): 분 얻기 (0부터 59까지)
getSeconds(): 초 얻기 (0부터 59까지)

예시:

JavaScript

    
      const now = new Date();

      console.log(now.getFullYear()); // 현재 연도
      console.log(now.getMonth()); // 현재 월 (-1)
      console.log(now.getDate()); // 현재 일
      console.log(now.getHours()); // 현재 시간
      console.log(now.getMinutes()); // 현재 분
      console.log(now.getSeconds()); // 현재 초

날짜 구성 요소 설정:

setFullYear(year): 연도 설정
setMonth(month): 월 설정
setDate(day): 월의 일 설정
setHours(hours): 시간 설정
setMinutes(minutes): 분 설정
setSeconds(seconds): 초 설정

예시:

JavaScript

    
      const date = new Date();

      date.setFullYear(2025);
      date.setMonth(0); // 1월
      date.setDate(15);
      date.setHours(12);
      date.setMinutes(30);
      date.setSeconds(45);

      console.log(date.toString());

2.3 날짜 포맷팅

JavaScript는 문자열로 날짜를 포맷팅할 수 있는 메서드를 제공해. 가장 인기 있는 방법은 toLocaleDateString()로, 로캘에 따라 날짜를 포맷팅해.

toLocaleDateString() 사용 예시:

JavaScript

    
      const now = new Date();

      console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
      console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
      console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (DD.MM.YYYY)

메서드 toLocaleTimeString()

toLocaleTimeString() 메서드는 지역화된 포맷으로 시간 문자열을 반환해:

JavaScript

    
const now = new Date();

console.log(now.toLocaleTimeString('en-CA')); 
console.log(now.toLocaleTimeString('en-GB'));

메서드 toLocaleString()

toLocaleString() 메서드는 날짜와 시간을 지역화된 포맷으로 문자열로 반환해:

JavaScript

    
      const now = new Date();

      console.log(now.toLocaleString('en-CA')); 
      console.log(now.toLocaleString('en-GB'));

메서드 toISOString()

toISOString() 메서드는 ISO 8601 포맷으로 날짜와 시간을 반환해:

JavaScript

    
      const now = new Date();

      console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"

2.4 숫자 포맷팅

메서드 toLocaleString()

toLocaleString() 메서드는 로컬 설정에 따라 숫자를 포맷팅할 수 있어:

JavaScript

    
      const number = 1234567.89;

      console.log(number.toLocaleString()); // 미국 포맷 "1,234,567.89" 또는 로컬 포맷 "1 234 567,89"
      console.log(number.toLocaleString('de-DE')); // 독일 포맷 "1.234.567,89"

Intl.NumberFormat를 사용한 숫자 포맷팅

Intl.NumberFormat 생성자는 숫자를 포맷팅하는 더 유연한 옵션을 제공해:

JavaScript

    
      const number = 1234567.89;

      const usFormatter = new Intl.NumberFormat('en-US');
      console.log(usFormatter.format(number)); // "1,234,567.89"

      const deFormatter = new Intl.NumberFormat('de-DE');
      console.log(deFormatter.format(number)); // "1.234.567,89"

      const customFormatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      });

      console.log(customFormatter.format(number)); // "$1,234,567.89"

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION