Etc
Page Object Models - Playwright
POM? Playwright에서 제공하는 POM(Page Object Model) 개념은, 테스트 코드 작성의 용이성 및 유지 보수 관리를 최적화하면서 테스트 케이스를 작성할 수 있는 접근 방식중의 하나이다. class를 사용함으로써 중복을 줄이고 장황한 테스트 코드의 추상화를 통해 유지 관리를 단순화한다. How? Init // playwright.dev 기준 작성 import { Locator, Page, expect } from '@playwright/test'; export class InitPage { readonly page: Page; private getStartedLocator: Locator; constructor({ page }: { page: Page }) { this..
소스맵 정리
내용 정리 배경 현재 사내에서 Svelte로 진행하고 있는 프로젝트가 있는데, dynamic route 에서의 작업 도중 params값에 .map.css text가 담기는 이슈를 확인하였다. 더군다나 브라우저 devtools를 켰을 때만 해당 이슈가 발생하였는데 확인해보니 vite 및 소스맵 관련 이슈였고, 이로 인해 새로 알게된 소스맵에 대해 간단하게 정리해보았다. 소스맵이란? 소스맵(source map)은 원본 소스 코드 파일과, 변환된 소스 코드 사이의 매핑 정보가 선언된 파일이다. 주로 JS나 CSS와 같은 파일들의 경우, 실제 프로덕트를 배포하기 위해 빌드 진행시 파일들이 압축된다. 이때 압축한 파일에서 에러가 났을때 압축한 파일들만 가지고는 디버깅이 어려워지므로, 원본 소스 코드를 찾을 수 있..
TTF, OTF 폰트별 특징
OTF(Open Type Font)와 TTF(True Type Font)는 모두 폰트 파일의 확장자로서, 비트맵 글꼴(픽셀 여러개가 모여 전체 글꼴 생성)이 아닌 벡터 글꼴(점과 점사이를 잇는 곡선으로 전체 글꼴 생성)이다. 각각의 특징은 다음과 같다. 기본 특징 OTF (OpenType Font) OTF는 Adobe와 Microsoft가 개발한 폰트, 1996년에 등장 유니코드(Unicode) 기반 폰트 OTF 폰트는 고급 레이아웃 기능과 특수 문자, 기호, 리깅(애니메이션 등에 사용되는 기능) 등을 지원하는데 용이 TTF와 비교하여 굵기, 기울임 등의 변형을 더 자연스럽게 처리할 수 있으며, 높은 해상도에서도 깔끔하게 표현 TTF (TrueType Font) TTF는 Apple과 Microsoft가 ..
리액트와 함께하는 테스트 격리(번역)
리액트와 함께하는 테스트 격리 이 글은, Kent C. Dodds의 Test Isolation with React 원문을 번역한 글입니다. 이 블로그 게시물을 위한 영감은 다음과 같이 보이는 리액트 테스트에서 비롯되었습니다. const utils = render() test('test 1', () => { // use utils here }) test('test 2', () => { // use utils here too }) 그래서 저는 테스트 격리의 중요성을 얘기하고, 테스트의 신뢰성을 개선하고 코드를 단순화하며 당신의 테스트에 대한 자신감을 높이기 위해 더 나은 방법을 제공하고자 안내하고 싶습니다. 간단한 컴포넌트로 이루어진 예제를 살펴봅시다. import React, {useRef} from 'r..
TIL | Reflow, Repaint
Reflow, Repaint JS 코드에 의해 DOM or CSSOM을 변경하는 DOM API가 사용될 경우, DOM or CSSOM이 변경된다. 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 트리를 기반으로 레이아웃과 페인트 과정을 브라우저 화면에 다시 렌더링하게 되는데, 이러한 과정을 리플로우(Reflow), 리페인트(Repaint)라고 한다. Reflow 레이아웃의 재계산하는 것을 말하며, 다음과 같이 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 재배치를 위한 위치 계산 작업이 이루어진다. DOM 노드의 추가, 제거 DOM 노드의 위치 변경 DOM 노드의 크기 변경(margin, padding, border, width, height 등..) CSS3 애니메이션과 트랜지..
TIL | 패키지 잠금파일
Npm의 유의적 버전 표기, 패키지 잠금파일(package-lock.json, yarn.lock) 버전의 범위 잠금파일을 알아보기 전, npm이 모듈의 버전을 관리하는 방식을 먼저 알아보자 "dependencies": { "react": "^17.0.2", }, 위 예시는 npm을 통해 설치한 react의 버전이 17.0.2이라는 것이다. 이때 npm은 버전을 관리하기 위해 유의적 버전(Sementic Version) 규칙 아래 패키지 버전을 관리한다. 유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리하는 방법이다. 위 리액트 버전을 예시로 들 경우 주는 17, 부는 0, 수는 0이다. 각각의 버전을 변경하는 기준은 다음과 같다. 주 버전(Major ..