HTML ⁄ CSS ⁄ JS 썸네일형 리스트형 [이펙티브 타입스크립트] 3장 타입 추론 이펙티브 타입스크립트 정주행 스터디 3주차 19 추론으로 장황한 코드 방지하기 타입스크립트 초심자라면 코드를 작성하면서 가능한 한 모든 곳에 타입 구문을 넣으려고 할 수 있다. 그러나 숙련된 타입스크립트 사용자라면 최대한 타입 추론을 이용하고, 필요할 때만 타입을 명시한다. 만약 타입을 중복해서 선언하면, 변경사항이 생겼을 때 한쪽만 갱신하고 반대 쪽을 갱신하지 않아 문제가 생길 수 있다. 이러한 이유로 모든 변수에 타입 구문을 추가하는 것은 필요하지 않을 뿐더러 더욱 큰 비효율을 가져오게 된다. eslint의 no-inferrable-types 룰을 이용하면 충분히 추론 가능한 상황인데 굳이 타입을 명시한 경우를 잡아낼 수 있다. 다만 함수의 입력과 출력은, 즉 함수의 시그니처는 명확하게 명시해주는 것.. 더보기 [이펙티브 타입스크립트] 2장 타입 시스템(2) 이펙티브 타입스크립트 정주행 스터디 2주차 후반부 (분량이 많아 전반/후반으로 나누어 작성함) 13 인터페이스와 타입별칭의 차이점 알기 타입스크립트에서 타입의 이름을 주는 방법은 인터페이스(interface) 정의와 타입 별칭(type alias) 2가지가 있다. 대부분의 경우 둘 중 어느 것을 사용해도 되지만, 둘의 차이를 분명하게 알고 같은 상황에서는 일관적인 방법으로 name type을 작성해야 한다. 우선 공통적으로 가능한 것은 일반적인 속성 정의, 인덱스 시그니처 사용, 함수 타입 정의, 제너릭 사용 등이 있다. 타입을 확장하는 경우 인터페이스와 타입의 차이가 있다. 인터페이스는 extends 키워드로 확장하는 반면, 타입별칭은 인터섹션 연산자(&)로 확장한다. 단, 인터페이스는 유니온 같은 복.. 더보기 [이펙티브 타입스크립트] 2장 타입 시스템(1) 이펙티브 타입스크립트 정주행 스터디 2주차 전반부 (분량이 많아 전반/후반으로 나누어 작성함) 06 에디터로 타입시스템 탐색하기 특정 시점에 타입스크립트가 값의 타입을 어떻게 이해하고 있는지 살펴보는 것은 타입 넓히기, 타입 좁히기의 개념을 잡기 위해 꼭 필요한 과정이다. 타입스크립트 언어 서비스는 에디터상에서 'Go To Definition'(F12) 기능을 제공한다. 예를 들어 fetch의 경우 node_modules/typescript/lib/lib.dom.d.ts 에 타입이 정의되어 있다. declare function fetch(input: RequestInfo, init?: RequestInit): Promise 이렇게 타입을 탐색하는 과정에서 우리는 타입스크립트를 통해 라이브러리가 어떻게 모.. 더보기 [이펙티브 타입스크립트] 1장 타입스크립트 알아보기 이펙티브 타입스크립트 정주행 스터디 1주차. 01 타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트는 자바스크립트의 superset이다. 즉, 자바스크립트는 타입스크립트의 subset이다. 모든 자바스크립트는 타입스크립트 이지만, 모든 타입스크립트가 자바스크립트인 것은 아니다. 지금보다 자바스크립트가 지원하는 문법이 적었던 시절 타입스크립트에만 추가된 문법이 있다는 것을 알아두자. 타입스크립트는 자바스크립트 런타임 동작을 모델링하는 타입시스템을 가진다. 런타임 오류를 발생시키는 코드를 찾아내려 하지만 모든 오류를 찾아낼 수 있는 것은 아니다. 02 타입스크립트 설정 이해하기 tsconfig 설정에 따라 거의 다른 언어로 사용할 수 있다. undefined is not an Object 와 같은 런타.. 더보기 타입스크립트 기초 왜 타입스크립트를 쓰는가? 타입스크립트의는 JavaScript 프로그램을 위한 정적 Type Checker 역할을 목표로 한다. 개발자가 코드를 작성하며 만드는 오류 중, 가장 일반적인 것은 Type Error라고 할 수 있다. 단순 오타부터 시작해서, 라이브러리의 API 인터페이스를 제대로 이해하지 못했거나, 런타임에 어떻게 동작할지 잘못 예측하는 등의 경우 모두 포함된다. 타입스크립트를 사용하면 런타임 이전에 작성된 Type이 올바른지 확인하고, 코드 상에서 예기치 않은 동작을 발견한다면 이를 개발자에게 알려주어 버그를 줄일 수 있게된다. 기초 문법 Interface 사용하기 Interface를 선언함으로써 객체의 구조를 정의할 수 있다. interface User { name: string; id:.. 더보기 JavaScript - 정규표현식(Regular Expression) 맛보기 오늘의 주제는 ✨정규표현식✨. 다른 사람들이 자유자재로 사용하는 것을 보니 정말 정말 유용해보였다.... 언제 한 번 날 잡고 정규표현식 구문을 학습해보려고 했는데 방학 첫 날을 맞이한 오늘이 그 날인가 보다! 정규표현식을 맛보기로 익혀보자. 정규표현식이란? 정규표현식(Regular Expression)은 문자열의 패턴을 편리하게 다룰 수 있도록 도와주는 '형식 언어'라고 한다. 여러 텍스트 편집기와 프로그래밍 언어에서 정규표현식을 지원한다. regexr.com/ 이 사이트에서 편하게 테스트해볼 수 있다. JavaScript는 ES3부터 정규표현식을 지원하고 있다. 정규표현식은 문자열의 특정 패턴을 찾아 추출하거나 치환할 수 있도록 도와주기 때문에, 잘 활용하면 코드를 더 깔끔하게 작성할 수 있다. 적재.. 더보기 HTML <form> 태그 총정리 + <input>, <button> 로또 미션 HTML 문서에는 과 이에 필요한 , 등이 자주 사용되지만 제대로 찾아보지 않고, 필요할 때 주먹구구식으로 찾아쓰기 바빴다. 리뷰어님의 코멘트를 보고 찾아보니 의 type 속성만 해도 22가지 type을 지원하고 있었다. 앞으로는 몰라서 못쓰는 일이 없도록 이번 기회에 각 태그의 속성들을 잘 정리해놓자. 태그 태그는 이 글에서 나오는 모든 태그 중 가장 상위 태그에 해당한다. 사용자로부터 데이터를 입력받을 때 사용하며, 의도에 따라 다음의 11가지 태그들을 적절하게 조합해서 사용한다. 각 태그는 간단히 살펴보고, 사용빈도와 중요도가 높은 📌 과 📌 은 태그를 살펴본 후 이어서 더 자세히 알아보자. 의 자식태그 📌 클릭 가능한 버튼이다. 기본 type은 submit이다. 📌 22가지 type을 .. 더보기 상태관리(Stage Management)와 옵저버패턴(Observer Pattern) 자동차경주 미션에서 아쉽게도 반영하지 못한 것이 있었다. isGameOver, isPopupShowing 과 같이 게임의 '상태'를 관리해서 View가 모델의 상태 변화를 '감지'하도록 하는 것이다. 갈피를 잡지 못한 나를 위해 리뷰어님은 '옵저버 패턴'이라는 키워드로 공부해 볼 것을 추천해주셨다. 이 기회에 상태관리와 자바스크립트에서의 상태관리 방법에 대해 정리해보자. 상태관리는 어떻게 하는걸까 '상태(State)'는 변화하기 때문에 관리의 대상이 되는 모든 데이터 값을 말한다. 거꾸로 말하면, 변하지 않는 값은 관리할 필요가 없고 이는 상태가 아니다. 상태를 관리하는 것을 '상태관리(State Management)'라고 한다. 말은 쉽지만 상태관리는 어렵다. 왜 어려울까? 상태는 실시간으로, 또 비동.. 더보기 이전 1 2 3 다음
