JS&TS Essential (13) 썸네일형 리스트형 함수의 prototype https://code-mania.tistory.com/135 Prototype JS는 프로토타입 기반언어라고 불리기도 한다. 이 프로토타입이란 무엇인지 어떤 메카니즘이 있는지 알아보자!! [[Prototype]] 다들 객체를 console에 찍어본 경험이 한 번 정도는 있을 것이다. 이 때 code-mania.tistory.com 전 시간에 살펴본 Prototype은 모든 객체에 적용된다. 하지만 함수에는 조금 더 추가된 Prototype 메카니즘이 적용된다. new Method()와 같이 함수 앞에 new 키워드를 사용하여 객체를 생성할 수 있다. 이 new 키워드에는 약간의 비밀이 숨겨져있다. 비밀을 이해하기 위해 먼저 함수의 prototype이라는 프로퍼티에 대해 알아보자! 우선 prototype.. Prototype JS는 프로토타입 기반언어라고 불리기도 한다. 이 프로토타입이란 무엇인지 어떤 메카니즘이 있는지 알아보자!! [[Prototype]] 다들 객체를 console에 찍어본 경험이 한 번 정도는 있을 것이다. 이 때 객체를 찍어보면 정체불명의 [[Prototype]]이 같이 찍히게 된다. 이는 숨김 프로퍼티로 모든 JS 객체들이 가지고 있으며, 다른 객체를 참조하는 속성이다. (null이 될 수도 있다.) 이 [[Prototype]]이 참조하는 객체를 프로토타입이라고 부른다. 일반적으로 객체들은 기본적으로 최상위 객체인 Object를 프로토타입으로 가지게 된다. 또한 이 Object는 프로토타입으로 null을 가지게 된다. 이 프로토타입은 JS에서 상속의 기능을 한다. 프로토타입의 메카니즘은 다음과 같다. .. Generic 오늘은 TypeScript에서 Generic을 어떻게 사용하는지에 대해 알아보겠다. Genric은 단일 타입이 아닌 다양한 타입에서 작동하는 function, class, interface를 만들 때 사용된다. 간단히 다음 예시를 살펴보자! function printValGeneric(val: T): T { console.log(val); return val; } const a = printValGeneric('hi'); const a2 = printValGeneric('hi'); 'printValGeneric' 함수는 입력받은 값을 출력 및 반환하는 함수이다. 먼저 문법부터 살펴보면 함수를 선언할 때 'T'라는 타입변수를 로 감싸서 입력받고 있다. 또한 'T' 타입의 인수 'val'을 입력받고 있고, .. 객체 Type 알아보기 객체의 값과 속성 타입 지정하기 type Height = number; type Name = string; interface IHeightRecord { [name: Name]: Height; } type THeightRecord = { [name: Name]: Height; } const heightRecord: IHeightRecord = { '철수': 170, '영희': 160, '길동': 175 } 구체적으로 속성명과 그 속성값의 type을 정하는 것이 아니라 속성명의 type은 무엇이고, 속성값의 type은 무엇인지만 정의할 수도 있다. interface와 접근제어자 interface IAnimal { readonly name: string; age: number; } type TAnimal =.. Type의 확장 Typescript에서 타입지정을 위해 Type alias와 Interface를 사용할 수 있는데, 이렇게 지정된 type들을 확장하는 기능도 지원하고 있다. 어떻게 확장할 수 있는지 배워보도록 하자! Intersection interface animal { readonly name: string; age: number; } type bird = animal & { wing: number; } type alias 기능을 사용할 때는 &를 사용해 연산하듯이 두 타입을 합칠 수 있다. 이를 `intersection`이라고 부르고, interface나 type alias로 지정된 타입을 모두 결합할 수 있다. 상속 interface animal { readonly name: string; age: number.. Type 추론 Typescript를 사용하다보면 타입 지정을 하지 않아도 에러가 나타나지 않는 경우가 있다. 이는 ts가 코드상황을 보고 타입을 인지 후 타입을 추론하는 것이다. → 타입추론 for(let i = 0; i < feeds.length; i++) feeds[i].read = false; 위와 같은 for문에서 i의 초기값으로 0을 넣고 있기때문에i의 type은 number라는 것을 알 수 있다. 이에 ts는 i의 type을 number로 지정하고 number type 외에 다른 type의 값을 넣으면 에러를 표시해준다. AJAX와 Axios 안에 있는 것 XmlHttpRequest 크롬에서 F12를 누르면 나오는 검사 탭에는 네트워크라는 탭이 있다. 그리고 네트워크 탭에는 또 Fetch/XHR이라는 토글버튼이 있다. 그리고 개발 중에는 이 XHR 탭에서 ajax나 axios를 통해 보낸 요청을 확인할 수 있다. 이 XHR은 XMLHttpRequest의 약자이다. 이 XHR을 사용하면 페이지를 새로고침하지 않고 URL로부터 데이터를 받아올 수 있다. XML 외에도 모든 종류의 데이터를 받아올 수 있고, HTTP, HTTPS, FTP, FILE 등의 다양한 프로토콜을 지원한다. JS 코드를 통해 XHR을 조금 더 살펴보자~ const xhr = new XMLHttpRequest(); const url = 'https://api.hnpwa.com/v0/news.. JS와 event loop JS는 어떤 언어인가? JS는 Single threaded language, 싱글 스레드 언어이다. 이게 뜻하는 바는 무엇일까? 이 말을 해석해보면 다음과 같다. 하나의 스레드 = 하나의 콜스택 = 동시에 하나의 코드만 실행가능 JS의 영역 중 call stack은 코드를 실행하는 영역이다. 메서드를 호출하면 call stack에 차례대로 쌓이게 되고, return이 일어나면 stack에서 제거된다. 위 사진을 통해 call stack은 한 번에 하나씩 메서드를 처리하는 것을 알 수 있다. 그렇다면 네트워크 요청[XmlHttpRequest]은 어떻게 처리될까? 지금까지 우리가 배운 대로라면, 요청을 보내고 응답이 올 때까지 기다릴 것이다. 그리고 응답이 와야 다음 코드를 실행할 것이다. 이는 성능을 저하.. 이전 1 2 다음
