[React Native] 라이브러리 없이 자바스크립트로 날짜 포맷팅하기!

 

흠

아무래도 리액트 네이티브가 아니라

자바스크립트 카테고리로 가야할 것 같지만

리액트 네이티브 앱 개발 중에 알게 된거니까 일단 여기에

 

나중에 네 옮겨보도록 하겠음

 

 

나의 목표 + 계획

1. 오늘이 무슨 요일인지 알아 낸다. 2. 월요일이라면 오늘 날짜를, 월요일이 아니라면 이번주의 월요일 날짜를 YYYYMMDD 의 포맷으로 만들어서 axios 요청을 보낸다

 

여기서 필요한 건

 

1. 월요일부터 금요일까지 0~4 번호로 인덱싱하기

2. 인덱스를 기준으로 이번주 월요일 찾기

3. 이번 주 월요일을 YYYYMMDD string으로 반환하기

 

 

하나씩 해보겠습니다

 

1. 월요일부터 금요일까지 0~4 번호로 인덱싱하기

let today = new Date();
let todayDay = today.getDay() - 1;
// 기존 Javascript에서는 일요일이 시작이므로 -1을 해준다

new Date() 는 오늘 날짜와 현재 시각을 반환

getDay()는 요일을 숫자로 반환(일요일~토요일: 0~6)

(참고로, getFullYear(), getMonth(), getDate() 등이 있다. getMonth는 1월을 0으로 나타내므로, +1을 해줘야 한다)

참고 How to get current date in react native?

 

 

2. 인덱스를 기준으로 이번주 월요일 찾기

function findMonday(thisMonday = today) {
    thisMonday.setDate(thisMonday.getDate() - todayDay);
    return thisMonday;
  }

참고 코드 Subtract Days from a Date in JavaScript

 

 

3. 이번 주 월요일을 YYYYMMDD string으로 반환하기

function formattingStartDate() {
    let startDate = findMonday();
    let formattedStartDate =
      startDate.getFullYear().toString() +
      (startDate.getMonth() + 1).toString().padStart(2, "0") +
      startDate.getDate().toString().padStart(2, "0");
    return formattedStartDate;
  }

.toString()은 문자열로 형변환 하는 메서드

String()과 형변환 해주는 건 같은데, 진법을 설정할 수 있다는 것이 다르다! 이 코드에서는 어떤 걸 써도 상관 없지만, 왼쪽에서 오른쪽으로 읽는 가독성을 높이기 위해서 String이 아니라 toString을 썼다. 붙는 코드가 많아서!

padStrat(자리수, 남는자리를 채울 문자열) 전체 자릿수를 2자리로, 1자리라면 왼쪽에 0을 채우도록 함

 

 

이렇게 하면 20220808 이라는 문자열로 잘 나온다 ㅎㅎ