Create-react-app은 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공합니다.
이것을 이용하면 기존 기능을 개선하거나 새로운 기능을 추가했을때 패키지 버전만 올리면 됩니다.
앞에서 다룬 바벨과 웹팩도 create-react-app에 포함되어 있습니다.
또 다른 장점은 어떤 문제를 해결하기 위한 선택지가 여러 개일 때 create-react-app에서 가장 합리적인 선택을 ㅐ 준다는 점입니다.
현재 자바스크립트 생태계는 춘추 전국 시대라고 볼수도 있습니다. 그래서 한번 써보는 것을 배워보겠습니다.
Create-react-app 사용해보기
다음 명령어를 입력하면 create-react-app을 이용한 개발 환경이 설치됩니다.
npx create-react-app cra-test그러기위해 새로운 폴더를 하나더 만들어 보겠습니다.
새로 폴더를 만들겠습니다.
폴더를 새로 만들었으면 npm init을 해줌으로 시작해주시면되겠습니다.
저는 계속 vs터미널을 이용하고있습니다.
cd를 이용해서 해당 폴더로 위치해줍니다.
npm init을 통해 생성해줍니다.
그리고 npx create-react-app cra-test을 설 치해줍니다. 조금오래 걸릴수두있습니다!
최종적으로 저런 메시지가 나타났으면
설치가 완료된 화면입니다.
npx create-react-app 이 안먹힐때!!
npm install -g create-react-app
create-react-app cra-test 이렇게 해보심되겠습니다.
이제 웹페이지를 띄어 보도록하겠습니다.
시작하면 위와같은 화면이 나타납니다.
이 상태로 App.js 파일에서 Learn React부분을 다른 텍스트로 수정해보겠습니다.
수정하는대로 자동으로 업데이트 되는것을 확인할 수 있습니다.
이번에는 App.css 파일에서 .App-link의 색상을 red로 변경해보겠습니다.
실습을 위한 파일들입니다.
간단하게 빨간색 으로 바꾸어주었습니다.
이는 HRM 이라는 기능 덕분인데 npm start로 npm start는 개발 모드에서 동작하므로 배포할때 사용하면 안됩니다.
그리고 폴더구조에 대해 설명드리겠습니다.
index.html, index.js 파일은 빌드 시 예약된 파일 이름이므로 지우면 안됩니다.
index.html, index.js, package.json 파일을 제외한 나머지 파일은 데모 앱을 위한 파일이기 때문에
마음대로 수정하거나 삭제해도 괜찮습니다.
index.js로 부터 연결된 모든 JS파일과CSS파일은 src폴더 밑에 있어야합니다.
src폴더 바깐에 있는 파일을 import 키워드를 이용해서 가져오려고 하면 실패한다.
전에 리액트할때 잦은 실수가 이것이였다... 파일위치를 src 밖으로 넣었던것이었다...
index.html 에서 참조하는 파일은 public 폴더 밑에 있어야한다. public 폴더 밑에 있는 자바스크립트 파일이나 css파일을 link나 script 태그를 이용해서 index.html 에 포함시킬 수 있습니다.
하지만 특별한 이유가 없다면 index.html 에 직접 연결하는 것보다는 src 폴더 밑에서 import 키워드를 사용해서 포함시키는게 좋습니다.
그래야 자바스크립트 파일이나 css 파일의 경우 빌드 시 자동으로 압축 된다.
이미지 파일이나 폰트파일도 마찬가지로 src 폴더 밑에 import 키워드를 사용해서 포함시키는게 좋습니다.
웹팩에서 해시값을 이용해서 url을 생성해 주기 때문에 파일의 내용이 변경되지 않으면 브라우저 캐싱 효과를 볼수 있습니다.
파일을 참조하는 경우에도 index.html의 내용을 직접 수정해도 괜찮다. 대표적으로 title 태그에서 제목을 직접 입력하는 경우를 예로 들수 있습니다.
그런데 제목을 페이지별로 다르게 줘야한다면 문제가 될 수 있습니다...
만약 사내에서만 쓰는 웹사이트라면 react-helmet 과 같은 패키지를 사용하면 된다. 반대로 일반 사용자를 대상으로 하는 웹사이트라서 검색 엔진 최적화를 해야 한다면 문제는 복잡해진다.
검색 엔진 최적화가 중요하다면!!!
create-react-app 보다는 서버사이드 랜더링에 특화된 next.js 를 사용하는것도 추천드립니다.
seviceWorker.js파일에는 PWA(progressive web app)와 관련된 코드가 들어있습니다.
PWA는 오프라인에서도 잘 동작하는 웹 애플리케이션을 만들기 위한 기술입니다.
create-react-app 으로 프로젝트를 생성하면 PWA기능은 기본적으로 꺼져있는 상태입니다.
PWA기능을 원한다면 index.js파일에 serviceWorker.reagister(); 코드를 넣어주면 됩니다.
주요 명령어
자주 사용하는 명령어 이므로 하나씩 알아보겠습니다.
| 개발모드 시작하기 npm start |
개발 모드로 프로그램을 실해아는 명령어입니다. 개발 모드로 실행하면 HMR이 동작하기때문에 코드를 수정하면 화면에 즉시 반영됩니다. 개발 모드에서는 코드에 에러가 있을 때는 브라우저에 에러 메시지가 출력됩니다. 맥 : HTTPS = true npm start 윈도우 : set HTTPS=true && npm start 이 명령어를 실행하면 자체 서명된 인증서와 함께 https사이트로 접속됩니다. |
| 빌드하기 npm run build |
배포환경에서 사용할 파일을 만들어줍니다. 빌드 후 생성된 자바스크립트 파일과 css파일을 열어보면 압축이 되어있습니다. npm serve -s build serve 패키지는 노드환경에서 동작하는 웹 서버 애플리케이션입니다. |
| 테스트 코드 실행 npm test |
테스크코드가 실행된다. 프로젝트를 생성하면 App.test.js 파일이 생성된다. create-react-app은 다음조건을 만족하면 테스트파일로 인식한다. 1. _ _tests_ _폴더 밑에 있는 모든 JS파일 2. 파일이름이 .test.js로 끝나는 파일 3. 파일이름이 .spec.js 로 끝나는 파일 |
| 설정파일 추출하기 npm run eject |
숨겨져있던 create-react-app의 내부 설정 파일이 밖으로 노출된다. 바벨이나 웹팩의 설정을 변경할 수 있다. 단점은 create-react-app 에서 개선하거나 추가된 기능이 단순히 패키지 버전을 올리는 식으로 적용되지 않는다. |
자바스크립트 지원범위
ES6의 모든기능을 지원한다.
ES6이후에 추가된거나 제안된 기능중 지원하는 기능은 다음과 같습니다.
- 지수 연산자
- async await 함수
- 나머지 연산자, 전개 연산자
- 동적 임포트
- 클래스 필드
- JSX문법
- 타입스크립트, 플로 타입 시스템
현재 타입스크립트와 플로 타입 시스템을 지원하고 있습니다.
지금 기본설정으로는 아무런 폴리필을 이용할수없습니다. 포함되어 있지 않기떄문입니다.
폴리필이 추가된 객체나 함수를 사용하고 싶다면 직접 추가해 보도록 해보겠습니다
npm install core-js
설치해보겠습니다.
그럼 폴리필이
패키지 제이슨으로 설치가 된것을 볼수있습니다. 그리고 한번 예제를 작성해서 알아보겠습니다.
index.js에 코드를 수정해줍니다.
import 'core-js/features/string/pad-start';
index.js 파일에서 한번만 가져오면 모든곳에서 자유롭게 쓸수있습니다.
그럼 한번 아무개 파일만들어보고 사용해보겠습니다.
위처럼 아무개 코드를 만들고 '123'.padStart(5,0)를 입력해 보았습니다. 컴파일이 돌고도 오류가 생성되지 않았습니다.
바벨에서도 @babel/polyfill 혹은 @babel/preset-env 프리셋을 이용하면 폴리필을 추가할 수있습니다.
폴리필??
새로운 자바스크립트 표준이 나와도 대다수 사용자의 브라우저에서 지원하지 않으면 사용할 수 없습니다..
언어 표준에는 새로운 문법도 추가되고 새로운 객체나 함수도 추가됩니다..
새로운 문법은 대두분의 브라우저에서 지원하지 않더라도 바벨을 이용하면 어느정도 사용이 가능합니다.
바벨을 사용하면 빌드 시점에 코드가 변환됩니다.
새로운 객체나 함수는 성격이 조금 다릅니다.
물론 새로운 객체나 함수로 작성한 코드도 빌드 시점에 변환할 수 있습니다.
하지만 이들은 실행 시점에 주입할 수 있다는 장점이 있습니다.
따라서 실행 시점에 주입하고자 하는 객체나 함수가 현재 환경에 존재하는지 검사해서 존재하지 않을 경우에만 주입하는 좋습니다.
이렇게 기능이 존재하는지 검사해서 그 기능이 없을 때만 주입하는 것을 폴리필이라고 합니다.
코드 분할하기
코드분할을 이용하면 사용자에게 필요한 양의 코드만 내려 줄 수있습니다.
코드 분할을 사용하지 않으면 전체 코드를 한 번에 내려주기 때문에 첫 페이지가 뜨는 시간이 오래 걸리게 됩니다.
코드를 분할하는 방법은 동적 임포트를 하는 것입니다.
새로 todo.js를 생성해서 보겠습니다.
import React from 'react';
export function Todo({title}) {
return <div>{title}</div>;
}
그리고 todoList.js를 생성해서 todo 컴포넌트를 이용하는 todoList 컴포넌트 코드를 만들어 보겠습니다.
import React, { useState } from 'react';
export default function TodoList() {
const [todos, setTodos] = useState([]);
const onClick = () => {
import('./Todo.js').then(({ Todo }) => {
const position = todos.length + 1;
const newTodo = <Todo key={position} title={`할 일 ${position}`} />;
setTodos([...todos, newTodo]);
});
};
return (
<div>
<button onClick={onClick}>할 일 추가</button>
{todos}
</div>
);
}1. 할일 목록을 관리할 상탯값을 정의했습니다.
2. (할일 추가 버튼)을 클릭하면 호출되는 이벤트 처리함수도 추가했습니다.
3. onClick 함수가 호출되면 비동기로 todo모듈을 가지고 옵니다 동적 임포토느느 프로미스를 반환하기 때문에 then메서드를 이용해서 이후 동작을 정의할 수 있습니다.
4. 비동기로 가져온 todo컴포넌트를 이용해서 새로운 할일을 만들게 됩니다.
5. 상탯값에 저장된 할 일 목록을 모두 출력하게 됩니다.
이제 app.js 파일에서 todoList컴포넌트를 사용해 보도록 해보겠습니다.
import logo from './logo.svg';
import './App.css';
import smallImage from './small.jpeg';
import bigImage from './big.jpeg';
import TodoList from './TodoList';
function App() {
return (
<div className="App">
<img src={bigImage} alt="big" />
<img src={smallImage} alt="small" />
<TodoList />
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;임포트를해주고 <TodoList />호출했습니다.
그리고 실행을 해서 확인해 보도록 해보겠습니다.
todo.js 파일이 비동기로 전송되는지 확인하기 위해 브라우저의 개발자 모드를 켜고 네트워크 탭을 열어보고
버튼을 눌러봅시다.
화면에는 할일 목록이 하나 추가됩니다.
이후 버튼을 계속 파일을 가져오는것이 아닌 할일 목록이 계속해서 늘어날뿐입니다.
빌드 명령어를 실행해서 생성되는 파일을 확인해 보겠습니다.
빌드를 시작했을때입니다.
해당 폴더 밑에 숫자.해시값.chunc.js 파일에는 todo.js 파일의 내용이 들어가 있습니다.
배포 환경에서 브라우저 캐싱 효과를 보기위해 파일이름에 해시값이 추가된것입니다.
Todo.js 파일은 별도의 JS파일로 분리되었고, 필요한 경우에만 내려받도록 구현되었다.
단일 페이지 애플리케이션을 만들기 위해 react-router-dom 패키지를 이용하는 경우에는
react-router-dom에서 지원하는 기능을 이용해서 페이지 단위로 코드 분할을 적용할 수 있습니다.
환경변수 사용하기
create-react-app 에서는 빌드 시점에 환경 변수를 코드로 전달 할 수 있다.
환경변수는 개발, 테스트, 배포, 환경별로 다른 값을 적용할때 유용하다.
NODE_ENV 환경변수 이용하기
create-react-app 에서는 NODE_ENV 환경변수를 기본으로 제공한다.
환경변수의 값은 다음과 같이 결정된다.
- npm start 로 실행하면 development
- npm test로 실행하면 test
- npm run build로 실행하면 production
명령어로 입력되는 환경변수를 확인하기 위해 App.js 파일에 다음코드를 입력해서 확인해 봅시다!
console.log(`NODE_ENV = ${process.env.NODE_ENV}`);NODE_ENV 환경 변수외에 다른 환경 변수는 REACT_APP_접두사를 붙여야합니다.
따라서 코드에서는 process.env.REACT_APP_ 형태로 접근할 수 있습니다.
환경변수는 셀에서 입력하거나 .env 파일을 이용해 입력할 수 있습니다.
다음은 Shell 에서 입력하는 방법입니다.
| 맥 | REACT_APP_URL=api.myapp.com npm start |
| 윈도우 | set "REACT_APP_API_URL=api.myapp.com" && npm start |
환경 변수가 많아지면 .env 파일을 이용하는 것이 좋습니다. cra-test 폴더 밑에 .env.development, .env.production
세 파일을 만들어서 다음내용들을 입력해줍니다.
3개를 만들었습니다.
그리고 내용들을 넣어주겠습니다.
//.env.development
REACT_APP_DATA_API=dev-api.myapp.com
REACT_APP_LOGIN_API=dev-auth.myapp.com
//.env.production
REACT_APP_DATA_API=api.myapp.com
REACT_APP_LOGIN_API=auth.myapp.com
//.env.test
REACT_APP_DATA_API=test-api.myapp.com
REACT_APP_LOGIN_API=test-auth.myapp.com이제 환경변수가 잘들어가는 지 확인하기 위해 App.js 파일에 콘솔을 더 추가해보겠습니다.
console.log(`REACT_APP_DATA_API = ${process.env.REACT_APP_DATA_API}`);
console.log(`REACT_APP_LOGIN_API = ${process.env.REACT_APP_LOGIN_API}`);그리고 npm start를 해보면 .evn.development 파일의 내용이 출력되는 것을 확인했습니다.
만약 npm버전이 로컬 머신의 npm_version 환경 변수에 저장되어있다면 다음과 같이 사용할수도있습니다.
REACT_APP_NODE_VERSION=$npm_version
이외에도 세가지 파일 외에도 다양한 종류의 환경변수 파일을 만들수 있습니다.
js 파일 외에도 index.html 에서 다음과 같이 환경변수를 사용할 수 있습니다.
<title>REACT_APP_NODE_VERSION</title>
'리액트 공부' 카테고리의 다른 글
| CSS 작성 방법 "결정"하기 (0) | 2022.01.22 |
|---|---|
| AUTOPREFIXER (0) | 2022.01.21 |
| 웹팩의 기본 개념 이해하기 (0) | 2022.01.19 |
| 바벨 사용해 보기 (0) | 2022.01.19 |
| 리액트 개발 환경 직접 구축하기 (0) | 2022.01.19 |
댓글