이안의 평일코딩

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..

타입스크립트 기본 환경 구성 #1. NPM 초기화 (npm 설정파일 package.json 추가) npm init -y #2. 타입스크립트 라이브러리 설치 npm i typescript --save-dev #3. 타입스크립트 설정 파일(tsconfig.json) 생성 및 기본 값 추가 //tsconfig.json { "compilerOptions": { "allowJs": true, // 자바스크립트 검증 "target": "ES5", // 타입스크립트 컴파일 tsc "outDir": "./built", // 결과물 들어갈 곳 "moduleResolution": "Node" // Promise 인식 위해서 }, "include": ["./src/**/*"] //src폴더 모든 파일 대상 포함 } #4. ..

첫 클래스라 인원이 2명밖에 안되었지만, 그래도 코로나 시국에 맞게 소수인원으로 잘 마쳤습니다. https://iancoding.tistory.com/252 [2021.06] 이안의 월간코딩 - 리액트 웹 사이트 3시간 컷 2021년 6월 이안의 월간코딩은 5일(토) 오전 10시부터 오후 1시까지 진행됩니다. 이런 걸 배워요! - 웹 사이트 구조잡기 - @material-ul/icons import 해오기 - map함수 사용하기 - Router(Link) 이용.. iancoding.tistory.com 장소가 협소한 탓에 길음점이 아닌 성신여대점으로 위치를 옮겨서 진행하였고, 시간은 9시부터 13시까지 진행하였지만 프로젝트에는 정확히 3시간이 소비되었습니다. 클래스 진행 순서 1. 프로젝트 생성, 환경설..

VPC(Virtual Private Cloud) AWS의 가상 사설 네트워크로 AWS를 잘 사용하기 위해서 반드시 알아야 되는 필수 지식. EC2의 네트워크 계층으로 많은 AWS 서비스들이 VPC를 통해 네트워크에 연결된다. VPC: 사용자의 AWS 계정 전용 가상 네트워크 망으로 리전 서비스 (고가용성을 위해 multi AZ로 구성) 서브넷: VPC를 더 작은 범위의 네트워크로 나눈 것으로 AZ 서비스 EC2인스턴스(AZ 서비스)는 바로 VPC에 연결되지 못하고 반드시 서브넷을 통해 연결됨 라우팅 테이블: 네트워크 트래픽 전달 규칙 지정 CIDR 블록: CIDR 표기법을 통해 IP 주소 범위를 지정 CIDR 표기법 IP의 범위를 간단하게 표기하는 표기법이다. IP address / Prefix 예) 0..