WoohyunKing의 개발 성장일지

타입 명시(Type Annotation) 타입 명시란 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정하는 것을 의미한다. Annotate는 "주석을 달다" 라는 사전적인 뜻을 가지고 있다. 타입스크립트에서는 변수, 함수, 함수 반환값의 데이터 타입을 지정하기 위해 "타입 명시(Type annotation)"을 사용한다. 즉, 타입에 주석을 달아준다. 한 번 식별자를 특정 타입으로 annotated 하면 해당 타입만 사용할 수 있다. 다른 타입을 사용하게 되면 타입스크립트 컴파일러가 에러를 던진다. 1) 변수에 타입 지정하기 let a: number; //a라는 변수에는 number 타입의 값만 할당 및 재할당할 수 있다. a = "Mark"; //error a = 23; ..

In Typescript, a 'type' is a convenient way to refer to the different properties and functions that a value has. 타입이란 값이 가지고 있는 속성(프로퍼티)이나 함수(메서드)를 추론할 수 있는 편리한 방법이다. 서론 자바스크립트의 값들은 타입에 따라 각각의 프로퍼티와 메서드를 가지고 있다. 예를 들어 위와 같이 "apple" 이라는 값은 단순히 string 문자열이라고 설명할 수도 있지만, 조금 더 상세히 설명하자면 문자열이 가지는 프로퍼티와 메서드를 가지고 있는 값(Value)라고 할 수 있다. 자바스크립트의 문자열은 .length 와 같은 프로퍼티를 가지고, .toLowerCase()나 .split() 등과 같은 ..

1) Transition /* Apply to 1 property */ /* property name | duration */ transition: margin-left 4s; /* property name | duration | delay */ transition: margin-left 4s 1s; /* property name | duration | timing function | delay */ transition: margin-left 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-left 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease..

1) 얕은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 원시 타입 데이터의 경우 '값'이 동일한지만 비교하고, 배열과 객체과 같은 참조 타입 데이터의 경우 '참조값'만 비교한다. 2) 깊은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.st..

구조 분해 할당 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // ..

1. Array.prototype.filter() const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // Expected output: Array ["exuberant", "destruction", "present"] filter() 메서드는 주어진 함수의 테스트(조건문)를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter는 해석 그대로 필터링, 즉 배열의 요소들을 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는..

43.1) Ajax란 ? Ajax(Asynchronous Javascript And XML)란 JS를 사용하여 브라우저가 서버에게 '비동기 방식'으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아서 웹페이지 전체를 처음부터 다시 렌더링했다. 이러한 전통적인 방식은 다음과 같은 단점이 있다...

42.1 동기 처리와 비동기 처리 23장 실행 컨테스트에서 살펴본 바와 같이 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 push되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 pop되어 제거된다. 함수가 실행되려면 '함수 코드 평가 과정'에서 생성된 함수 실행 컨텍스트가 콜 스택에 push되어야 한다. 다시 말해, 콜 스택에 함수 실행 컨텍스트가 push되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 콜 스택에 push되기 때문이다. 이처럼 함수의 실행 순서는 콜 스택..

41.1) 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약에 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 후에 호출되도록 함수 호출을 "예약"하기 위해서는 Timer 함수를 사용해야 한다. 👉🏻 이를 호출 스케줄링(Scheduling a Call)이라고 한다 ! JS는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout, clearInterval을 제공한다. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성한다. 즉, 타이머 함수 setTimeout과 setInterval이 생성한 타이머가 만료되면 콜백 함수가 ..

'번들링'이란 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할 수 있다. 개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다. 번들링의 의미 프로그래밍을 하다보면 자주 마주치는 단어 중에 번들링이란 단어가 있습니다. 번들이라는 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 걸 이름에서 유추할 수가 있죠. 그렇다면 이게 당연히 파일을 묶는 것일테고 어째서 파일을 묶는 작업이 필요한걸까 생각해 볼 수 있습니다. 정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다. 모듈(module)이란 분리된 파일입니다. 즉, 분리된 파일들을 하나로 합쳐주는..