BO의 개발로그

타입 호환성은 인터페이스를 공부할 때 꼭 짚고 넘어가야 하는 특성 중 하나이다. 타입 호환성은 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미하는 것인데, 아래 코드를 살펴보자. interface Restaurant { name: string; star: number; } let pinetree: Restaurant; // pinetree 변수 선언 let pinetreeWithAddress = { // pinetreeWithAddress 변수 선언하고 초기화 name: "대나무한정식", star: 5, address: "동대문", }; pinetree = pinetreeWithAddress; Restaurant 타입은 name과 star 두 가지의 프로퍼티만 있기 때문에 pinetree..

자바스크립트에서는 인터페이스가 존재하지 않지만, 자바, C, 타입스크립트와 같은 정적 타입 언어에서는 자주 사용되는 개념이다. 자바에서의 인터페이스는 클래스에서 꼭 구현해야 하는 메소드를 정의할 때 사용된다. 인터페이스는 상호 간에 정한 약속이나 규칙을 의미하는데, 타입스크립트에서의 인터페이스는 리액트 프로젝트에서 가장 많이 쓰이는 타입 중 하나로 인터페이스 변수, 함수, 클래스, 파라미터 등의 범주에서 약속을 정의한다. 주로 state와 props의 타입을 정의하는 데 사용한다. 1. 객체 타입 정의 인터페이스는 객체의 타입을 정의할 때 사용된다. function getInfo(restaurant: { name: string }) { console.log(restaurant.name); } getInf..

매번 변수를 선언할 때마다 타입을 일일이 정의하는 것이 번거롭다고 생각할 수도 있다. 그런 번거로움을 해결하기 위해 타입 추론이라는 개념이 존재한다. 정적 타입 언어는 원래 모든 변수에 정확히 타입을 정의하지 않으면 에러가 나지만, 타입스크립트에서는 타입을 표기하지 않아도 타입스크립트 컴파일러가 변수에 할당된 값을 보고 타입을 추측한다. let starArr = [1, 2, 3]; starArr.push('4점'); // 에러: Argument of type 'string' is not assignable to parameter of type 'number'. 위와 같이 starArr라는 변수에 숫자로만 된 배열을 정의하고, push 메소드를 활용하여 string을 배열에 넣어주려고 하면 string은 ..

💡 들어가기에 앞서, 콜론을 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. 1. Boolean 변수의 타입이 참, 거짓 형태의 불리언 값인 경우에는 아래와 같이 선언한다. let isLoggedIn: boolean = true; 2. Number 변수의 타입이 숫자인 경우에는 아래와 같이 선언한다. let num: number = 7; 3. String 변수의 타입이 문자열인 경우 아래와 같이 선언한다. let str: string = 'hello'; 4. Array 변수의 타입이 배열인 경우 아래와 같이 선언한다. let arr: number[] = [1,2,3]; 또는 아래와 같이 제네릭을 사용할 수 있다. (제네릭은 다음 포스팅에서 알아보자!..

목차 1. 함수 정의 1.1 함수 선언식 1.2 화살표 함수 2. 다양한 매개변수 타입 1. 함수 정의 타입스크립트에서는 함수의 타입을 정의해줘야 한다. 1.1 함수 선언식 함수 선언식의 타입 정의는 아래와 같다. function formatDate(d: Date): string { 1️⃣, 2️⃣ let year = d.getFullYear(); let month = d.getMonth() + 1; let day = d.getDate(); return `${year}년 ${month}월 ${day}일` } const today = formatDate(new Date()); 1️⃣ 매개변수의 우측에 콜론과 매개변수의 타입을 정의한다. → formatDate(d: Date) 2️⃣ return 값의 타입은..

목차 1. 함수와 메소드 2. this란? 3. this의 동작 방식 3.1 전역 공간에서 this가 바라보는 대상 3.2 메소드로 호출될 때 this가 바라보는 대상 (암시적 binding) 3.3 원하는 대상으로 this binding하기 (명시적 binding) 4. 화살표 함수(Arrow Function) 5. 참고 링크 들어가기에 앞서, 다른 언어에서 this는 일반적으로 클래스(class)에서만 사용하며, class로 생성한 인스턴스 객체를 의미한다. 하지만 자바스크립트에서는 그렇지 않다. 그렇다면 자바스크립트에서의 this는 어떻게 동작할까? 1. 함수와 메소드 this 공부에 앞서, 꼭 알아야 할 함수와 메소드의 차이에 대해서 짚고 넘어가 보자! 함수와 메소드는 모두 function 키워드..

목차 1. 스코프란? 2. 스코프의 종류 2.1 Global(전역) 스코프 2.2 Local(지역) 스코프 3. 스코프 체인 4. 클로저란? 5. 참고 링크 1. 스코프란? 스코프(Scope)는 '유효 범위'라는 뜻으로, 변수가 유효한(살아 있는) 범위라고 할 수 있다. var x = 'global'; function foo () { var x = 'function scope'; console.log(x); // function scope } foo(); console.log(x); // global 스코프가 존재하기 때문에 우리가 변수를 중복해서 사용할 수 있는 것이다. 만약 스코프가 없었다면 코드 전체에 절대 충돌하지 않는 변수(식별자)명을 딱 하나만 써야 한다! 2. 스코프의 종류 2.1 Globa..

목차 1. 호이스팅이란? 2. 호이스팅의 범위 3. 변수 호이스팅 (var, let, const) 4. 함수 호이스팅 (함수 선언문, 함수 표현식) 4.1 함수 선언문과 함수 표현식 4.2 함수 선언문의 호이스팅 5. 참고 링크 1. 호이스팅이란? 자바스크립트 및 액션스크립트 코드를 인터프리터가 로드할 때, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되어 변수의 선언을 항상 컨텍스트 내의 최상위로 끌어올리는 것을 의미한다. 이는 오로지 변수에만 해당되는 것은 아니고 함수도 가능하며, 자바스크립트에서 함수의 호출을 첫 줄에서 하고 마지막 줄에 함수를 정의해도 문제없이 작동되도록 하는 유용한 특성이다. 한마디로, 호이스팅이란 변수가 끌어올려지는 현상을 말한다. var 변수 선언과 함수 선언문에서만 호..