관심사 분리의 중요성! 정확한 요일별 일정을 계획해 보자
▪︎ 회고
이번주는 공부 보다는 배드민턴에 더 집중했던 것 같다.
새로운 취미가 생기게 되어 순식간에 너무 빠져 버렸고...🏸
남는 시간에 공부를 하려고 하는 마음을 반성했다. 😥
이걸 극복하기 위해서는 정확히 운동하는날, 공부하는날 요일 계획을 세울 필요성을 느꼈다.
- 월요일 : 점심시간 코드숨 강의 / 퇴근 후 과제
- 화요일 : 배드민턴 및 운동 🥴
- 수요일 : 피드백 적용 및 남은시간 홈트
- 목요일 : 배드민턴 및 운동 🥴
- 금요일 : 부족한 코드숨 공부
- 토요일 : 자유시간
- 일요일 : 주 마무리 및 회고 작성
이번주 강의는 관심사 분리를 위한 연습을 위한 내용이 였으며,
그동안 관심사 분리에 대해 깊게 생각한적이 없다보니 조사를 해보고싶었다.
▪︎ 관심사 분리
✱ 왜 할까?
- 하나의 함수/변수/컴포넌트 등 에게 한번에 너무 많은 일(로직)을 부여하게 되면 유지보수성이 현저히 낮아지게 된다.
- 코드 단위 별로 하나의 관심사만 갖도록 작성하면 어떤 문제가 생겼을 때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게 된다.
- 기능 단위별로 효과적으로 파일을 분리처리해서 git branch 전략에 적합하다.
- 하나의 수정사항으로 인해 전체가 수정되는 것이 아니라, 해당 사항이 있는 일부분만 변경 시키 때문에 변화에 대해서 내구성이 좋아진다.
따라서, 코드가 더욱 명료해지고, 재사용성, 유지보수에 용이 하고, 테스트 코드를 작성하기 쉬워진다.
✱ 어떤식으로?
- 리액트 디렉토리 구성
-
VAC 패턴
VAC : View Asset Component의 약자로 렌더링에 필요한 JSX와 스타일을 관리하는 컴포넌트를 의미 VAC 패턴 : View 컴포넌트에서 JSX 영역을 Props Object로 추상화하고, JSX를 VAC로 분리해서 개발하는 설계 방법 관련 자료 : https://wit.nts-corp.com/2021/08/11/6461
▪︎ 코드 리뷰
1. 함수를 작성할때 어떤 행위를 했을 때 이벤트가 발생하는 것과,
실제로 무엇을 할 지 분리해서 작성하는 것이 좋다.
ttps://jaketrent.com/post/naming-event-handlers-react// before
<button type="button" onClick={() => handleIncrease(1)}>
// after
const handleClick = (value) => {
increaseCount();
};
<SingleIncrease onClick={handleClick} count={count} />2. 다른 결과(리스트가 존재하지 않거나...등)따라 다른 렌더링 하고 싶을때,
삼항연산자를 통해 작성하는 것 보다 비지니스 로직 부분에 예외케이스를 명확하게 두어
빠르게 종료(return)해서 다음 코드를 읽을 필요없게 하는 것이 좋다.// before
{todos.length > 0
? (todos.map((todo, i) => (
// ...생략
)))
: (<p>할 일이 없어요!</p>)}
// after
const isEmpty = (arr = []) => arr.length === 0;
if (isEmpty(todos)) {
return <p>할 일이 없어요!</p>;
}3. 역할이 분명한 로직은 함수를 작성해서 충분히 활용하는 것이 좋다.// before
const { length } = todos;
const lastIndex = length - 1;
const idx = length === 0 ? 1 : todos[lastIndex].idx + 1;
// after
const lastIndexDerive = (arr) => arr[arr.length - 1];
const idx = (lastIndexDerive(todos)?.idx ?? 0) + 1;지금 마음가짐을 유지하고 끝까지 최선을 다해서 성장하길!🔥
