실전리액트 프로그래밍 책을 읽고 정리한 내용입니다.
1장 02번째 내용입니다.
ESM ==> ES6모듈시스템
내보내기 가져오기 코드
내보내기
export default function fun1()
export function func2 () {}
export const variable = 123;
가져오기
import myFunc1(지정가능 이름) , {func2,variable} from ‘./주소’;
import {func2 as myFunc1} from ‘./주소’;
내보내기 할때 exprot를 사용한다 default를 한번만 사용할수 있으며 사용하면 괄호 없이 가져올수 있고 이름은 원하는대로 정할수 있다. 아니면 func2 as 처럼as를 사용하여 이름을 변경가능하다
default를사용하지 않았다면 괄호를 사용해 가져와야 한다.
Create react app 사용하는 이유
웹 애플리 케이션 제작
바벨,웹팩등 그리고 테스트 시스템 HMR , ES6문법, CSS후처리 등 개발 환경을 구축해준다
유지보수할때 패키지 버전만 올리면 되서 새로운 기능을 추가하기 좋다
HMR이란 npm start실행시 Create react app이 로컬 서버를 띄어주는 것이다
Index.js특징
Index.js로부터 연결된 모든 자바스크립트 , css파일은 src폴더 밑에 있어야 한다.
바깥에 있는 파일은 import가 안된다
index.html 특징
Index.html에서참조하는 파일은 public 폴더밑에 있어야 한다.
자바스크립트 파일이나 css 파일을 link나 script를사용하여 포함시킬수 있다
하지만 src폴더 밑에서 import를 사용하는게 빌드시 자동으로 압축되기 때문에 더 좋은 방법이다.
이미지 파일과 폰트 파일도 파일 내용이 변경되지 않을 경우 브라우저 캐싱효과를 볼수 있기 때문에 src 폴더밑에서 import를 사용하는 것이 좋다.
검색 엔진 최적화가 중요하다면 creat react app 보다 next.js를사용하는게 더 좋다.
서버사이드 렌더링에 특화 되어 있다. ServiceWorker.js파일에는 PWA 관련 코드가 있는데
기능을 원한다면 index.js파일에 serviceWorker.register() 코드를넣을것
PWA = 오프라인에서도 잘 동작하는 웹 어플 만들기 위한 기술
주요 명령어 알아보기
npm start - 개발 모드로 프로그램을 실행하는 명령어 . HMR이 동작되어 화면에 즉시 랜더링 된다
Https : API호출을 위해 https로실행해야 할 경우도 있는데 아래 옵션을 추가하면 가능하다
맥: HTTPS=true npm start
윈도우: set HTTPS=true && npm start
자체 서명된 인증서와 함께 https사이트로 접속한다. 경고문구 무시 진행
npm run build - 배포 환경에서 사용할 파일을 만들어 준다 .
빌드 후 생성된 정적 파일(보기힘들게 압축된 파일)을 웹서버를 통해서 사용자가 내려받을수 있게 한다.
명령어 npx serve -s build
build/static 폴더밑에 생성된 파일 이름에 해시값이 포함되어 있다
재방문의 경우 빠르게 페이지가 렌더링 된다
자바 스크립트 파일에서 import를 해서 가져온 css파일은 다음 경로로 저장된다
build/static/css/main.{파일명}.chunk.css
폰트,이미지 등의 리소스 파일은 build/static/media 폴더에 저장된다.
이미지 파일이 10킬로바이트 보다 크면 media 폴더에 .jpeg 파일로 생성되지만
그보다 작으면 문자열형태로 자바스크립트 파일에 포함된다
npm test - 테스트 코드가 실행된다
Create react app에는 제스트(jest)라는 테스트 시스템이 구축되어 있다.
test폴더 밑에 있는 모든 자바스크립트 파일
파일 이름이 .test.js로끝나는 파일
파일 이름이 .spec.js로끝나는 파일 을 테스트 파일로 인식한다
util.test.js
impot {addNumber} from ‘./util’;
it(‘add two numbers’, () =>{
Const result = addNumber(1,2);
expect(result).toBe(3)}
it,expect 는 제스트에서 테스트 코드를 작성할 때 사용되는 함수이다.
###npm run eject - 숨겨져있던 Create react app 내부설정 파일이 밖으로 노출된다.
바벨이나 웹팩의 설정을 변경 가능하다. 리액트 툴체인에 익숙하지 않으면 비추
##Create react app 자바스크립트 지원범위
(2.1.3 v)
지수연산자
Async await함수
나머지연산자,전개연산자(스프레드 연산자)
동적임포트
클래스 필드
JSX문법
타입스크릷트 , 플로 타입 시스템
기본 적으로 폴리필이 포함되지 않는데 ES6+에서추가된 객체나 함수를 사용하고 싶다면
core-js패키지를 사용하면 선택적 이용이 가능하다.
npm install core-js - 설치
Index.js에 추가 (import ‘core-js/features/string/pad-start’; ) :string.padstrart함수를 사용할때
그리고 자바스크립트에서 사용한다
Index.j에서 한번만 가져오면 모든 곳에서 자유롭게 사용가능하다.
폴리필 : 새로운 자바스크립트 표준이 나와도 브라우저 에서 지원하지 않으면 사용못한다. 그래도 바벨을 이용하면 어느정도 사용이 가능하다. 새로운 객체나 함수로 작성한 코드도 빌드 시점에 변환할수 있다. 실행 시점에 주입할수 있다. 실행시점에 주입하지만 현재환경에 존재하는지 검사해서 기능이 없을때만 주입하는 것을 폴리필이라고 부른다.
코드 분할하기
동적 임포트를 이용한다. 코드 분할하지 않으면 전체코드를 한번에 내려 주기 때문에 첫 페이지 렌더가 오래걸린다.
동적 임포트 : 컴포넌트 분리 ? 재사용 ?
환경 변수 사용하기
환경 변수는 개발,테스트, 배포 환경별로 다른 값을 적용할때 유용하다.
전달된 환경 변수는 코드에서 process.env.{환경변수 이름} 으로 접근 할 수 있다.
Create-react-app 에서는 NODE_ENV 환경변수를 기본으로 제공한다.
환경 변수의 값은 다음과 같이 결정된다.
npm start로 실행하면 development
npm test로실행하면 test
npm run build로 실행하면 production
확인
Console.log(process.env.NODEENV);
다른환경 변수는 REACT_APP 접두사를 붙여야 한다.
process.ev.REACTAPP형태로 접근할수있다.
환경변수 입력
맥 : REACT_APP_API_URL=api.myapp.com npm start
윈도우: set ”REACT_APP_API_URL=api.myapp.com” && npm start
환경변수가 많아지면 .env파일을 이용하는게 좋다
cra-test 폴더 밑에 .env.development/.env.test./.env.production/
파일안에는 환경변수 입력처럼 입력한다.
ESM과 Create react app을 사용하는 이유 등 기초에 대한 것을 차근차근하게 알아보는 시간을 가지게 되었습니다.
npm 명령어도 start만 사용했었는데 다양한것이 있다는 것을 알게 되었습니다.
