HTML ⁄ CSS ⁄ JS 썸네일형 리스트형 ts-check vs ts-nocheck vs ts-expect-error vs ts-ignore // @ts-ignore 를 쓰려다 자동완성 되는 것 보고 각 옵션이 궁금해졌다. 종류가 4가지 밖에 안되니 하나씩 알아보자. ts-check 자바스크립트 파일 전체에서 타입체크를 수행한다. 파일 최상단에 써야 효력이 발생한다. ts-nocheck 타입스크립트 파일 전체에서 타입체크를 수행하지 않는다. 파일 최상단에 써야 효력이 발생한다. ts-expect-error 바로 다음 라인에 에러가 있을 경우, 에러를 막는다. 바로 다음 라인에 에러가 하나도 없으면 ts-expect-error 자체가 에러가 난다. ts-ignore 바로 다음 라인의 타입체크를 수행하지 않는다. 더보기 [이펙티브 타입스크립트] 8장 타입스크립트로 마이그레이션하기 이펙티브 타입스크립트 정주행 스터디 8주차 58 모던 자바스크립트로 작성하기 자바스크립트로 작성된 코드에서 발생한 버그 중 일정 부분 이상은 타입스크립트로 작성했다면 예방할 수 있었던 버그라고 한다. 그만큼 타입스크립트는 자바스크립트와 비교했을 때 한층 개선된 언어라고 할 수 있다. 타입스크립트는 특정 버전의 자바스크립트 코드로 컴파일해주는 기능이 있어, 최신 자바스크립트 문법을 사용하는 것으로 타입스크립트 입문을 해볼 수 있다. 특히, ES2015에 추가된 ES 모듈을 도입하면 점진적 마이그레이션이 더욱 원활해진다. 한편, 타입스크립트에서는 자바스크립트의 엄격모드(strict mode) 보다 더 엄격한 검사를 하기 때문에 굳이 use strict를 쓰지 않아도 된다. 트랜스파일된 자바스크립트에 use .. 더보기 [이펙티브 타입스크립트] 7장 코드를 작성하고 실행하기 이펙티브 타입스크립트 정주행 스터디 7주차 53 TS보다는 ECMAScript 기능 쓰기 2010년으로 거슬러 올라가 자바스크립트가 그리 발전하지 않았을 때, 타입스크립트는 자바스크립트에 없는 기능을 지원했었다. 자바스크립트가 충분히 발전한 지금은, 타입스크립트와 자바스크립트의 경계를 모호하게 만들지 않기 위해서 타입스크립트만의 독자적인 기능은 사용하지 않는 것이 좋다. 열거형(enum), 클래스의 매개변수 프로퍼티, 네임스페이스와 트리플 슬래시 임포트(///), 데코레이터(decorator) 등이 그 예에 해당한다. 정리하자면, 타입스크립트는 타입 체크를 위해 사용하고, 여타 기능은 모두 자바스크립트를 통해 사용함으로써 각 언어의 경계와 목적을 명확하게 하는 것이 좋다. 54 객체 순회 노하우 타입스크.. 더보기 [이펙티브 타입스크립트] 6장 타입선언과 @types 이펙티브 타입스크립트 정주행 스터디 6주차 45 typescript와 @types 추가하기 typescript와 개발 단계에서는 필요하지만 런타임에는 필요하지 않다. 따라서 dependencies가 아닌 devDependencies에 추가해야한다. typescript를 의존성으로 관리하면, 팀원들 간에 같은 버전을 쓰는 것을 보장할 수 있다. @types도 마찬가지로 devDependencies에 추가한다. 예를 들어 리액트와 웹팩을 사용하는 경우 아래의 패키지를 devDependencies에 추가한다. @types/react @types/react-dom @types/webpack @types/webpack-dev-server @types/node 46 타입 선언과 관련된 3가지 버전 이해하기 타입스크.. 더보기 [이펙티브 타입스크립트] 5장 any 다루기 이펙티브 타입스크립트 정주행 스터디 5주차 다른 프로그래밍 언어들과는 달리, 타입스크립트의 타입시스템은 점진적으로(gradually) 프로그램의 일부분에만 적용할 수 있다. 부분적이고 점진적인 마이그레이션을 위해 any 타입은 꼭 필요하다. any는 그만큼 강력하기 때문에 남용하게 될 여지가 있다. 이번 장에서는 any 타입을 어떻게 사용해야 현명하게 사용하는 것인지 알아보자. 38 좁은 범위에서만 쓰기 any를 사용하더라도 가능한 한 좁은 범위 내에서만 사용하면, 의도치 않게 타입 안정성을 잃는 일을 최소화할 수 있다. const config1: Config { a: 1, b: 2, c: { key: value // 에러, Foo 타입에 foo 프로퍼티가 필요하지만 Bar 타입에는 없습니다. } } c.. 더보기 loadedData / canPlay / canPlayThrough 이벤트 loadedData 이벤트 미디어의 현재 재생 위치에 있는 프레임이 로드를 완료하면 이벤트가 트리거 된다. const $video = document.querySelector('video'); $video.addEventListener('loadeddata', (e) => { console.log('Yay! The readyState just increased to ' + 'HAVE_CURRENT_DATA or greater for the first time.'); }); canPlay 이벤트 canplay 이벤트는 브라우저가 미디어를 재생할 수 있으면 이벤트가 트리거 된다. 단, 추가 버퍼링을 위해 멈추지 않고 끝까지 재생하기에 충분한 데이터가 로드된 것은 아니라고 본다. const $video = d.. 더보기 [이펙티브 타입스크립트] 4장 타입 설계 이펙티브 타입스크립트 정주행 스터디 4주차 데이터 타입을 명확하게 알 수 있다면, 코드를 이해하기가 더욱 쉬워진다. 타입스크립트 타입의 실질적인 사항을 다루는 다른 챕터와 다르게 4장에서는 타입 자체의 설계에 대해서 살펴본다. 28 유효한 상태만 표현하는 타입 지향하기 다음 두 예제를 비교해보자. 첫 번째 예제 코드에서는 가능하지 않은 시나리오까지 표현이 가능하다. 예를 들어 요청이 실패했으면서 로딩 중일 수는 없는데 일단 타입에서는 그렇게 표현이 가능하다. 이러한 타입 설계는 코드를 뒤죽박죽으로 만드는 원인이 된다. interface State { pageText: string; isLoading: boolean; error?: string; } 두 번째 예제 코드에서는 유효한 상태만을 표현하고 있다... 더보기 CSS - transition 이벤트, animation 이벤트 🚀 transition 이벤트 transitionStart CSS 트랜지션이 시작하면 이벤트가 발생한다. transitionRun CSS 트랜지션이 꼭 시작하지 않았더라도 생성되었을 때 발생한다. 예를 들어 딜레이(transition-delay)가 2초로 설정된 경우, transitionRun 이벤트가 발생하고 2초 후에 transitionStart 이벤트가 발생한다. transitionEnd CSS 트랜지션이 끝나면 이벤트가 발생한다. 가장 자주 사용된다. transitionCancel CSS 트랜지션이 취소되면 이벤트가 발생한다. 트랜지션이 취소되면 transitionEnd 이벤트는 발생하지 않는다. e.propertyName 트랜지션 대상 CSS 프로퍼티 이름을 나타낸다. e.elapsedTime .. 더보기 이전 1 2 3 다음
