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 : 자바스크립트 코드를 변환할 때 필요..
10월 중순부터 SSAFY에서의 마지막 프로젝트를 진행하고 있다. 지금껏 두 개의 프로젝트는 CRA를 통해 빠르고 간단하게 개발 환경을 구축하였지만, Webpack과 Babel, ESLint 세팅을 하나하나 들여다보지 못했다. 올해의 마지막 프로젝트는 기존에 주어진 시간보다 1주가량 단축되었지만, 이번엔 초기 설정을 직접 하면서 앱의 내부 작동 방식을 이해해보고자 한다. 1. npm(*Node.js 패키지 관리자)으로 프로젝트 시작 npm init -y : npm init만 작성하면 프롬프트에 질문지가 띄워지지만, -y 플래그는 프로젝트명, 버전, 설명, 의존성을 기본값으로 설정하여 ‘package.json’ 파일을 자동으로 생성한다. (init은 “initialize”의 약어로, 초기 설정을 의미한다)..
TODO Highlight TODO Highlight은 VSCode의 Extension으로, 주석에 특정 키워드를 작성하면 위 사진과 같이 하이라이트되어 표기된다. ESLint 설정에서 해당 키워드를 감지했을 때 미해결된 경고를 띄우게 설정하여 같이 사용하기도 한다. 기본으로 TODO와 FIXME 두 가지를 제공하는데, BUG나 OPTIMIZE 등 사용자가 커스텀하여 키워드와 색상을 추가로 지정할 수 있다. 키워드 추가하기 VSCode의 settings.json에 다음과 같은 코드와 키워드를 작성한다. // settings.json "todohighlight.keywords": [ "HACK", "NOTE", "BUG", "INFO", "OPTIMIZE", "REVIEW" ], 색상 추가하기 색상을 변경..
