# 개발할때 편하다
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
})
html
<head />
구조화된 데이터
- Using Structured Data to Enhance Search Engine Optimization | CSS-Tricks
- Understand How Structured Data Works | Google Search Central
lang
favicon
- How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog
- How to Create a Favicon That Changes Automatically | CSS-Tricks
- Emojis as Favicons | CSS-Tricks
- We Analyzed 425,909 Favicons • iconmap.io1
Footnotes
-
다양한 관점에서 파비콘을 분석한 글 ↩
Under-Engineered Select Menus | Adrian Roselli
font,letter-spacing,word-spacing상속appearance화살표 수정- 상태(focus, required, invalid)에 따른 스타일 추가
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 />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.
function Select({ placeholder, children }) {
return (
<select>
<option value="" disabled hidden selected>
{placeholder}
</option>
{children}
</select>
);
}
TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com
JSON.stringify(dude, (key, value) =>
value instanceof Set ? [...value] : value
);
JSON.stringify(dude, null, "🍆");
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)}%`;
}
인라인 요소에 bold 스타일이 적용될 경우 레이아웃 시프팅 현상이 발생하기 때문에 해당 이슈를 해결하는 방법들.
- html - Inline elements shifting when made bold on hover - Stack Overflow1
- Bold on Hover… Without the Layout Shift | CSS-Tricks2