코딩하는라민

[TypeScript] 함수의 매개변수(선택적 매개변수, 기본 매개변수, 나머지 매개변수) 📌 함수 매개변수 변수와 마찬가지로 타입 애너테이션으로 함수의 매개변수의 타입을 선언할 수 있다. function home(todo: string){ console.log(`오늘 할일 : ${todo}!`); } any 타입 매개변수 function home(todo){ console.log(`오늘 할일 : ${todo}!`); } 매개변수에 명시적 타입 정보가 선언되어 있지 않기 때문에 타입을 알 수 없다. 이 경우 매개변수는 any 타입으로 간주된다. 📌 필수 매개변수와 선택적 매개변수 ✏️ 필수 매개변수 자바스크립트에서는 인수의 수와 상관없이 함수를 호출할 수 있는 반면, 타입스크립트에서는 잘못된 수의 인수로..

[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &) 📌 객체 타입 유니언 객체 타입 유니언이란 타입스크립트에서 두 개 이상의 객체 타입을 결합하는 방법이다. 객체 타입 유니언은 | 연산자를 사용하여 표현한다. ✏️ 유추된 객체 타입 유니언 변수에 여러 객체 타입 중 하나가 될 수 있는 초깃값이 주어지는 경우. const family = Math.random() > 0.3 ? { name: "june", age: 25 } : { name: "me", hobby: "piano" }; family.name; // string family.age; // number | undefined family.hobby; // string | undefined 타입스크립트는 ..

[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티) 📌 객체의 선택적 속성(Optional Properties) 선택적 속성은 인터페이스나 타입 정의에서 특정 속성이 필수적으로 존재하지 않아도 되는 속성을 의미한다. 즉 해당 속성이 있을 수도 있고 없을 수도 있는 경우에 사용할 수 있다. 이렇게 선택적 속성을 정의하기 위해 속성 이름 뒤에 물음표(?)를 추가할 수 있다. type Person = { name: string; age?: number; } // Ok const me: Person = { name: "ramin", } // Ok const you: Person = { name: "you", age: 27, } Person 타입은 name 은 필수 ..

[TypeScript] 초과 속성 검사 (Excess Property Checks) 📌 초과 속성 검사(Excess Property Checks) 초과 속성 검사란 객체 리터럴을 사용하여 새로운 객체를 생성할 때, 타입스크립트가 추가로 정의되지 않은 속성을 감지하는 기능을 말한다. 이 기능은 구조적 타이핑(structural typing) 개념에 기반한다. ✏️ 객체 리터럴의 타입 검사 type Person = { name: string; age: number; }; const me: Person = { name: "ramin", age: 20, hobby: "game", // Error } 위 코드에서 "hobby" 속성은 "Person" 타입에 정의되어 있지 않다. 이 경우 타입스크립트는 초과 속성 ..

[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias) 📌 객체 타입 원시 타입을 제외하고 가장 많이 등장하는 타입. 객체는 프로퍼티를 가지는 자바스크립트 값이다. 객체를 정의하려면 해당 객체의 프로퍼티들과 각 프로퍼티의 타입을 나열하면 된다. const info = { name: 'ramin', favoriteNumber: 7, }; info.name; // 타입: string info['favoriteNumber']; // 타입: number info 가 가지고 있는 속성 외의 이름으로 접근하려고 하면 '타입 오류'가 발생한다. 📌 객체 생성 방법 - 객체 리터럴 객체 리터럴(Object Literal)은 중괄호({})를 사용하여 객체를 생성하는 것을 말한다. 속성값..

[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란? 📌 구조적 타이핑의 정의 구조적 타이핑은 객체나 데이터의 구조에 기반하여 타입 호환성을 결정하는 타입 시스템 구조적 타이핑은 객체가 특정한 타입으로 정확히 명시되어 있지 않아도, 객체의 구조가 타입과 일치하는지를 확인하여 타입 호환성을 결정한다. 즉, 객체의 속성 구조와 타입이 일치한다면 타입 호환성이 성립된다. 이러한 특성은 코드의 재사용성과 유연성을 높일 수 있다. 📌 구조적 타이핑 예시 type Cafe = { menu: string; } type Home = { todo: string; } // 특정 타입으로 정확히 명시되어있지 않더라도 const homeCafe = { menu: "cake", todo: "sleep..

[TypeScript] 리터럴 타입(literal types) 📌 리터럴 타입(literal types) 특정한 값 자체를 타입으로 지정하는 기능이다. 리터럴 타입은 값의 정확한 타입을 나타내기 위해 사용된다. const friends = "dana"; friends = "udin"; // ❌ error: Cannot assign to 'friends' because it is a constant. 변수 frineds 는 "dana" 만 값으로 가질 수 있다. 다른 문자열들은 friends 와 호환되지 않는다. 문자열 뿐만아니라 숫자, 불리언, 객체 등의 다양한 값에 대해 사용할 수 있다. type MyFavoriteNumber = 3; type MyBoolean = true; type MyInfo = ..

[TypeScript] 유니언 타입(Union Type)과 내로잉(narrowing) 📌 타입스크립트의 추론 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 📌 유니온 타입 둘 이상의 타입을 허용하는 타입. 함수 매개변수 또는 반환 타입으로 여러 타입을 허용하고자 할 때 유니언 타입을 사용할 수 있다. function yourMenu(menu: boolean | string) { console.log(`menu: ${menu}`); } menu 매개변수에는 불린 또는 문자형을 받을 수 있다. 예를 들어 yourMenu(false) 이 될 수도 있고, yourMenu("..

[TypeScript] 타입 애너테이션(Type annotation) 📌 타입의 종류 타입스크립트의 타입은 자바스크립트의 기본 원시 타입과 일치한다. null undefined boolean string number bigint symbol 📌 오류의 종류 오류의 종류 설명 구문 오류 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우 타입 오류 타입 검사기에 따라 일치하지 않는 것이 감지된 경우 📌 타입 애너테이션 초깃값을 할당하지 않고도 변수 타입을 선언할 수 있는 구문을 말한다. 진화하는 any : 초기 타입을 유추할 수 없는 변수 let name: string; name = "ramin"; 📌 불필요한 타입 애너테이션 타입을 즉시 유추할 수 있는 변수에도 타입 애너테이션을 사용할 수 있다. 하..

[책 리뷰] 그림과 작동 원리로 쉽게 이해하는 웹의 기초 얼마전 4개월에 걸친 부트캠프를 무사히 수료했다. 하지만 부트캠프에서는 HTML/CSS, Javascript, React 등에 대해서만 배웠고, 정작 웹의 기초는 배우지 않았다. 꼭 알아야할 웹에 대해 전혀 다루지 않고 넘어갔기 때문에 결국은 교육을 수료한 후 따로 공부해보고자 했다. 막상 마켓컬리, 당근마켓을 클론코딩했는데 내가 짠 코드가 어떤 원리로 브라우저에 렌더링되고 그려지는지 전혀 알지못했다. 아무리 프론트엔드 개발자가 눈에 보이는 페이지를 만든다고 해도, 그 브라우저에 그려지는 페이지의 기초가 담긴 웹의 개념에 대해서 모른다는 것은 있을 수 없는 일이었다! 이 책은 제목에 걸맞게 웹의 기초에 대해서 다루고 있다. 처음 웹을 접하는 사람이..