import isAfter from 'date-fns/isAfter';

isAfter(new Date(), new Date(DATE))

날짜 비교 할 일이 있어서 별 생각 없이 new Date를 때렸는데 safari에서 안되는 문제가 발견되었다. 콘솔을 확인해보니 yyyy-MM-dd HH:mm:ss 해당 형태의 포멧 에서는 안된다. 평소에 new Date 보다는 moment나 date-fns같은 라이브러리를 당연하게 써오다 보니 몰랐다. 그런데 또 다른 생각을 해보자면 저런 문제가 있기 때문에 더 적극적으로 라이브러리를 사용해야 한다는 게 함정.

import isAfter from 'date-fns/isAfter';
import format from 'date-fns/format';

isAfter(new Date(), format(DATE))
#javascript#date
#159

live2d 구현이 필요할 경우 pixi+plugin을 사용하면 된다

#live2dcodesandbox.io
#152
📎

GSAP

gsap.com

모션 블러 효과

모션 디자인 원칙

Footnotes

  1. 랜덤 벨류 ↩

  2. mask feTurbulence feDisplacementMap 합성 ↩

  3. viewbox 값을 제어 ↩

  4. 비디오 게임에서 좋은 아이디어…특히 애니메이션 기법을 배운다는 내용 ↩

  5. 여러개 엘리먼트에 transition-delay로 시간차를 주는 방법으로 구현하고 있다. ↩

#gsap#motion#motion-blur#svg
#151
**title**: 반품 및 교환은 재고로 이동합니다.

**as a** 가게 주인으로서,
**I want** 반품 또는 교환 시 상품을 재고에 다시 추가하고 싶습니다.
**so that** 인벤토리를 추적할 수 있습니다.

**Scenario 1:** 환불을 위해 반품된 항목은 인벤토리에 추가되어야 합니다.
**Given** 고객이 이전에 나에게서 검은색 스웨터를 구매했다는 점을 감안할 때
**and** 인벤토리에 검은색 스웨터 3개가 있습니다.
**when** 환불을 위해 검은색 스웨터를 반환할 때
**then** 그러면 인벤토리에 4개의 검은색 스웨터가 있어야 합니다.

Feature > […Scenario] > […Step]

Given 초기 상태 — 보통 과거에 일어난 일. When 이벤트나 동작. Then 예상 결과. 단계를 이을 때 And·But.

Scenario: 항목 검색 후 결제 페이지로 이동
Given 사용자가 Greencart 방문 페이지에 있다
When 사용자가 야채<이름>를 검색했을 때
And 장바구니에 항목이 추가된다
And 사용자는 구매를 위해 Checkout 페이지로 이동한다
Then 선택한 <이름> 항목이 체크아웃 페이지에 표시된다

출처

#test#bdd
#149

테스트 코드에서 mock으로 처리하는 경우1

Footnotes

  1. 그래서 내가 내린 결론은 저렇게 까지는 테스트할 필요가 없고 오히려 애매하게 결합된 컴포넌트들을 분리해서 관리하는게 맞을 것 같다는 생각을 해봤다. ↩

#mock#test
#148

테스트 하다가 특정 사이즈 파일이 필요한 경우. 순수하게 사이즈 관련된 내용만 테스트가 가능하다.1

mkfile 100m some100mfile.pdf

Footnotes

  1. How to create large PDF files (10MB, 50MB, 100MB, 200MB, 500MB, 1GB, etc.) for testing purposes? - Stack Overflow ↩

#test
#147
# 개발할때 편하다
yarn add -D @types/cypress
// react-devtools 같은 확장도구가 필요할 경우

// /plugins/index.js
const path = require('path')

module.exports = (on, _config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.family === 'chromium') {
      const extensionFolder = path.resolve(__dirname, '..', '..', '4.7.0_1')

      launchOptions.args.push(`--load-extension=${extensionFolder}`)

      return launchOptions
    }
  })
}

// /support/commands.js
Cypress.on('window:before:load', (win) => {
  win.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__
})
// 파일업로드 기능 테스트
Cypress.Commands.add(
  'uploadFile',
  { prevSubject: true },
  (subject, fileName) => {
    cy.fixture(fileName).then((content) => {
      const el = subject[0]
      const testFile = new File([content], fileName)
      const dataTransfer = new DataTransfer()

      dataTransfer.items.add(testFile)
      el.files = dataTransfer.files
      cy.wrap(subject).trigger('change', { force: true })
    })
  }
)
// 에러때문에 테스트가 끊길 경우
Cypress.on('uncaught:exception', (err, runnable) => {
  console.log(err)
  return false
})
#test#cypress
#146

📌 테스트 전반에 대한 가이드 및 베스트 프랙티스

🛠 Cypress 관련 리소스

🔎 React 테스트 관련 자료

📏 테스트 기법 및 접근법

🔧 테스트 환경 및 도구

🏗 테스트 아키텍처 및 설계

#test
#145

html

<head />

구조화된 데이터

lang

favicon

Microdata

attributes

Footnotes

  1. 다양한 관점에서 파비콘을 분석한 글 ↩

#html
#143
📎

HTTP caching

developer.mozilla.org
#cache#bfcache#http
#142
33 중 25페이지
이전 페이지다음 페이지