📌 테스트 전반에 대한 가이드 및 베스트 프랙티스
- 이 가이드가 당신의 테스트 기술을 한 단계 끌어 올리는 이유
- 테스트 함정과 해결 방법
- GitHub - mhevery/guide-to-testable-code
- Good Code, Testable Code | Epic Web Dev
- The True Purpose of Testing | Epic Web Dev
🛠 Cypress 관련 리소스
- Cypress Tips and Tricks | Better world by better software
- cypress-example-recipes/examples at master · cypress-io/cypress-example-recipes · GitHub
🔎 React 테스트 관련 자료
- Common mistakes with React Testing Library
- Best Practices for Writing Tests with React Testing Library | ClarityDev blog
- Avoid Nesting when you’re Testing
📏 테스트 기법 및 접근법
- How to get started with property-based testing in JavaScript using fast-check
- Inverse Assertions | Epic Web Dev
- Cram tests: a hidden gem of dune | sancho.dev
🔧 테스트 환경 및 도구
- Testing Playground
- Testing Types | Guide | Vitest
- Testing Types in TypeScript – Frontend Masters Boost
🏗 테스트 아키텍처 및 설계
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
Microdata
attributes
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