안녕하세요!
오늘부터 React관련 포스팅을 해보겠습니다.
이 번 포스팅의 내용인 create-react-app, 이 하 "CRA" 에 대해 알아보겠습니다.
개발 툴은 Visual Studio Code를 사용했습니다.
React는 UI기능만 제공합니다. 따라서 전역 상태관리, 라우팅, 빌드시스템을 개발자가 직접 구축해야합니다. angular같은 풀 스택 프레임워크와는 대조됩니다. 그래서 React를 프레임워크라고도 하고 UI라이브러리라고도 합니다.
이렇게 빌드시스템이나 라우팅등 직접 구축하는 것은 진입장벽을 높게 만들기 때문에 React측에서 진입장벽을 낮출 수 있도록 CRA를 만들었습니다.
1. 설치
nodejs를 설치하면 npm이라는 패키지매니저도 함께 설치됩니다.
이 npm을 이용하면 명령어 한줄로 다른 외부 라이브러리들을 설치할 수 있습니다.
정상적으로 버전정보를 확인했다면 CRA를 설치합니다.
We suggest that you begin by typing:
cd "폴더이름" // 본인이 설정한 폴더이름
npm start
Happy hacking!
이라는 메세지가 cmd창에 출력되면 정상설치 된 것입니다.
CRA는 무겁기 때문에 설치시간이 조금 걸립니다. 와이파이환경에서 간혹 설치 중 에러가 발생할 수 있습니다.
npx는 외부 패키지에 포함된 실행 파일을 실행할 때 사용됩니다.
오래된 레거시 버전이 아니라면 사용 가능합니다.
원래대로라면
npm install 명령어로 설치한 후에 실행할 수 있지만
npx create-react-app를 사용하면 패키지가 설치안됐을 경우, 패키지를 설치한 후에 프로젝트를 초기화 합니다.
저는 폴더이름을 cra라고 명명 했습니다.
폴더구조▼
node_modules는 외부패키지가 있는 폴더입니다. React만 설치한게 아니라 CRA를 설치했기 때문에 React뿐 아니라 빌드시스템 등에 필요한 각종 외부패키지들이 함께 설치가 됐습니다.
2.실행
cmd에서 앱을 실행해보겠습니다
npm start 명령어를 입력하면 개발모드로 앱을 실행합니다.
HMR을 지원하기 때문에 코드를 수정 후 저장하면, 자동으로 반영됩니다.
3. 빌드
npm run build 명령어를 입력하면 배포환경에서 사용할 파일을 생성합니다.
정적파일들을 압축하게 되는데, 읽기 힘든 형식으로 변환된걸 알 수 있습니다.
build폴더 내에 배포전용 파일이 생성됩니다.
빌드된 파일은 파일명에 해시값들이 포함되어 있기 때문에 빌드 시점에 따라 고유한 값을 가집니다.
이용자가 웹에 접속했었고, 웹이 변동사항이 없다면 브라우저에 캐싱된 파일을 이용하기 때문에 속도면에서 이점을 볼 수 있습니다.
또, js파일 내에서 import로 가져온 이미지,폰트등의 리소스파일은 빌드시에 함께 압축되고, media폴더에 저장됩니다. 이미지 파일의 크기가 10KB보다 작다면 별도 파일이 생성되지 않고 data url형식으로 자바스크립트 파일에 포함됩니다.
이제 CRA를 이용해 React를 사용할 준비가 됐습니다!
감사합니다.
잘 읽었습니다