React (17) 썸네일형 리스트형 React & Typescript - 시작 create-react-app은 기본적으로 타입스크립트를 지원한다. 그러나 프로젝트를 만들때 명령어가 다르다. 별거 없다. 기존의 npx create-react-app project-name 뒤에 --typescript만 넣어주면 된다. 자 이제 typescript를 react에서 사용할 준비가 완료 되었다. 이제 vscode로 가서 폴더를 열어보면, 짠 tsx, ts 파일들로 바뀌었다. 자바스크립트를 사용하는 리액트앱에서는 js 파일만을 사용해도 문제가 없었는데, 타입스크립트를 사용하는 리액트앱에서는 tsx 파일로 작성을 해야한다. 그렇게 만들어본 첫번째 함수형 컴포넌트이다. Greetings는 React.FC (functional Component)라는 타입을 가진 객체이고, 이 객체에 들어가는 것은.. Typescript - Generics Generics 는 타입스크립트에서 함수, 클래스, interface, type alias 등을 사용할 때 여러종류의 타입에 대해 호환을 맞춰야 하는 상황에서 사용하는 문법이다. 사용 할 때는 라는 표현을 사용하게 된다. 위를 보면 a에 어떤 값이 들어오던, b에 어떤 값이 들어오던, 를 통해 유추를 한 후, 그것에 관련된 값을 다시 리턴한다. 즉 parameter 타입을 any로 가져오는 것처럼 실행시킬 수 있는 것인데, any와 generics 의 차이점은 parameter를 any로 넣는다면 다음에 그 함수를 쓰거나 그 함수의 결과값을 쓰거나 할 때 any로 떠서 헷갈릴 수 있는데, generics를 쓴다면 이미 parameter로 예를 들어 string이 들어간 상태라면, 추후에 문자열이 들어간 .. Typescript - interface, type alias interface는 implement를 통해 class에 부여된다. interface는 getArea 라는 함수를 갖고 있고, class Circle 또는 Rectangle은 그 요소들을 포함해야하니, 안에 getArea라는 함수를 꼭 포함해주어야 한다. 이것을 어떤식으로 사용할 수 있을까? interface를 통해서 class들을 배열로 넣어줄 수 있다. 예를 들어, circle과 rectangle이라는 변수에 클래스 선언을 각각 해주자. shapes라는 변수는 Shape라는 interface를 지닌 클래스 객체들을 담는 리스트이다. 따라서 안에 circle과 rectangle이 들어가는 것은 허용되지만, 이런식으로 다른 타입의 값을 넣어주면 에러가 난다. 그러면 이제 이 shape 변수를 통해 무얼 .. Typescript 기초 JavaScript는 weakly typed language 이기 때문에, 변수에 어떤 값을 담던 상관이 없다. 가령, 아래 코드는 전혀 문제될 것이 없는 코드이다. value라는 변수에 어떤 값을 담던, JS에서는 변수에 type이라는 것이 지정되어있는 것이 아니기 때문에, 언제든 다른 type의 값으로 설정을 해주어도 상관이 없다. 어떻게 보면 자유로운 변수의 사용이지만, 어떻게 보면 또 오류가 나오는 원인이 되기도 한다. 예를들어 배열인줄 알고 대입을 해보았더니 null이어서 에러가 난다거나, 숫자인줄 알고 연산을 했다가 string이어서 에러가 난다거나, 여러 에러의 원인이 될 수 있는 것이다. 자바스크립트의 가장 큰 문제중 하나는 코드가 일단 실행된 이후에야 자신이 실수를 했는지 안했는지 알 수.. Redux-saga - Promise 작업 처리 리덕스사가에서 promise 작업을 처리하는 방법에 대해서 다룰 것이다. 먼저, 아래는 리덕스 떵크에서 비동기 작업을 처리하던 방식이다. id값이 들어오면, GET_POST 액션을 디스패치하고, 비동기로 api를 호출한 후, 성공하는지 실패하는지에 따라서 SUCCESS와 ERROR가 디스패치된다. 이를 사가에서는 이런식으로 처리한다. 먼저 액션 생성함수를 만들어 준다. 그 후, 그 액션이 디스패치 되면, 액션을 모니터링 하여 getPostSaga가 실행되도록 해준다. call이란 함수는 postAPI.getPostById라는 함수를 받아와 id를 인자로 써서 실행토록 한다. 그 후, promise를 받아오면, post라는 변수에 프로미스를 담는다. 그 후, 새로운 액션을 put으로 디스패치 한다. Redux-saga - 기본 리덕스 사가를 작성할 때는 제너레이터 문법을 통해 작성한다. 예를 들어, 리덕스 사가에서 delay와 put이라는 함수를 불러왔다. delay는 말 그대로 몇 ms를 딜레이 시키는 함수이고, put은 디스패치와 비슷한 함수이다. increase()를 호출해서 increase 액션 객체를 만들고, 그 객체를 호출하여 리덕스 사가 미들웨어에 명령을 하는 것이다. 리덕스 미들웨어에게 특정 명령을 수행하라고 하기 위해서는 yield를 하면 된다. 보면, yield를 통해 delay(1000) 이라는 함수를 수행할 것을 미들웨어에 보내고 있다. increaseAsync라는 함수를 실행했을 때, increaseSaga라는 명령을 내리게 하고 싶다. 그러면 이제 takeEvery라는 함수도 불러오자.' takeEve.. Redux-saga - Generator 문법 리덕스 사가는 리덕스 떵크와 함께 가장 많이 쓰이는 비동기 작업 관련 미들웨어이다. 리덕스 사가는 액션을 모니터링 하고 있다가 특정 액션이 발생하면 어떠한 특정 작업을 하는 미들웨어이다. 리덕스 사가를 사용하면 여러 까다로운 작업을 처리할 수 있다. 예를 들어, 비동기 작업을 진행할 때 기존 요청을 취소할 수 있다. 또는 맨 처음/맨 마지막 액션만 처리하거나, 특정 액션이 발생 했을 때 이에 따라 다른 액션을 디스패치하거나 자바스크립트 코드를 실행할 수 있다. 또, 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리할 수 있다. 또, 비동기 작업이 실패했을 때 재시도 하는 기능을 구현할 수도 있다. 리덕스 사가는 자바스크립트의 제너레이터 (Generator) 라는 문.. Redux-thunk 리덕스 떵크는 액션 객체가 아닌 함수를 디스패치 할 수 있도록 해주는 라이브러리이다. 비동기 작업을 처리하기 위해서 주로 사용되는데, 정말 많이 사용된다고 한다. 기본적인 원리는 아래와 같다. 떵크라는 함수는 미들웨어의 역할로써 중간에 위치하는데, 액션을 받아오면, 그 액션이 함수 타입인지 먼저 확인한다. 만약 액션이 함수타입이 아니라면, 가령 객체타입이라면, next 함수로 넘어가 그대로 다음 미들웨어 혹은 리듀서로 전달되고, 만약 함수타입이라면, 액션의 디스패치와 상태를 가져와 실행한다. 이를 통해 어떤 작업들을 할 수 있냐면... getComments 라는 함수에서는 액션을 dispatch 할수도 있고, state를 가져올 수도 있다. 위 함수는 api를 요청한 뒤, api에서 받아오는 값에 따라서.. 이전 1 2 3 다음
