[TIL] 투두리스트 버전 2

📜알고리즘 문제 풀이

프로그래머스 / level2 / 귤 고르기

GitHub - synuns/algorithm-study: 코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다.

✅투두리스트 보완하기

좌 : 투두카드 / 우 :디테일 페이지

투두 카드 문자열 초과 처리하기 style

.content {
    height: 45px;
    font-size: 18px;
    margin: 30px 20px 20px 20px;
    overflow-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.2em;
  }

투두카드의 콘텐츠 부분은 css를 다음과 같이 처리했다.

텍스트가 div 범위를 넘어가면 다음 줄로 break-word 해주었고

-webkit-box로 만들어서 텍스트 라인을 2줄까지만 보여줄 수 있게 만들었다.

텍스트가 넘어가는 것들은 ellopsis를 이용해서 (...)으로 보여지게 된다.

 

생성 시간 추가하기

const toDo = {
  id: nanoid(),
  title,
  content,
  isDone: false,
  createdBy: currentTime(),
};

투두리스트를 생성할 때 createdBy 프로퍼티를 추가해주었다.

date관련 기능 구현은 자바스크립트 빌트인 객체인 Intl과 date 유명 라이브러리 moment.js 중에 고민했으나

 

moment.js의 편리한 기능들로 간단하게 만들고 싶어서 moment.js를 사용했다.

date관련 소스코드는 다음과 같다.

// utils/date.js
import moment from "moment";
import 'moment/dist/locale/ko';

moment.locale('ko');

const currentTime = () => {
  const format = "YYYY-MM-DD HH:mm:ss";
  const date = new Date();
  return moment(date).format(format);
}

const elapsedTime = (date) => {
  return moment(date).fromNow();
}

export { currentTime, elapsedTime };

생성된지 얼마나 됐는지 시간을 알려주는 부분은 moment(date).fromNow()를 사용하면 쉽게 구현가능하다.

🖐🏻moment/dist?
moment.js의 locale이 설정되지 않을 때, moment 뒤에 dist를 붙여주면 잘 작동한다.

 

moment.js change locale not working

 

Intl.RelativeTimeFormat - JavaScript | MDN

 

[JS] 글 작성 경과 시간 표시 (방금전, 몇분전, 몇시간전, 몇일전, 몇달전, 몇년전)

 

자바스크립트의 Intl API

 

Moment.js | Home

디테일 페이지 구성하기

컴포넌트 구성에 많은 신경을 써서 작업했다.

아이콘버튼 컴포넌트, 툴팁 컴포넌트를 만들었다.

 

주요 정보인 타이틀과 콘텐트 외의 것들은

툴팁으로 숨기거나 버튼을 아이콘으로 대체하는 등

내부 텍스트 외의 다른 정보들이 복잡하게 섞이지 않도록 신경썼다.

 

사진을 보면 깔끔하게 화면이 구성된 것을 볼 수 있다.

 

화면 중간 맞추기

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

디테일 페이지의 박스를 중간으로 위치시킬 때 

해당 css를 이용해서 배치했다.

이 4줄은 세트로 잘 기억하고 있으면 좋을 것 같다.

 

👻코멘트

디테일한 부분이 자꾸 눈이 가서

css나 세부적인 부분을 신경쓰다가

시간을 많이 들였다.

 

요구사항은 모두 처리했는데도

완성도를 계속 높이고 싶은 마음이 계속 생긴다.