# dayjs

hannatoo

서론 많은 서비스들에서 날짜 정보를 3일 전처럼 표기하는 경우가 많다. 대표적으로 현재 이 글을 적고 있는 벨로그도 이러한 표기를 사용한다. 이 몇 일 전 기능을 실제로 구현하려고 하면 어떻게 해야 할까? 하루하루가 지날 때마다 몇 일 전 표기가 바뀌므로 DB에는 실제 날짜가 저장되어야 한다. 몇 일 전으로의 변환은 클라이언트 단에서도, 서버 단에서도 할 수 있다. 하지만, 우리 팀은 해당 변환을 서버 단에서 하기로 결정했다. n초 전과 같은 표기는 서버에서 연산을 하고 클라이언트에게 보내주는 사이에 부정확한 표기가 될 가능성이 있기 때문이다. 오늘은 이 작업을 하는 날이었다. 기존에 Date 객체를 그대로 렌더링하던 방식을 변경하여 현재 시간과의 차이를 계산하여 보여주는 작업을 하기 위해 서버에서 전해 준 값을 확인해보니 숫자 값이 들어오고 있었다. 우리 팀 백엔드는 왜 나에게 숫자 값을 넘겨주었을까?? 🤔🤔🤔 시간을 다루는 것은 민감한 문제다.

agnusdei1207

Day.js는 경량화된 JavaScript 날짜 및 시간 라이브러리입니다. Moment.js와 유사한 API를 제공하지만 Day.js는 크기가 작고 성능이 우수하여 많은 개발자들에게 인기가 있습니다. 다음은 Day.js의 주요 기능과 다양한 사용법을 예시로 보여드리겠습니다. 설치: Day.js를 사용하기 위해 먼저 프로젝트에 Day.js를 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다. 또는 기본 사용법: Day.js를 사용하기 위해 먼저 모듈을 import해야 합니다. 현재 날짜 및 시간 가져오기: 특정 날짜 및 시간 파싱: 날짜 및 시간 포맷팅: 날짜 및 시간 연산: 플러그인 사용: Day.js는 다양한 플러그인을 제공하여 추가 기능을 확장할 수 있습니다. 예를 들어, Day.js의 상대적인 시

mscwrd02

useSWRInfinite 웹 페이지에서 검색 결과를 탐색할 때, 처음에는 일정한 수의 검색결과만 표시되다가, 스크롤을 끝까지 내리면, 새로운 검색결과들이 로딩되는 것을 본적이 있을 것이다. Instagram이나, Facebook에서도 위와 같은 방식을 사용하는데, 이를 Infinite scrolling이라고 부른다. SWR은 infinite scrolling UI를 구축하기 위해 useSWRInfinite Hook을 제공한다. parameter getKey : 인덱스와 이전 페이지의 데이터를 받고, 페이지의 키를 반환하는 함수 fetcher : getKey의 return값을 인자로 받고, data를 반환하는 함수 options : 초기에 로드해야하는 페이지 수 등 다양한 옵션 Return Value data : 각 페이지의 data가 배열로 묶여있는 배열 (2차원 배열) size : data를 가져올 페이지 setSize :

muchogusto

날짜 스트링 포맷 https://blog.naver.com/PostView.nhn?blogId=psj9102&logNo=221703666976&categoryNo=66&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView Reference https://blog.hoseung.me/2022-03-13-dayjs-instead-of-momentjs/

muchogusto

time-zone 관련 https://nyagm.tistory.com/205 Reference https://velog.io/@newwwbi/Dayjs-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%97%90%EC%84%9C-%ED%83%80%EC%9E%84%EC%A1%B4%EC%9D%84-%EB%8B%A4%EB%A3%B0-%EB%95%8C-%EC%A3%BC%EC%9D%98%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EA%B2%83%EB%93%A4

sunny888

아래 이미지처럼 'ㅇㅇ시간 전'이라는 표현을 많이 사용한다. dayjs로 간편하게 표현할 수 있다. dayjs 설치 dayjs import dayjs 사용하기 > 생각 javascript에서 날짜를 계산하기위해 산술계산을 해서 방금전, 1분전,... 한달전, 1년전... 이런 표현을 만들었던 것이 생각난다. dayjs를 사용해서 편하게 사용할 수 있었다니 역시 찾아보면 다 있다.

yukina1418

미뤄뒀던 토이프로젝트를 다시 활성화를 시켜서 작업하고 있다! 테스트 자동화 쉬운데? >과거에 GCP의 CloudBuild로는 CD밖에 구현을 하지 못했다. (배포자동화) 그래서 CI의 특징 중 한가지인 테스트 자동화도 걸어보고 싶어서 이것저것을 찾아봤는데...? 정말 간단하게 6줄로 해결을 할 수 있었다^^;; 당연히 실패했다, 테스트코드 짜다가 말았으니까(...) cloudbuild.yaml code >진짜 간단하게 처리를 할 수 있어서 좀 당황스러웠다. name에 원하는 동작에 대한 정의를 해놓고 쭉쭉 써나가면 되는 방식이였는데 나는 패키지관리시스템을 yarn으로 쓰고 있어서, entrypoint가 npm이 아닌 yarn으로 되어있는 차이가 있다.

bleach7

https://jsikim1.tistory.com/196

server30sopt

✏️ 작성자: @heerucan > 📌 작성자의 한마디: "서버에서 날짜 처리 이렇게 쉬웠던 거였냐..?" Day.js는 껌입니다. 이놈 자식은 리드미에도 나와있다시피 껌 이다. 이 껌같은 녀석을 몰라서 클라한테 예쁨 받지 못하는 서버가 될 수는 없다. 이 껌같은 녀석을 몰라서 영국인이 될 수는 없다. 여하튼 이 아이는 뭐하는 녀석인가? 날짜를 다루는데 사용하는 라이브러리, Day.js Day.js 공식문서 1. 라이브러리 설치 방법 npm을 통해 설치하는 방법 _**tsconfig.json을 아래와 같이 설정해주면

suonwoo

회원 탈퇴시로 부터 3개월 지나면 db에서 제거 하는 로직 구현 node-cron을 사용함 > 1초마다 서버에 요청을 보내서 삭제하는 록직을 구현, 이렇게 로직을 짜고나니 서버에 과부화 오지 않겠냐는 피드백을 받아서 > 수정 부분을 매일 00:00(12시) 기준으로 3개월 지난 회원을 일괄적으로 하루에 한번 삭제 하는 로직으로 변경했다

newwwbi

1️⃣ timezone 플러그인을 추가할 때는 반드시 utc 플러그인도 함께 추가해야 한다 dayjs 에는 타임존과 관련된 기능이 기본 기능으로 포함되어 있지 않다. 타임존과 관련된 기능을 사용하려면 timezone 플러그인을 추가해줘야 한다. 그런데 timezone 플러그인을 추가할 때 반드시 utc 플러그인도 함께 추가해줘야 한다. timezone 플러그인이 utc 플러그인에 의존성을 갖고 있기 때문에 utc 플러그인을 추가해주지 않으면 타임존 기능을 사용할 때 에러가 발생한다. 2️⃣ dayjs.tz.setDefault() 메서드는 dayjs 의 디폴트 타임존을 변경하는 메서드가 아니다 dayjs.tz.setDefault() 메서드로 dayjs 의 디폴트 타임존을 원하는 타임존으로 변경할 수 있다고 알고 있었다. 그런데 실제로 테스트해보니 dayjs.tz.setDefault() 메서드로 디폴트 타임존을 변경하더라도 da

imconfi11

day.js는 JavaScript 날짜 라이브러리 중에서 가벼워서 사용하기 좋습니다. 설치 설치 후 스크립트에 불러와서 사용합니다. 사용방법 제가 자주 사용하는 함수만 정리했습니다. 밑에 정리한 함수 이외의 방법을 알고 싶으면 공식문서를 참고하세요. 날짜 객체 생성 - dayjs() dayjs 객체를 생성합니다. 포맷 지정 - format() 지정한 포맷으로 날짜 문자열을 생성합니다. 포맷 안에 지정 가능한 문자열입니다. 날짜 더하기 및 빼기 - add(), subtract() 지정한 숫자와 문자열에 따라 연산한 dayjs 객체를 생성합니다. 지정한 날짜가 시작날짜와 종료날짜 사이에 있는지 확인하기

kgorae

dayjs 사용법 참고 블로그 날짜 더하기 예시 ( 7일 후의 값 ) >dayjs().add(7, 'd') react date picker https://reactdatepicker.com/#example-date-range https://www.npmjs.com/package/react-datepicker HTML select 태그 내부에는 svg 컴포넌트를 삽입할 수 없다 https://wazacs.tistory.com/34 SVG 색상 변경 [참고 블로그](https://kyounghwan01.github.io/blog/React/handling-svg/#svg-%E1%84%89%E1%85%A2%E1%86%A8-%E1%84%8F%E1%85%B3%E1%84%80%E1%85%B5-%E1%

hungeun

React는 도구 모음 생태계를 잘 이용하자 라이브러리 vs 프레임워크 라이브러리는 개발 편의를 위한 도구의 모음 (공구) 프레임워크는 기반 구조까지 잡혀있는 것 (공장) 라이브러리 검색 github npm trends 커뮤니티 블로그 종류 date, styling, design UI, Animation, mocking, State Management Tools data Fetching... 시간, 날짜 관련 라이브러리 moment timezone, summerTime, Loop Year 처리 가능 Day.js 2KB, 간결함 , tree Shaking X date-fns coverage가 넓음 Immutable, tree Shaking 고르는 기준 기능 성능 사이즈 인기 관리상태 가독성 등등...

kgorae

Tips caniuse.com 사이트 >https://caniuse.com/ciu/comparison 써도 되는 기능인지 브라우저별로 확인 가능 라이브러리 탐색 >해당 라이브러리 github issue 에서 검색해보면 당면한 모든 문제를 거의 해결 가능. 관리 중인 라이브러리인지 확인 가능. 3일 과제라면 2일 안에 끝내고, 1일은 test, bug fix 등에 써야 한다 한 파일 내 코드는 150줄을 넘어가지 않도록 쓰는 게 가독성에 좋다 한 파일 내 컴포넌트는 하나만! Javascript dayjs 라이브러리 >2KB 밖에 안되는 용량으로 무거운 momentjs 를 대체한다 https://day.js.org/ storejs 라이브러리 >localStorage 사용을 더 짧은 코드로 편하게 사용할 수 있다 https://github.com/jaywcjlove/store.js slickjs 라이브러리 >케로셀(carousel) 구현에 쓴다

park0eun

원래 moment를 사용하려고 했으나 이 전에 작성한 글처럼 개발이 중단되기도 했고, 용량도 dayjs가 훨씬 가벼운 등의 이유로 프로젝트에 적용시켜보았다. 1. 설치 - yarn으로 설치함. yarn add dayjs or npm install dayjs --save 2. 사용법 기본 사용법 dayjs(변경해야하는 날짜).format('YYYY-MM-DD HH:mm:ss'); dayjs() = 포멧을 변경해야하는 값을 입력 format() = 원하는 형식을 입력 한글번역 https://www.npmjs.com/package/dayjs https://github.com/iamkun/dayjs/blob/HEAD/docs/ko/README-ko.md https://jsikim1.tistory.com/196 https://beforb.tistory.com/24

newwwbi

Dayjs 플러그인 만들기 도전 날짜 정보를 YYYY-MM-DD HH:mm:ss 나 YYYY-MM-DD 포맷의 문자열로 출력할 때가 자주 있다. 그리고 반대로 YYYY-MM-DD HH:mm:ss 나 YYYY-MM-DD 포맷의 문자열을 인자값으로 받아서 파싱한 다음에 날짜 정보를 얻어 올 때도 자주 있다. 그럴 때마다 다음과 같이 일일이 포맷을 작성해줘야 하는데 매우 번거롭다. 포맷을 enum 타입 값으로 선언하면 번거로움이 줄어들긴 하지만, 임포트해야 하는 모듈이 늘어난다는 단점이 있다. Dayjs 플러그인 기능을 사용해서 아래와 같이 코드를 작성할 수 있도록 만들어보기로 했다. 공식 문서에 나와 있는 그대로 Dayjs 플러그인 개발 Dayjs 공식 문서에 있는 템플릿 코드를 참조해서 플러그인을 만들었다. 그리고 `dayjs.extend(

newwwbi

요즘 나는 회사에서 날짜와 시간을 계산할 때 사용하는 라이브러리를 교체하는 작업을 하고 있다. 현재 moment 라는 라이브러리를 사용하고 있는데 유지보수가 중단되는 이슈가 발생했다. 그래서 moment 라이브러리를 dayjs 라이브러리로 교체하기로 결정했다. 교체 작업을 어느 정도 진행하고 테스트 코드를 작성하던 중에 이상한 걸 발견했다. 실패하는 테스트 케이스를 작성 중이였는데, 나는 당연히 dayjs가 문자열 '2'를 유효하지 않은 포맷의 문자열이라고 판단할 줄 알았다. 그래서 dayjs(’2’).isValid() 의 결과값을 false라고 예상했다. 근데 테스트를 돌려보니 결과값이 true가 나왔다. 뭐지???? 하고 dayjs('2')를 콘솔에 출력해보니 “2001-02-01T00:00:00+09:00” 가 화면에 출력되었다. 이번엔 dayjs(’3’) 를 콘솔에 출력해보니 “2001-03-01T00:00:00+09:00”가 출력되었다. ![](https://

mekemeke94

코드를 작성하다 보면 날짜나 시간을 가져다가 써야하는 경우가 많은데 이럴 때 가장 편리하면서도 손쉬운 방법을 찾아 정리하기위해 남긴다! 일단 가장 먼저 떠올릴 수 있는 방법은 자바스크립트의 기본 객체인 Date()를 사용하는 방법이다. 나도 제일 처음 이 방법을 떠올렸고 getHours니 getMinutes니 toLocaleTimeString이니 코드가 너무 길어지고 원하는 형식으로 불러오기 위해서는 이건 아닌것 같다는 생각이 들던 차에 Hugo의 친절한 dayjs 정리를 통해 dayjs를 접할 수 있었다! Dayjs란? >공식문서: https://github.com/iamkun/dayjs/blob/dev/docs/ko/README-ko.md https://day.js.org/en/ 날짜나 시간을 간단하게 표현할 수 있는 라이브러리다. 원래는 가장 많이 쓰이던 moment.js 라이브러리의 API형식을 그대로 가져오면서 용량은 33배정도 가벼워졌다고 한다

dongwu-kim

1. 잡설 네. 반갑습니다. 본격적인 프로젝트의 시작입니다. 정말 즐거운데, 이게 참 즐겁다가 불행하다가 정말 모르겠습니다. 이제는 저도 모르겠네요. 뭐든 새로운 기술을 사용해보는건 참 흥미롭습니다. 뭐 때문에 막힐지 모르니까 매일이 크레바스 위를 걷는 기분인 것 같네요. 그래도 오늘 할당을 다 채웠다는 사실이 정말 기쁩니다. > 오늘 일감 Text 제한하기(min 20, max 300) 실시간으로 당일, 전일 데이터 관리하는 로직 작성하기 00:00 기준 오늘 할일 => 어제 한 일 이동(DB load : on) 저장하기 (DB save : set) 버튼 구현 터치 시 수정기능 (TextArea) > 완료사항 Text 제한하기(min 20, max 300) ✔️ 실시간으로 당일, 전일 데이터 관리하는 로직 작성하기 save & onLoad로 해결? ✔️ 00:00 기준 오늘 할일 => 어제 한 일 이동(DB l