let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
Tuple
배열인데 타입이 한가지가 아닌 경우
tuple은 객체.
꺼내 사용할때 주의가 필요하다.
배열을 Destructuting 하면 타입이 제대로 얻어짐
let x: [string, number]; // Declare a tuple type
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error
x[3] = "world"; // Type '"world"' is not assignable to type 'undefined'.
const person: [string, number] = ["mark", 35];
const [first, second, third] = person; // Error
Any
어떤 타입이어도 상관없는 타입이다.
핵심은 any를 최대한 쓰지 않는 것. 왜냐면 컴파일 타임에 타입 체크가 정상적으로 이뤄지지 않기 때문.
그래서 컴파일 옵션 중에는 any를 써야하는데 쓰지 않으면 오류를 뱉도록 하는 옵션도 있다고 한다.
noImplicitAny
function returnAny(message): any {
console.log(message);
}
returnVoid('리턴은 아무거나');
any 는 계속해서 개체를 통해 전파된다.
결국, 모든 편의는 타입 안전성을 잃는 대가로 온다는 것을 기억해야 한다.
타입 안전성은 TypeScript 를 사용하는 주요 동기 중 하나이며 필요하지 않은 경우에는 any 를 사용하지 않도록 해야 한다.
let looselyTyped: any = {};
let d = looselyTyped.a.b.c.d;
// ^ = let d: any
Unknown
응용 프로그램을 작성할 때 모르는 변수의 타입을 묘사해야 할 수도 있다.
이 경우, 컴파일러와 미래의 코드를 읽는 사람에게 이 변수가 무엇이든 될 수 있음을 알려주는 타입을 제공하기를 원하므로 unknown 타입을 제공.
typeof 검사, 비교 검사 또는고급 타입 가드를 수행하여 보다 구체적인 변수로 좁힐 수 있음.
declare const maybe: unknown;
// 'maybe' could be a string, object, boolean, undefined, or other types
const aNumber: number = maybe; // Type 'unknown' is not assignable to type 'number'.
if (maybe === true) {
// TypeScript knows that maybe is a boolean now
const aBoolean: boolean = maybe;
// So, it cannot be a string
const aString: string = maybe; // Type 'boolean' is not assignable to type 'string'.
}
if (typeof maybe === "string") {
// TypeScript knows that maybe is a string
const aString: string = maybe;
// So, it cannot be a boolean
const aBoolean: boolean = maybe; // Type 'string' is not assignable to type 'boolean'.
}
Never
리턴에 사용된다.
리턴에 사용되는 경우, 아래 3가지 정도의 경우가 대부분
// Function returning never must have unreachable end point
function error(message: string): never {
throw new Error(message);
}
// Inferred return type is never
function fail() {
return error("Something failed");
}
// Function returning never must have unreachable end point
function infiniteLoop(): never {
while (true) {
}
never 타입은 모든 타입의 subtype 이며, 모든 타입에 할당 할 수 있다.
하지만, never 에는 그 어떤 것도 할당할 수 없다.
any 조차도 never 에게 할당 할 수 없다.
잘못된 타입을 넣는 실수를 막고자 할 때 사용하기도 한다.
let a: string = 'hello';
if (typeof a !== 'string') {
let b: never = a;
}
Void
어떤 타입도 가지지 않는 빈 상태를 의미.
값은 없고 타입만 있다.
일반적으로 값을 반환하지 않는 함수의 리턴 타입으로 사용한다. 그 외에는 사용할 일이 거의 없다.
할당이 가능한 값은 undefined.
function returnVoid(message): void {
console.log(message);
}
returnVoid('리턴이 없다');
let unusable: void = undefined;
new Boolean(false); // typeof new Boolean(false) : 'object'
new String('world'); // typeof new String('world') : 'object'
new Number(42); // typeof new Number(42) : 'object'
Boolean / boolean
가장 기본적인 데이터 타입
단순한 true 혹은 false 값이다.
JavaScript / TypeScript 에서 'boolean' 이라고 부른다.
let isDone: boolean = false;
isDone = true;
console.log(typeof isDone); // boolean;
let isOk: Boolean = true;
// Type 'Boolean' is not assignable to type 'boolean'.
// 'boolean' is a primitive, but 'Boolean' is a wrapper object.
// Prefer using 'boolean' when possible.
let isNotOk: boolean = new Boolean(true);
Number / number
JavaScript 와 같이, TypeScript 의 모든 숫자는 부동 소수점 값이다.
TypeScript는 16진수 및 10진수 리터럴 외에도, ECMAScript 2015에 도입된 2진수 및 8진수를 지원한다.
NaN
1_000_000 과 같은 표기 가능
let decimal: number = 6;
let hex: number = 0xf00d; //16진수
let octal: number = 0o744; //8진수
let binary: number = 0b1010; //2진수
let NotANumber: number = NaN;
let underscoreNum: number = 1_000_000;
template string
행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열
이 문자열은 backtick (= backquote) 기호에 둘러쌓여 있다.
포함된 표현식은 `${ expr }` 와 같은 형태로 사용한다.
let fullName: string = "Minseung Gang";
let age: number = 32;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;
console.log(sentence); // I'll be 33 years old next month.
const sym = Symbol();
const obj = {
[sym]: "value",
};
obj["sym"]; //접근 불가능
obj[sym]; // 접근 가능
Undefined & Null
number 에 null 또는 undefined 를 할당할 수 있다는 의미.
하지만, 컴파일 옵션에서 `--strictNullChecks`사용하면, null 과 undefined 는 void 나 자기 자신들에게만 할당할 수 있다.
이 경우, null 과 undefined 를 할당할 수 있게 하려면, union type 을 이용해야 한다.
let name: string = null;
let age: number = undefined;
// strictNullChecks => true
// Type 'null' is not assignable to type 'string'.
let name: string = null; (X)
// null => null || void, undefined => undefined || void
// Type 'null' is not assignable to type 'undefined'.
let u: undefined = null; // (X)
let v: void = undefined; // (O)
let union: string | null | undefined = 'str';
Object
javascript의 객체와 조금 다르다.
"primitive type 이 아닌 것"을 나타내고 싶을 때 사용하는 타입
// create by object literal
const person1 = { name: "Minseung", age: 32 };
// person1 is not "object" type.
// person1 is "{name: string, age: number}" type.
// create by Object.create
const person2 = Object.create({ name: "Minseung", age: 32 });
스레드는 스택메모리를 제외한 다른 메모리 영역들을 프로세스 내 다른 스레드들과 공유합니다.
차이점
프로세스는 자원을 공유하지 않지만, 스레드는 자원을 공유한다는 차이가 있습니다.
- 멀티 프로세스 & 멀티 스레드란?
멀티 프로세스는 하나의 프로그램을 여러개의 프로세스로 구성하여 각 프로세스가 하나의 작업(task)을 처리하는 것입니다.
하나의 프로세스가 잘못 되어도 프로그램은 동작한다는 장점이 있지만 Context Switching 비용이 발생합니다.
멀티 스레드는 프로그램을 여러개의 스레드로 구성하고 각 스레드가 작업(task)을 처리하는 것입니다. 캐싱적중률이 높아 시스템 자원 소모 감소, 처리비용 감소(실행 속도 향상), 스레드간 자원 공유(stack 제외)라는 장점이 있지만 디버깅이 어렵고, 동기화 이슈가 발생할 수 있다는 단점이 있습니다.
멀티코어는 하드웨어 측면에서 실행단위를 병렬적으로 처리할 수 있도록 여러 프로세서가 있는 것
Semantic HTML은 적절한 의미의 태그를 사용하여 정보의 구조에 맞게 마크업하는 HTML 작성방법이라고 할 수 있다.
시멘틱 태그를 사용하게되면 프로젝트를 유지보수할때나 개발자들이 코드를 파악하기 쉬워진다는 장점이 있다.
또한 검색 엔진 최적화(SEO)와 웹 접근성을 향상시키는 데 큰 도움이 된다.
예를 들어, 웹 사이트에 블로그 게시물이 있다고 가정해 보자.
블로그 게시물의 제목, 날짜, 본문 등은 모두 다른 의미를 가지고 있다. 이러한 정보를 의미 있는 HTML 요소로 표시하면 검색 엔진이 이해하기 쉽고, 스크린 리더 사용자도 콘텐츠를 더 잘 이해할 수 있다.
h1태그를 예로 들 수 있다. h1는 페이지의 가장 중요한 제목을 나타내는 의미를 가진다.
블로그 게시물의 제목을 h1 요소로 표시하여 , 검색 엔진이 페이지 내에서 가장 중요한 내용을 파악하는 데 도움을 준다.
또한 본문은 article 요소로 감싸서 표시할 수 있다. 이렇게 하면 검색 엔진이 해당 영역을 본문으로 인식하며, 스크린 리더 사용자도 페이지의 본문을 쉽게 구분할 수 있다.
이와 같은 방식으로 의미 있는 HTML 요소를 사용하면 검색 엔진 최적화와 웹 접근성을 개선하며, 브라우저나 디바이스의 종류에 관계없이 일관된 사용자 경험을 제공할 수 있다.
검색엔진최적화(SEO)와 웹 접근성에 대해 더 자세히 알고싶어요.
검색 엔진 최적화 측면에서는, 시맨틱 태그를 사용하면 검색 엔진이 웹 페이지의 내용을 이해하기 쉽다.
예를 들어, header, nav, main, article, aside, footer 등의 시맨틱 태그를 사용하면 해당 영역이 어떤 내용을 담고 있는지 검색 엔진이 쉽게 파악할 수 있다.
이렇게 검색 엔진이 웹 페이지의 내용을 정확하게 파악하면, 검색 결과에서 해당 웹 페이지가 더 잘 노출될 가능성이 높다.
또한, 웹 접근성 측면에서는 시맨틱 태그를 사용하면 스크린 리더기와 같은 보조 기술을 사용하는 사용자들이 웹 페이지의 내용을 이해하기 쉬워진다. 시맨틱 태그를 사용하면 해당 영역이 어떤 내용을 담고 있는지 명확하게 구분할 수 있으므로, 사용자들이 원하는 정보를 빠르고 쉽게 찾을 수 있다.
또한, 시맨틱 태그를 사용하면 웹 페이지의 구조를 논리적으로 나타내므로, 보조 기술을 사용하는 사용자들이 웹 페이지를 보다 쉽게 이해할 수 있다.
