728x90 TECH49 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. Tailwind CSS 🪮 스타일 토큰 자체인 클래스를 조합하여 UI를 만드는 CSS 프레임워크이다. 빠르게 스타일링할 수 있으면서 디자인 시스템만큼 일관된 디자인을 가능하게 해주고, 빌드 시에 사용한 클래스만 추려 아주 작은 CSS로 만들어준다.요즘 React + Tailwind CSS 조합으로 많이 사용하는 것 같다. Tailwind CSS의 철학은 Utility-First 컨셉이다. Utility-First란 작은 기능 단위(Utility Class)를 조합하여 UI를 만드는 접근 방식이다. 즉, 쉽게 말해 클래스 이름 자체가 곧 스타일 속성을 의미하는 것이다.저장/* CSS */.btn-primary { padding: 0.5rem 1rem; background: #2563eb; color: white; borde.. 2025. 9. 3. 의존성 분류에 대해서 ➗ FE 개발을 해보면 dependencies와 devDependencies에 대해 한번쯤은 들어봤을 것이다.오늘은 이것과 관련된 얘기를 해보겠다. 의존성 (dependency) 분류하기// package.json{ "name": “my-project", "dependencies": { "vue": "^3.5.10" }, "devDependencies": { "eslint": "^8.15.0" }} 둘의 차이점은 뭘까?devDependencies: 빌드나 개발 단계에서만 필요한 패키지들을 나열dependencies: 프로젝트 실행을 위해 필수적으로 필요한 패키지들을 나열즉, eslint는 코드를 정해진 규칙에 맞춰 고쳐주는 역할만 하기 때문에 프로젝트에서 배포할 때에는 필요로 하지 않는.. 2025. 9. 1. 이전 1 2 3 4 5 6 ··· 13 다음 728x90
