웹에서 날짜, 시간을 제어할 때 moment.js 라이브러리를 사용하는 프로젝트가 많을텐데요.
혹시 moment를 모르시는 분들을 위해서 간략히 사용법을 설명하겠습니다.
예를 들어, 스크립트에서 오늘 날짜를 갖고와야 한다고 하면 일반적으로 떠오르는 가장 기본적인 방법이 Date 객체를 이용하는 것인데요.
moment.js 를 이용하면 사용자가 직접 Date 객체를 생성하지 않아도 간단하게 날짜, 시간을 핸들링할 수 있습니다.
우선은 moment.js 를 사용하려면 스크립트 소스를 다운받아야 합니다.
https://github.com/moment/moment/
여기서 소스를 받아서 프로젝트 내에 적절한 곳에 파일을 넣어주고, 스크립트를 로드해줍니다.
기본적으로 스크립트에서 moment()를 적어주면 오늘 날짜, 시간 정보를 갖고올 수 있습니다.
moment() 안에 어떠한 인수를 넣어주지 않으면 현재 시각 기준으로 갖고옵니다.
위 스크립트를 콘솔로 출력해보겠습니다.
month() 같은 경우는 1월이 0부터 시작이라서 8월인 지금 7로 찍히고 있다는 것을 알 수 있습니다. (이것은 자바스크립트 뿐만 아니라 자바도 마찬가지입니다)
moment()를 적어주고 그 뒤에 어떠한 형태로 갖고올것인지 format 형식을 적어주면 년월일 및 시간을 조합해서 원하는 포맷 형태로 갖고올 수 있습니다.
콘솔 출력 결과는 아래와 같습니다.
년,월,일 순서야 마음대로 바꾸셔도 되구요.
그리고 HH:mm:ss 를 적어주면 시,분,초까지 갖고올 수 있습니다.
moment.js 에서는 날짜 계산을 할 때, add 와 subtract를 제공하는데요.
만약, 어제 날짜를 갖고오고 싶다면 아래처럼 하시면 됩니다.
add는 첫 번째 파라미터에 입력된 숫자만큼 더해줍니다. 뒤에 "days"로 설정을 했으므로 일자로 계산합니다.
즉 어제 날짜를 구하려면 오늘 날짜에서 -1일을 더해주면 됩니다.
subtract는 반대로 입력된 숫자만큼 빼줍니다. 어제 날짜를 구하려면 1일을 빼주면 됩니다. 콘솔에서 찍어보면 아래와 같습니다.
반대로 내일 날짜를 출력하려면 add를 사용할시에는 1일을 더해주고, subtract 를 사용하려면 -1일을 빼주면 됩니다.
일 계산이 아닌, 월 단위로 혹은 년 단위로 계산을 하고 싶다면 "days" 대신에 "months" , "years" 로 입력해주면 됩니다.
그리고 개발을 하다 보면 DB 혹은 어디서 받아온 날짜 정보에서 며칠 전 혹은 며칠 후 등 날짜를 계산해서 반환해줘야 하는 경우도 있을텐데요.
예를 들어, 특정 날짜의 7일 전을 반환해야 한다면 아래처럼 하시면 됩니다.
moment안에 기준이 되는 날짜,시간을 넣고, 뒤에 format 형식을 적어주는게 좋습니다. (인수를 넣을때 format를 안적어줘도 오류는 나지 않고 정상 실행은 되겠지만, 간혹 버전에 따라서 개발자 도구에서 경고가 뜨는 경우도 있더라구요.)
실행해보면 아래와 같은 결과를 얻을 수 있습니다.
두 날짜의 차이를 구하고 싶다면 diff를 이용하면 됩니다.
화면 개발을 하다보면 특정 화면에는 조회조건에 시작일자, 종료일자가 있는 화면들이 있는데요. 특정 기간에 해당하는 데이터를 조회해오기 위해서 그런 조건들이 있을텐데요.
처음 화면 접속 시 조회조건에 날짜가 자동으로 셋팅이 되어야 하는데 플젝마다 화면마다 요구사항이 다를 것 같습니다.
오늘이 8월 4일이면 시작일자는 해당월의 1일로.. 즉, 2019.08.01 로 셋팅이 되어야하고, 종료일자는 오늘일자로 자동으로 셋팅되도록 구현해야할 수도 있고, 혹은 시작일자는 지난주 일요일, 종료일자는 지난주 토요일로 자동으로 셋팅되도록 하는 요구사항이 있을수도 있고 정말 가지각색일텐데요.
만약, 접속한 날짜를 기준으로 지난주 일요일의 날짜를 갖고와야 한다면
우선 moment를 이용해서 오늘의 요일을 숫자로 반환받습니다. (일요일은 0이고, 월요일은 1이고,,, 토요일은 6을 반환해줍니다.)
그리고 지난주 일요일을 구해야하므로 현재 날짜에서 (7일 + 현재 요일) 을 빼줍니다.
만약 지난주 토요일도 구해야 한다면 지난주 일요일에서 6일을 더해주면 될 것 같습니다. 혹은 저 위의 스크립트에서 7을 1로 변경해서 구합니다.
저는 여기까지 moment.js 에 대해서 플젝을 진행하면서 다루어보았던 아주 기본적인 어렴풋이 생각나는 부분만 적어본 것이고, 이외에도 moment.js 에서 제공하는 다양한 기능들이 많습니다.
공식홈페이지에 상세한 기능 활용법들이 나와있으므로 적절하게 활용하시면 됩니다.
- 끝 -
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| [jqGrid] jqGrid free version을 사용하여 체크박스 구현하기 (0) | 2023.10.03 |
|---|---|
| [jqGrid] jqGrid free version을 사용한 간단 CRUD 예제 (0) | 2023.09.19 |
| [자바스크립트] HTML, CSS, JAVASCRIPT 소스 코드 정렬하기 (0) | 2021.08.03 |