본문 바로가기

분류 전체보기

 (118)
자주 사용하는 mac 단축키 정리 계속 업데이트 예정 command : Ctrl과 유사 option : Alt와 유사 브라우저 새로고침 : command + R 복사 / 붙여넣기 : command + C / command + V 한영전환 : CapsLock 창(탭) 닫기 : command + W 창 이동 : command + Tab 파일 이름 바꾸기 : enter / 마우스 이름 클릭
TypeScript 기본 (Utility Type) 1. keyof interface의 key 값을 union 형태로 받을 수 있음 - 예제 interface User { id: number; name: string; age: number; gender: "M" | "F"; } type UserKey = keyof User; const uk:UserKey = "age" // User interface에 있는 key 값만 가능 2. Partial property를 optional 하게 만들어 줌 - 예제 interface User { id: number; name: string; age: number; gender: "M" | "F"; } let admin: Partial = { id: 1, name: "An", }; // Partial을 사용하면 User..
TypeScript 기본 (Generic) - Generic class, function, interface를 다양한 type으로 재사용 가능 변수 type의 변수 다른 인자가 들어가도 상관없지만 보통 T를 사용 - 기본 예제 1. function function getSize(arr: T[]): number { return arr.length; } const numArr = [1, 2, 3]; getSize(numArr); // 3 const strArr = ['A', 'B', 'C', 'D']; getSize(strArr); // 4 // generic으로 선언하면 굳이 타입 지정해주지 않아도 알아서 판단하긴 함 const boolArr = [false, true, false]; getSize(boolArr); // 3 2. interface..
TypeScript 기본 (Literal, Union / Intersection Type) - Literal Type string, number, boolean 같은 type을 이용하여 정확한 값을 지정 가능 - 기본 예제 type Job = "developer" | "teacher" | "singer"; interface User { name : string; job : Job; } const An: User = { name : "An", job : "developer"; // Job에 선언된 것 외에 다른 것으로 선언하면 에러 } - Union Type 여러 type이 올 수 있는 경우에 사용하면 좋음 (or의 의미) - 기본 예제 interface Food { name : "food"; type : string; eat() : void; } interface Drink { name : "..
Web 성능 최적화 Web 성능 최적화는 크게 Rendering 최적화와 Loading 최적화로 나눌 수 있다. 개발자 도구(F12)에 있는 Lighthouse를 이용하여 성능 테스트를 할 수 있음 - Rendering 최적화 1. HTML 최적화 1) tag안에 직접 지정하는 Inline style을 사용하지 않는다. 불필요한 코드 중복이 발생하기 쉽고, 웹페이지가 그려지는 과정 중 Layout에 영향을 미쳐 추가 Reflow를 발생한다. 2) 복잡한 DOM Tree를 지양한다. DOM Tree가 커질수록 Rendering 속도가 느려지기 때문에 불필요한 요소는 제거한다. 2. CSS 최적화 1) Reflow, Repaint 최소한으로 줄이기 브라우저 style은 Reflow(넓이, 높이, 위치 등) 후 Repaint를 ..
TypeScript 기본 (Function) - Function 매개변수 및 return 값에 대한 type을 지정 - 기본 function 함수명(매개변수: type): return type { // 아무것도 return 하지 않으면 void } // arrow function const 함수명 = (매개변수: type) : return type => { } ex) function add(num1: number, num2: number) : number{ return num1 + num2; } - 선택적 매개 변수 (Optional) ex) function sayHello(name?: string): string { return `Hello, ${name || "world"}`; } const result = hello(); const resul..
TIL - 2022.04.11 1. TypeScript 어느 회사든 TypeScript는 필수가 되었다. 평소에 TypeScript가 부족하다고 느껴 앞으로 공부할 예정이다. 우선 기초부터 쌓고 그 이후 진행 중인 프로젝트에 적용할 생각이다. 2. 오늘 하루 느낀 점 컨디션이 별로라 일요일 하루 쉬었다. 잘 쉬지 못해서 그런지 몸 상태가 썩 좋지는 않아 집중이 잘 되지 않는다. 이제 슬슬 잠도 일찍 자고 생활 패턴을 좀 바꿔야겠다는 생각을 하였다. 나태해지지 말자
TypeScript 기본 (Type, Interface) - Type number ex) let age:number = 31; string ex) let name:string = "An"; boolean ex) let isMan:boolean = true; Array / type[] : type에는 적용할 type 입력 ex) let score:number[] = [100, 90, 80]; ex) let score:Array = [100, 90, 80]; [type, type] : Tuple로 사용, type에는 적용할 type 입력 ex) let an:[string, number]; an = ["an", 31]; // 해당 type 순서가 일치해야하며, 해당 type에 있는 메서드만 사용 가능 void : 반환하지 않는 함수에 사용 ex) function d..
반응형

티스토리툴바