ts 2

TS + React + webpack 기반의 개발 환경 구성(feat. loader, HMR)

지난 webpack 핵심 컨셉 포스트에 이어서 프로젝트에 사용할 webpack 설정 파일을 작성한 과정에 대해 담아 보려 합니다. 목차는 다음과 같습니다. webpack 설정 babel-loader 적용 ts-loader 적용 react 설정 HMR 적용 위 키워드 외 eslint, prettier, jest 등 기타 설정에 대한 내용은 추가로 포스팅하겠습니다. React + TS 환경을 구성하는 각 과정을 패키지별로 나누어 설명하기에는 패키지 간 의존이 다소 깊습니다. 개연성이 다소 떨어질 수 있어요. 꼬리의 꼬리를 무는 구조이다 보니 전체 설정이 끝나기 전까지 설정에 대한 피드백을 받기 어렵습니다. 차근히 따라 해 보는 용도로 봐주시면 감사하겠습니다 (모든 설정이 끝나고 로컬에서 띄워지는 화면을 보면..

개발 환경 2023.07.25

TS - TypeScript란 ?

1. TypeScript란? 동적 타입 언어인 JavaScript의 단점을 보완하기 위해 JavaScript 기반으로 만들어진 정적 타입 언어이다! (자바스크립트의 슈퍼셋) 1-1. JavaScript의 단점 자바스크립트는 런타임에서 타입이 결정되는 동적 타입 언어이다. 개발자는 값의 종류, 즉 타입을 선언하지 않아도 되고 컴파일 과정이 없기 때문에 이런 부분이 장점이 되기도 한다. 하지만 이런 특징 때문에 개발자가 예상치 못한 에러가 발생하면 런타임에서야 오류를 발견할 수 있기 때문에 최악의 경우, 이미 프로그램이 멈춘 뒤일 것이다. 프로그램 사용자는 에러를 마주치고 이미 떠났다. 타입 안정성이 보장되지 않기 때문에 (프로그램에서 타입이 잘못 전달되어 발생되는 에러를 잡기 어려움) 프로젝트가 커질수록 ..

Frontend/TS 2022.07.14