코딩하는라민

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

[책 리뷰] 개발자가 되고 싶습니다 내가 개발자가 되기 위해 준비하기 시작한지는 1년이 채 되지 않았다. 10살의 나는 동네 컴퓨터 학원을 다니면서 워드프로세스 자격증을 배우기 위해 한글 및 영어 타이핑 연습을 하고, 한글 프로그램을 익혔다. 주변의 언니, 오빠들이 나모웹에디터로 홈페이지를 만드는 모습을 보면서 나도 홈페이지를 만들어보고싶다! 라고 생각했었는데 학원 선생님이 내가 너무 어리다는 이유로 알려주지 않았었다.. 이때 당시에 내가 배우고 싶은 걸 다 못배웠던 기억이 있는데, 이때도 '개발자가 되고 싶습니다'와 같은 가이드북 같은 존재가 있었다면 얼마나 좋았을까 생각이 들었다. 나는 비전공자로 개발자가 되기 위해 공부를 시작한건 작년 7월부터였다. 처음에는 개발의 종류도 모르고, 기술 스택도, 무..