[240127] 코드리뷰 받으면서 배운 것

리펙토링

문제 1

• 기존 코드는 회사가 늘어날때 코드 복사해서 바뀌어야할 부분만 바꾸어서 핸들러로 사용함 -> 중복코드 많아짐
• 회사별로 config 파일 만들어줌
• 중복된 로직은 custom hook 으로 묶어주고 회사를 인자로 받음

const {} = useExcel("회사 타입")

문제 2

-현재는 중앙화해서 전역 모달 사용중인데, 옛날 코드라 모달 매번 만들어서 사용중이였음

• 전역 모달 사용하도록 리펙토링

문제 3

• 엑셀을 이용해서 서비스 생성하는 부분인데, 다른 컴포넌트의 custom hook 한테도 종속되어 있어서 해당 컴포넌트 없으면 사용 불가능 했음
• 종속성 분리하고 필요한 데이터는 부모 컴포넌트에서 관리해주도록 수정
• 엑셀을 이용해서 서비스 생성은 다른 컴포넌트가 없어도 어디든 사용할 수 있도록 독립 시켜줌

코드리뷰 받으면서 배운 것

스토리북

1. 모달을 구현함
2. info / confirm 타입은 버튼이 생성
3. custom 타입은 유동적으로 버튼 넣을 수 있도록 구성
4. 스토리북에서 custom 타입 예시 보여주는데, 닫기 버튼을 안만들어줌
5. 다시 보려면 새로고침 or 모달창 밖을 눌려야함
6. 배운 것 : 테스트 시나리오 생각하면서 작성하자

범용성

• imgProps?: ImgHTMLAttributes<HTMLImageElement> 받으면 범용적으로 쓰기 좋을 것 같다는 피드백
• 클릭 핸들러 onClick , handle~~ 하는 경우는 특정 상태를 핸들링하거나 특정 액션을 컨트롤하기 위해 붙이는데 on~~ 은 이벤트를 어떻게 처리할 것인가에 대해 붙이는 명칭이라 click 에 대한 이벤트에 어떤 핸들러를 붙일 것 인지 props 받는거니 (특정 목적이 있는 것 아님) onClick 이 더 범용적이다.

alt

• 이미지가 네트워크 상의 이유로 불러오지 못하는 상황이나, 시각 장애인에게 해당 이미지가 어떤 것인지 알려주기 위한 웹 접근성 attribute 여서, 이미지가 어떤 것을 의미하는지 명확하게 나타낼 것

기타

Mui stack

• 스택은 요소를 수직 또는 수평으로 배열하기 위한 컨테이너 구성 요소
• 1차원 레이아웃에 이상적임
• 레이아웃 잡을 때 편하다

React Stack component - Material UI