package.json

프로젝트 구조에서 가장 중요한 부분은 package.json 이다. 이 화일안에 모든 프로젝트의 정보가 있다.

의존성 부분인 dependencies를 보면 (테스트 라이브러리는 제외하고) 3가지 라이브러리가 포함되어있다. 첫번째는 react core 라이브러리인 react. 두번째는 web 개발시에 렌더링을 해주는 react-dom. 그리고 세번재는 create-react-app 라이브러리인 react-scripts 이다. 

그리고, 개발의존성 라이브러리인 devDependencies는 보이지 않아서 webpack으로 구성된것 처럼 보이지 않는다. 그러나 www.npmjs.com 에 가서 react-scripts 라이브러리의 의존성을 찾아보면 webpack 을 비롯한 많은 최신기술들로 이루어져있다는것을 알 수 있을것이다.

webpack 기술이 사실 그렇게 쉽지 않다보니, 최근의 트렌드는 webpack같은 환경 설정은 모르고 구현만 하면 되도록 좀 더 쉽게 커스터마이징 되고 있는게 추세이다.

eslintConfig는 eslint를 설정하는 부분이고 react-app 에서 설정 eslint 환경 설정을 상속받아서 설정하겠다는 의미이다.

browserslist는 브라우저 호환성을 어디까지 지원해주느냐이다.  “>0.2%” 는 브라우저 점유율 0.2% 이상을 지원하겠다는 의미이다. “not op_mini” 는 오페라 미니 브라우저는 지원해주지 않겠다는 의미이다. 브라우저 호환성은 javascript, css 에서 모두 공통으로 사용되고 있고, 이 환경을 바라보는 라이브러리는 babel, eslint, postcss 등에서 이 환경 설정을 바라보고 있다. 좀 더 자세한 부분은 webpack 에서 공부해야 한다.

entry point

webpack에서 entry point가 src 폴더 아래 index.js 였다는것을 webpack을 공부했다면 알것이다. 여기서도 entry point는 바뀌지 않았다.

/src/index.js 구조를 살펴보자.

root라는 dom node를 찾아서 App 컴포넌트라는 react element를 렌더링 하고 있다.

그리고, 여기서 index.css를 포함하고 있는데 글로벌하게 적용될 css가 있다면 여기에 정의하면 된다.

실행하기

package.json 에 있는 start 스크립트로 실행한다.

react-script 의 하위 의존성의 하나인 webpack-dev-server 가 구동되면서 컴파일되고 브라우저까지 자동으로 리프레쉬되는 Hot Replace Module (HMR) 상태로 구동 된다. 

webpack-dev-server의 자세한 사항도 webpack을 공부하면 알 수 있다.

빌드하기

앞에서 npm start로 실행해봤는데 빌드를 해보자.

webpack 기본 빌드 폴더는 dist 인데 실제 빌드를 해보면 build 폴더에 컴파일된 파일들이 생성되는 것을 볼 수 있다.

만일, 개발이 다 끝난다면 이 빌드된 결과물이 nginx 같은 static web server 에 올려서 서비스하게 된다.