본문 바로가기
728x90
반응형

전체 글136

[typescript]react - typescript(설치, useState) 설치(cmd) npx create-react-app ts-react --template typescript VScode 에디터에서 터미널 열고 설치 npm install -g typescript 1. props 전달시 props 타입을 interface로 지정해야한다. ex) interface HelloProps = { name: string } const Hello ({name}: HelloProps) => {} 2.상태의 타입의 지정 const [state, setState] = useState(0) 상태타입이 변경되지 않는 경우는 제네릭 타입 생략해도됨 상태가 null일수도 있고 아닐수도 있을 때 제네릭을 활용하여 지정 ex) type stateobject = {name: string, age: n.. 2023. 2. 24.
[typescript] class 접근제한자, 정적멤버(static), 추상클래스(abstract) 클래스 구문 클래스는 필드와 메소드로 구성되어있다 class Animal { constructor(kind){ this.kind = kind; } } class Cat extends Animal { constructor(name, age, kind){ super(kind) this.name = name; //여기를 필드라고 함 this.age = age; } printName(){ console.log(this.name) this.sound(); } sound() { console.log("야옹") } } 타입스크립트 클래스 구문 class Animal { kind: string constructor(kind: string){ this.kind = kind; } } class Cat extends Ani.. 2023. 2. 24.
[typescrip] Generic(제네릭) 재사용을 목적으로 함수나 클래스의 선언 시점이 아닌 사용 시점에 타입을 선언 타입을 인수로 받아서 사용 타입변수는 사용자가 제공한 타입으로 변환될 식별자이다 음.... 그러니깐 전달받은 타입을 사용하도록 함!!! 사용하는 쪽에서 타입을 결정!! 제네릭 사용하는 예시 function getSize(arr:number [] | string [] | boolean [] | object []): number{ return arr.length; } const arr1 = [1,2,3]; getSize(arr1) // 3 const arr2 = ["a", "b", "c", "b"] getSize(arr2) // const arr3 = [false, true ,true, false] getSize(arr3) cons.. 2023. 2. 24.
[typescript] Enum 열거형 타입 숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입 값의 종류가 일정한 범위로 정해져 있는 경우 유용함. 구문 ) enum name { 값1, =======>0번째 값2, =======>1번째 값3 =======>2번째 } 실습 enum Week { Sun, Man, Tue=7, // Tue=7 값을주면 7 8 9 10 순으로 지정됨 Wed, Thu, Fri, Sat } enum Color { Red = "red", Green = "green", Blue = "blue" } console.log(Week.Man); //1 console.log(Week.Sat); //11 console.log(Week.Wed); //8 console.log(Week[0]); //Sun console.log(Week[.. 2023. 2. 24.
[typescript] 배열타입 구문) type[ ], Array 1. 문자열만 가지는 배열 //문자열만 가지는 배열 let strarr: string[] = ["a", "b", "c", "d", "e",] //or let strarr2 : Array = ["🍔","🍟","🌭"]; 2. 숫자만 가지는 배열 //숫자만 가지는 배열 let numarr : number[] = [1, 2, 3, 4, 5] //or let numarr2 : Array = [1, 2, 3, 4, 5] 3. 숫자와 문자열 가지는 배열 //숫자와 문자열가지는 배열 let numstrArr : (number | string) [] = [1, 2, "a"] //or let numstrArr2 : Array = ["가", 1, "a"] 4. 객체 타입을 가지는 배열 //.. 2023. 2. 24.
[typescript] 함수 함수타입선언 매개변수에 타입설정, 리턴값에 타입설정 1)인수와 반환 값이 있을 때 let myFunction: (arg1: number, arg2: number) => number; myFunction = function(x,y){ return x + y } //화살표 함수 myfunction =(x,y) => { return x + y } let num:number = myFunction(10,20); console.log(num) function myFunction2(x: number, y: number): number { return x + y } 2)인수와 반환값이 없을 때 void (리턴이 없을때 사용) function myFunction3() : void { console.log("hi"); .. 2023. 2. 24.
[typescript] interface interface(반복적인 사용을 원하는 경우) 타입스크립트의 여러 객체를 정의하는 일종의 규칙이며 구조이다 1. 객체의 타입정의 interface 인터페이스이름 { readonly key:key 타입; key?: key타입 } 2. 함수의 타입정의 interface 인터페이스 이름{ 호출 시그니쳐 정의 (parameter: paremetertype): return type } 3. 클래스의 타입정의 implements 키워드 사용 실습 //객체는 프로퍼티에 대한 타입을 지정함 //옵셔널 프로퍼티 ?키워드 ---> 프로퍼티가 있어도되고 없어도됨 ?없으면 에러뜸 //읽기 전용 프로퍼티 ====> readonly키워드 //interface IUser {readonly name: string, age:numb.. 2023. 2. 24.
[typescript] 타입 기본 1) 타입 추론 타입스크립트는 타입 표기가 없는 경우 코드를 일고 분석하여 타입을 유추할 수 있음 (코드를 보고 추론하는것) ex) let str1 = "green" str1 = 10 2) 타입 명시 변수 선언시 변수값의 타입을 명시함으로써 변수 값의 테이터 타입을 지정 ex) let str1 = "green" let str2:string = "나는 영원히 문자열타입 변수야" 3)타입 선언 1.변수 타입 선언 let 변수명 : type number, string, boolean, null,undefined object, Array, type[] any 타입 : 항목의 값을 지정할 수 없을때 사용 유니언 타입( 다중 타입) - 2개이상의 타입을 허용하는 경우 let array: (string | numbe.. 2023. 2. 24.
[react]redux-middleware 미들웨어란 미들웨어는 소프트웨어 각 분야에서 세부적으로 다르게 뜻하는데 위키백과에서는 OS(운영체제)와 소프트웨어 중간에서 조정과 중개 역할을 하는 중간 소프트웨어라고 말함. 리덕스 + 미들웨어 리덕스 미들웨어는 리덕스가 지니는 핵심 기능 contextAPI와 차별화되는 부분 서버에있는 값을 받아올때까지 기다렸다가 리듀서 호출 (dispatch({type: "add_todo"})) 리덕스 미들웨어를 사용하면 액션이 디스패치된 다음, 리듀서에서 해당 액션을 받아서 업데이트 하기전에 추가적인 작업을 할수 있음!!!!!!! 추가적인 작업의 예!!! 1. 특정 조건에 따라 액션이 무시되게 만들수 있음 2. 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있음 3. 액션이 디스패치 됐을 때 이를 수정해서 리듀서.. 2023. 2. 24.
[React]todolist(redux사용) 1. 리덕스 모듈 만들기 (액션타입, 액션 생성함수, 리듀서가 포함되어있는 자바스크립트 파일) counter.js 모듈 //액션 타입 만들기 const SET_DIFF = 'counter/SET_DIFF'; const INCREMENT = 'counter/INCREMENT'; const DECREMENT = 'counter/DECREMENT'; //액션 생성 함수 만들기 export const setDiff = (diff) => ({type: SET_DIFF, diff}); export const increase = () => ({type: INCREMENT}); export const decrease = () => ({type: DECREMENT}); //초기상태 선언 const initialState.. 2023. 2. 20.
[React]todolist(reducer 사용) components 폴더안에 Header.js 생성 import React from 'react'; const Header = ({input, onChange, addTodo}) => { return ( to do list + ); }; export default Header; components 폴더안에 Todolists.js 생성 import React from 'react'; const TodoLists = ({todos, toggleTodo, removeTodo}) => { return ( {todos.map(todo=>toggleTodo(todo.id)}>{todo.text} {removeTodo(todo.id)}}>삭제)} ); }; export default TodoLists; App.js .. 2023. 2. 20.
[typescript] 기초 1-1(터미널 출력) 터미널에 출력 방법 타입스크립트 파일 작성하고 tsc 입력 후 변환 type05_enum.ts ----> type05_enum.js enum Week { Sun, Man, Tue, Wed, Thu, Fri, Sat } console.log(Week.Man); console.log(Week.Sat) 변환된 자바스크립트 파일은 dist파일에 넣었으므로 터미널 주소를 dist 폴더 위치로 변경 후 터미널에 출력 하고 싶은 파일 node type05_enum.js 입력 2023. 2. 16.
728x90
반응형