[POB] 세션정리 - 2주차 월
📌 React 학습 가이드
리액트 영상 추천
- 영잘알 : 유데미 - 리액트의 아버지
- 한국어 : 인프런 - 리액트의 삼촌
책 추천
- 초보자 : 리액트를 다루는 기술
- 경험자: 실전 리액트 프로그래밍
📌 기업과제 Review
😀 좋은 케이스!
상수관리 (route)
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;- route의 path도 상수다. 다른 페이지에서도 path를 사용할 수 있으니 상수로 처리! (유지보수)
디자인
- 프론트엔드 개발자는 디자인도 할 줄 알아야 한다. 신경쓰자.
Storage Class
export default class Storage {
constructor(title) {
this.title = title;
}
save = (list = []) => {
const obj = {
data: list,
timestamp: new Date().getDay(),
};
if (!localStorage.getItem(this.title)) {
localStorage.setItem(this.title, JSON.stringify(obj));
} else {
let previousTime = JSON.parse(localStorage.getItem(this.title))?.timestamp;
let currentTime = new Date().getDay();
if (previousTime !== currentTime) {
return localStorage.clear();
} else {
return localStorage.setItem(this.title, JSON.stringify(obj));
}
}
};
load = () => {
return JSON.parse(localStorage.getItem(this.title))?.data;
};
}- 이 부분은 utils 함수로 깔끔하게 처리!
🤔 다시 한 번 생각해 볼 케이스!
화면깜빡임
- 리액트는 SPA인데 화면깜빡임이 발생한다는 것은 설계가 잘못되었다는 것
url 설계
예시) http://localhost:3000/productdetail/prod4/나이키%20윈드러너%20블랙%20L/나이키/60000/false
- 사용자가 알 수 없는, 불필요한 정보는 url에서 제외하자. (prod4 -> id로 대체)
컴포넌트 파일명
- 컴포넌트 파일명의 시작은 대문자로 한다.
- CRA로 생성한 리액프 프로젝트 파일명은 JSX대신 JS만 써도 된다. (JS로 만들어도 JSX 문법으로 작성할 것을 알기 때문에)
- page폴더의 하위 파일들엔 page란 파일명을 쓰지 않아도 된다. (page폴더 하위에 있기 때문에 알 수 있음)
Class Component의 Life Cycle method
- 리액트 클래스 컴포넌트는 라이프사이클에 의해 실행되기 때문에 예시코드처럼 멤버변수를 사용할 필요가 없다.
- componentDidMount메서드는 다음에 실행 될 라이프사이클 메서드가 없기 때문에 async를 사용해도 side effect가 발생하지 않는다.
- componentDidMount 앞에 async를 붙이는 것은 이상할 수 있으나 문제있는 코드가 아니다. (네트워크 요청을 위한 코드를 이 메서드에서 작성하는데... 메서드에 직접 사용하지 말라는 걸까??)
관심사의 분리
- App컴포넌트에서 장황하게 Routes 관련 코드를 작성하지 말고 Routes 컴포넌트에 분리 작업 하자.
- Routes에선 route작업만 하고 데이터 fetching은 각 컴포넌트에서 하자.
! 연산자 활용
this.setState({ isCheckNotInterest: !checked });- ! 연산자를 적극적으로 활용해 if - else문을 가독성있게 바꾸자
React에서 (모듈 내) 전역변수를 쓸 일은 거의 없다.
- let으로 선언된 전역변수를 쓸 일이 없다.
- 다른 개발자가 변수를 사용할 경우도 있어서 side effect가 발생 할 수 있다.
- 함수 내에서 선언하거나, 함수 호출 시 인자로 넘겨준다.
- 변수명, 파라미터 네임을 명확하게 선언한다.
React에서는 DOM을 직접 접근할 일이 거의 없다.
예시) document.querySelector()
- React에서 DOM 직접 접근은 지양하자.
참조 하면 좋은 convention
📌 Class/Functional Component
왜 Functional인가?
- 코드가 간결해지고 재사용성이 증가하며 유지보수가 쉬워진다.
- 클래스형 컴포넌트는 로직이 너무 복잡해지면 side effect가 발생할 수도 있다. (페이스북 오피셜)
왜 Class도 공부해야 하는가?
- 많은 회사의 레거시 코드가 클래스 컴포넌트로 작성되었기 때문에 공부해야 한다.
Class component lifecycle 정리 링크
React 컴포넌트 라이프사이클
들어가며 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능한데,리액트 v16.8 이후부터는 함수형 컴포넌트에서 hooks 개념이 도입되면서 라이프 사이클과 같은 작업을 처리할 수 있다
hwb0218.tistory.com
함수형 컴포넌트와 클래스형 컴포넌트의 차이는? → 다음 포스팅으로 다뤄보자
📌 Frontend Libraries
라이브러리란?
- 프로그래밍에서의 라이브러리란 필요한 기능들이 모여있는 코드의 집합, 개발자는 필요시 공개된 라이브러리를 자신의 프로그램에 호출하여 사용할 수 있다.
- 자주 사용되는 기능들을 라이브러리(객체 또는 함수의 형태)로 만들어두면 필요할 때마다 직접 호출하여 사용할 수 있다.
라이브러리 선정 기준 / 주의점 / 오류 확인
- npm 페이지에서 weekly downloads, last publish, issue, pr 등 활발한지 체크한다.
- 라이브러리는 우리와 같은 개발자가 만들어낸 코드이기 때문에 오류가 발생할 수 있다. (이러한 점을 주의하며 사용하자)
실무에서 라이브러리를 적용하려면?
- 단기간에 프로그램을 만들어야 하거나 직접 구현하지 않고도 라이브러리를 사용함으로써 충분히 커스터마이징해서 쓸 수 있다면 사용하자 (이슈가 생기거나, 업데이트 됐을 경우 주기적으로 관리해야하기 때문에 사용을 충분히 고려하자)
📌 Agile = 기민한, 날렵한
- 일정한 주기를 가지고 계속 검토해 나가며 필요할 때마다 요구사항을 더하고 수정하여 커다랗게 살을 붙이면서 개발해 프로세스 모델 방식이다.
- 미리 정해진 몇 개의 단계에 따라 엄격한 순서대로 이루어지는 일직선의 과정인 waterfall의 프로세스와는 비교가 많이되는 반대의 개념이다.
scrum
- 스크럼(Scrum)은 고객의 요구사항을 충족시키는 데 초점을 맞추기 위해, 작은 목표를 짧은 주기로 점진적이며 경험적으로 제품을 지속적으로 개발하는 관리 프로세스
sprint : 기능개발의 한 사이클
planning meeting : sprint동안 무엇을 할 것인지 계획세우기 (SW 기능과 제약조건을 정의하는 명세서 작성, 기능분담 등)
daily standup : 무엇을 하고있는지, 무엇을 할 예정인지, 무엇을 못하고 있는지 (길게하면 좋지 않다 짧게짧게)