목록강의 (62)
NOW OR NEVER
Typescript 복습 고급 타입 Intersection Types 여러 타입을 하나의 타입으로 합쳐진 타입 &로 표현 가능 특정한 타입들을 합쳐줘야 하는 타입이 필요할 때 사용 새로 만들지 않고 기존 타입들을 활용해서 사용하고 싶을 때 사용 Union Types | 로 표현 이타입일 수도 있고 저 타입일 수도 있을 때 사용 단 타입별로 묶어주고 싶을 땐 타입 가드(typeof 활용한 조건문으로)로 반환 값을 달리 해줘야 함 Primitive type이 아닌 인터페이스 타입 등을 가지고도 활용 가능 타입 가드를 member로 확인(변수.do) 사용자 정의 타입가드 만들고(함수로) 조건문의 조건으로 넣고 반환 값으로 (변수).do function 타입가드함수(파라미터 : 인터페이스타입 | 인터페이스타입)..
Typescript 복습 class 클래스 ES6 부터 생겨남 클래스를 통해서 특정 타입의 객체 생성 가능 const 변수이름 = new 클래스이름({parameter}); 클래스로 정의한 인스턴스들을 new 키워드를 통해 변수에 할당할 수 있다 타입스크립트의 경우 안에서 타입을 정의해줘야 한다. 상속하는 클래스 extends 상속받는 클래스 : 상속하는 클래스의 속성을 상속받는 클래스에서도 사용할 수 있게 됨 타입스크립트의 접근 제한자 es6 안엔 없음, private : 선언된 블록 안에서만 접근 가능 기본 값은 public protected : 다른 곳에 상속이 안됨 생성자의 매개변수에 접근제한자 같이 작성시 속성 정의와 동시에 전달받은 인자를 해당 속성에 할당하는 작업을 한번에 할 수 있다. 인터..
Typescript 복습 자바스크립트의 super set(상위집합 : 이전의 자바스크립트, 최신의 자바스크립트 다 해당) 오픈소스 정적인 언어로 자바스크립트와 반대되는 개념 컴파일 시간(작성한 코드가 컴퓨터에서 타입을 검사하는 시간) 가짐 장점 여러 명의 개발자와 협업해서 할 때 실수 방지(강력한 타입이여서) 다양하고 유명한 자바스크립트들은 타입이 다 정의되어 있어 편리하게 사용 가능 프로그래밍 언어로써 모든 자바스크립트 기능을 지원할 뿐만 아니라 최신의 자바스크립트 기능도 지원해서 컴파일을 통해서 자바스크립트를 만들어내는 하나의 언어 컴파일러 설치 : window의 경우 sudo npm install -g typescript 실행 : tsc 타입스크립트 파일 타입스크립트를 컴파일해서 자바스크립트로 만들..
Typescript redux middleware redux-thunk yarn add axios redux-thunk typescript 지원되서 따로 @types로 설치 안해도 됨 quicktype(https://app.quicktype.io/) 받아오는 json 결과물 무슨 타입인지 확인하는 법 json 결과물 복사해서 입력하면 typescript형태로 변환 가능 AxiosError : axios가 에러났을 때 사용하는 에러 객체의 타입 createAsyncAction : 비동기 작업시 사용하기 편한 액션 생성 함수 export const AsyncAction이름= createAsyncAction( 액션이름들 )(); ThunkAction keyof S : 상태가 지니고 있는 key github a..
Typescript React Context API 활용 state context : const context이름 = createContext( null ); dispatch context: const context이름 = createContext( null ); Context 생성 방법 context 안에서 관리할 값을 위한 type alias 선언 const context이름 = createContext(defaultValue값(=보통 null)); Provider 컴포넌트 생성 context 다 작성 provider props를 type alias로 작성 type typeAlias이름 = { children : React.ReactNode;} Provider 컴포넌트 생성, useReducer 선언..
TypeScript 자바스크립트를 알고 있다면 금방 배움 장점 자바스크립트는 weakly type으로 실수를 하게 될 수 있음 코드가 실제로 실행이 되어야만 실수한지 안한지 알 수 있음 타입스크립트 사용시 이런 문제점 보완 가능 VS code 같은 IDE 사용시 많은 도움을 얻을 수 있음 함수 사용시 어떤 파라미터 넣는지 컴포넌트의 props에 어떤 값을 넣는지 실수로 빠뜨린 props 있을 시 에러 감지 사소한 실수 많이 방지 파일 생성 법 디렉토리 생성 : git bash 에서 mkdir 디렉토리명 git bash 에서 cd 디렉토리명 package JSON 생성 : git bash 에서 yarn init -y 해당 디렉토리 에디터로 열기 : git bash 에서 code ./ typescript(t..
리액트 리덕스 미들웨어 사용자 경험 개선 유틸함수 사용하는 이유 : 리액트와 리덕스를 함께 사용하게 될 때 api 연동하게 되는 경우 비슷한 코드를 자주 작성하게 되기 때문이다. redux-thunk에서의 react history Thunk에서 특정 경로로 이동하고 싶을 때 사용 import {createBrowswerHistory} from ‘history’; JSON server rest api를 json 파일로 호출 가능 연습 용이여서 실무에서 사용하면 안됨 json 파일 기반으로 서버 열기(port 4000으로) npx json-server json파일경로 --port 4000 개발 공부하거나 간단한 프로토 타입 만들 때 사용하면 유용 CORS와 webpack DevServer Proxy CORS..
리액트 리덕스 미들웨어 리덕스가 가지고 있는 핵심 기능 리덕스 사용시 미들웨어를 사용하지 않는 다면 context API 등과 다를 것이 없음 액션 -> 미들웨어 -> 리듀서 -> 스토어 액션 디스패치 될 때 미들웨어에서 특정 조건에 따라 무시할 수 있게 할 수 있다(리듀스에서 해당 액션을 처리하지 않는다는 뜻), 액션이 리듀서에 도달하기 전에 처리할 수 있음(액션 수정하거나 콘솔에 나타나게 함) 주로 비동기 작업을 처리 할 때 사용(redux-thunk, redux-saga) ex) API 요청 일반적으로 라이브러리로 만들어진 리덕스 미들웨어 사용 ex) redux-thunk, redux-saga, redux-observable, redux-promise-middleware(프로미스 기반 미들웨어) 등..
리액트 Redux 상태 조회 hook: useSelector const { number, diff } =useSelector(state => ({})) 여기서 state는 store.getState()로 조회한 값으로 리덕스의 현재 상태이다. 액션 디스패치 할 경우 useDispatch Hook 사용 디스배치 함수 사용 가능 프리젠테이셔널 컴포넌트와 컨네이너 컴포넌트 컨테이너와 프레젠테이셔널 컴포넌트를 따로 분리해서 작성하게 되면 프리젠테이셔널 컴포넌트의 재사용율도 높여줄 수 있고 관심사를 분리할 수 있어서 굉장히 유용한 패턴이다. 리덕스 사용시 이런 형태로 개발하는 것 정석이긴 하지만 무조건 답은 아니다 복잡한 상태 로직을 분리시키기 위함이지만 꼭 이렇게 분리해서 작업하지 않아도 된다. 디렉토리 상에서..
리액트 Router 리액트 라우터 라이브러리 Single Page Application(SPA) 라우팅을 클라이언트가 담당 단점 앱의 규모가 커지면 JS 파일의 크기가 너무 커질 수 있다.(해결책 : Code Splitting) 브라우저에서 자바스크립트가 구동되지 않으면 UI를 볼 수 없다.(해결책 : Server Side Rendering) ex) 검색엔진에서 크롤링 불가능 라우팅 : 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업 리액트 라우터는 컴포넌트를 기반으로 라우팅을 한다. react-router-dom 설치 주요 컴포넌트 BrowserRouter : HTML5 History API 사용, 주소만 바꾸고 페이지는 다시 불러오지 않음, 가장 많이 사용 HashRouter : 옛날에 사용 하..