전체 글144 [TypeScript] Generic, Union type, 제약 조건 Generic이란? 정적 type 언어는 클래스나 함수를 정의할 때 type을 선언해야 한다. ex) C 언어는 int type 변수를 선언하면 정수형 값만 할당할 수 있다. Generic은 코드를 작성할 때가 아니라 코드가 수행될 때 타입을 명시한다. 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시한다. 일반적으로 식별자는 T, U, V, ...를 사용한다. 필드 이름의 첫 글자를 사용하기도 한다 Generic을 사용하는 이유 재사용성이 높은 함수와 클래스를 생성할 수 있다. 여러 타입에서 동작이 가능하다. (한 번의 선언으로 다양한 타입에 재사용할 수 있다.) 코드의 가독성이 향상된다. • 오류를 쉽게 포착할 수 있다. • any 타입을 사용하면 컴파일 시 타입을 체크하지 않는다. 타.. 2022. 5. 6. [TypeScript] 타입스크립트 개념 및 사용 타입스크립트 TypeScript 란? Microsoft에서 개발한 오픈 소스 프로그래밍 언어로 자바스크립트의 단점을 보완하기 위해 만들어졌다. 자바스크립트는 동적 타입 언어로 런타임 속도는 빠르지만 타입 안정성이 보장되지 않는다. 따라서 대규모 애플리케이션을 개발하는데 어렵고 불편하다. 반면에 타입스크립트는 정적 타입 언어이기 때문에 컴파일 시 시간이 걸리지만 안정성이 보장된다. 즉, 타입스크립트는 타입을 선언하여 간편하게 에러를 잡을 수 있다. 타입스크립트는 자바스크립트의 상위 집합으로 자바스크립트의 한계를 해결한다. 타입스크립트를 쓰는 이유 동적 타입을 정적으로 선언할 수 있다. 타입 유추를 통한 타입 제어가 가능하다. 컴파일 시점에 오류를 포착할 수 있다. JavaScript에서 찾을 수 없는 추가.. 2022. 5. 5. [JS] 디바운싱과 쓰로틀링 디바운싱 Debouncing 연속으로 호출되는 함수 중 마지막에 호출되는 함수만 실행되도록 하는 것 (입력이 끝났을 시) 다음 코드와 같이 ajax 요청이 있을 경우 사용된다. var timer; document.querySelector('#input').addEventListener('input', function(e) { if(timer) { clearTimeout(timer); } timer = setTimeout(function() { // 실행 코드 내용 }, 1000); }); 이벤트가 발생할 때마다 이전 내용을 clear 하고 새로운 타이머 설정한다 설정해둔 시간(1초) 내에 이벤트가 발생하지 않으면 코드를 실행한다 쓰로틀링 Throttling 마지막 함수가 호출된 후 일정 시간이 지나기 전.. 2022. 4. 27. [JS] 자바스크립트 동기(synchronous)/비동기(Asynchronous) 동기식(synchronous) - 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것 - 즉, 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 작업이 끝나면 새로운 작업을 시작하는 것 - 분기문, 반복문, 함수 호출 등이 동기적으로 실행 - 코드의 흐름과 실제 제어 흐름이 동일 - 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면 프로그램 정지 비동기식(Asynchronous) - 시작된 작업의 완료 여부와 상관없이 새로운 작업을 시작하는 방식 자바스크립트는 다른 멀티스레드 프로그래밍 언어(자바, C++)와 다른 방식으로 비동기 동작을 처리한다. 자바스크립트의 비동기 - 자바스크립트 엔진은 비동기 처리를 제공하지 않는다. - 비동기 코드는 정해진 함수를 제공하여.. 2022. 4. 26. [JS] 자바스크립트 내장 객체 자바스크립트 내장 객체 자바스크립트는 여러 용도에 활용하는 객체를 내장 숫자, 문자, 날짜, JSON 객체 등을 다루는 유용한 객체 제공 globalThis - 전역 객체 지칭하는 변수 - 전역 객체는 환경에 따라 다름 - 브라우저는 window, node환경은 global 객체 지칭 - globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리킴 window - DOM document를 포함하는 창을 나타내는 객체 - 전역 스코프에 선언된 변수는 모두 window의 property - 현재 창의 정보를 얻거나 조작 - globalThis는 브라우저 환경에서 window 객체와 같음 document function documentInfo(){ console.log("문서 UR.. 2022. 4. 22. [JS] 자바스크립트 Hoisting 코드 실행 시 변수 처리 - 자바스크립트 엔진이 코드 읽으면 생성 단계에서 실행 컨텍스트 생성 - 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장 - var 변수는 저장 시 undefined로 초기화 - let, const는 초기화 X Hoisting console.log(call()) //undefined var x = 1; console.log(call()) //1 function call(){ return x } - 변수가 선언된 시점보다 앞에서 사용되는 현상 - var 변수는 생성 단계에서 undefined로 초기화 - 함수는 생성 단계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출 가능 console.log(call()) // ReferenceError : Cannot acce.. 2022. 4. 22. 이전 1 2 3 4 ··· 24 다음