synun
개발시넌
synun
전체 방문자
오늘
어제
  • 분류 전체보기 (71)
    • javascript (5)
    • react (8)
    • web (1)
    • git (3)
    • aws (1)
    • project (0)
    • 개발일기 (36)
    • 항해99 (16)
    • 회고 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 인프랩
  • 합성컴포넌트
  • password authentication was removed
  • Algorithm
  • gh-pages
  • life-cycle
  • Redux-toolkit
  • javascript
  • 인프콘
  • 알고리즘풀이
  • sipe
  • Selenium
  • Vite
  • framer-motion
  • TIL
  • use-sound
  • react-query
  • React
  • Howler
  • apt-fast
  • CI/CD
  • fout
  • githubactions
  • GIT
  • json-server
  • 항해99
  • howler.js
  • github actions
  • SSE
  • wil

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
synun

개발시넌

[TIL] 투두리스트 버전 2
개발일기

[TIL] 투두리스트 버전 2

2022. 12. 8. 02:05

📜알고리즘 문제 풀이

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

 

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

코딩 테스트 문제 풀이 및 알고리즘 공부 저장소입니다. Contribute to synuns/algorithm-study development by creating an account on GitHub.

github.com

✅투두리스트 보완하기

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

투두 카드 문자열 초과 처리하기 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

My project is a react project. My website is a mutilanguage website, when I change the web language. moment.locale(lang) not working. My code is: const startDate = moment.utc(start).locale(lang);

stackoverflow.com

더보기

 

 

Intl.RelativeTimeFormat - JavaScript | MDN

The Intl.RelativeTimeFormat object enables language-sensitive relative time formatting.

developer.mozilla.org

 

 

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

유명 SNS 게시물을 보면 작성 날짜 항목에 "방금 전", "몇분 전", "몇시간 전", "몇일 전"에 작성됨, 과 같은 형식으로 표현하는 것을 볼 수 있습니다. See the Pen Untitled by hyukson (@hyukson) on CodePen. 코드 f

gurtn.tistory.com

 

 

자바스크립트의 Intl API

Engineering Blog by Dale Seo

www.daleseo.com

 

 

Moment.js | Home

Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

디테일 페이지 구성하기

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

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

 

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

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

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

 

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

 

화면 중간 맞추기

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

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

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

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

 

👻코멘트

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

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

시간을 많이 들였다.

 

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

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

'개발일기' 카테고리의 다른 글

[TIL] 저도 대충하고 싶은 날이 있다구요  (0) 2022.12.09
[TIL] 더 좋은 것을 위한 고민  (2) 2022.12.09
[TIL] 미련이 남는 밤  (3) 2022.12.06
[TIL] 끝까지 가는 놈이 이긴다  (1) 2022.12.05
[TIL] 파산신청 직전입니다  (0) 2022.12.03
    '개발일기' 카테고리의 다른 글
    • [TIL] 저도 대충하고 싶은 날이 있다구요
    • [TIL] 더 좋은 것을 위한 고민
    • [TIL] 미련이 남는 밤
    • [TIL] 끝까지 가는 놈이 이긴다
    synun
    synun

    티스토리툴바