테스트 하다가 특정 사이즈 파일이 필요한 경우. 순수하게 사이즈 관련된 내용만 테스트가 가능하다.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#bookmarks
#145

html

<head />

구조화된 데이터

lang

favicon

Microdata

attributes

Footnotes

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

#html#bookmarks
#143

Under-Engineered Select Menus | Adrian Roselli

  • font, letter-spacing, word-spacing 상속
  • appearance 화살표 수정
  • 상태(focus, required, invalid)에 따른 스타일 추가
#select#css
#134

Building a multi-select component

다중 선택 UI를 구현하기위해서 checkbox, select 두가지 방법으로 작업하는 방식을 소개하고 있다. 그외 선택된 상태값을 얻기위한 counter() 함수, 모바일 체크를 위한 미디어쿼리도 알려주고 있다.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  &::after {
    content: counter(filters);
  }
}

@media (pointer: coarse) {
  //
}
#select#css#uistackblitz.com
#133

디자인 된 <select />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.

function Select({ placeholder, children }) {
  return (
    <select>
      <option value="" disabled hidden selected>
        {placeholder}
      </option>
      {children}
    </select>
  )
}
#html#select
#132

매니페스트 V3로 마이그레이션1

  • host_permissions으로 분리
  • action으로 통합(두군데 수정이 필요하다)

Footnotes

  1. https://github.com/cbcruk/webext/commit/cbb36355871fb36d5f6c21752aae3400d2a97abf#diff-0f354ef5fd807996fa3f5a7a83ceb74025aa8f85862e321b8938988031e99711L3-L25 ↩

#extensions
#128

TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com

JSON.stringify(dude, (key, value) =>
  value instanceof Set ? [...value] : value
);
JSON.stringify(dude, null, "🍆");
#json
#124
function getTiltedHeight(angle) {
  const a = 100;
  const A = 90 - angle;
  
  const c = a / Math.sin(Math.PI * A / 180);
  const b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2));
  
  return `${Math.abs(b)}%`;
}
#angle#math
#122
19 중 13페이지
이전 페이지다음 페이지