티스토리 뷰
프론트엔드 시 꼭 알아야할 개념들을 차근히 정리해보자.
ESLint란 ?
ESLint의 개념
ESLint란 ES 와 Lint를 합친것이다
ES란 EcmaScript로서, ECMA라는 기구에서 만든 Script. 즉 표준 자바스크립트를 의미
Lint란 에러가있는곳에 표시를 달아둔것을 의미한다.
(Lint 의 사전적의미는 보풀인데 뭔가 보풀 ~ 에러 비슷한 부정적의미로 사용하지않나싶다)
즉 ESLint는 자바스크립트 문법에 에러를 표시해주는 도구
EsLint를 통해서 에러만을 잡아줄수도 있고, 코딩스타일 전반적으로 잡아 줄 수 도 있다.
그렇다면 prettier란 무엇인가?
prettier는 정해진 규칙대로 코드를 이쁘게 할 수 있는 도구,
들여쓰기나 따옴표 등
사용법
ESLint를 설치해야 사용할 수 있다.
npm install -D eslint
ESLint 초기화 명령어
.\node_modules\.bin\eslint --init
모든 파일의 에러를 보고싶다면
.\node_modules\.bin\eslint [파일명|디렉토리]모든 파일을 fix하고싶으면
.\node_modules\.bin\eslint ** --fix
확장자 .js파일만 fix하고싶다면
.\node_modules\.bin\eslint **/*.js --fixpackage.json 파일의 역할은 무엇일까?
우선
package.json에는 프로젝트와 관련된 메타데이터가 담긴다.
npm이 패키지를 주고받는 저장소인데, package.json은 주고받는 패키지에대한 상세설명서 라고 비유할 수 있다.
패키지에 대한 이름, 정보, 버전 등이 담긴 데이터가 바로 package.json
이 정보는 npm 뿐 아니라 패키지의 최종 사용자에게 아주 중요한 정보이다.
package.js은 보통 node.js 프로젝트의 루트. 디렉토리에 위치하고있다. npm은 이를 통해 프로젝트를 식별하고 프로젝트의 종속사항들을 처리한다. (npm i를 해주면 프로젝트의 종속사항들을 모두 다운받아주는것이다. => dependency)
dependencies와 devDependencies의 차이?
- "dependencies": 프로덕션 환경에서 응용 프로그램에 필요한 패키지.
- "devDependencies": 로컬 개발 및 테스트에만 필요한 패키지.
개발 환경을 설정할때 webpack, babel을 기초 환경 설정으로 잡고 작업해야한다.
그렇다면 Webpack과 Barbel은 무엇일까?
Barbel
Barbel 이란 최신ES6 문법을 => ES5문법으로 변환시켜주는것
최신버전을 사용하지 않는 인터넷익스플로우 같은 경우가 있기때문에 구버전인 ES5로 바꿔줘야한다.
Webpack
웹팩이란 모듈번들링을 의미한다.
html에 들어가는 자바스크립트파일을 => 하나의! 자바스크립트 파일로 만들어주는것
자바스크립트 파일 자바스크립트 파일 자바스크립트파일 겁나많음
얘네를 묶어서
------------------------> 모듈번들링 해줌
------------------------------------------> 하나로 뿅!
그래서 why. 하나로 묶어주는가
1. 하나로 묶으면 성능이 최적화된다.
2. 관리가쉽다.!!! 이유 : 오늘날 많이 쓰는 SPA (vue, react, angular)에서는 하나의 html파일에 여러개의 자바스크립트파일을 포함중이다. 연관되어있는 종속성파일들을 하나로 묶으면 관리하기가 쉽다.
3. 여러개의 모듈읽으면 시간이 오래걸리지만 하나로묶은걸 읽으면? 더 빠르다!
정리해보자면
ESLint 는 자바스크립트 문법의 에러를 잡아주는 도구.
Prettier는 정해진 규칙대로 예쁘게 만들어주는 도구. 들여쓰기나 뛰어쓰기 등등을 알아서 교정해준다.
package.json은 패키지에대한 상세설명서를 의미한다. 예를들어 패키지의 이름, 버전, 정보 등등을 담고있다. dependency같은경우는 프로덕션단계에서 응용프로그램이 필요한 패키지를 의미하는반면 dev가 붙으면 개발환경에서 필요한 패키지(예를 들면 노드몬같은것!)를 의미한다.
Barbel이란 ES6문법을 ES5문법으로 바꿔주는 역할을 한다. 신문법을 구문법으로. 왜냐면? 익스플로어 같은경우 ES6지원을 안하기도한다.
Webpack같은경우는 쉽게말해 모듈변들링이다. 최근에는 하나의 html에 여러가지 자바스크립트파일이 있는데 이것을 하나의 파일로 묶어주면?
관리하기가 편하고, 모듈을 읽는시간도 단축되며, 성능이 최적화된다!