🧑‍💻 짧은호흡/JS·TS

타입스크립트가 결국 타입을 위한 언어이기 때문에, 변수를 선언할 때마다 타입을 명시해야 한다고 생각할 수 있다. 그러나 타입스크립트의 많은 타입 구문은 사실 불필요하다. 이렇게 아무 생각없이 명시했던 타입들이 있다. 하수의 코드. 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 오히려 코드가 길어지고 가독성이 안좋아질 수 있기 때문에. 하지만 타입이 추론될 수 있음에도 타입을 명시하는 것이 더 좋은 몇가지 상황들이 있다. 더 정확한 위치에 오류를 표시하기 위함이다. 객체 리터럴을 정의할 때 함수의 반환값을 명시할 때 타입 넓히기 let 으로 선언하는 경우. 값이 재할당될 가능성이 있다. 따라서 처음 초기화한 값을 가지고 할당 가능한 값들의 집합을 유추해야 함. 어느정도 가능성을 열어주기 위해서 타..

책을 이용한 스터디를 하면서 평소에 쓰지 않는 (경험이 아닌 책 내용을 정리하는) 글을 쓰면서 많은 고민을 하게 된다. 어떻게 해야 완벽히 이해하고, 정리하고, 기록할 수 있을까. 책의 순서 그대로 쓰지 않고 내가 이해한 흐름대로 재구성해서 글을 쓰도록 노력해보려고 한다. 효율적인 방법인지는 모르겠지만. 지난주에 공부했던 구조적 타이핑의 관점에서 보면 아래의 코드는 오류가 발생하지 않는다. interface Room { numDoors: number; ceilingHeightFt: number; } const obj = { numDoors: 1, ceilingHeightFt: 10; elephant: 'present', } const r: Room = obj; 추론된 obj의 타입은 Room타입의 부분 ..

타입을 쓰는데서 실력의 편차가 크게 나타난다. 지난 넥스터즈 활동 후기에 적었던 문장이다. 어렵게 막 타입을 이리저리 쓰고 이런문제가 아니다. 오랫동안 끙끙대다 발견한 방법이 알고보면 굉장히 기본적인 타입 문법이었던 경우가 꽤 있었다. 이렇게 얼레벌레 개발해온 한규진을 위한 타입스크립트 뿌수기 스터디. 타입 이해하기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해, 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해, 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해. 하지만 자바스크립트는 정적 타입 이 아닌 동적 타입 언어이다. 변수를 선언할 때 데이터의 타입을 사전에 선언하는 것이 아니다. 어떤 데이..

1. 호이스팅 자바스크립트 엔진은 콜 스택에 전역 실행컨텍스트를 담는다. environmentRecord 현재 컨텍스트와 관련된 코드들의 식별자 정보들이 저장 매개변수 이름, 함수 선언, 변수명 등을 순서대로 수집 outerEnvironmentReference 바로 직전 컨텍스트(해당 함수가 선언된 위치)의 LexicalEvironment 정보를 참조 콜스택에서는 가장 최근에 실행된 실행컨텍스트만 활성화된다. 만약 함수 a에서 함수 b가 실행되면 또 실행 컨텍스트를 담는다. 함수 b의 실행을 마치고 함수 b가 종료되면 실행컨텍스트가 사라지고 다시 a로 돌아옴. 에이도 종료되면 전역 컨텍스트로. console.log(TVChannel) //undefined var TVChannel = "Netflix"; ..

객체는 상태를 나타내는 property와 동작을 나타내는 method로 이루어져있다. 메소드가 자신이 속한 객체의 property를 참조하려면 const someone = { name: '9yu', getName() { return someone.name; }; }; 이렇게 할 수 도 있겠지만, 좋은 방법은 아니다. const someone = { name: '9yu', getName() { return this.name; }; }; 대신 이렇게 this를 사용해서 자신이 속한 객체를 참조할 수 있다. 1. this 바인딩 function printThis() { console.log(this); } printThis(); 지난주 클로저에서 실행컨텍스트에 대해서 한번 봤었다. 함수를 호출할때 실행컨텍스트..

정의 : 함수와 함수가 선언된 어휘적 환경의 조합 어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 0. 실행 컨텍스트 정의 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 프언에서 나온 활성 레코드와 비슷한 개념..? // ------------------- (1) var a = 1; function outer() { function inner() { console.log(a); var a = 3; // --------------- (2) } inner(); // -------- (3) console.log(a); // ----------------- (4) } outer(); // --------..

1. OOP 1-1. 객체지향의 4가지 특성 a. 다형성 한 가지 역할이 상황에 따라 각기 다른 행동을 한다. 셰프가 헛기침을_한다() 부 주방장 -> 눈치를_본다() 조리장 -> 요리하는_척을_한다() b. 추상화 공통된 기능을 뽑아낸다. 현실 세계의 복잡한 현상을 간단한 형태로 모델링한다. (simplify) 최소한의 정보를 추출 c. 캡슐화 구현 내용을 내부에 숨겨서 응집도를 높이는 것 응집도 : 객체가 자신과 관련된 것을 중심적으로 행동한다. c-1. 결합도 두 객체가 서로 관련되거나 의존하는 정도 안 좋은거 (객체를 떼어내거나 변경하기 힘들다) c-2. 캡슐화를 위반한 사례 신문배달부가 고객의 지갑을 가져와서, 현금을 확인하고, 돈을 가져가는게 아니라 고객이 자신의 지갑의 현금을 확인하고, 돈을..

타입 추론 인터페이스와 제네릭을 이용한 타입 추론 // 제네릭으로 넘겨준 값을 인터페이스의 속성으로 사용할 수 있음 interface Dropdown { value: T title: string; } var shoppingItem: Dropdown = { value: // 마우스 올리면 string으로 뜬다. 인터페이스를 extends해서 사용할 때도, interface Dropdown { value: T title: string; } var items: Dropdown = { value: 10, title: 'a' } interface DetailedDropdown extends Dropdown { description: string; tag: T; } var detailItems: DetailedDr..