리액트 개발환경

React

CRA 없이 React + TypeScript 개발환경 구축하기 (3/3) - ESLint, Prettier 설정

8. ESLint 설정 ESLint란? ECMAScript와 Lint의 합성어로, 코딩 컨벤션과 일치하지 않는 오류, 버그, 스타일을 정적으로 분석하여 디버깅해주는 도구이다. Lint가 궁금해서 검색해보니 보푸라기… 라고 하는데, ‘Linting Tool’으로 쓰이면 위와 같은 의미를 갖는다. 관련 패키지 설치 npm i -D eslint : ESLint 패키지 설치 --init 명령어를 이어 설치하면 ESLint에서 제공하는 기본 세팅을 CLI를 통해 선택할 수 있다. (ex. 코딩 스타일 가이드 - Google / Standart / Airbnb, ECMAScript 버전, 프레임워크 및 타입스크립트 사용 여부 등) npm i -D eslint-plugin-react eslint-plugin-rea..

React

CRA 없이 React + TypeScript 개발환경 구축하기 (2/3) - Babel, Webpack 설정

2개월만에 이어서 작성하는 No CRA 개발환경 구축기 2편 5. Babel 설정 Babel이란? ES6+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 코드로 변환하는 트랜스컴파일러이다. 전세계의 모든 브라우저가 ES6를 지원하는 것은 아니기 때문에 JSX를 일반 자바스크립트 코드로 변환한다. 변환한 소스 코드를 번들링 도구인 Webpack에 전달한다. 관련 패키지 설치 npm i -D babel-loader @babel/core @babel/preset-env babel-loader : Webpack이 자바스크립트 파일을 처리할 때 Babel을 사용하도록 하기 위함 @babel/core : Babel의 핵심 기능을 제공 @babel/preset-env : 자바스크립트 코드를 변환할 때 필요..

minkyoung BAE
'리액트 개발환경' 태그의 글 목록