[TypeScript] 24. 일관성 있는 별칭 사용하기

넓히기 과정 제어하는 방법constlet 대신 const로 변수를 선언하면 더 좁은 타입이 된다.const x = 'x'; let vec = {x: 10, y: 20, z: 30}; getComponent(vec, x);x 는 재할당 될 수 없기 때문에 ⇒ 더 좁은 타입 (”x”)로 추론할 수 있다. 타입 추론의 강도를 직접 제어하려면⇒ 타입스크립트의 기본 동작을 재정의해야명시적 타입 구문 제공타입 체커에 추가적인 문맥 제공const 단언문 사용 (const 단언문과 변수 선언에 쓰이는 let 이나 const와 혼동 x) const v1 = { x: 1, y: 2, }; // 타입은 { x: number; y: number; } const v2 = { x: 1 as const, y: 2, }; // 타입..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[TypeScript] 17. 변경 관련된 오류 방지를 위해 readonly 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. 변경 관련된 오류 방지를 위해 readonly 사용하기 function arraySum(arr: number[]) { let sum = 0, num; while ((num = arr.pop()) !== undefined) { sum += num; } return sum; } function printTriangles(n: number) { const nums = []; for (let i = 0; i < n; i++) { nums.push(i); console.log(arraySum(nums)); } }arraySum 함수배열 안의 숫자들을 모두 합치고계산이 끝나면 원래 배열이 전부 비게 된다.자바스크립트 배열은 내용을 ..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[React] 리액트 공식문서 스터디 - Describing the UI (2) Importing and Exporting Components

React 공식문서를 읽고 정리한 글입니다. Describing the UI – ReactThe library for web and native user interfaceshttps://react.dev/learn/describing-the-ui Importing and Exporting Components component 의 장점은 재사용성에 있다.⇒ 다양한 component들로 구성된 component를 만들 수 있다. 하지만 component를 묶고, 또 구성하고 반복할 수록 다른 파일로 분리해야 한다는 것을 느끼기 마련이다.파일을 읽기 쉬워지고, 더 많은 곳에서 component를 효율적으로 재사용할 수 있게 될 것이다. The root component file Your First Compon..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[React] 리액트 공식문서 스터디 - Describing the UI (1) Your First Component

React 공식문서를 읽고 정리한 글입니다. Describing the UI – ReactThe library for web and native user interfaceshttps://react.dev/learn/describing-the-ui YourFirst Component React 애플리케이션 component 라고 불리는 고립된 조각들로 빌드된다. component 란 ?하나의 JavaScript 함수버튼과 같이 작을 수 있고, 전체 페이지만큼 클 수 있다. https://codesandbox.io/embed/affectionate-tdd-tefyif?fontsize=14&hidenavigation=1&theme=dark Components: UI building blocks My First..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

[TypeScript] 16. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. number 인덱스 시그니처보다는 Array, 튜플, ArrayLike 사용하기 자바스크립트에서 객체란?키/값 쌍의 모음키는 보통 문자열값은 어떤 무엇이든 될 수 있다 파이썬, 자바에서 볼 수 있는 ‘해시 가능’ 객체 표현이 자바스크립트에는 없다.toString 메서드가 호출되어 객체가 문자열로 변환되어 버린다.> x={} {} > x[[1,2,3]] = 2 2 > x { '1,2,3': 1 } 숫자는 키로 사용할 수 없다.자바스크립트 런타임이 문자열로 변환해 버린다.> { 1: 2, 3: 4 } { '1': 2, '3': 4 } 배열은 분명히 객체이다때문에 숫자 인덱스를 사용하는 것이 당연하다.> typeof [] 'o..

• format_list_bulleted Front-End
• · 2023. 7. 26.
• textsms

__[TypeScript] 01. 타입스크립트와 자바스크립트 관계 이해하기__

📚 Effective TypeScript 책을 읽고 공부한 내용을 정리한 글입니다. 💡타입스크립트는 자바스크립트의 상위집합(superset)이다타입스크립트와 자바스크립트의 관계타입스크립트는 문법적으로도 자바스크립트의 상위집합자바스크립트 프로그램에 문법 오류가 없다면유효한 타입스크립트 프로그램이라고 할 수 있다.문법의 유효성과 동작의 이슈는 독립적인 문제자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니더라도 타입 체커에게 지적 가능성 높음하지만, 타입스크립트는 여전히 작성된 코드를 파싱하고 자바스크립트로 변환 가능확장자의 차이자바스크립트 파일은 .js 또는 .jsx 확장자타입스크립트 파일은 .ts 또는 .tsx 확장자하지만 타입스크립트는 상위집합이기 때문에 main.js를 main.ts로 바..

• format_list_bulleted Front-End
• · 2023. 7. 10.
• textsms