milliwonkim의 블로그

Cypress는 진짜 좋은 테스팅 툴입니다. testing-library에 비해서 페이지 전체를 화면을 띄워, 직접 유저가 이용하듯이 테스트를 할 수 있어요. 그런데 제가 Cypress에서 마주한 이슈들이 몇 개 있었습니다. - iframe 지원이 미흡 - 멀티 도메인이 안됩니다. - 일렉트론 기반으로 테스트에서 되는 것이 브라우저 기반의 테스트에서 되지 않는 현상 그래서 Cypress말고 어떤게 있을까 생각해봤는데, Microsoft에서 유지보수하는 Playwright를 발견했습니다. Cypress와 Playwright를 비교하자면 이렇습니다 Cypress Playwright 장점 배우기 쉬움 크로미움 기반 브라우저, 사파리, 파이어폭스 모두 지원 간단한 적용이 빠름 멀티 도메인, 멀티탭 지원 테스팅 ..

interface에 정의된 name, age, address에 Object.keys한 느낌임 따라서 interface Person { name: string; age: number; } keyof Person // 'name' | 'age' interface Person { name: string; age: number; address: string; } type PersonKeys = keyof Person; function getProperty(obj: Person, key: keyof Person) { return obj[key]; } const person: Person = { name: 'John', age: 30, address: '123' } getProperty(person, 'name')..

// package.json { "name": "esbuild-react", "version": "1.0.0", "main": "index.js", "author": "김기원", "license": "MIT", "scripts": { "build": "rm -rf build && node build.js", "start": "node start.js -w && open http://localhost:3000" }, "devDependencies": { "esbuild": "^0.15.8", "esbuild-plugin-inline-image": "^0.0.8" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } } // build.js c..

// react-monorepo라는 폴더를 만들고 yarn init mkdir react-monorepo && yarn init // react-monorepo안에서 packages 폴더를 만든다 cd react-monorepo && mkdir packages // packages 폴더 안에서 이용할 패키지들을 구성한다 // 예시로 CRA로 web, common 패키지를 구성한다 cd packages && npx create-react-app web && npx create-react-app common packages /web: 페이지를 렌더링 할 프로젝트(이걸 deploy 해야함) /common: web에 사용할 컴포넌트 제공 // react-monorepo 맨 상위 루트로 돌아온다 cd react-..

never: 공집합 const x: never = 12; // Type 'number' is not assignable to type 'never'.(2322) unknown: 전체집합 리터럴타입: 원소가 1개인 집합 값이 T에 할당 가능: 값이 T의 원소 T1이 T2에 할당 가능: T1이 T2의 부분집합 T1이 T2를 상속: T1이 T2의 부분집합 T1 | T2: T1과 T2의 합집합 type A = 'A' type B = 'B'; type Twelve = 12; type AB = 'A' | 'B'; type AB12 = 'A' | 'B' | 12; const a: AB = 'A'; const c: AB = 'C' // Type '"C"' is not assignable to type 'AB'.(232..

타입스크립트 컴파일러 역할 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 ⇒ 구버전의 자바스크립트로 트랜스파일 트랜스파일 = translate + compile 여전히 컴파일되야하는 코드이기 때문에 컴파일과 분리되어 용어가 설명됨 코드 타입 오류 체크 ⇒ 서로 완벽히 독립적 타입스크립트가 자바스크립트로 변환될 때 코드 타입에는 영향을 주지 않음 자바스크립트 실행시점에도 타입은 영향을 미치지 않음 런타임에는 타입체크가 불가능 instanceof 체크는 런타임에 일어나지만, Rectangle은 타입이라서 런타임에는 아무런 영향이 없음. 따라서 해당 오류가 발생 // 'Rectangle' only refers to a type, but is being used as a value here.(2..

noImplicitAny function add(a, b) { return a + b } noImplicitAny가 해제돼있다면, 해당 코드의 타입은 다음과 같습니다. function add(a: any, b: any): any {} any타입을 매개변수에 사용하면 타입 체커는 유명무실해짐 따라서 noImplicitAny = true로해야함 그러면 위 코드는 다음과 같은 에러를 반환 // ‘a’ 매개변수에는 암시적으로 any 형식이 포함됩니다. 암시적으로 any로 설정됨 이는 해당 환경에서 오류로 간주 에러를 해결하려면 다음과 같이 하면됨 function add(a: number, b: number) { return a + b } // 혹은 function add(a: any, b: any) { retu..

Reset CSS를 담당하는 App.scss를 main.ts에서 import하면 됩니다. import { createApp } from 'vue'; /* import the fontawesome core */ import { library } from '@fortawesome/fontawesome-svg-core'; /* import font awesome icon component */ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; /* import specific icons */ import { faUserSecret } from '@fortawesome/free-solid-svg-icons'; import AOS from 'aos'..