01. 리액트 시작하기

01. create-react-app 으로 시작하기

• 환경을 구축해줌.
• 터미널에 npx create-react-app 프로젝트명 입력.

npx create-react-app 프로젝트명

• create-react-app은 서버사이드 렌더링을 지원하지 않음.
• create-react-app 단점 : 빌드시스템 eslint 설정을 거의 변경 할 수 없음.
• 서버사이드 렌더링이 필수, 설정변경 필요한 프로젝트라면 Next.js를 선택.

02. create-react-app 명령어입력

• public 폴더, src폴더 package.json 파일 등이 설치 됨.
• package.json에서 create-react-app version up될때는 "React-scripts"의 version 이 올라갔을때가 대부분.
• browserlist의 0.2%는 지원하는 브라우저 범위를 얘기함. 

03. npm start 로 프로젝트 실행.

04. create-react-app의 4가지 명령어.

1. start : 개발모드로 실행할 때 사용. 여러가지 최적화가 적용이 되지 않은 상태로 사용됨. 배포할때 사용하지 않음.

npm start

로 실행하면 http로 실행됨

HTTPS=true npm start

로 실행하면 https로 실행이 됨.

set HTTPS=true && npm start

윈도우 명령어

 

 2. build : 정적파일 생성, 서버안에 build파일안에 정적파일을 서비스함. 서버사이드 렌더링으로 동작하지 않음.

npx serve -s build

npm run build

크롬 웹스토어에서 React Developer Tools를 받아준다.

 

큰 사이즈의 이미지=img폴더에 있음

작은 사이즈의 이미지=자바스크립트에 내장하는 이유: HTTP요청 횟수를 줄이기 위해, 자바스크립트실행되면

바로 이미지를 보여줄수 있음.

HTTP2.0부터는 요청이 많아도 성능에 영향을 크게 주지 않음. 

 

3. test 

npm test

test.js : 테스트파일 - 테스트통과

spec.js : 테스트파일로 인식함.

폴더명 __test__ 이면 밑에 있는 모든 파일이 테스트파일로 인식됨.

폴더로 관리하기보다는 .test.js로 관리하는것이 편함.

 

4. eject 

react-scripts를 사용하지 않고 모든 설정파일을 추출함.

cra기반으로 직점 개발환경구축할떄 사용 

추출하지않으면 react-scripts버전만 올리면됨.

추출하면 수동으로 설정을 관리해야함. 

꼭 필요한것이 아니라면 관리측면에서 추출하지 않는것이 좋음.

 

polyfill 이란?

padStart

 

Can I use 는 브라우저별로 특정요소 지원여부를 확인 할 수 있음.

지원하지 않는 브라우저에서 사용하고 싶을때 polyfill을 사용함.

polyfill 을 사용하기 위해 core-js를 사용함.

js파일에 import해서 포함시키면됨.

예를 들어서.

import 'core-js/feautres/string/pad-start'; 

이렇게 코드에 import시키면 됨.

cra에는 core-js가 내장되어있음.

 

환경변수

개발, 테스트, 배포환경별로 다른 값을 적용할때 유용함.

환경변수가 많아지면 .env폴더로 관리한다.

예) .env.development

//process.env.{변수이름}
process.env.NODE_ENV
//npm start로 실행하면 development
//npm test로 실행하면 test
//npm run build로 실행하면 production

console.log('process.env.NODE_ENV',process.env.NODE_ENV);
console.log('process.env.REACT_APP_API_URL',process.env.REACT_APP_API_URL);

//REACT_APP_*
//REACT_APP_API_URL=api.myapp.com npm start