TypeScript
- TypeScript란 javascript + type 즉 js 값의 type이 추가된 언어
// 타입스크립트에서 사용할 수 있는 타입
const a: string = 'aaa';
const b: number = 1;
const c: boolean = true;
const d: null = null;
const e: undefined = undefined;
const f: symbol = Symbol();
const g: object = { name: 'tom' };
const 객체요소타입: { name: string } = { name: 'tom' };
// 같은 array 방식 (h = h1)
const h: Array<[]> = [];
const h1: [] = [];
const 배열요소타입: [boolean] = [true];
const 배열요소다중타입: (string | number)[] = ['hi', 1];
const i = (a: number, b: number): number => a + b;
// 타입 추론 - typescript가 자동으로 갑의 type을 추론
let helloByJs = 'hello';
let helloBy: string = 'hello';
const bye = 'Bye, ts';// [1, 2, 3, 4, 5] => number[] 숫자로 이루어진 배열로 type 표현
const handler = (number: number[]): number[] => {
let result = [];
for (let num of number) {
result.push(num);
}
return result;
};
console.log(handler([1, 2, 3, 4, 5]));type
// type이 변수처리 되면서 가독성이 좋아진다.
type TSumFn = (a: number, b: number) => number;
const test: TSumFn = (a, b) => {
return a + b;
};
type TUserInfo = {
name: string;
age: number;
gender?: 'male' | 'female'; // ?는 선택적 옵션으로 gender를 입력해도되고 입력하지않아도된다.
};
let user: TUserInfo = {
name: 'Tom',
age: 29,
};
- & : 공통적인 type이 있는경우 &로 type을 결합
type Person = {
name: string;
age: number;
};
< &로 공통 type 결합 방법 >
// 1) // PersonWorker와 위의 Person 타입 결합
type PersonWorker = Person & {
company: string;
readonly position: string; // 읽기 전용으로 Position 값은 변경못한다
getMoney: (amount: number) => number;
};
// 2) type을 정의한 type명을 아래와 같이 &로 type을 결합
type TSameInfo = PersonWorker & Person;
interface
// interface는 객체의 형태를 정의하는 데 사용됨
interface IPerson {
name: string;
age: number;
}
- type은 & 활용해서 따로 병합을 해야하지만 interface는 이름만 같으면 자동으로 병합이된다
interface IPerson {
name: string;
age: number;
}
interface IPerson {
gender: string;
}
const user : IPerson = {
name: "Tom";
age: 20;
gender: "male";
}
유틸리티 타입
// user type 정의
interface ISignupUser {
name: string;
age: number;
gender?: string;
address: string;
}- Pick : 특정 속성만 선택하여 타입을 만들어주는 유틸리티 타입
type TUser2 = Pick<ISignupUser, 'name' | 'age'>;
interface IUser extends Pick<ISignupUser, 'name' | 'age'> {}- Omit : 특정 속성을 제외한 타입을 만들어주는 유틸리티 타입
type TUserOmit = Omit<ISignupUser, 'name' | 'age'>;
interface IUserOmit extends Omit<ISignupUser, 'gender' | 'address'> {}- Partial : 모든 속성을 선택적으로 만들어주는 타입
const user1: Partial<ISignupUser> = {
name: 'Tom',
address: 'korea',
// Partial 속성으로 인해 age와 gender의 옵션이 없지만 선택적으로 만들어줌
};
- Required : 모든 속성을 필수로 만들어주는 타입
const user2: Required<ISignupUser> = {
name: 'Tom',
age: 22,
gender: "male"
address: 'korea',
// Required 속성으로 인해 gender에 옵셔널 체이닝이 들어가도 필수로 입력해야함
};
Generic
// T는 type의 관례적 의미로 type을 지정하겠다는 의미
type TUsers<T> = {
name: string;
age: number;
food: T; // 아래 ['rice', 'apple'] 문자열로 이루어진 배열이니 string[]로 받음
};
const person: TUsers<string[]> = {
name: 'Tom',
age: 20,
food: ['rice', 'apple'],
};
function getSize(values: number[] | string[] | (number | string)[]) {
return values.length;
}
// 에러 처리를 이런식으로 딱 Error만 들어올 수 있게 지정할 수 있음 - ex)string하면 Error말고도 string 전부가 들어올 수 있음.
function getSize<T>(values: T[] | T): number | 'Error' {
if (Array.isArray(values) || typeof values === 'string') {
return values.length;
} else {
return 1;
}
// 위 조건식을 삼항연산자로 표현
return Array.isArray(values) || typeof values === 'string' ? values.length : 'Error';
}
// 위 함수 선언식을 함수표현식 화살표함수로 변경
type TGeneric = <T>(values: T[] | T) => number | 'Error';
const getSize: TGeneric = (values) =>
Array.isArray(values) || typeof values === 'string' ? values.length : 'Error';
getSize<number>([1, 2, 3]);
getSize<string>(['1', '2', '3']);
getSize<string | number>([1, '2', 3]);
getSize<string>('Hello, world');
getSize<number>(100);
React
가상 DOM (Virtual DOM)
Virtual DOM이란 실제 DOM의 복사본으로 Virtual DOM과 비교해서 변경된 부분을 찾고 변경된 사항만 DOM에 업데이트
하기때문에 성능을 최적화 할 수 있다.
렌더링
React는 Client Side Rendering으로 클라이언트가 처음 브라우저에 접속할때 모든 문서를 다운로드 하기때문에 초기로딩 속도가 Server Side Rendering 비해 느리다. 하지만 초기에 모든 문서를 다운로드해서 초기 이후 로딩 속도는 빠르다.
※ 페이지 구성방식 및 브라우저 렌더링에 대해 정리했었던 글을 참고
데굴데굴데굴데굴데굴