Shadow DOM, CSS Selector

일반적인 DOM 은 CSS Selector 를 통해서 접근이 가능하다. (element, id, class) 그러나 Shadow DOM 은 일반적인 DOM 과는 다른 방식으로 CSS 를 조작해야한다. 보통 2가지 방식을 활용해서 Shadow DOM 내부의 CSS 를 조작한다. 첫번째는 part 어트리뷰트를 활용해서 조작하는 방식이다. CSS 를 정의할 때 ::part() 의 방식으로 의사 요소 를 통해서 Shadow DOM 내부의 엘리먼트에 접근할 수 있다. 다음은 예제이다. 위와 같이 선택자를 지정하려는 요소에 대해 part 어트리뷰트를 추가하여, 의사 요소를 통해 접근하도록 한다. 접근 방식은 다음과 같다. custom-element::part(shadow-dom-select){ background-..

• format_list_bulleted 프론트엔드/html + css
• · 2023. 8. 20.
• textsms

playwright - 테스트 코드 짜기

playwright 테스트 작성 관련하여 내용을 정리한다. test 메서드 playwright 의 가장 기본적인 메서드이다. test 파일 내에서 test 메서드를 통해서 동작하는 메서드이다. test(`report title`, async () => { /** 테스트 내용 */ })첫번째 인자로 report title 을 전달하여 표시한다. 두번째 인자로 test 할 코드를 작성한다. test.describe 메서드 test 가 가지고 있는 메서드로, report 내 카테고리를 하나로 묶어서 테스트 처리할 수 있는 메서드이다. test.describe 동작방법은 test 와 유사하게 동작한다. test.describe 내 test 메서드를 동작하면 report category > report title..

• format_list_bulleted 프론트엔드
• · 2023. 3. 31.
• textsms

Playwright - E2E 테스트 환경 세팅

설치 playwright 최신 버전 버전 설치 명령어는 다음과 같다. npm init playwright@latest혹은 playwright 로 된 프로젝트를 생성하고자 한다면 다음과 같다. npm init playwright@latest new-project-nametest 패키지 설치 npm install -D @playwright/testplaywright config 설정 local 에서 인증되지 않은 https 페이지 접근 허용 기본적으로 playwright 패키지를 init 하면 playwright.config.ts 가 설치된다. 이때 인증서 권한과 관련한 문제가 발생하게 되는데, 이를 해결하기 위해 별도의 config 옵션을 설정해야한다. 다음은 report 에서 확인된 권한 관련 에러 내용..

• format_list_bulleted 프론트엔드
• · 2023. 3. 16.
• textsms

폴리필 Polyfill 이란?

폴리필이란? 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다. 일반적으로 자바스크립트의 신규 기능을 변환할 때 많이 사용된다. 예를 들어 데코레이터 Decorator 의 경우 현재 Draft 단계로 공식적으로 지원하지는 않지만, 폴리필을 통해서 브라우저에서 사용할 수 있다. 단, 폴리필 플러그인 을 불러오는 시간과 트래픽이 늘어난다는 점과, 브라우저별 적용으로 인해 코드가 길어지고 성능이 저하되는 단점이다. 레퍼런스 자바스크립트 인포 문서 위키백과 문서 모질라 문서 soraji 블로그

• format_list_bulleted 프론트엔드
• · 2023. 3. 13.
• textsms

코드 스플리팅이란?

코드 스플리팅이란? SPA(Single Page Application) 의 단점으로 최초 페이지 접속할 때 웹 애플리케이션의 데이터를 다 불러와야한다. 복잡한 기능을 가진 애플리케이션의 경우 뿐만 아니라 사용하지 않는 페이지까지 불러와서 굉장히 느린 로딩 속도를 가지게된다. 이러한 초기 로딩 속도를 해결하기 위해 나온 것이 코드 스플리팅 Code Splitting 이며, 라우터를 통해 페이지에 접근할 때만 필요한 모듈을 가져온다. 코드를 하나의 큰 번들에서 여러개의 작은 번들로 분할하고 요청에 따라서 로드하거나, 병렬로 로드하여 어플리케이션의 성능을 향상시킬 수 있다. third-party 라이브러리 들을 하나의 번들로 묶어서 캐싱된 코드를 사용하는 방식으로 앱이 수정되어도 유저가 스크립트를 다시 다운 ..

• format_list_bulleted 프론트엔드
• · 2023. 3. 13.
• textsms

npm - Peer Dependency 관련 공부

프론트팀 회의 중 peer dependency 라는 내용이 나왔다. 패키지 버전 종속성을 의미하는 dependency 내용은 알았으나, 처음 듣는 내용이여서 생소했다. 오늘은 peer dependency 가 뭔지 공부하고 해당 내용을 포스팅하고자 한다. dependency 일반적으로 개발자들이 알고 있는 dependency 이다. 프로젝트에 사용된 패키지들이 있는데 이를 종속성을 관리한다. 기본적으로 런타임, 빌드 할 때 이 패키지들이 사용된다. 프로젝트가 빌드될 때 패키지들 또한 함께 번들에 포함되어서 배포가 된다. peer dependency 패키지를 설치했을 때 다른 패키지의 종속성을 명시할 때 사용된다. 프로젝트에서 실제로 패키지를 직접 불러오지는 않지만 호환성이 필요한 경우에 명시한다. 예를 들..

• format_list_bulleted 프론트엔드
• · 2023. 3. 10.
• textsms