728x90 전체 글146 DOM에 관하여 lighthouse로 사이트의 성능을 측정해보면 과도한 DOM 크기를 지향 (Avoid an excessive DOM size) 하라는경고가 표시될 때가 있다. DOM 크기가 크면 메모리 사용량 증가화면에서 보여줄 스타일 계산에 많은 비용 발생이러한 이유로 저성능 디바이스에서는 사용자 경험에 더욱 좋지 않다.여기서 중요한 건, DOM 요소의 개수가 아니라 깊이! 동일한 요소의 수를 가지고 있는 A, B가 있을 때// A … … …// B Img 태그 요소에 접근하려면A: body.children[2]B: body.children[0].children[0].children[0],children[0]요소의 수는 같지만 트리 구조가 같지 않아. 때문에, 트리가 깊어질수록 속도가 .. 2025. 10. 27. Playwright / MSW 🧪 Playwright와 MSW(Mock Service Worker)는 웹 개발과 테스트에서 많이 사용하는 도구 중 하나다.Playwright와 MSW(Mock Service Worker)를 함께 사용하는 것은 프론트엔드 E2E 및 통합 테스트 환경에서 매우 강력한 조합이 될 수 있다. PlaywrightPlaywright는 Microsoft에서 만든 오픈 소스 엔드투엔드(E2E) 테스트 프레임워크이다.브라우저를 자동으로 제어하여 실제 사용자처럼 웹 애플리케이션을 테스트할 수 있다.화면에 어떤 버튼, 입력값을 입력했을 때 오류 케이스, 알럿, 페이지 이동까지 어떻게 이루어져야 하는지 테스트할 수 있다.단, 오래된 맥 (2024년 기준 2019년 맥북 프로) 에서는 실행되지 않았다. 멀티 브라우저 지원: Ch.. 2025. 9. 8. rebase ↹ 특정 브랜치 기반 (base) 커밋을 다른 커밋 위로 옮기고, 내 커밋들을 다시 쌓아 올리는 작업을 말한다.히스토리가 직선으로 정리되어 특정 브랜치에서 여러 사람이 브랜치를 따고, 작업해서 머지하는 과정을 정리해주는 기능이다. 장점히스토리가 직선으로 예쁘게 정리된다. 단점커밋 해시가 바뀐다.이미 푸시한 브랜치를 rebase하면 협업자와 충돌 가능성이 크다. 언제 사용하는가?기능 브랜치의 최신화 (내 기능 브랜치를 최신 기반으로 깔끔하게 맞추고 싶을 때)PR (Pull Request) 전에 히스토리 정리할 때커밋 내용 수정할 때 언제 사용하지 않아야 하는가?이미 푸시해서 다른 사람이 작업하고 있는 브랜치 (이럴 때에는 merge)merge 커밋이 이미 있는 경우 (대규모 merge, 릴리즈할 때, 이럴.. 2025. 9. 5. 달콤 바나나빵 🍌 금방 갈변하는 바나나를 이용한 건강빵 🥨 난이도 ⭐️귀찮음 ⭐️맛탐정의 평가 ⭐️⭐️⭐️⭐️⭐️ 맛탐정이 아주 좋아가는 건강식 빵을 소개한다.처음에는 기본으로 만들어봤고, 두 번째에는 시나몬 가루를 반죽에 섞어 도전해봤는데 시나몬 가루를 넣은 게 더 맛있었다! 재료: 계란 1개, 우유 180ml, 녹인 버터 15g, 팬케이크 믹스 200g, 바나나 1개, 시나몬 가루 1작은술 (옵션) 계란 1개를 잘 풀어준다.우유와 녹인 버터를 넣고 저어준다.팬케이크 믹스를 넣고 가루가 날리지 않을 정도로 저어준 뒤 시나몬 가루를 넣고 다시 섞어준다.틀에 반죽을 2/3정도 넣어 에어프라이어 180도에 12분 돌려준다.바나나 1개를 으깨 준비한다.에어프라이어에 돌린 반죽 위에 으깬 바나나를 올려주고 다시 180.. 2025. 9. 5. 이전 1 ··· 3 4 5 6 7 8 9 ··· 37 다음 728x90
