[JavaScript] 날짜를 원하는 길이와 기호로 포맷을 바꿔서 출력해주는 함수 (with node.js)

프로젝트 진행 중 페이지 별로 날짜를 출력해줘야 하는데, 페이지 별로 날짜의 출력 길이나 기호를 바꾸고 싶을 때가 있다.

아니면 위의 사진처럼 조회한 날짜가 이상한 형태로 출력될 때ㅠㅠ

 

그래서 함수를 만들어봤따!! (날짜 형식 바꾸는 방법을 따로 구글링해보지 않았기에 비효율적인 방법일 수 있음)

 

언어는 node.js를 사용했고, 전역 함수로 사용하기 위해 export 시켰다.

 

함수는 2가지를 사용했다.

1. 날짜를 YYYY-MM-DD HH:MM:SS 형식의 문자열로 반환해주는 함수

(2021년 9월 10일이면 2021-9-10 으로 출력될텐데, 한자리일 때 앞에 0을 넣어주는 함수이다.)

2. 날짜를 사용할 기호와 출력 길이를 입력 받아 반환해주는 함수

함수를 굳이 2개로 분리한 이유는 생활코딩님께서 하나의 함수는 한가지 동작만 하는 것이 좋다고 하셨기 때문...

---

1. getDateContainingZero(Date getDate, String symbol)

/* YYYY-MM-DD 형식의 문자열로 반환
* getDate: 날짜
* symbol: 사용할 기호
* */
export function getDateContainingZero(getDate, symbol= "-") {
    // console.log(`지금 getDate 형식은 ?? >> ${ typeof getDate}`)
    let date = typeof getDate === Object ?  getDate : new Date(getDate);
    if(typeof symbol !== String) symbol = symbol.toString();
    //년,월,일,시,분,초
    let year , month , day , hours , minutes , seconds;
     year = date.getFullYear();
     month = date.getMonth() + 1;
     day = date.getDate();
     hours = date.getHours();
     minutes = date.getMinutes();
     seconds = date.getSeconds();
    let timeArr = [year, month , day , hours , minutes , seconds];

    let stringDate = timeArr.reduce((addString, time)=>{
       if(time === year) addString += time;
        else addString += (time < 10 ?  symbol + "0" : symbol) + time;

        return addString;
    },"" );

    return {stringDate, symbol};
}

이렇게 타입을 체크해주는 것은 입력받아올 날짜의 타입이 Date인지 아닌지 체크 후 날짜형식으로 변환시켜주기 위함이다.

내가 console로 찍어봤을 때 함수에 new Date()를 넘겨줬을 때는 type이 Object로 찍혀서 저렇게 해주었다.

그리고 기호를 문자로 넣어주지 않을 수도 있으니 문자가 아니라면 문자열로 형변환 시켜버리기~~

그리고 날짜를 시간 별로 뽑아낸다.

(알고있는 사람이 많겠지만... 날짜에서 month는 현재의 달 보다 1이 작기 때문에 1을 더해준다. 오늘이 9월이면 getMonth()를 했을 때 8이 나옴)

 

그리고 나중에 "0"을 넣어주기 편하게 반복문을 만들어준다.

stringDate는 날짜별로 숫자를 체크해서 10 미만이면 앞에 0을 붙여준다.

symbol은 날짜 사이에 넣어줄 기호이다.

 

1. 년도에는 앞에 0을 넣어줄 필요가 없으므로 그냥 더해준다.

2. else에서는 년도를 제외한 나머지 시간대가 10미만인지 체크하고,

    2-1. 10미만이면 기호+"0"+시간

    2-2. 10이상이면 기호+시간

을 반환한다.

ex) symbol = "-", time = 9 >> addString += "-" +"0" + "9" >> 결과: "-09"

     symbol = "-", time = 10 >> addString += "-" +"10" >> 결과: "-10"

3. 년도~초 까지 모두 문자열로 합치고 나면 stringDate 변수에 결과를 담아준다.

 

변환된 문자열과 사용한 기호를 객체로 반환해준다.

(원래 symbol은 반환안했는데, 2번에서 사용할 때 시간대별로 쪼개서 배열을 만들어야해서 무슨 기호를 사용했는지 알아야하기 때문에...)

 

함수를 사용해보자!

시간과 기호를 넣어주면 되는데, 기호는 함수에서 기본값을 정해놨기 때문에 원하는 기호가 없으면 생략 가능하다.

나는 현재 시간과 기호는 "/"슬래쉬를 넣어줬다.

/* YYYY-MM-DD 형식의 문자열로 반환
* getDate: 날짜
* symbol: 사용할 기호
* */
export function getDateContainingZero(getDate, symbol= "-") {
    console.log(`지금 getDate 형식은 ?? >> ${ typeof getDate}`)
    let date = typeof getDate === Object ?  getDate : new Date(getDate);
    if(typeof symbol !== String) symbol = symbol.toString();

    //년,월,일,시,분,초
    let year , month , day , hours , minutes , seconds;
     year = date.getFullYear();
     month = date.getMonth() + 1;
     day = date.getDate();
     hours = date.getHours();
     minutes = date.getMinutes();
     seconds = date.getSeconds();
    let timeArr = [year, month , day , hours , minutes , seconds];

    console.log(`timeArr에 들어있는 값 ${timeArr}`);
    
    let stringDate = timeArr.reduce((addString, time)=>{
        console.log(`반복문 내의 현재 time 값 ${time}`)
       if(time === year) {
           console.log("if(time === year) 실행, 다음 값을 addString에 더해준다. >> ", time)
           addString += time;
       }
        else {
           console.log("else 실행");
           if(time < 10){
               console.log("time이 10미만이므로 ")
           }else{
               console.log("time이 10이상이므로 ")
               
           }
           console.log("다음 값을 addString에 더해준다. >> ",  (time < 10 ? symbol + "0" : symbol) + time)
            
           addString += (time < 10 ? symbol + "0" : symbol) + time;
       }
        

        return addString;
    },"" );
    
	console.log("최종 반환된 시간 값",{stringDate, symbol});

    return {stringDate, symbol};
}

혹시 궁금할까봐... console은 이렇게 넣어줬음

---

결과

맨 마지막 console의 stringDate에 보면 원하는 결과가 들어있다.

화면에 찍어보면 이렇게 나온다. (함수.원하는 객체의 key 값)

 

근데 얘는 단독으로 잘 안쓸거니까 날짜 사이마다 한가지 기호를 넣어주고 끝나는데, 단독으로 사용할 사람은 코드를 수정해서 쓰면 될듯...

나의 메인은 기호와 출력 길이를 변경해주는 함수이기에 얘는 목적 달성이므로 끝!

---

2. changeDateFormatting (
   Date getDate, Int length= 6, String firstSymbol = "-",
   String secondSymbol = ":"
) 

/* 날짜의 기호 및 출력 길이를 받아 반환해주는 함수
* getDate: 날짜
* length: 출력할 길이(앞에서 부터 1~6)
* symbol: 사용할 기호( 1. y-m-d 2. h:m:s 날짜와 시간으로 분리)
* */
export function changeDateFormatting (getDate, length= 6, firstSymbol = "-", secondSymbol = ":") {
    //6이상의 숫자 입력 방지
    if(6 < length) length = 6;
    if(typeof firstSymbol !== String) firstSymbol = firstSymbol.toString();
    if(typeof secondSymbol !== String) secondSymbol = secondSymbol.toString();

    //입력 받은 날짜를 문자열로 바꾸어준 다음 "-"를 기준으로 배열로 쪼개준다.
    let StringDateObject = getDateContainingZero(getDate);
    let StringDateToArray = StringDateObject.stringDate.split(StringDateObject.symbol);

    let completeChangeDate = StringDateToArray.reduce((newDate, time, index)=>{
        if(index === length-1){
            // 마지막 날짜 뒤에는 아무 문자도 포함되면 안되므로
            newDate += time;
        }else if(index < length){
            switch (index) {
                case 0: case 1: //년,월
                    newDate += time + firstSymbol;
                    break;
                case 3: case 4: //시,분
                    newDate += time + secondSymbol;
                    break;
                case 2: case 5: //일,초
                    newDate += time + " ";
                    break;
                default:
                    break;
            }
        }
        return newDate;
    },"");

    return completeChangeDate;
}

이것도 입력받은 타입 체크하기! 별 것 없다

요게 아까 1번에서 만든 함수를 이용하는 부분이다.

 

1. 입력 받은 날짜를 YYYY-MM-DD HH:MM:SS 형식의 문자열과 기호를 반환 받는다.

2. 반환받은 문자열을 기호를 기준으로 나누어서 새로운 배열을 만들어 준다. (이것 때매 1.에서 기호를 반환받게끔 변경함)

나름 요 작은 함수 내에서 핵심 파트인듯?

배열로 쪼개진 시간대를 반복문 돌린다.  index는 년도~초 순서로 0부터 5까지이다.

입력받은 시간대만큼 반복문을 돌려준다. (나는 입력받을 때 (-> length 변수) 시간대를 1~6으로 설정했다. 사용하기엔 1~6이 더 직관적일 것 같아서... (년월일 출력 = length에 3 입력하게끔)

 

마지막 시간대 뒤에는 기호가 포함되면 안되니까 첫번째 if()문에서 걸러주기! (두번째 else if()로 넣으면 작동안됨 순서 주의!)

 

그리고 if을 또 쓰면 지저분해질 것 같아서 switch를 통해 나머지 시간대도 문자열에 조립한다.

 

끝나고나면 completeChangeDate 변수에 담아준 후 return 해준다.

---

결과

얘는 console로 딱히 안찍어도 될 것 같아서 결과만 보면 원하는 길이와 기호로 잘 출력되는 것을 볼 수 있다!

 

이 외에도 응용해서 한국어나 외국어로 변환시켜주는 것도 할 수 있겠지만, 내 프로젝트에는 따로 안쓸 것 같아서 생략했다!

---

이런 식으로 db에서 조회해온 날짜를 함수 안에 넣어주고 원하는 값을 넣어주면 이쁘게 출력된다!!