22.11.22 : CRA없이 프로젝트 생성하기-1 (왜?)

인프런의 "프론트엔드 개발자를 위한 웹팩 강의"를 좋은 기회로 얻게 되어서 (좋은 강의 감사합니다 캡틴판교님!) 오늘부터 시작을 해보려 한다.  캠프를 시작하고 리액트 프로젝트를 만들어왔는데, 계속 CRA기반의 프로젝트만 만들었다. 그래서 부끄러운 이야기지만 웹팩과 바벨을 따로 설정해주어야 한다는 것도 모르고 있었다. 앞으로 나올 내용들은 캡틴판교님의 강의를 들은 내용과 웹팩 핸드북을 바탕으로 정리한 내용이다. 강의링크

 

---

 

Create-React-App

 

React 개발 환경 설정을 위해서는 대부분 웹팩과 바벨에 대한 설정 이외에도 다양한 개발 환경의 설정이 필요하다.

이런 설정들을 일일이 해 줄 필요 없이 대신 다 해주는 것이 Create-react-app이다. CRA는 리액트에서 자주 쓰이는 도구 및 설정들을 포함한다. 

 

이렇게 좋은 CRA를 왜 안쓰려고 하는가?

 

CRA는 우리가 사용하지 않는 모듈들도 많이 가지고 있어서, 앱 자체가 매우 무거워질 수 있다. 

그리고 프로젝트의 구성을 내가 직접 이해하기가 힘들었다. 웹팩과 바벨이라는 것을 써본적이 있냐는 물음에, 내 프로젝트에서 babel과 webpack을 검색 해 본적이 있다. 내가 깔지도 않은 것들이 이미 깔려있어서 의아했는데, 곧 알아차렸다. CRA때문이겠구나. 

개발과 배포에 필요한 설정을 직접 해보는 과정이 꼭 필요할것 같아서 이제 강의를 따라가면서 정리를 좀 해보려고 한다.

 

 

 

 

웹팩이란?

 

최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images등)을 모두 각각의 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구이다. 

 

모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 

 

모듈 번들링이란?

 

웹 애플리케이션을 구성하는 자원들을 하나로 모아서 병합, 압축 해 주는 동작. 빌드와 번들링, 변환 모두 같은 의미라고 한다.

 

Node.js,  NPM 

 

Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수있는 환경을 의미한다. 

NPM은 명령어로 라이브러리를 설치하고 관리할 수 있는 패키지 매니저이다. 

 

프로젝트의 터미널에 npm init -y  ==>  package.json 파일이 생성

 

지역설치와 전역설치

 

npm i jquery  (지역설치)

npm install gulp -- global (전역설치) 또는 npm install gulp -g (축약버전)

 

전역설치로 라이브러리가 설치되면 터미널에서 해당 라이브러리 이름을 입력했을 때 명령어를 인식한다.

 

지역설치의 옵션 2가지

 

npm install jquery --save-prod

npm install jquery --save-dev

 

위 명령어는 아래와 같이 축약 가능하다.

 

npm i jquery          // package.json의 dependencies에 등록

npm i jquery -D    // package.json의 devDependency에 등록

 

개발용 라이브러리 (devDependencies)

 

jquery와 같이 로직과 직접적인 연관이 있는 라이브러리는 배포용으로 설치해야한다. (dependencies에)

 

npm i jquery

 

이렇게 배포용으로 설치된 라이브러리는 npm run build로 빌드하면 최종 애플리케이션 코드에 포함됨

 

배포용 라이브러리 (dependencies)

 

반대로 설치옵션에 -D를 주었다면 해당 라이브러리는 빌드하고 배포할 때 애플리케이션 코드에서 빠지게 된다. 최종 애플리케이션에 포함되어야 하는 라이브러리는 -D로 설치하면 안된다.

 

 

개발할 때 사용되고 배포시 빠져도 되는 라이브러리의 예

 

webpack: 빌드 도구

eslint: 코드 문법 검사 도구

imagemin: 이미지 압축 도구

 

NPM 커스텀 명령어

 

NPM 패키지 관리 파일인 package.json에 scripts라는 속성을 추가할 수 있다. 

 

// package.json

{
...
"scripts": {
	  "hello": "echo hi"
	}
}

 

그리고 아래 명령어를 실행하면 콘솔에 hi가 출력된다.

 

npm run hello

 

이렇게 커스텀하면 긴 명령어 대신 이 커스텀 명령어로 원하는 동작을 실행 할 수 있다고 한다.

 

활용

 

해당 명령에 실행 뿐만 아니라 다른 커스텀 명령어를 조합할 수 있다.

 

"scripts": {
	"build": "webpack",
    	"deploy": "npm run build -- --mode production"
}

 

그리고 

 

npm run deploy

 

로 실행