분류 전체보기 (95) Today I am [React, Redux - Project] 댓글 서비스 구현하기 | Issue & Solution 📚 issue & problem 1.remove action을 실행했을 때 URL에 [object%20Object] 가 찍히는 현상 case REMOVE_COMMENT: return { ...state, comments: state.comments.data.filter( (comment) => comment.id !== action.id ), }; - reducer를 잘못 작성했었던 것 같다.. 2. 수정누르면 클릭한 해당 데이터가 form 컴포넌트로 이동해야 한다. getComment api로 수정 버튼이 클릭된 데이터를 불러온다. export const getComment = async (id) => { const response = await axios.get(`http://localhost:400.. React + Typescript 리액트에서 타입스크립트 사용하기 npx create-react-app [파일명] --typescript 타입스크립트로 리액트 컴포넌트를 작성할때는 .tsx로 작성 1. 타입스크립트로 리액트 컴포넌트 만들기 함수형 컴포넌트가 function키워드가 아닌 React.FC라는 타입으로 화살표 함수로 작성시 두가지 이점 1. children이라는 props가 기본적으로 탑재되어있다. 2. contextTypes, defaultProps, displayName이 자동완성된다. 단점 - defaultProps 제대로 작동되지 않을 수 있다. (function 키워드에서는 제대로 작동함) import React from "react"; type GreetingsProps = { name: string; age?: n.. [TypeScript 강의노트] - 고급타입 1. Intersection 2. Union Types 2. 타입 별칭 type-alias 3. 인덱스 타입 1. Intersection - 여러 타입을 하나로 합쳐진 타입 interface User { name: string; } interface Action { do(): void; } //Intersection - 여러타입을 하나로 합쳐진 타입 function createUserAcion(u: User, a: Action): User & Action { return { ...u, ...a }; } const u = createUserAcion({ name: "jay" }, { do() {} }); u.do; //가능 u.name; //가능 2. Union Types - or 을 사용해서 두 개의 타.. [TypeScript 강의노트] - generic 1. generic을 이용하면 (함수에서 파라미터를 정의하듯이) 타입을 파라미터화 할 수 있다. - 관용적으로 T, U 알파벳 순서로 타입변수를 지정한다. //1. 타입을 제네릭으로 파라미터화 시키기 function createPromise(x: T, timeout: number) { return new Promise((resolve: (V: T) => void, reject) => { setTimeout(() => { resolve(x); }, timeout); }); } createPromise("dd", 100).then((v) => console.log(v)); //v //2. 여러개의 타입을 제네릭으로 파라미터화 시키기 function createTuple2(v: T, v2: U): [T, U].. [TypeScript 강의노트] - class class class Cart { constructor(user){ this.user = user; this.store {}; } put(id, project){ this.store[id] = product; } get(id){ return this.store[id]; } } //instance const cartJohn = new Cart({name:"john"}); const cartJohn = new Cart({name:"jay"}); //typescript------------------------------ interface User{ name:String; } interface Product{ id:String; price:number; } class Cart { protected user:U.. [TypeScript 강의노트] - 오픈소스 프로그래밍 언어 - 자바스크립트 상위 집합으로 ECMA스크립트의 최신 표준을 지원 - 정적인 언어로 컴파일 시간에 타입을 검사 - 장점 1. 강력한 타입으로 대규모 어플리케이션 개발에 용이 2. 유명한 자바스크립트 라이브러리와의 편리한 사용 3. 개발 도구에서의 강력한 지원 1. 설치 npm install typescript -g (전역설치) tsc hello.ts - tsc 명령어로 타입스크립트 컴파일러를 실행시킬 수 있다. 타입 스크립트를 컴파일해서 자바스크립트 파일을 만들 수 있다. tsc hello.ts --target es6 - 예 ) es6만 지원하려면 target 옵션 주기 2. promise 기능 es5로 컴파일해보기 let timeoutPromise = new Promise(.. 자바스크립트에서 this 1. 단독으로 쓴 this 단독으로 this를 호출하는 경우에는 global object를 가리킨다. 'use strict'; var x = this; console.log(x); //Window 2. 함수 안에서 쓴 this - 함수 안에서 this는 함수의 주인인 window객체에 바인딩된다.! //예시1 function myFunction() { return this; } console.log(myFunction()); //Window //예시2 var num = 0; function addNum() { this.num = 100; num++; console.log(num); // 101 console.log(window.num); // 101 console.log(num === window.num.. [Redux 강의노트] Redux Middleware | redux-saga redux-thunk - 함수를 dispatch해주는 미들웨어 redux-saga - 액션을 모니터링하고 있다가 특정액션이 발생하면 특정작업을 하는 방식 - 자바스크립트의 Generator 문법에 기반한 미들웨어 thunk와의 차이점 1. 비동기 작업 진행시 기존 요청을 취소할 수 있다. 2. 특정 액션이 발생할 때 이에 따라 다른 액션을 디스패치하거나 자바스크립트 코드를 실행할 수 있다. 3. 웹소켓을 사용하는 경우 Channel이라는 기능을 사용하여 더 효율적인 코드를 관리 할 수 있다. 4. 비동기 작업 실패시 재시도 하는 기능을 구현할 수 있다. Generator 문법 - 함수의 흐름을 특정구간에 멈춰놓았다가 다시 실행 할 수 있다. - 결과값을 여러번 내보낼 수 있다. function* gene.. 이전 1 2 3 4 5 6 7 ··· 12 다음
