[프로젝트] 딴짓추적표 | 2. 메모 생성 시간 기록(타임스탬프) 하는 법

메모앱 생성시간을 기록 할 수 있는 타임스탬프 기능을 구현해 보았다.

• 기록 시간이 7:08 와 같이 한 자리수로 떨어질 때는 앞에 0을 붙여서 언제나 두 자리수로 출력되게끔 구현하였다.
• 타임스탬프는 수정 권한이 없게 하기 위해 지난시간 배운 contenteditable 속성을 활용해 false 값으로 주었다.

// ...(중략)
let timeBox = document.createElement('div');
  timeBox.innerHTML = timeStamp(); // timestamp 호출
  timeBox.setAttribute('contenteditable', 'false');
  timeBox.className = 'timeStamp';

 

function timeStamp() {
  const today = new Date();
  const years = today.getFullYear(); // 년도 가져오기
  const months = today.getMonth() + 1; // 월 가져오기
  const dates = today.getDate(); // 일 가져오기
  const week = [
    '일요일',
    '월요일',
    '화요일',
    '수요일',
    '목요일',
    '금요일',
    '토요일',
  ];
  const days = week[today.getDay()]; // 요일 가져오기

  const changeNumber = (number) => {
    return parseInt(number) < 10 ? '0' + number : number;
  };
  const hours = changeNumber(today.getHours());
  const minutes = changeNumber(today.getMinutes());
  return `${years}년 ${months}월 ${dates}일 ${days} ${hours}:${minutes}`;
}

export default timeStamp;

[배운점]

1.  module import 오류 해결

1-1. module import 안되는 문제

위의 timestamp 파일을 export 하여 main 파일에서 불러와 사용하려고 하자 아래와 같은 오류가 발생하였다.

Cannot use import statement outside a module 

찾아보니 아래와 같이 script 파일을 불러올 때 type에 module을 입력하면 해결되는 간단한 문제였다.

<script src="timeStamp.js" type="module"></script>

 

1-2. module Not Found 문제

파일 경로가 올바른데도 아래처럼 module import가 되지 않는 문제가 발생하였다. 

GET http://~/ddanjitTable/timeStamp net::ERR_ABORTED 404 (Not Found)

 

찾아보니 확장자와 관련된 문제로, import 문을 사용할 때, ES6 모듈에서는 파일 확장자를 생략해도 되지만, 브라우저가 ES6 모듈을 직접 지원하지 않거나 다른 설정이 필요할 경우에는 확장자를 포함해야 할 수도 있기 때문에 아래와 같이 확장자를 추가하자 정상 동작하였다.

import timeStamp from './timeStamp.js';

 

2.  export module 안에서 return 사용

timestamp 기능을 다른 파일에서 import 해서 사용하고 싶으면 모듈에서 return 되는 것이 원하는 값인지 확인이 필요하다. return 없이 선언만 하고 끝냈더니 당연히 파일이 불러와 지지 않았다.  가끔 이렇게 기초적인 실수도 잡고 가는 것이 중요하겠다.

return `${years}년 ${months}월 ${dates}일 ${days} ${hours}:${minutes}:${seconds}`; //이렇게 바꾸면 된다.