일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- RTK Query
- recoil
- 결정 알고리즘
- React
- CI/CD
- TS
- dfs
- autosize
- useAppDispatch
- ESlint
- 반공변성
- async/await
- 무한 스크롤
- 태그된 유니온
- 공변성
- Cypress
- 이분 검색
- 투포인터
- webpack
- 호이스팅
- CORS
- 리터럴 타입
- tailwind
- 인터섹션
- map
- 타입 좁히기
- app router
- SSR
- Jest
- Promise
- Today
- Total
목록TS (34)
짧은코딩
자바스크립트는 덕 타이핑(duck typing) 기반이다. 덕 타이핑은 "만약 어떤 새가 오리처럼 걷고, 헤엄치고, 짹짹거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다."라는 명제이다. 예를 들어 "안녕"이라는 문자열에 숫자 10을 더하면 "안녕10" 이렇게 나오는 것을 의미한다. 구조적 타이핑 성공 예시 interface Vector2D { x: number; y: number; } function calculateLength(v: Vector2D) { return Math.sqrt(v.x * v.x + v.y * v.y); } interface NamedVector { name: string; x: number; y: number; } const v: NamedVector = { x: 3, ..
TS 컴파일러 -TS 컴파일러의 역할 1. 최신 js/ts가 동작하게끔 구버전 js로 트랜스파일(translate+compile)한다. 2. 코드의 타입 오류를 체크해준다. 위 역할 두 가지는 독립적이다. 즉, ts가 js로 변환될 때 코드에 있는 타입에는 영향을 주지 않는다. 그리고 변환된 js 실행에서도 타입은 영향을 끼치지 않는다. 타입 오류가 있는 코드 let x = "abcd"; x = 1234; 컴파일과 타입 체크가 독립적이라서, 위 코드처럼 타임 오류가 있어도 컴파일이 가능하다. 코드에 오류가 있더라도 컴파일된 결과가 나오는 것이 도움이 된다. 웹을 만들 때, 오류가 해결되지 않아도 다른 부분을 테스트할 수 있다. 런타임과 타입 체크 ts에서 js로 컴파일되는 과정에서 interface, t..
TS와 JS TypeScript는 JavaScript의 상위 집합이다. 즉 JS로 작성된 코드는 TS가 되지만 그 반대는 성립하지 않는다. 그리고 TS에는 타입 체커가 있는데 이 타입 체커가 문제점을 찾아준다. 예시 let city = 'new york city' console.log(city.toUppercase()) 함수를 잘못 사용하고 있는 코드이다. 원래는 toUpperCase()인데 타입 체커는 이런 오타 같은 문제점을 찾아준다. interface State { name: string capital: string } const states: State[] = [ { name: 'Alabama', capitol: 'Montgomery' }, { name: 'Alaska', capitol: 'Jun..
React FunctionComponent interface P { name: string, title: string, } // ReactElement는 굳이 안해도 된다. const WordRelay: FunctionComponent = (): ReactElement => { } FC가 FunctionComponet의 줄임말이다. 리액트 17버전에서는 VFC도 있었는데 18버전에서는 사라졌다. VFC와 FC의 차이는 VFC는 children이 없고 FC는 childrend이 있다. 따라서 FC children를 사용하고 싶다면 interface P { name: string, title: string, children?: ReactNode | undefined; } const WordRelay: FC ..
Axios 만들기 import axios, { AxiosError, AxiosResponse } from "axios"; interface Post {} interface Created {} interface Data { title: string; body: string; userId: number; } // date에 타입을 줄 때 그냥 any로 하면 타입핑을 포기한다는 것이다. //따라서 제네릭을 이용해서 타입이 any가 아니여도 괜찮다. interface Config { // method는 string으로 해도 되지만 이렇게 좁혀주는 것이 더 좋다. method?: "post" | "get" | "put" | "patch" | "delete" | "head" | "options"; url?: str..
axios 분석 axios는 XMLHttpRequest 기반이라 fetch보다 기능이 다양하다. 게다가 브라우저와 노드 모두 사용이 가능하다. -가상 api 주소가 필요할 때 사용하는 주소 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com -ts에서 함수에 속성 추가하..
npm이 TS인 경우 reduce https://www.npmjs.com/package/redux redux Predictable state container for JavaScript apps. Latest version: 4.2.0, last published: 4 months ago. Start using redux in your project by running `npm i redux`. There are 16342 other projects in the npm registry using redux. www.npmjs.com redux의 공식 사이트이다. 사이트에 들어가서 보면 redux 옆에 ts가 있는데 이는 "typing을 기본적으로 제공하는 라이브러리"라는 의미이다. axios axios도..
Utility Types https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org utility types는 ts가 미리 만들어 놓고 가져다 쓰면 되는 타입들이다. 객체를 조작할 때 도움이 많이 된다. 직접 만들 수도 있어야 한다. 예시 Partial interface Profile { name: string; age: number; married: boolean; } const ori: Profile = { name: "ori", age: 20, married: fal..
TS와 건망증 interface Axios { get(): void; } interface CustomError extends Error { response?: { data: any; }; } declare const axios: Axios; (async () => { try { await axios.get(); } catch (err: unknown) { console.error((err as CustomError).response?.data); } })(); 원래 ts 에러 코드에는 이렇게 밖에 없다. 하지만 위 코드의 CustomError 처럼 response를 추가하면 더 추가할 수 있다. 위 코드에다가 err.response?.data를 추가하면 위에서 선언해줬지만 ts가 건망증이 생겨서 잊어버..
공변성, 반공변성 서로 대입할 수 있고 대입할 수 없는 것을 말하는 것이 공변성, 반공변성이다. 리턴값 -대입 가능 function a(x: string): number { return +x; } a("1"); type B = (x: string) => number | string; const b: B = a; a 함수가 B에 대입이 가능하다. 왜냐하면 리턴값은 더 넓은 타입에 대입이 가능하기 때문이다. -대입 불가 function a(x: string): number | string { return +x; } a("1"); type B = (x: string) => number; const b: B = a; 이와 반대로 더 넓은 타입에서 좁은 타입으로는 대입할 수 없다. 매개변수 -대입 가능 funct..