Route
페이지에서 path도 상수관리)class AppRouter extends Component {
render() {
return (
<Router>
<Route exact path={ROUTES.HOME}>
<Home />
</Route>
<Route exact path={`${ROUTES.PRODUCT}/:id`}>
<Product />
</Route>
<Route exact path={ROUTES.RECENT_LIST}>
<RecentList />
</Route>
</Router>
);
}
}
// src/constants/routesPath.js
const ROUTES = {
HOME: '/',
RECENT_LIST: '/recentList',
PRODUCT: '/product',
};
export default ROUTES;
SPA (single page application)
인데, FOUC (Flash Of Unstyled Content)
이 발생한다면 무언가 이상하게 되고 있다!!http://localhost:3000/productdetail/prod4/나이키%20윈드러너%20블랙%20L/나이키/60000/false
http://localhost:3000/productdetail/4
_isMounted
변수를 굳이 생성해서 componentDidMount, componentWillUnmount 시 사용 해야할 이유가 없다! class Home extends Component {
_isMounted = false;
async componentDidMount() {
this._isMounted = true;
const notInterested = getNotInterested();
const products = await getJsonData();
this._isMounted &&
this.setState({
products: products.filter(
product => !notInterested.includes(product.id),
),
});
}
componentWillUnmount() {
this._isMounted = false;
}
Routes.js
에 따로 분리하자this.setState({isCheckNotInterest: !checked})
handleCheckNotInterest = (e) => {
const checked = e.target.checked;
if (checked) {
this.setState({isCheckNotInterest: true});
} else {
this.setState({isCheckNotInterest: false});
}
};
export const NO_INTERRESTED = "no_Interested";
export const WATCH = "watch";
export let RESET_DATE = new Date();
export const setLocalStorageProducts = (watch, product) => {
const initStorage = JSON.parse(localStorage[watch] || "[]");
// 생략...
RESET_DATE = new Date();
const date = getFormatDate(RESET_DATE, "YYYYMMDDHHMISS");
const data = { ...product, date };
// 생략...
};
componentDidMount = () => {
const htmlTitle = document.querySelector("title");
htmlTitle.innerText = '최근이력 페이지';
}
왜 Functional인가?
➡ 새롭게 개발해야한다면 functional로 개발하자!
왜 Class도 공부해야 하는가?
➡ 아직도 많은 회사들은 class로 개발된 코드를 가지고 있다.
라이브러리 선정 기준 / 주의점 / 오류 확인
➡ 구글에서 해당 라이브를 검색(구글에서 제시하는 순서대로 봐보자)
➡ npm에 들어가서 얼마나 다운로드가 활발하지, 마지막 업데이트가 언제인지 확인해보자!
실무에서 라이브러리를 적용하려면?
➡ 라이브러리를 설치해서 진행한다면 버전이 업데이트 될때마다 회사에서는 관리를 해야하기 때문에 되도록 직접 구현하려고 한다.
agile : 1. 날렵한, 민첩한 2. (생각이) 재빠른, 기민한
짧은주기의 개발단위를 반복하여 하나의 큰 프로젝트를 완성해 나가는 방식이다.
➡ 이제는 폭포수 기법 처럼 설계>디자인>개발>테스트>배포 이렇게 간단히 끝나지 않는다!
애자일의 핵심은 협력과 피드백이다.
➡ 플래닝 미팅, 데일리 스탠드 업, 칸반보드를 통해 공유하고 협력하자