milliwonkim의 블로그

결론 Element에 scroll에 모킹한 함수를 넣는다 describe('버튼을 클릭한다' () => { Element.prototype.scroll = jest.fn(); render() expect(...).toBeTruthy() }) MDN에서 Element가 뭔가하니 찾아보았다. Element는 문서의 모든 Element 객체(즉, Element를 나타내는 객체)가 상속되는 가장 일반적인 기본 클래스입니다. 모든 종류의 Element에 공통된 방법과 속성만 가지고 있습니다. 보다 구체적인 클래스가 Element에서 상속됩니다. 예를 들어, HTMLElement의 기본 인터페이스는 HTMLElement의 기본 인터페이스인 반면, SVGElement의 기본 인터페이스는 SVGElement의 기본 인..

제네릭 타입이라고도 불립니다. 총 3가지입니다. 1. Partial Person 타입 중에서 부분집합 타입으로 지정할 수 있다. 하나만 만족해도 됨 interface Person { name: string; age: number; hasGirlFriend?: boolean; } type MyInfo = Partial; // 가능 const kiwon: MyInfo = {} // 가능 const kiwon: MyInfo = { name: 'kiwon kim', age: 29, } // 가능 const kiwon: MyInfo = { name: 'kiwon kim', age: 29, hasGirlFriend: true, } // 불가능 const kiwon: MyInfo = { name: 'kiwon', e..

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

값 // 값 => 표현식이 평가(식 해석해 값 생성 및 참조)돼 생성된 결과 // 10 + 20이 평가되어 숫자 값 30을 생성한다 10 + 20 // 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. const sum = 10 + 20 리터럴 - 사람이 이해할 수 있는 문자 혹은 미리 약속된 기호 - 런타임에 리터럴 평가 => 값생성 문 // 변수 선언문 let x // 할당문 x = 5; // 함수 선언문 (문장) function foo() {} // 조건문 if(x > 1) console.log(x); //반복문 for(var i = 0; i < 2; i++) console.log(i) // 선언은 표현식 아님 let x // 할당은 표현식 x = 10 // 표현식 문은 값처럼 사용가능 c..

// 문장 function rollDice(side: number): number { return side + 1; } // 함수 표현식 const rollDice2 = (side: number): number => { return side + 1 } // 함수 표현식 => 함수의 매개변수부터 반환값까지 전체를 함수타입으로 사용할 수 있음 type DiceType = (sides: number) => number; const add: DiceType = (sides) => { return sides + 1 } const subtract: DiceType = (sides) => { return sides + 1 }

- 타입선언: 할당되는 값이 해당 인터페이스에 만족하는지 검사 - 타입단언: 강제로 타입 지정 => 타입체커에게 오류를 무시하라고 하는 것 (타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주) interface Person { name: string; // occupation : string } const alice: Person = { name: 'Alice', occupation: 'TypeScript Developer' } /** Type '{ name: string; occupation: string; }' is not assignable to type 'Person'. Object literal may only specify known properties, and 'occupati..

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')..

| => javascript의 || 느낌 (or) & => javascript의 && 느낌 (and) interface Person { name: string; } interface Liftspan { birth: Date; death?: Date; } type PersonSpan = Person & Liftspan const spans:PersonSpan = { name: 'kiwon', // birth: new Date('2022-06-09'), death: new Date('2122-06-09') } /** Type '{ name: string; death: Date; }' is not assignable to type 'PersonSpan'. Property 'birth' is missing in..

변수는 뭐지? // 변수를 선언하고 할당하면 // 컴퓨터 메모리에 자바스크립트가 자동으로 고유의 메모리 주소를 생성 // (임의의 메모리 상의 위치에 저장, 메모리 저장 시 모두 2진수로 저장됨) const number1 = 100 const number2 = 200 // CPU가 메모리로부터 두 변수의 값을 읽어서 연산 // 연산한 값은 그자체로는 재사용이 불가 number1 + number2 = 300 // 재사용하려면 연산결과 값을 변수에 담아야함 const sum = number1 + number2 // 30 자바스크립트는 메모리 주소를 통해 값에 직접 접근 불가 가능하다면 시스템 멈추게하는 치명적인 오류가 발생할 수도 있음 코드 실행 전에는 메모리 주소 알 수 없음 // number라는 이름으로..

카드2 시간 제한메모리 제한제출정답맞힌 사람정답 비율 2 초 (추가 시간 없음) 128 MB 70795 36384 29670 51.392% 문제 N장의 카드가 있다. 각각의 카드는 차례로 1부터 N까지의 번호가 붙어 있으며, 1번 카드가 제일 위에, N번 카드가 제일 아래인 상태로 순서대로 카드가 놓여 있다. 이제 다음과 같은 동작을 카드가 한 장 남을 때까지 반복하게 된다. 우선, 제일 위에 있는 카드를 바닥에 버린다. 그 다음, 제일 위에 있는 카드를 제일 아래에 있는 카드 밑으로 옮긴다. 예를 들어 N=4인 경우를 생각해 보자. 카드는 제일 위에서부터 1234 의 순서로 놓여있다. 1을 버리면 234가 남는다. 여기서 2를 제일 아래로 옮기면 342가 된다. 3을 버리면 42가 되고, 4를 밑으로 ..