개발일지

구현할 내용 스타일드 컴포넌트의 props를 이용해서 컴포넌트의 속성을 주되 A는 width 100% B는 75% 같은 값을 지정하여 스타일드 컴포넌트 활용을 늘릴 수 있다. 학습 타입스크립트로 가변될 컴포넌트의 props의 타입을 정해준다. 이메일 위 html은 첫 번쨰 input은 props가 없기 때문에 효과를 받지 않을 input이고 두 번째 input은 props로 설정해두어 width값이 가변될 태그이다. 프로젝트 진행 타입 선언 interface WidthProps { width: { email?: boolean; }; } 이 인터페이스 타입은 스타일드 컴포넌트의 제네릭으로 들어가게된다. 위 html의 props를 불리언 타입을 이용해서 true / false 각 상태로 나눈다. email의..

제네릭은 특정 타입을 이용해서 템플릿처럼 함수를 만들 수 있다 function getSize(arr:T[]):number{ //는 통일해야한다. return arr.length; } const arr=[1,2,3]; console.log(getSize(arr)); const arr2 =['a','b','c','d','e']; console.log(getSize(arr2)); const arr3 = [true,false,false,true]; console.log(getSize(arr3)); 제네릭(Generics) 사용 - function 함수명(매개변수:타입파라미터):타입{} 는 아무 값이나 가능 interface Mobile{ //제네릭 사용 name :string; price:number; opti..

자바스크립트(.js) 에서는 오류가 발생하지 않는 코드 class Car{ constructor(color){ this.color = color; } start(){ console.log(this.color + " car start!"); } } const bmw = new Car("red"); bmw.start(); *그러나 .ts에서는 color 부분에서 오류 3개가 발생한다 (타입 선언 안됨.) class Car{ color:string; constructor(color:string){ this.color = color; } start(){ console.log(this.color + " car start!"); } } const bmw = new Car("red"); bmw.start(); pub..

리터럴 , 유니온 const userName1 = 'Bob';//type -> 'Bob' (상수) let userName2 = 'Tom'; //type -> string(초기값) let userName3:string | number = 'kim'; userName3 = 100; console.log(userName1,userName2,userName3); type Job = 'police'|'developer'|'teacher' interface User{ name:string; job : Job;// 튜플 type Job } const user:User ={ name:'Bob', job:'student' // job : 'student' -> 에러 Job 외의 단어 } console.log(user.n..

함수 타입 정의 방법 function hello(name:string):string{ return `Hello, ${name|| "world"}`; //name에 들어온다면 name 출력, 아닐 경우 world } const result = hello();//에러발생 const result2 = hello('kim'); console.log(result,result2); 나머지 매개변수 function add(...nums:number[]):number{ return nums.reduce((result,num) => result +num); } console.log(add(1,2,3)); console.log(add(1,2,3,4,5,6,7,8,9,10)); interface User{ name:stri..

2012년 마이크로소프트가 발표한 타입 스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. -컴파일 언어, 정적 타입 언어 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. (이미 실행 됨.) 이에 반해 타입 스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다. -자바스크립트..