export/import StringValidator.ts expoer interface StringValidator { isAccetable(s: string): boolean, } ZipCodeValidator.ts import { StringValidator } from "./StringValidator" 위와 같이 module을 export하고 import 해올 수 있다. type-only export/import 타입 스크립트는 import 해올 때 type도 자동으로 import 해오기 때문에 런타임에서 type만 import 해오는 문장은 지워버린다. 때문에 문장만 가지고 type인지 value인지 알 수 없을 경우 문제가 발생할 수 있다. 그래서 TypeScript 3.8부터 type만 e..
본 글은 노마드코더의 TypeScript로 블록체인 만들기 강의를 보고 작성하는 글입니다. Interface const person = { name: "Lee", age: 22, gender: "male", }; const sayHi = (person): string => { return `Hello ${person.name}, You are ${person.age} and ${person.gender}`; }; console.log(sayHi(person)); export {}; index.ts 타입스크립트는 변수에 타입을 지정해서 변수에 들어가는 실제 자료가 변수의 자료형과 일치하는지 검사하는 역할을 한다고 했다. 그렇다면 object를 넘겨줄 때는 object가 내가 생각하는 object와 일치하는..
타입 선언 타입 스크립트는 일반 변수, 매개 변수, 객체 속성 등에 :TYPE과 같은 형태로 타입을 지정한다. let variable: string = "Hello World!" 타입 종류 타입스크립트는 자바스크립트와 거의 동일한 타입을 가지나 타입스크립트 고유의 타입 역시 포함한다. 타입 JS TS boolean O O Number O O String O O Array O Tuple O Enum O Any O Void O Null and Undefined O O Never O object O O 1. boolean let TFVariable: boolean = true; 2. number 자바크립트와 마찬가지로 타입스크립투도 부동 소수값, let decimal: number = 6; // 십진법 : 6..
본 글은 노마드코더의 TypeScript로 블록체인 만들기 강의를 보고 작성하는 글입니다. 더보기 사실 실무에서 일하시는 분이 TypeScript를 빠르게 배워 적용하기에 적절한 강의는 아니라고 하셨지만 Interface 같은 내가 스쳐가며 보여 이게 뭐지? 했던 개념을 소개해주는 것이 들어볼만하고 생각했고, 강의도 1시간이라 블록체인 만드는 부분 전까지만 간단하게 들으면 괜찮을 것 같아서 수강 결정! JS도 못하는데 TS를 듣는게 꺼려졌지만 프로젝트에서 필요하다고 해서 강제로 배워야한다.... 백엔드와 데이터를 주고받는 과정에서 타입이 정해지기 때문에 결국 TS를 써야한다고 하시더라........ TS는 왜 등장했는가? JS에는 엄격한 규칙이 없고 이는 개발자가 개발하기 쉽고, 수정하기 쉽도록 만들었다..
nullish 병합 연산자 ?? ??을 사용하면 여러 피연산자 중 값이 '확정되어 있는' 변수를 찾을 수 있다. 예를 들어 x = a ?? b 라는 코드는 a가 null이나 undefined가 아니면 a 그 외에는 b 라는 의미를 나타낸다. 이는 아래 코드와 같다. x = (a !== null && a !== undefined) ? a : b; 값을 여러개 나열하여 정의된 값을 찾아낼 수도 있다. x = a ?? b ?? c 라면 null이나 undefined가 아닌 첫 번째 피연산자를 반환한다. ?? vs || ??는 or 연산자 ||과 비슷해 보이지만 차이점이 존재하는데 ||는 첫 번째 truthy 값을 return하는 반면, ??는 첫번쨰로 defined된 값을 return한다. 이는 0과 null..
let user = {}; console.log(user.id); 다음과 같은 코드가 있다고하자. user는 빈 객체이므로 console.log에서는 오류가 난다. 이를 오류 없이 해결할 수 있는 방법이 optional chaning이다. 옵셔널 체이닝 옵셔널 체이닝은 ?.로 사용하며 앞의 대상이 undefined거나 null이면 undefined를 return한다. 예를 들어 let user = {}; console.log(user?.name?.first); //undefined 위와 같이 작성하면 user에서 존재 여부를 확인하고 user는 존재하기 때문에 다음으로 넘어간다. name?에서는 user 객체 내에 name 속성이 존재하지 않기 때문에 멈추고 undefined를 return한다. 따라서 ..
본 글은 노마더 코더의 실전형 리액트 Hooks 10개 강의를 들으며 작성한 글입니다. useAxios 이번에 주식 시세 프로젝트를 하면서 axios로 API를 호출해야 할 일이 생겼는데, 어떻게 API 호출을 좀 더 깔끔하게 할 수 없을까? 고민하다가 노마드코더에서 Hooks 강의를 들을 때 보았던 useAxios를 사용해볼 수 없을까 싶어서 정리할 겸 작성한다. import React from "react"; import ReactDOM from "react-dom"; import useAxios from "./useAxios"; const App = () => { const { refetch, loading, data, error } = useAxios({ url: "API 호출 주소" }); re..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. configureStore const store = configureStore({ reducer }); configureStore는 createStore와 비슷하게 쓰이지만 중간에서 Redux DevTools를 이용할 수 있게 해준다. Redux DevTools를 이용하면 Redux의 내부 상태 및 히스토리를 직접 볼 수 있게 된다. 사실 Redux Toolkit이 없어도 Redux DevTools은 사용할 수 있다. 자동으로 켜주는게 다를 뿐. 어쨌든 Redux Developer Tool을 설치하려면 - Redux DevTools Extension : Github GitHub - zalmoxisus/redux-devtoo..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. Redux Toolkit 사람들은 Redux를 사용할 때 많은 코드를 적어야 하는 것이 불편하다고 느꼈고, 이에 보완책으로 나온 것이 Redux Toolkit이다. 즉, Redux Toolkit은 더 적은 코드로 Redux와 같은 일을 행하게 해주는 Package이다. npm install @reduxjs/toolkit createAction 더보기 const ADD = "ADD"; const DELETE = "DELETE"; const addToDo = (text) => { return { type: ADD, text, }; }; const deleteToDo = (id) => { return { type: DELETE,..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. mapDispatchProps connect 함수는 component와 store를 연결시켜주는 함수이다. connect는 둘 중 하나의 arguments를 가질 수 있다. state dispatch 이번에는 dispatch를 살펴보자. ... function mapDispatchToProps(dispatch) { console.log(dispatch); } export default connect(null, mapDispatchToProps)(Home); Home.js connect를 통해 mapDispatchProps를 사용하려면 다음과 같이 작성해줄 수 있다. 여기서 반환되는 dispatch를 살펴보면 위와 같다. i..
