211021 리액트 입문 5 npm

#npm start

개발용이며 최적화 X

 

#https로 로긴하고 싶을 땐 set HTTPS=true && npm start

원래 인증서가 필요함

 

#npm run build

배포 시 사용하는 명령어

-> build폴더 내 정적 파일이 생성되어 서버사이드 렌더링이 불가한것.

 

#npm serve -s build(위치)

build 위치로 서버를 제공한다

 

#build 폴더 내

css 파일

 - 기존 src에있는 css이 하나로 병합된 것

 - animation 속성 ? 컴파일 -> 2줄(벤더 접두사 포함이라 하위 브라우져 지원)

 동적 import 사용한 경우 별도 js파일로 만들어짐

 큰 이미지 파일은 media 파일에 생성 / 작은 이미지는 js내부에 내장됨 (빠르긴 함 http2.0부터는 빨라서 http 호출 감소 의미가 없다)

 

# npm test 명령어?

App.test.js -> 테스트

혹은 .spec.js로 끝나도 테스트로 인식

혹은 __test__ 폴더로 만들면 내부 파일 테스트

 

# npm eject?

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

CRA을 기반으로 사용하고 싶을 때.

단 추출시 수동으로 ...

 

# polyfill?

caniuse 브라우저별 js 지원여부가 다른데 (padStart는 ie미지원) 

core-js 에서 해당 함수를 import할 수 있다.

(core-js 내장되어있기때문)

 

# 환경변수?

개발/테스트/배포 환경 적용 시 

코드 내에서 process.env.(변수 이름) 식으로 사용

기본적으로 process.env.NODE_ENV를 갖고 있음. (development, test, production)

set "REACT_APP_API_URL=api.myapp.com" && npm start

 

# 환경변수가 많으면 .env.development, .env.production, ... 파일을 만들어서 사용하기

REACT_APP_API_URL=api-dev.myapp.com

=> process.env.REACT_APP_API_URL로  사용가능

 

# CSS 작성방법

1. 일반적인 작성법

2. CSS 모듈 작성법

3. Sass 작성법

4. css-in-js 작성법

 

 

1. Button  / Box 

//Button.css
.big{
width:100px;
}
.small{
width:50px;
}

//Box.css
.big{
width:200px;
}
.small{
width:100px;
}

단점?

import './Box.css';
import './Button.css';

ReactDOM.render(
	<div>
    	<Button size="big"/>
        <Button size="small"/>
        <Box  size="big"/>
        <Box size="small"/>
    </div>
)

할때 이름이 충돌한다.  (마지막으로 선언된 이름으로 덧씌움)

 

2. CSS 모듈 작성법

이름 충돌해결가능

1. npm install calssnames

 

Box.module.css 작성 후

import Style from '.Button.module.css' 처럼 객체로 가져오고

 

사용 시 

import Style from '/Box.module.css';

function Box({size}){
	
	if (size == 'big'){
    	return <div classname={'${Style.box} ${Style.big}'}>큼</div>;
    }else{
    	return <div classname={'${Style.box} ${Style.small}'}>작음</div>;
    }
}

// 호출시 간단하게 import cn from 'classnames'; 로 사용가능

import Style from '/Box.module.css';
import cn from 'classnames';

function Button({size}){
	const isBig = size == 'big';
	return <div classname={cn(Style.Button,
          [Style.big] : isBig,
          [Style.small]: !isBig,
          )}>
          {iBig ? '큼' : '작음'}
        </div>;
}

 

3. Sass

css와 비슷하지만 별도의 문법으로 생산성 UP

1. 패키지 설치 npm install node-sass

2. .css는 .scss로 작성하기

//./shared.scss 파일
$infoColor: #aaaabb;

// ./Box.module.scss 파일
@import './shared.scss'; <= 이렇게 css에서 다른 css import 가능

.box{
	height:50px;
    background-color: $infoColor;
}

 

4. css-in-js?

css를 js안에서 작성

css가 js 안에서 작성되기 때문에 js처럼 재사용 가능 관리 및 동적 처리 가능

css 담당하는 팀이 따로 있을때는 쓰지 말기

 

1. styled-components 설치

import React from 'react';
import styled from 'styled-components';

const BoxCommon = sytled.div`
	height: 50px;
	background-color: #aaaabb;
`; //ES6에 추가된 tagged template reference
// `~`값을 매개변수로 실행하는 함수가 있다는 것

//확장1
const BoxBig = styled(BoxCommon)`
	width:200;
`;
//확장2
const BoxSmall = styled(BoxCommon)`
	width:100;
`;
//확장3
const BoxCommon2 = styled.button`
	width:${props => {props.isBig? 100 : 50}}px;
	height: 30px;
	background-color: yellow;
`;

//1.
export default function Box({size}){
	const isBig = size =='big';

	if (isBig){
		return <BoxBig>큼</BoxBig>
	}else{
		return <BoxSmall>작음</BoxSmall>
	}
}


//1,2
export default function Box({size}){
	const isBig = size =='big';

	if (isBig){
		return <BoxBig>큼</BoxBig>
	}else{
		return <BoxSmall>작음</BoxSmall>
	}
}

//3
export default function BBox({size}){
	const isBig = size == 'big';
	const label = isBig? '큼' : '작음';

	return <BBox isBig={isBig}>{label}</BBox>
}