211020 리액트 입문 4

# 입문이라도 많은 지식 노력이 필요하다

 - webpack 설치, babel 설치, jest, eslint, polyfill, HMR,CSS 후처리

등등의 환경...

 

create-react-app 을 통해 배워보자

 

# npx create-react-app 혹은 npx create-react-app 프로젝트이름

을 통해 예제 파일 다운로드

 

 

# cra? 기본 패키징이 설정된 프로젝트임

 

# 초기 프로젝트에 cra 프로젝트를 사용할수도 있고, Next.js 라는 프로젝트를 사용할 수 있다.

그런데...

CRA는 server side rendering을 지원하지 않는다. 그러니 ssr이 필요하니 next.js를 사용한다.

backoffice같은데 사용

build system, eslint같은 설정 변경이 거의 어렵다.

커스텀 X없이 빠른 프로젝트를 위해선 cra 추천

 

 

#public resource파일들 아이콘, 등등

#js는 src에 있음.

#package.json

scripts 4개 스크립트 확인하기

browerlist polyfill 0.2퍼센트 이상

 

#npm start로 프로젝트 구동시키고 localhost:3000으로 접근

 

#HMR 덕분에 구동 시킨 후  바로 적용된다

AS-IS
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

TO-BE
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 2s linear;
  }
}

 

# STRICT 모드? 개발에 사용함

개발환경에서 잘못 사용한 경우 잡아냄

 

#이미지 파일도 , 다른 타입도 임포트 해올 수 있다.

import logo from '.logo.svg';
import data from '.x.json';

이미지를 위처럼 사용하면 이미지를 해싱하여 사용할 수 있다. (네트워크 - 이미지 확인)

이미지 변경 시 해시값도 변경

 

 

#import의 좋은점? 필요할때 로딩  가능 lazy loading

function onClick(){
	import ('./data.json').then( ({default :data}=> {
    	console.log(data);
    });
}

코드 윗 부분 말고 사용 직전에 import 하면 나중에 필요할때 로딩할 수 있다.