Vue.js 시간 변환 도구 | 날짜 및 타임스탬프 변환

소개

이 프로젝트에서는 Vue.js 를 사용하여 시간 변환 도구를 만드는 방법을 배우게 됩니다. 이 도구를 사용하면 날짜와 타임스탬프 간에 변환할 수 있으며, 이는 많은 비즈니스 애플리케이션에서 흔히 요구되는 사항입니다.

👀 미리보기

🎯 과제

이 프로젝트에서는 다음을 배우게 됩니다:

Vue.js 프로젝트를 설정하고 제공된 코드 구조를 이해하는 방법
날짜와 타임스탬프 간에 변환하는 기능을 구현하는 방법
변환 결과가 원하는 형식으로 올바르게 표시되도록 하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Vue.js 를 사용하여 간단한 웹 애플리케이션을 구축할 수 있습니다.
웹 애플리케이션에서 날짜 및 시간 데이터를 처리할 수 있습니다.
날짜 및 타임스탬프와 같은 다양한 시간 표현 간에 변환할 수 있습니다.
변환 기능의 정확성을 테스트하고 확인할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── element-ui.css
├── element-ui.js
├── index.html
└── vue.js

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고치면 페이지가 표시됩니다.

✨ 솔루션 확인 및 연습

실시간 검색 기능 구현

이 단계에서는 날짜와 타임스탬프 간에 변환하는 기능을 구현합니다.

Vue.js 인스턴스에서 handleTransform() 메서드를 찾습니다.
handleTransform() 메서드 내에서 날짜와 타임스탬프 간에 변환하는 로직을 추가해야 합니다.
formInline.date가 비어 있지 않고 formInline.timeStamp가 비어 있는 경우, 날짜 값을 13 자리 타임스탬프로 변환하고 formInline.timeStamp를 그에 따라 업데이트해야 합니다.
```
let date = this.formInline.date;
let timeStamp = this.formInline.timeStamp;
if (date && !timeStamp) {
  let newValue = new Date(date);
  this.formInline.timeStamp = newValue.getTime();
}
```

formInline.date가 비어 있고 formInline.timeStamp가 비어 있지 않은 경우, 타임스탬프 값을 YYYY-MM-DD hh:mm:ss 형식의 날짜 문자열로 변환하고 formInline.date를 그에 따라 업데이트해야 합니다.

if (!date && timeStamp) {
  timeStamp = new Number(timeStamp);
  let d = new Date(timeStamp);
  var Y = d.getFullYear() + "-";
  var M =
    (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) +
    "-";
  var D = d.getDate() < 10 ? "0" + d.getDate() + " " : d.getDate() + " ";
  var H = d.getHours() + ":";
  var M2 =
    (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()) + ":";
  var S = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
  this.formInline.date = Y + M + D + H + M2 + S;
}

전체 코드는 다음과 같습니다:

handleTransform() {
   // TODO
   let date = this.formInline.date;
   let timeStamp = this.formInline.timeStamp;
   if (date && !timeStamp) {
     let newValue = new Date(date);
     this.formInline.timeStamp = newValue.getTime();
   }
   if (!date && timeStamp) {
     timeStamp = new Number(timeStamp);
     let d = new Date(timeStamp);
     var Y = d.getFullYear() + "-";
     var M =
       (d.getMonth() + 1 < 10
         ? "0" + (d.getMonth() + 1)
         : d.getMonth() + 1) + "-";
     var D =
       d.getDate() < 10 ? "0" + d.getDate() + " " : d.getDate() + " ";
     var H = d.getHours() + ":";
     var M2 =
       (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()) +
       ":";
     var S =
       d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
     this.formInline.date = Y + M + D + H + M2 + S;
   }
}