let's get IT with DAVINA 💻

1. TypeScript 적용 (1) 새로운 프로젝트를 TypeScript로 생성하기 npx create-react-app 프로젝트이름 --template typescript (2) 기존 React에 TypeScript 적용하기 #npm npm install typescript @types/node @types/react @types/react-dom @types/jest #yarn yarn add typescript @types/node @types/react @types/react-dom @types/jest 2. TypeScript 설정 tsc 명령어를 사용하여 tsconfig.json을 생성한다. tsc --init 원하는 옵션을 추가하여 tsconfig.json 을 설정한다. { "compile..

import crypto from "crypto" 🚫 Module “crypto” has no default export. (가져오기 불가능) SOL 1. import * as crypto from "crypto"​ SOL 2. tsconfig.json파일로 가서 esModuleInterop을 true로 설정 { "include": ["src"], //ts파일들이 어디에 있어? 지켜봐 "compilerOptions": { "outDir": "build", //ts->js로 컴파일된건 어디에다 저장할꺼야? "target": "ES6", //js로 컴파일될 때 어떤 버전을 사용할지 선택 가능 (ES6 젤 추천) "lib": ["ES6"], //브라우저 환경이 아닌 NodeJS에서 개발할꼬임 dom ㄴㄴ "s..

1. package.json 초기화 //terminal mkdir typechain code typechain //vsc열린다 //typechain/통합terminal npm init-y - package.json package.json파일이 생성되면, "main": "index.js" 없애고, scripts 안에 test부분 없애고 수정 ㄱㄱ { "name": "typechain", "version": "1.0.0", "description": "", "scripts": { "build": "tsc", "dev": "nodemon --exec ts-node src/index.ts", //src폴더 안의 index.ts파일의 코맨드들을 자동 실행시켜줌 "start": "node build/index.js..

들어가기 전 하나 알고 가자 +1 Static JS method입니다. method를 호출할 때, 원래는 new Hi와 같은 instance를 새로 생성해서 hello()를 호출해야하는데 static 정적 메소드를 쓰면, 바로 class에서 method 호출 가능! class Hi { constructor() { static hello() { return "hello"; } } } Hi.hello(); //ok to go Type VS Interface 두 개의 공통 목표? object의 모양과 타입을 설명해줍니다. Type의 기능 Type (Object) Shape of object (객체가 어떻게 생겼는가?)를 알 수 있습니다. Property Name을 알 수 있습니다. -> nickname, ag..

Pre-Knowledge 객체 지향 프로그래밍(Object Oriented Programming) ⇒ 객체의 입장에서 보는것!!! 사람이 세계를 보고 이해하는 방법을 흉내 낸 프로그래밍 방법론 중 하나 ⇒ 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용하다! “클래스”라고 불리는 데이터 모델의 청사진을 이용해 코드 작성 ⭐ 4가지 주요 개념 1. Encapsulation(캡슐화) : 데이터와 기능을 하나의 단위로 묶는 것 2. Inheritance(상속) : 기본 클래스의 특징을 파생 클래스가 상속받는다. (부모/자식) 3. Abstraction(추상화) : 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념 4. Polymorphism(다형성) : 똑같은 메서드여도 다른 ..

Call Signatures 마우스를 갖다 올려보면 위에 뜨는 저 박스 함수의 인자 type 정의 + return type 정의 Type을 먼저 정의한 뒤 -> 함수/코드를 구현하자 instead of 함수를 구현하면서 동시에 type을 정의하는 것보다 better //type 미리 정의 type Add = (a:number, b:number) => number const add:Add = (a,b) => a+b //instead of const add = (a:number, b:number) => a+b Overloading 함수가 여러 개의 call signatures를 가지고 있을 때 발생 내가 직접 쓸 일은 거의 없지만, 외부 패키지나 라이브러리를 사용할 때 많이 볼 수 있기 때문에 알아두자! t..

TypeScript Javascript with syntax for types a strongly typed programming language that builds on JavaScript, giving you better tool at any scale JS의 타입 안정성 ⬆ 버전! TypeScript & VS Code ⇒ 둘 다 Microsoft에서 개발해서 죽이 잘 맞아 JavaScript VS TypeScript JS ⇒ 개발자들이 멍청한 실수를 해도 이해해주려 하는 유연한 언어 [1,2,3,4]+ false(boolean) = “1,2,3,4false”(string) ⇒ TS는 말도 안되는 호출을 허용하지 않음 문제있는 호출을 유저의 컴퓨터에서 이미 실행하고 나서 에러라고 말해줌 이것이 런타..