그냥 쓰면 되지 않으려나...했는데 type의 벽에 가로막혀서 이거 어케 쓰냐... 하지말까...란 생각이 들었지만.. 아무튼 극복함 이렇게 올리기 버튼을 누르면 숫자가 2 오르고 내리기 버튼을 누르면 숫자가 2 내려가는 버튼을 만들어보겠습니다. npm install react-redux @reduxjs/toolkit src/modules/CounterSlice.ts import { createSlice } from '@reduxjs/toolkit'; const CounterSlice = createSlice({ name: 'CounterSlice', initialState: { number: 0 }, reducers: { up: (state, action) => { state.number += acti..
🐕 인트로 { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": tr..
🐕 제네릭 https://ko.wikipedia.org/wiki/%EC%A0%9C%EB%84%A4%EB%A6%AD_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 제네릭 프로그래밍 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. --> ko.wikipedia.org 제네릭 프로그래밍은 데이터 형식에 의존하지 않고 하나의 값이 여러 다른 데이터 타입들을 가질 수 있는 기술에 중점을 두어 재사용성을 높일 수 있는 프로그래밍 방식이다. hmm 그러니까 값은 하나지만 데이터타입은 여러개를 가질 수 있다가 핵심인가보네요 제네릭은 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있게해준다고 하네요 👻what if 제네릭이 없는 세계관 funct..
🐕 리터럴 타입 좁히기(Literal Narrowing) 리터럴 타입이란 집합 타입의 하위타입을 의미합니다. 타입 시스템 안에서 "Hello World"는 string 타입이지만 string 이 "Hello World"인건 아니라는 소리에요 현재 타입스크립트에는 문자열과 숫자 두 가지 리터럴 타입이 존재하는데 이를 사용하면 문자열이나 숫자에 정확한 값을 지정해 줄 수 있습니다. 리터럴 타입 좁히기는 무한한 수의 잠재적 케이스들을 유한한 수의 잠재적 케이스로 줄여 나가는 것을 의미합니다. 이게 대체 뭔소리 // const를 사용하여 변수 helloWorld가 // 절대 변경되지 않음을 보장합니다. // 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다. const he..
🐕 함수 타입 작성해보기(Writing the Function type) let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; }; 화살표 함수처럼 타입을 지정해줄 수 있습니다. 타입스크립트에서 함수의 반환 타입은 다음과 같이 => 화살표 표기를 통해 분명히 할 수 있습니다. 만약 함수가 값을 반환하지 않는다면 비워두는 대신에 void를 사용해 표기합니다. let myAdd: (x: number, y: number) => void = function ( x: number, y: number, ): void { console.log(x + y); }; 이런 식으로 쓸 수 있겠네요!..
🐕 인터페이스 타입스크립트의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고있다는 것입니다. 이것을 덕 타이핑(duck typing) 혹은 구조적 서브타이핑(Structural Subtyping)이라고 합니다. 덕 타이핑이란 개념이 개인적으로 재미있었는데 https://ko.wikipedia.org/wiki/%EB%8D%95_%ED%83%80%EC%9D%B4%ED%95%91 덕 타이핑 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 컴퓨터 프로그래밍 분야에서 덕 타이핑(duck typing)은 동적 타이핑의 한 종류로, 객체의 변수 및 메소드의 집합이 객체의 타입을 결정하는 것을 말한다. 클래스 ko.wikipedia.org 위키피디아를 참고해보면 덕타이핑은 덕 테스트에..
🐕 TypeScript https://typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 위 링크에서 어떻게 타입스크립트를 써야하는지 왜 타입스크립트를 써야하는지는 아주 잘 설명이 되어있습니다 바로 시작을 하고 쓰고싶은데 그 부분에 대해서는 설명이 좀 아쉬운 것 같아서 node.js 환경에서 TypeScript를 사용하는 방법을 간단히 정리하겠습니다. 👻일단 TypeScript를 install한다. 타입스크립트를 쓰려면 타입스크립트를 깔아야합니다. npm install typescript npm install ts-node 더불어 타입스크립트는 자바스크립트 파일로 컴파일하지 않으면 실행시킬 수 없습..
