본문 바로가기

개발에 도움이 되는

 (78)
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..
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..
박스 모델(Box Model) - 박스 모델 (Box Model) 모든 HTML 요스는 box 모양으로 구성되며, 이것을 박스 모델이라고 부름 박스 모델은 HTML 요소를 padding, border, margin, content로 구분 1. content : text나 image가 들어있는 박스의 실질적인 내용 부분 2. padding : content와 border 사이의 간격 3. border : content와 padding 주변을 감싸는 테두리 4. margin : border와 이웃하는 요소 사이의 간격 - HTML 요소의 높이와 너비 관계 너비 = width + left padding + right padding + left border + right border + left margin + right margin 높이 ..
TypeScript 개념 및 설치 방법 (React) - TypeScript JavaScript의 SuperSet(상위 확장)인 오픈소스 프로그래밍 언어이다. 동적 타입인 JavaScript는 소규모일 땐 편할지 몰라도 대규모 혹은 다른 사람과 협업을 해야 되는 상황에서는 동적 타입은 직관적으로 어떤 타입의 변수인지 알 수 없어 치명적이다. TypeScript는 JavaScript에 Type 문법을 더하여 이러한 문제를 해소하고자 나왔다. 또한 에러 메시지 수준도 올라갔다. - 기본 설치 (기본 html + css + typescript 개발 시) 1) typescript 설치 (global) npm install -g typescript 2) tsconfig.json 생성 후 아래 내용 작성 { "compilerOptions": { "target": "e..
HTTP Status Code - HTTP Status Code 특정 HTTP 요청이 성공적으로 완료되었는지 알려준다. 응답은 5개의 그룹으로 나누어진다. 100번대 : 정보 확인 200번대 : 통신 성공 300번대 : 리다이렉트 400번대 : 클라이언트 오류 500번대 : 서버 오류 - 주요 Code 200 (OK) : 요청 성공 (GET) 201 (Create) : 생성 성공 (POST) 202 (Accepted) : 요청 접수 O , 리소스 처리 X 204 (No Contents) : 요청 성공, 내용 없음 300 (Multiple Choice) : 요청 URI에 여러 리소스가 존재 301 (Move Permanently) : 요청 URI가 새 위치로 옮겨감 304 (Not Modified) : 요청 URI의 내용 변경이 없음 ..
원시 자료형, 참조 자료형 - 원시 자료형 데이터 타입 중 변경이 불가능한 값(immutable value)을 말하며, 자료형 Type으로는 string, number, boolean, undefined, null, symbol 이렇게 6가지가 있다. 원시 자료형은 stack에 생성되고 변수가 할당될 때, 메모리의 고정 크기로 값을 저장하고 해당 주소를 직접 참조한다. immutable value기 때문에 메모리 영역에서의 변경이 불가능하며, 재할당은 가능하다. ex) let str = "Hello"; str = "World"; 처음 str에는 메모리에 "Hello"가 생성되고 식별자 str은 메모리에 생성된 문자열 "Hello"의 메모리 주소를 가리킨다. 그리고 다음 구문에서 str은 메모리에 있는 "Hello"를 수정하는 것이..
반응형

티스토리툴바