[TIL] Section1 Coz’ Mini Hackathon (2)

오늘의 공부

오늘은 하루종일 과제를 구현했다. https://shwsgithub.github.io/fe-sprint-my-agora-states/ 에서 확인할 수 있다.
구현해야 할 과제가 26가지 있었지만, 아직 로컬스토리지를 이용한 새로고침 후에도 추가한 dicussion 남기기 등은 구현하지 못했다.

몇 가지 애를 먹은 구현사항이 있었는데 현지 시간을 적용하여 /오전or오후 시간:분:초/ 의 형식으로 나타내야 했다.

과제로 주어진 더미데이터의 예시이다. createdAt 작성 시점의 시간이다. 시간의 형식이 "2022-05-16T02:09:52Z"와 같았다. 이 값을 disccusion에 다음과 오전/오후, 시간의 형태로 값을 변환하여 작성하고자 했다.

나는 코드를 다음과 같이 작성하여 더미데이터의 시간을 변경했다.

// convertToDiscussion () 내부
// Advanced Challenge
// createdAt을 변형하여 예와 같이 렌더링(ex. 오전 10:02:17)
// 원 상태 createdAt: "2022-05-16T02:47:27Z" slice() 사용
  let revisedCreatedAt = obj.createdAt.slice(11, 19);
  console.log(typeof revisedCreatedAt)
  if (revisedCreatedAt[0] > 0 && revisedCreatedAt[1] > 1) {
    revisedCreatedAt = '오후 ' + revisedCreatedAt
  } 
  else {
    revisedCreatedAt = '오전 ' + revisedCreatedAt
  }

// discussion__information의 작성자 및 작성 날짜 데이터 할당
  const discussionInformation = document.createElement("div");
  discussionInformation.className = "discussion__information";
  discussionInformation.textContent = `${obj.author} / ${revisedCreatedAt}`;

한 가지 내가 생각하지 못한 것은 더미데이터에서의 양식과 new Date()로 반환되는 값의 양식이 다르다는 것이다. form에서 글을 작성하고 submit하면 반환되는 createdAt의 양식은 Fri Sep 16 2022 10:12:58 GMT+0900 (한국 표준시) 같았다. 더미데이터의 양식은 날짜 뒤에 T, 시간 뒤에 Z가 붙는다.

// 전역함수 재선언
const dateFormatChange = (arg) => {
  let setFormat = '';

  if(typeof arg === 'string') {
    setFormat = arg.slice(11, 19);
    if (setFormat[0] > 0 && setFormat[1] > 1) {
      setFormat  = '오후 ' + setFormat;
    } 
    else {
      setFormat  = '오전 ' + setFormat;
    }
    return setFormat;
  }  
  else {
    setFormat = arg.toLocaleString().slice(13,24);
    return setFormat;
  }
}

// convertToDiscussion () 내부
let chagedCreateAt = dateFormatChange(obj.createdAt);

// discussion__information의 작성자 및 작성 날짜 데이터 할당
  const discussionInformation = document.createElement("div");
  discussionInformation.className = "discussion__information";
  discussionInformation.textContent = `${obj.author} / ${revisedCreatedAt}`;

new Date() 객체에 toLocaleString() 메소드를 사용하면 '2022. 9. 16. 오전 00:00:00'와 같은 형식으로 반환해준다는 것을 사용했다. 형식에 따라 toLocaleDateString() 등 여러 메소드를 사용하면 될 것 같다.

dateFormatChange()를 굳이 전역에 뺀 이유는 최대한 모듈화시켜서 전처리를 거치면 좋겠다는 생각이었다. convertToDiscussion()는 말그대로 html의 Discussion 요소로 데이터 값을 받아 출력만 하는 역할, dateFormatChange()는 데이터의 형식이 다른 날짜, 시간 값을 바꾸는 역할만 하는게 의도였다.

마무리

작지만 하나의 기능을 하는 페이지를 만들어봤다. 아직 Local storage에 저장한 값을 어떻게 활용해야 할 지 고민 중이다. 그리고 새로고침을 하면 form을 이용해 새롭게 구성한 disccusion들이 페이지네이션에서 초기화되지 않고 그대로 남았다. 10개의 disccusion씩 보여주려 했는데 추가하면 할수록 페이지가 늘어난다. 그리고 추가된 disccusion은 페이지를 이동해도 계속 같은 자리에 남는다.


주말을 이용해서 재구현해야겠다.