이안의 평일코딩

Material-UI란? 부트스트랩, antd와 같이 빠르고 쉽게 웹 개발을 위한 웹 디자인 CSS를 도와주는 프레임워크이다. 설치하기 Material-UI는 npm패키지로 제공된다. 터미널에 아래와 같이 입력하고 설치해준다. // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core 아래와 같이 간단하게 import해와서 Material-UI에서 이미 지정해 둔 스타일로 버튼을 만들 수 있다. import React from 'react'; import { Button } from '@material-ui/core'; function App() { return Hello World; } 아이콘을 사용하고 싶다면 @m..

strict 옵션이란? 정의해놓은 코드에서 강하게 타입을 정의할 수 있고 추후에 일어날 수 있는 타입 정의에 대한 오류 대응할 수 있고 안전하게 코딩을 할 수있게 한다. tsconfig.json에서 strick 옵션은 default가 false이며 true로 고쳐주면 아래의 옵션들도 같이 true가 된다. { "strict": true, "strictNullChecks": true, "strictFunctionTypes": true, "strictBindCallApply": true, "strictPropertyInitialization": true, "noImplicitThis": true, "alwaysStrict": true, } 내장 타입의 위계 구조 타입 오류 // 타입스크립트 내장 타입의 위계..

async & await 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법으로 Promise, Callback의 단점을 해결하고 동기적(절차적)으로 코드를 작성할 수 있게 도와준다. async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직 중 비동기 처리 로직 앞에 await를 붙여주면 된다. 자바스크립트 비동기 처리 function fetchData() { var user = $.ajax('users/1'); console.log(user); } 위와 같은 코드에서 ajax의 시간 지체로 다음 줄이 실행이 되지 않아 화면이 멈추거나 다른 동작을 할 수 없는 문제점 때문에 데이터를 받아왔을 때 코드를 실행할 수 있게 비동기 처리를 해줘야한다. 예전 비동기 처리 (callback) ..

디스트럭처링이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" 객체 구조 분해 var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true 디스트럭처링 예제 코드 functio..

axios 라이브러리 // 라이브러리 로딩 import 변수명 from '라이브러리 이름' // 변수, 함수 임포트 문법 import {} from '파일 상대 경로'; 터미널에 -D 또는 --dev--save없이 axios를 설치해주면 package.json의 dependencies(devDependencies가 아닌)에 생긴다. npm i axios // i는 install과 마찬가지 그리고 라이브러리를 import해오면 axios에 대한 타입 오류가 사라진다. import axios from 'axios'; 타입 선언 외부 라이브러리 axios는 타입정의가 잘 되어있는 라이브러리지만 그렇지 않은 외부 라이브러리같은 경우에는 어떻게 해야할까? chart.js로 알아보자. npm install char..

dependencies와 devDependencies dependencies에 있는 typescript 삭제 npm uninstall typescript devDependencies에 라이브러리 추가 (배포아닌 개발용 -D 또는 --save--dev) npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier npm 설정파일 package.json에는 라이브러리(패키지)가 들어가 있다. // package.json "devDependencies": { "@b..

명시적인 any 타입 선언 먼저, 명시적으로 any를 선언한다. tsconfig.json 파일에 'noImplicitAny' 값을 'true'로 추가한다. // tsconfig.json { "compilerOptions": { "allowJs": true, // 자바스크립트 검증 "target": "ES5", // 타입스크립트 컴파일 tsc "outDir": "./built", // 결과물 들어갈 곳 "moduleResolution": "Node", // Promise 인식 위해서 "lib": ["ES2015", "DOM", "DOM.Iterable"], // Promise 등 에러 안뜸 "noImplicitAny": true, // 외부라이브러리(axios 등) 오류에서 더 많은 타입에러가 뜸 }, "..

ES6 이전의 함수 // ES5 - 함수 선언문 function sum(a, b) { return a + b; } // ES5 - 함수 표현식 var sum = function(a, b){ return a + b; } ES6+ 화살표 함수 function을 없애고 =>를 추가해서 코드가 더 간결해졌다. 그리고 간단한 연산 표현식은 { }와 return을 없애서 쓸 수 있다. // ES6+ - 함수 표현식(화살표 함수) var sum = (a, b) => { return a + b; } var sum = (a, b) => a + b; 타입스크립트의 화살표 함수 // TS - 화살표 함수 var sum = (a: number, b: number): number => { return a + b; }