재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언 할 수 있음 타입을 인수로 받아서 사용 function toArray(a: numger | string, b: number | string) : (number | string) [] { return [a, b]; } toArray(1, 2) toArray('a','b') toArray(1, 'a') function toArray(a: T, b:T) :T [] { return [a,b]; } toArray(1, 2) toArray('a', 'b') 제약조건 T extends U 조건부 타입 타입구현 영역에서 사용하는 extends는 삼항 연산자를 사용할 수 있음 이를 조건부 타입이라고 부름 T extends U ? X : Y e..

interface 타입스크립트 여러 객체를 정의하는 일종의 규칙, 구조 interface IUser { readonly name: string, // readonly: 할당은 가능하지만 수정은 불가 age: number, isAdult? : boolean // 선택 속성(필수가 아님) } let user1: IUser = { name: 'Neo', age: 20 } interface IName { (매개변수: 매개변수타입) : 리턴 타입지정 } interface IGetUser { (name: string) : IUser } 함수 오버로드 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것 함수 오버로드를 통해 다양한 구조의 함수를 생성하고 관리할 수 있음 keyof 인덱싱 가..

* 타입 추론 명시적으로 타입 선언이 되어 있지 않은 경우, 타입스크립트는 타입을 추론해서 제공함 1) 초기화된 변수 let num2 = 20 // number 2) 기본값이 설정된 매개변수 function add(a: number, b = 2) { // b: number = 2 } 3) 반환 값이 있는 함수 function add(a: number, b = 2) { return a + b } * 타입 단언 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우 더 이상 추론하지 않도록 지시하는 것 ex06_union // 타입 추론 // 1. 초기화 된 변수 2. 기본값이 설정된 매개변수 3. 반환값이 있는 함수 let num = 20 function addFunc(a: number, b = 2) ..

* 튜플(Tuple) 배열과 매우 유사함 배열과의 차이점: 정해진 타입에 고정된 길이 배열을 나타냄 let tuple: [string, number] tuple = ["a", 1] tule = ["a",1, 2] // error 발생 let userid : number = 2134 let username: string = "green" let isValid: boolean = true let user: readonly [number, string, boolean] = [1234, "green", true] console.log(user[0]) * 열거형(Enum) 숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입 enum Week { Sun, Mon, Tue, Wed, Thu, Fri, Sat, ..

* typescript 설치없이 연습할 수 있는 사이트 https://www.typescriptlang.org/play/ TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 2012년에 발표된 오픈소스 프로그래밍 언어 대규모 javascript 애플리케이션 개발을 목적 마이크로 소프트에 의해 개발 javascript: 타입이 동적타입 언어 typescript: 정적타입 언어 typescript => javascript app.t..

https://wannasee-project-client.vercel.app/ WANNASEE wannasee-project-client.vercel.app *AWS DB 삭제 관계로 콘서트 정보가 표시되지 않습니다. --- server https://wannasee-server.herokuapp.com/ https://wannasee-server.herokuapp.com/genre github client https://github.com/7ingout/wannasee-project-client.git GitHub - 7ingout/wannasee-project-client: 콘서트 예매사이트 구현 (react 팀프로젝트) 콘서트 예매사이트 구현 (react 팀프로젝트). Contribute to 7i..

2022.07.07 - [Coding/React] - [React] 고객관리 사이트 구현 (Client) [React] 고객관리 사이트 구현 (Client) green_customer_client Header Footer CustomerList Customer DetailCustomer - 라이브러리 설치 axios react-dom react-router-dom react-daum-postcode material-ui https://mui.com/material-ui/getting-start.. 7ingout.tistory.com * 리덕스 모듈 초기값, 액션 타입, 액션 생성 함수, 리듀서 modules -> customers.js customers: { data, error, loading }, a..

2022.07.14 - [Coding/React] - [React] Redux Middleware - 리덕스 미들웨어 [React] Redux Middleware - 리덕스 미들웨어 리덕스 미들웨어 1. 미들웨어 만들기 2. thunk 미들웨어 사용하기 dispatch => 미들웨어 => reducer const middleware = store => next => action => { } function middleware(store) { return function(next){ .. 7ingout.tistory.com npm install axios npx json-server ./data.json --port 4000 api/posts.js // n 밀리세컨드동안 기다리는 프로미스를 만들어주는 함수..

리덕스 미들웨어 1. 미들웨어 만들기 2. thunk 미들웨어 사용하기 dispatch => 미들웨어 => reducer const middleware = store => next => action => { } function middleware(store) { return function(next){ return function(action) { 하고싶은 작업 } } } npx create-react-app redux-middleware npm install redux npm install react-redux yarn add redux-devtools-extension npm install redux-thunk yarn add react-router-dom // npm으로 설치하든 yarn으로 설치하..

redux는 스토어를 사용. state 1. 하나의 애플리케이션은 하나의 스토어가 있다. 2. 상태는 읽기 전용이다. 3. 변화를 일으키는 함수 리듀서를 사용해서 이전의 상태를 절대로 변경하지 않고 새로운 상태객체를 만들어서 반환한다. 똑같은 파라미터로 호출된 리듀서 함수는 똑같은 결과값을 나타내야한다. new Date() / Math.random() / axios.get { // return { // type: INCREASE // } // } // 화살표 함수에서 return을 생략한다면 const decrease = () => ({ type: DECREASE }) const changeText = (text) => ({ type: CHANGE_TEXT, text // text: text 위에처럼 t..