저장소

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) object 자료에 타입을 미리 만들어주고 싶은데 1. object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우 2. 타입지정할 속성이 너무 많은 경우 index signatures 를 사용하면 편리하다. index signatures object 용 타입을 하나 만들고 싶은데 아직 어떤 속성이 들어올지 모름. 그럴 땐 이렇게 작성해보자. interface StringOnly { [key: string]: string } let obj :StringOnly = { name : 'kim', age :..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) interface는 object 타입지정할 때 쓴다고 배웠다. 하지만 용도가 하나 더 있는데 class 타입을 확인하고 싶을 때도 interface 문법을 사용할 수 있음. 근데 implements 키워드도 필요함 implements 키워드 class를 하나 만들어보자. class Car { model : string; price : number = 1000; constructor(a :string){ this.model = a } } let 붕붕이 = new Car('morning'); class Car 로부..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) declare 키워드를 배웠으면 이제 d.ts 파일도 이해가 간다. 코드짜다보면 어디선가 d.ts 파일이 등장한다. 이 파일은 타입만 저장할 수 있는 파일형식. (그래서 definition의 약자인 d가 들어감) 그리고 자바스크립트로 컴파일되지 않는다. 어디다 쓰냐면 1. 타입정의만 따로 저장해놓고 import 해서 쓰려고 2. 프로젝트에서 사용하는 타입을 쭉 정리해놓을 레퍼런스용으로 사용 그렇다^___^ 타입만 따로 d.ts에 모아놓으려면 1. 어쩌구.d.ts 라고 작성하신 파일은 타입 정의만 넣을 수 있다...

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) 코드를 짜다보면 외부 자바스크립트 파일을 이용하는 경우 import 문법으로 가져다가 쓰면 되는데 근데 안타깝게도 그 파일이 Typescript로 작성된게 아니라 JavaScript 로 작성된 파일이면 무수한 에러가 기다리고 있다. 당연히 타입지정이 안되어있으니까. 예를 들어서 data.js 라는 파일이 있다고 치면 그리고 index.ts 파일에서 저기 있던 a라는 변수를 쓰고싶으면 어떻게할까? (data.js) var a = 10; var b = {name :'kim'}; (index.ts) console.l..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) array 자료에 타입을 지정하고 싶으면 string[] 이렇게 기입한다. 하지만 보다 구체적으로 타입지정하고싶을 때가 있다. "첫 자료는 무조건 string, 둘째 자료는 무조건 number인 array" 이런 것도 가능 => tuple 타입 쓰면 됨. Tuple 타입 tuple type은 array에 붙일 수 있는 타입으로 자료의 위치까지 정확히 지정할 수 있는 타입. let 멍멍이 :[string, boolean]; 멍멍이 = ['dog', true] [ ] 괄호 안에 타입 적으시면 tuple type이 ..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) redux 왜 쓰냐면 1. state를 한 곳에서 관리할 수 있어서 컴포넌트들이 props없이 state 다루기 쉽고 2. 수정방법을 미리 reducer라는 함수로 정의해놔서 state 수정시 발생하는 버그를 줄일 수 있어서. 그 외엔 쓸데없음 코드만 길어짐 - redux 공식 toolkit 라이브러리를 써서 이쁘게 코드짜는 신규방식 redux - 예전처럼 if문 switch문 그런거 쓰는 전통방식 redux 둘 다 타입지정 어떻게 하는지 알아보자. (전통방식 redux) state와 reducer 만들 때 타..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) 타입스크립트 그냥 쓰자.. 요즘은 거의 필수 스택이고 애초에 그냥 에디터 부가기능일 뿐..! 리액트프로젝트 설치 명령어 npx create-react-app 프로젝트명 --template typescript typescript 셋팅이 완료된 프로젝트 설치하는 법 기존 프로젝트에 타입스크립트만 더하고 싶으면 기존 프로젝트 경로에서 터미널을 오픈한 후 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 입력해주면 끝...

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) 함수만들 때 () 여기에 파라미터 입력하는데 근데 타입스크립트를 쓰면 파라미터로 타입을 입력할 수도 있다. 여기에 집어넣으면 됨. 함수 return 값의 타입이 애매하면 예를 들어 1. 아무렇게나 생긴 array 자료를 입력하면 2. array의 첫 자료를 그대로 출력해주는 함수를 만들었다고 하자. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 이러면 콘솔창에 4가 출력됨. 근데 마우스 올려서 a의 타입을 확인해보면 숫자는..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) 만든 타입변수를 다른 파일에서 사용하고 싶은 경우 자바스크립트 import export 문법 그대로 사용 가능 import export 문법을 간략하게 설명하자면 a.ts -> b.ts 이렇게 변수나 함수를 가져다쓰고 싶은 경우 (a.ts) export var 이름 = 'kim'; export var 나이 = 30; (b.ts) import {이름, 나이} from './a' console.log(이름) 이렇게 사용하면 됨. 1. 우선 변수를 다른 파일에서 쓰이게 내보내고 싶으면 export 문법으로 내보내야하..

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다. (본 페이지 주소: https://codingapple.com/course/typescript-crash-course/) (숙제1) 다음 x,y 속성의 특징을 설명해보기. class User { private static x = 10; public static y = 20; } x와 y는 누가 쓸 수 있고, 어디서 수정할 수 있는지 이런 것들 친구가 물어봤을 때 어떻게 답해줄 것?? 소곤소곤 1. 필드값은 원래는 모든 User의 자식들에게 물려주는 속성이지만 x와 y에는 static 키워드가 붙었기 때문에 User.x 이런 식으로만 접근해서 쓸 수 있다. User의 자식들은 x와 y를 쓸 수 없다. 2. private static..