TypeScript (5) 썸네일형 리스트형 2024.3.8 기록 ( react-query의 useMutation을 커스텀훅으로) 어제 있었던 문제 커스텀 훅을 만들던 중, 재사용성을 높이기 위해서 타입을 지정해주는 과정에서 오류를 뿜어냈다. 문제는, TodoList의 타입인 Todo에는 4개의 타입이 존재했는데, 생성, 삭제에서는 각각 Todo와 id만 존재하면 되었기에 충돌이 일어나지 않았다. 문제는 update였는데, 여기서는 id와 isDone이라는 2개의 개별속성을 요구했고, title과 content는 필요하지 않은 상황이었다. 데이터 타입을 가져오기 위해서는 axios통신을 거치는 서비스 로직에서의 수정이 함께 필요했다. 기존에 id와 isDone을 각각 string, boolean으로 지정해주었을 때, 문제가 발생했고 이를 해결해주기 위해 UpdateTodoType을 설정해주고, 그것을 각각 서비스로직과 커스텀훅에서 .. 2024.3.7 기록 (react-query 커스텀 훅과 타입) 이번에 react-query에서 useMutation 을 이용해서 커스텀훅을 제작하는 과정에서 문제가 발생했다. CRUD중에서 CUD 를 하나의 커스텀 훅에서 만들었기 때문에 발생한 문제이다. 받아오는 axiosApi 가 총 3개 C U D 과정이었다. 각각 Type, id, boolean 값을 받았기 때문에, 문제가 있었고, data또한 별도의 타입을 선언해주어야 할 만큼 여러가지 타입이 존재했다. any를 사용하지 않고 매개변수로 각각의 함수를 받고 useMutation을 통해 각각의 역할을 지닌 커스텀훅을 제작하기로 했다 매번 재사용성이 높은 커스텀훅을 제작한다는 것에 목적을 두는데, 이번에는 확실한 역할을 나누어 제작해봐야겠다. 2024.3.6 기록 (타입스크립트를 리액트에서 사용해보기) 실행해보기 $ ts-node 터미널에서 ts파일을 실행 할 수 있다. 비동기로 사용하기 type Character = {id : number; age: number; Role : string}; async function getCharacter() : Promise{ const res = await fetch ( 데이터.json); if (!res.ok) { throw new Error(); } return res.json(); } getCharacter().then((res) => console.log(res)); 비동기 함수는 선언부에 Promise Promise로 감싸주게 되면 올바르게 실행이 된다. useState에서 ts를 사용하는 방법 useState(); //이렇게 직접 입력하는 방법과 us.. 2024.3.5 기록 ( 타입스크립트의 유틸리티 타입 ) 유틸리티 타입이란, 공통 타입 변환을 용이하게 하기 위한 기능들이고 전역에서 사용이 가능하다. 우선은 5가지의 유틸리티 타입을 정리해보았다. 많은 유틸리티 타입들의 정보가 있는 곳은 다음과 같다. Documentation - Utility Types Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 1. Partial 타입 T의 모든 속성을 선택적으로 만든다. 일부 속성만 제공하는 객체 interface Character { name : string; age : number; } const updateData = (character : Character, fields : Pa.. 2024.3.4 기록 (타입스크립트의 시작) 타입스크립트 이번 주차부터 타입스크립트를 시작하는 주간이다. 기존의 React를 학습해왔던 배경을 JavaScript에서 TypeScript로 변경하는 부분이 지금 맡게 된 시작이다. 그래서, 기초적인 이론을 정리해보고자 한다. 1. 자바스크립트와의 차이점. 자바스크립트는 동적언어(인터프리터 언어)이다. 그에 반해 타입스크립트는 정적언어(컴파일 언어)이다. 정적 언어에는 타입스크립트 외에 C, C#, C++, Java가 존재한다! 정적언어는 기계어로 변환이 필요하지만, 동적언어는 필요하지않다. 동적 언어는 기계어로의 변환이 왜 필요가 없을까? node.js와 chrome에서는 v8엔진이 코드를 해석하고 실행하며 firefox에서는 spiderMonkey가 코드를 해석하고 실행한다. 그럼 동적 언어의 단점.. 이전 1 다음
