본문 바로가기

분류 전체보기

 (28)
타입스크립트: 함수, 클래스 this const obj = { a: 'Hello~', b: function () { console.log(this.a); } }; this.a를 써서 할당하는 경우 에러 발생 obj.b(); // Hello~ const b = obj.b; b(); // Cannot read property 'a' of undefined function someFn(cb: any) { cb(); } someFn(obj.b); // Cannot read property 'a' of undefined setTimeout(obj.b, 100); // undefined 해결법 1. blind obj.b(); // Hello~ const b = obj.b.bind(obj); b(); // Hello~ function someF..
타입스크립트: 제네릭 제네릭(Generic) ❗️사용시점에 타입선언 하기 T라고 쓰면 된다 function toArray(a: T, b: T): T[] { return [a, b]; } 사용시점에 타입 확정 toArray(1, 2); toArray('1', '2'); toArray(1, '2'); toArray(1, '2'); // Error 인터페이스+제네릭 interface MyType { name: string, value: T } extends interface MyType { name: string, value: T } type+extends type U = string | number | boolean; // type 식별자 = 타입 구현 type MyType = string | T; // interface 식별자..
타입스크립트: 인터페이스 인터페이스(Interface) 인터페이스: 타입스크립트 여러 객체를 정의하는 일종의 규칙, 구조 interface IUser { name: string, age: number, isAdult: boolean } let user1: IUser = { name: 'Neo', age: 123, isAdult: true }; 인터페이스 사용시, 빠짐없이 모두 초기화 해줘야함. //Error - TS2741: Property 'isAdult' is missing in type '{ name: string; age: number; }' but required in type 'IUser'. let user2: IUser = { name: 'Evan', age: 456 }; +예외 선택적 속성(Optional prop..
타입스크립트 학습내용 정리 배열선언, 튜플선언 let fruits: string[] = ['Apple', 'Banana', 'Mango']; let fruits: Array = ['Apple', 'Banana', 'Mango']; let tuple: [string, number]; tuple = ['a', 1]; tuple = ['a', 1, 2]; // Error - TS2322 tuple = [1, 'a']; // Error - TS2322 타입선언 불리언 let isBoolean: boolean; let isDone: boolean = false; 배열(두가지 방법) let fruits: string[] = ['Apple', 'Banana', 'Mango']; let fruits: Array = ['Apple', 'Banan..
CSS: 6 float, clear Float 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 함. none - (기본값) 원래상태 left - 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함. right - 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 =>문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지한다! 실습 CSS #a { width: 100px; height: 50px; background-color: orange; float: right; } #b { width: 100px; height: 100px; background-color: royalblue; float: left; } Clear float 요소 이후에 표시되는 요소가 float을 해제(clear)하여..
REACT: 1 생활코딩 설치 및 컴포넌트 수정 ❗️파일을 만들때 이름에 react를 넣으면 오작동 할 수 있다. (react-***)이런식으로 '-'를 넣으면 가능 npx create react app 설치('.'은 현재 위치를 가리킴) npx create-react-app . npm 명령어 npm start 개발 모드로 프로그램 실행 npm run build 실제 배포 모드 npm test 테스트 모드 npm run eject 내부 설정 파일을 꺼내는 역할 실제 배포 단계 빌드 npm run build 서브 npx serve -s build 컴포넌트 만들기 기본태그: 소문자 사용자 정의 태그: 대문자(함수, class) 사용자 정의태그=컴포넌트 props 위와 같은 태그의 alt, src, width, height...등등 ..
JAVASCRIPT: #1 Javascript를 HTML에 링크하는 방법 parsing HTML : 브라우저가 HTML을 한줄 한줄 읽으며 CSS와 병합해서 DOM요소로 변환 fetching.js : JS 파일 다운 executing.js : JS 파일 실행 에 script 태그 기업 html 파일을 한줄 한줄 읽다가 -> 태그에서 parsing을 멈추고, Js 파일을 다운하고 실행-> 다시 나머지 html parsing 단점 : JS 파일의 크기가 크고, 인터넷의 속도가 느린 경우 사용자가 웹사이트를 보는데까지 많은시간까지 소요 html parsing을 다 마친 후에 -> JS 다운, 실행 장점: 사용자가 기본적인 HTML 컨텐츠를 빨리 볼 수 있다. 단점: 웹사이트가 JS에 의존적인 경우, 정상적인 페이지를 보려면 fetchi..
CSS: 5 텍스트 관련 속성 font-family : 글꼴정의 font-size: 글자 크기를 정의. text-align: 정렬 방식을 정의. color: 글자 색상을 정의. font-family(글꼴) *{ font-family: Times, monospace, serif; } family-name: ","로 여러 폰트를 지정할 수 있다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표('')로 묶어서 선언 선언 순서대로 우선순위 지정 가능 Times를 먼저 지정하되, 지원되지 않을 경우 monospace를 지정 generic-family: 브라우저 대체 폰트 font-family의 맨 마지막에 선언 (무조건 꼭 선언해주어야 한다.) serif(획에 삐침이 있는 폰트, 명조체), sans-serif(획에 삐침 없는 폰트, 돋움체..

티스토리툴바