전체 글 썸네일형 리스트형 Typescript 긴 어노테이션 해결하기 Typescript로 개발하면서 함수에 인자로 받아줄 때 그 인자의 개수가 많아지면 어노테이션으로 작성하다가 불편 하고 가독성이 떨어지기 마련이다. const myBlog = { name : 'devilfront', year : 2022, opended : true }; const consoleBlog = (blog:{name : string; year: number; opended: boolean}) : void => { console.log(`name : ${blog.name}`); console.log(`when : ${blog.year}`); console.log(`open? : ${blog.opended}`); } 이렇게 blog 객체의 프로퍼티들에 대한 타입을 정해주는데 3개라서 적당해보이지만.. 더보기 Typescript Function with Annotation and Function with Inference 이번엔 type annotation 과 type inference로 함수를 정의하는 것을 알아보자. 우선 type annotation으로 정의하는 것을 보면 const add = (a:number ,b :number) :number => { return a + b; } type inference로 정의하는 법을 보면 const add = (a:number ,b :number) => { return a + b; } 인자로 받는 것들은 타입을 써주지만 리턴하는 값에 대한 타입 지정이 빠져있다. 타입스크립트는 타입에 관해 엄격하기 때문에 2개의 인자로 받는 것들이 number 이니 리턴 값도 number로 추론해 냈다. 내가 본 자료에서는 함수 정의에서 만큼은 type annotation을 비록 몇글자 더 적.. 더보기 Type Annotation을 써야 할 때 (3) type inference 만으로 안될 때 만약 개발을 진행할 때 평소에 boolean 값이 었다가 특정 상활 일 때 다른 타입의 값을 가진다고 가정했을 때이다. 물론 애초에 그렇게 짜는 건 좋은 코드가 아닐테지만 특수한 상황이라 가정하고 그럴 일이 생긴다고 가정했을 때 let numbers = [-12,-4,10]; let numberAboveZero = false; for(let i=0; i 0){ numberAboveZero = numbers[i] } } 이런 상황에서 inference로 인해 boolean 이었던 변수가 number 타입의 값을 가지게 되면 에러가 뜬다. 이럴 때 값이 될 수 있는 타입들을 type annotation을 이용하면 해결 할 수 있다. 더보기 Type Annotation을 써야 할 때 (2) Delayed Initialization 변수의 선언과 초기화가 같이 이루어 지지 않을 때 Type Annotation을 쓰기도 한다. let words = ['red' , 'green' , 'blue']; let findWord; // 선언만 for(let i = 0; i 더보기 Type Annotation을 써야 할 때 (1) any Type 타입스크립트의 타입에는 여러가지가 있지만 'any'라는 타입이 존재한다. 단어 의미 그대로 '어떤' 것이 올 지 모른다는 것이다. 예를 들어 보면 const json = '{"x":10, "y":20}'; const coordinates = JSON.parse(json); // {x:10, y:20} // x : number, y : number JSON.parse 메소드에 위와 같은 인자를 넣었을 때 값이다. const json = '{"first":"devil", "last":"front}'; const coordinates = JSON.parse(json); // {first : 'devil', last : 'front' } // first : string, last : string 위의 예처럼 다.. 더보기 Type Annotation vs Type Inference 타입스크립트 에서 타입을 지정할 때 쓰는 2가지 방법으로서 Type Inference는 형식추론이라고도 불리며 직접 타입을 지정하지 않아도 저장된 값에 따라 형식이 자동으로 저장되는 것을 말한다. let banana = 5; // 따로 타입 지정 xx banana = 'yammy'; // 마우스 호버시 보면 처음에 number 형태의 값이 저장되었는데 후에 string 으로 대체하려 하니 타입이 맞지 않아 에러가 뜬 모습이다. 이처럼 따로 타입 지정없이 컴파일러가 초기에 저장된 값으로 타입을 지정하는게 type inference 이다. Type Annotation은 직접 타입을 부여하는 방식인데 let apples : number = 5; apples = 'not yammy'; 이런 식으로 직접 numb.. 더보기 Redux-Saga 이해하기 큰 형 Redux의 다른 작은형제인 Redux-Saga의 사용법을 알아보자. Redux-Saga는 Redux-thunk와도 비교가 많이 되는 라이브러리인데 그 둘의 차이점을 비교해놓은 글이 많으니 한번 찾아보길 권한다. 비교글 https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga%EB%A5%BC-%EB%B9%84%EA%B5%90%ED%95%B4-%EB%B4%85%EC%8B%9C%EB%8B%A4- 오늘은 실직적인 사용법과 흐름을 한 번 직접 살펴보겠다. npm install redux-saga Saga의 가장 큰 특징은 Generator 함수를 쓰는 것인데 이 부분은 이런 글들을 찾아보면서 보충해야 될 부분이다. https://meetup.toast.com/post.. 더보기 redux-thunk 이해하기 Redux는 따지고 보면 큰 울타리를 Redux 라 부르고 큰 울타리 내에서 잘지내게 만들어진 여러 작은 울타리들이 있다. Redux-thunk, Redux-Toolkit, Redux-Saga 등이 그런 것들이고 이번엔 Redux-thunk를 사용해보면서 사용법을 익혀보자 npm install redux-thunk redux-thunk 는 비동기 작업을 처리할 때 쓰이는 미들웨어다. 이 미들웨어를 단순히 객체만 디스패치 하는 게 아닌 함수를 디스패치 할 수 있게 된다. 주로 api 콜을 하면서 데이터를 가져올 때 사용하는데 사용법은 간단하다. * dispatch 를 파라미터로 받는다. 이게 가장 중요한 거 같다. 이런 식으로 async/await 문법을 사용할 수 있으며 Action 함수 내에서 요청을 .. 더보기 이전 1 ··· 3 4 5 6 7 8 9 ··· 24 다음
