항목 | 세부 내용 |
브랜치명 | merge 대상 브랜치 확인 |
main이 아닌 브랜치에서 파생되어 diff가 많아진 경우, base가 되는 브랜치 확인 | |
close할
이슈 번호 | 대상이 되는 이슈 번호 확인 |
제목까지 연결 되었는지 확인 | |
네이밍/오타 | 파일명 |
함수명 | |
변수명 | |
파일의 위치 | 파일 분리 |
constants => 컨벤션 | |
상대경로 사용 | |
Typescript | any |
적절한 타입 제안 | |
enum 활용,assertion 보단 annotation, 제너릭 사용으로 더 추론가능한 타입이되도록 할수있는가 (ex axios<ResponseType> 등), any 보다는 unknown, | |
타입 제한 | |
UI | Figma와 다르게 구현된 부분(padding, gap,
flex, font-size, font-weight 등) |
UI 테스팅 버그 | |
UI를 바탕으로 추가되어야 할 필요한 로직 제안 | |
layout shifting | |
유효성검사 | |
React
최적화 | 폰트 |
tree shaking | |
pre loading | |
lazy loading | |
리렌더링 횟수 | useMemo |
useCallback | |
React.memo | |
적절한 메모이제이션 사용 여부 | |
state를 선언한 위치(더 작은 범위에서 사용할 수 있는지) | |
useRef | |
useEffect | useEffect가 필요한지 |
의존성 배열에 들어갈 인자를 줄일 수 있는지 | |
이벤트 바인딩시 unmount에서 적절하게 해제했는지 | |
태스크 분리 | PR에서 diff가 너무 많지 않은지(200~) =>
컨벤션에 따른 기준 |
삭제하지 않은 주석 | |
웹접근성 | 시멘틱 태그(heading, ul, ol, li … ) |
img 태그의 alt | |
키보드 이동 | |
웹접근성은 고려되는 요소가 다양해서, 문서를 한번 참고해보는 것도 도움이 됩니다. (하단 링크) | |
early
return | 함수 |
JSX | |
에러 핸들링 | throw 및 try - catch |
서버 상태 핸들링 | isPending에 따른 JSX |
isError에 따른 JSX | |
self-closing | |
구조 분해 할당 | props |
속성을 분리해서 사용 | |
useEffect의 dependency의 참조에 포함되는지 | |
UX 개선 | 버튼 위치 |
hover 커서 모양 | |
submit 버튼 비활성화 시점 | |
사용자의 행동을 한 번 더 줄일 수 있는지 고민할 수 있는 부분 | |
컴포넌트 규격
제한 | 필요하다면 'sm', 'md', 'lg' 크기 제안 |
React | div
대신 <></> 또는 Fragment 사용 |
설계 원칙 | 단일 책임 원칙 |
ㅤ | 개방 폐쇄 원칙: 변경에 유용한가 |
ㅤ | 리스코프 치환 원칙 |
ㅤ | 인터페이스 분리 원칙 |
ㅤ | 의존성 역전 원칙 |
ㅤ | 테스트에 유용한가 |
error 처리 | 선언적 에러처리 가능여부 |
ㅤ | 에러 가 적절한 단계에서 이루어지는지(axios 에러인지, js 에러인지 등) |
ㅤ | 에러 문장이 사용자에게 적절한 문장인 |
로딩 처리 | 로딩처리 여부 |
ㅤ | 로딩처리시 blink 여부 (데이터 가 없지만 로딩이 아닐시 잠시 blink 될때도있다.) |
https://accessibility.naver.com/accessibility