Frontend/Typescript 4

typescript 설치부터 사용법 정리

타입스크립트는 변수랑 함수의매개변수랑 리턴값에 타입이 붙은 것이다. 설치 npm init npm i typescript npm i -g typescript (명령어로 설치/+ 전역설치)] = npx tsc lecture.ts -w 프로젝트에 설치한 버젼이랑 같이 설치가되서 npx로 해야한다. tsc 엔터 (타입스크립트 컴파일 하는명령어) tsc lecture (해당하는 폴더에) tsc를 통해서 ts를 컴파일해서 js로 변경해서 html에는 항상 js를 연결. [자동으로 컴파일] tsc lecture.ts -w HTMLDivElement : 타입스크립트에서 만들어 놓음 Package-lock : lock파일은 github에 같이 올려야함. 정확한 버젼이기때문에 똑같은 버젼이 깔림. Package.js : ..

Frontend/Typescript 2021.05.24

react typescript webpack 기본 설치 및 세팅하기

순서대로 실행하기 npm init npm i typescript npm i react react-dom npm i webpack webpack-cli -D npm i awesome-typescript-loader -D npm i @types/react @types/react-dom 여기까지 설치 후 script 실행 부분 변경 "scripts": { "dev": "webpack" }, { "name": "react-typescript-webpack-init", "version": "1.0.0", "description": "react typescript webpack init", "main": "index.js", "scripts": { "dev": "webpack" }, "repository": { "..

Frontend/Typescript 2021.05.11

번들링 속도 개선하기(Feat. React, Typescript, Webpack)

www.npmjs.com/package/speed-measure-webpack-plugin speed-measure-webpack-plugin Measure + analyse the speed of your webpack loaders and plugins www.npmjs.com 일단, 체크 speed-measure-webpack-plugin 1. loader 줄이기 2. transpileOnly, experimentalWatchApi - ts-loader는 기본 옵션이 TS를 JS로 변환하는 transpile 작업과 type check 작업을 같은 스레드에서 동시에 실행. - type check는 개발자에게 편의 제공을 위한 기능이지 type이 브라우저에게 넘어갈 결과물에 까지는 영향을 주지 않기 때..

Frontend/Typescript 2021.03.08