react를 시작하기전 사전지식- Node, 웹팩, 바벨, ESLint, Prettier
Node.js
Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임(프로그래밍 언어가 구동되는 환경)
설치
- 운영체제 별로 설치파일을 다운받으면 된다. Nodejs.org 사이트에서 노드 최신 버전을 설치
- 두 가지 버전을 선택하여 설치할 수 있다. 왼쪽 짝수 버전, 오른쪽이 홀수 버전이다. 안정적이고 장기간 지원하는 것이 짝수 버전이고, 불안정할 수 있지만 최신 기능을 지원하는 것이 홀수 버전이다.
- 짝수 버전: 안정적, 신뢰도 높음 (LTS)
- 홀수 버전: 최신 기능
- 버튼을 몇 번 클릭하면 아래 경로에 Node.js 와 NPM이 설치된다.(운영체제에 따라 경로는 다를 수 있다)
- Node.js:
/usr/local/bin/node
- NPM:
/usr/local/bin/npm
npm 의 버전관리- package.json
- 특정 버전 사용 경우
1.2.3
- 특정 버전보다 높거나 낮을 경우는 다음과 같이 명시
>1.2.3
>=1.2.3
<1.2.3
<=1.2.3
- 틸드(~)와 캐럿(^)을 이용해 범위를 명시
- 틸트(~)
- 마이너 버전이 명시되어 있으면 패치버전만 변경한다. 예를 들어 ~1.2.3 표기는 1.2.3 부터 1.3.0 미만 까지를 포함한다. 마이너 버전이 없으면 마이너 버전을 갱신한다. ~0 표기는 0.0.0부터 1.0.0 미만 까지를 포함
- 캐럿(^)
- 정식버전에서 마이너와 패치 버전을 변경한다. 예를 들어 ^1.2.3 표기는 1.2.3부터 2.0.0 미만 까지를 포함한다. 정식버전 미만인 0.x 버전은 패치만 갱신한다. ^0 표기는 0.0.0부터 0.1.0 미만 까지를 포함
~1.2.3
^1.2.3
웹팩
웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)
-
모듈 번들러란?
- 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미
Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임(프로그래밍 언어가 구동되는 환경)
- 짝수 버전: 안정적, 신뢰도 높음 (LTS)
- 홀수 버전: 최신 기능
- Node.js:
/usr/local/bin/node
- NPM:
/usr/local/bin/npm
1.2.3
>1.2.3
>=1.2.3
<1.2.3
<=1.2.3
- 틸트(~)
- 마이너 버전이 명시되어 있으면 패치버전만 변경한다. 예를 들어 ~1.2.3 표기는 1.2.3 부터 1.3.0 미만 까지를 포함한다. 마이너 버전이 없으면 마이너 버전을 갱신한다. ~0 표기는 0.0.0부터 1.0.0 미만 까지를 포함
- 캐럿(^)
- 정식버전에서 마이너와 패치 버전을 변경한다. 예를 들어 ^1.2.3 표기는 1.2.3부터 2.0.0 미만 까지를 포함한다. 정식버전 미만인 0.x 버전은 패치만 갱신한다. ^0 표기는 0.0.0부터 0.1.0 미만 까지를 포함
~1.2.3
^1.2.3
웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)
-
모듈 번들러란?
- 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미
모듈이란?
-
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미
- 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 됩니다.
-
웹팩에서의 모듈
- 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미
- HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하죠. 이 파일 하나하나가 모두 모듈
웹팩이 등장한 이유
- 파일 단위의 자바스크립트 모듈 관리의 필요성
- javascript의 변수의 유효범위는 기본적으로 전역 범위를 가지기 때문에 복잡한 애플리케이션을 개발할 경우, 변수의 중복선언이나 의도치 않은 값 할당으로 문제가 발생함
- 이처럼 파일 단위로 관리하고 싶은 욕구, 자바스크립트 모듈화에 대한 욕구를 이전까지는 AMD, Common.js의 라이브러리들을 이용하여 풀어왔음
- 웹 개발 작업 자동화 도구 (Web Task Manager)
- 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 해야 했습니다.
- HTML, CSS, JS 압축
- 이미지 압축
- CSS 전처리기 변환
- 이러한 일들을 자동화 해주는 도구들이 필요했습니다. 그래서 Grunt와 Gulp 같은 도구들이 등장
- 웹 서비스를 개발하고 웹 서버에 배포할 때 아래와 같은 작업들을 해야 했습니다.
- 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
- 특정 웹 사이트를 접근할 때 5초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게되어 웹 사이트의 로딩 속도를 높이기 위해 많은 노력들을 해옴
- 브라우저에서 서버로 요청하는 파일 숫자를 줄이는 것 - 태스크 매니저를 이용해 파일들을 압축하고 병합하는 작업들을 진행
- 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장
- 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 가지고 있음
- 특정 웹 사이트를 접근할 때 5초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게되어 웹 사이트의 로딩 속도를 높이기 위해 많은 노력들을 해옴
웹팩으로 해결하는 문제들
- 웹팩에서 해결하고자 하는 기존의 문제점 3가지
- 자바스크립트 변수 유효 범위
- ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결
- 브라우저별 HTTP 요청 숫자의 제약
- 웹팩을 이용해 여러 개의 파일을 하나로 합치면 위와 같은 브라우저별 HTTP 요청 숫자 제약을 피할 수 있습니다
- Dynamic Loading & Lazy Loading 미지원
- Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능 했습니다.
- 그러나 이젠 웹팩의 Code Splitting 기능을 이용하여 원하는 모듈을 원하는 타이밍에 로딩할 수 있습니다.
- 자바스크립트 변수 유효 범위
로더와 플러그인
- 로더 - 웹팩은 모든 파일을 모듈로 바라본다
- 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다. 뿐만아니라 CSS 파일을 자바스크립트에서 직접 로딩할수 있도록 해준다.
- 플러그인
- 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용
Babel
브라우져마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때 ( 크로스 브라우징)을 해결해주는 역할
- 바벨(Babel)은 여러 자바스크립트 표준에 맞추어 코드를 자동으로 변환해주는 트랜스파일러로 코드를 직접 바꾸지 않더라도 최신 표준에 맞추어 개발 할 수 있도록 도와준다
크로스 브라우징
- 크로스 브라우징
- Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것
- 크로스 브라우징이 필요한 원인
- 브라우저마다 랜더링 엔진이 다름
- IE를 버전마다 크로스 브라우징 하는 이유
- 최신버전으로 자동 업데이트가 되는 브라우저는 많으나 IE는 해당되지 않는다.
- IE는 사용자가 직접 업데이트를 진행해야하며, 윈도우 버젖ㄴ에 따라 최대 버전이 한정되어있다.
바벨의 동작과정
-
파싱(Pharsing)
- 바벨은 먼저 소스 코드를 가지고 추상적인 형태의 코드로 변환하는 과정을 수행, 이를 바벨에선 파싱(Parsing)이라 표현
- 추상구문트리(AST: Abstract Systax Tree)
- 바벨이 변환한 추상화된 코드의 표현체
- 이 트리는 소스코드의 각 구문과 각 코드간의 관계를 모두 서술
-
변환(Transformation)
- 추상구문트리를 받아와 각 브라우저의 환경에 맞는 결과로 변환하는 작업을 수행하고 새로운 추상구문트리를 만들어냄
- 바벨의 플러그인 중 preset/plugin 에 의해 처리되는 곳
- preset 은 plugin 들을 모아놓은 배열
- 이 플러그인들은 babel-traverse 를 이용해 원본 추상구문트리를 가로질러가는(traverse) 과정 속에서 각 부분들이 어떻게 바뀌고 어떻게 정의되어야하는지를 기록함
-
코드생성(Generation)
- 2단계에서 생성된 새로운 추상구문트리를 바탕으로 실제 브라우저 환경에 맞는 소스코드로 변환하는 과정이 이뤄집니다.
브라우져마다 사용하는 언어가 달라서 프론트엔트 코드는 일관적이지 못할 때 ( 크로스 브라우징)을 해결해주는 역할
- Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것
- 브라우저마다 랜더링 엔진이 다름
- 최신버전으로 자동 업데이트가 되는 브라우저는 많으나 IE는 해당되지 않는다.
- IE는 사용자가 직접 업데이트를 진행해야하며, 윈도우 버젖ㄴ에 따라 최대 버전이 한정되어있다.
파싱(Pharsing)
- 바벨은 먼저 소스 코드를 가지고 추상적인 형태의 코드로 변환하는 과정을 수행, 이를 바벨에선 파싱(Parsing)이라 표현
- 추상구문트리(AST: Abstract Systax Tree)
- 바벨이 변환한 추상화된 코드의 표현체
- 이 트리는 소스코드의 각 구문과 각 코드간의 관계를 모두 서술
변환(Transformation)
- 추상구문트리를 받아와 각 브라우저의 환경에 맞는 결과로 변환하는 작업을 수행하고 새로운 추상구문트리를 만들어냄
- 바벨의 플러그인 중 preset/plugin 에 의해 처리되는 곳
- preset 은 plugin 들을 모아놓은 배열
- 이 플러그인들은 babel-traverse 를 이용해 원본 추상구문트리를 가로질러가는(traverse) 과정 속에서 각 부분들이 어떻게 바뀌고 어떻게 정의되어야하는지를 기록함
코드생성(Generation)
- 2단계에서 생성된 새로운 추상구문트리를 바탕으로 실제 브라우저 환경에 맞는 소스코드로 변환하는 과정이 이뤄집니다.
ESLint와 Prettier
-
ESLint
- 느슨한 형식의 언어인 Javascript에서는 코드 에러가 자주 발생하고, 에러를 찾기 위해서는 코드를 직접 실행해서 확인이 가능하기 때문에 이를 도와주는 것이 Linter
- Linter는 코드를 정적으로 분석하기 때문에, 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해줍니다. 추가적으로 간단한 코드 포맷팅 기능도 있습니다.
- 즉, 논리적인 코드를 알려주는 역할
-
Prettier
-
코드 포맷터
-
ex. 필요없는 공백 제거, 작은 따옴표를 큰 따옴표로 바꾸어 준다던가…
-
즉, 논리적인 코드는 고치지 않는다. 오직 포맷팅만 해준다.
-
eslint-config-prettier
- ESLint와 Prettier을 둘다 사용할 경우 서로 충돌할 수 있다. 이를 방지하기 위해 eslint-config-prettier은 Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.
-
eslint-plugin-prettier
- 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.
Author And Source
이 문제에 관하여(react를 시작하기전 사전지식- Node, 웹팩, 바벨, ESLint, Prettier), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@swhan9404/react를-시작하기전-사전지식-Node-웹팩-바벨-ESLint-Prettier
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
ESLint
- 느슨한 형식의 언어인 Javascript에서는 코드 에러가 자주 발생하고, 에러를 찾기 위해서는 코드를 직접 실행해서 확인이 가능하기 때문에 이를 도와주는 것이 Linter
- Linter는 코드를 정적으로 분석하기 때문에, 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해줍니다. 추가적으로 간단한 코드 포맷팅 기능도 있습니다.
- 즉, 논리적인 코드를 알려주는 역할
Prettier
-
코드 포맷터
-
ex. 필요없는 공백 제거, 작은 따옴표를 큰 따옴표로 바꾸어 준다던가…
-
즉, 논리적인 코드는 고치지 않는다. 오직 포맷팅만 해준다.
eslint-config-prettier
- ESLint와 Prettier을 둘다 사용할 경우 서로 충돌할 수 있다. 이를 방지하기 위해 eslint-config-prettier은 Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.
eslint-plugin-prettier
- 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.
Author And Source
이 문제에 관하여(react를 시작하기전 사전지식- Node, 웹팩, 바벨, ESLint, Prettier), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@swhan9404/react를-시작하기전-사전지식-Node-웹팩-바벨-ESLint-Prettier저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)