1. 호준님 코드리뷰
1) API 폴더 생성 후 파일 분리
•
api 폴더 안 index.js 한 파일에 기능이 너무 많다
•
마틴 클린코드에서 단일책임원칙(각 모듈,오브젝트는 하나의 정보만 가지게 만들어야한다)에 위배된다.
•
ex) api 폴더 안에 로그인 관련 api/이미지 관련 api 식/상품 관련 API 식으로 파일을 나누는게 좋음
•
api 파일 분리 하게 되면, 통신하는 BASE_URL 주소도 따로 파일 만들기
•
파일 하나에는 하나의 함수, 하나의 책임
2) API 부분 함수 인자로 만들지 않고 나눠서 분리한 것 Good
•
영상 7분 50초 부분
•
유지보수 하기 더 편하다
3) 모달 커스텀 훅 Good
•
커스텀 훅 만들어 본 유무가 면접의 단골 질문
•
프로젝트에서 3~4번 사용되기에 커스텀 훅으로 만든 것 잘했다.
4) 스타일컴포넌트 S 로 import 한 것 Good
5) 정규표현식 따로 파일 분리하기
•
utils 폴더 따로 만들어서 관리하기
ex) 정규표현식은 아래와 같이 utils폴더 따로 생성하여 관리하기
6) 이미지 주소 BASE URL 로 import 해오기(-5점)
•
유지보수성에 취약한 코드임
•
아래 url 주소가 바뀌었을때 저 url 이 어디에 있는지 일일히 찾을 수가 없음
7) 로컬스토리지에는 only 토큰정보만 (- 15점)
•
로그아웃 하지 않고 페이지 종료했을 때 로컬스토리지에 accountname 정보가 남아있음, accountname은 개인정보
•
token은 프론트엔드 개발자가 관리할 수 없기에, 백엔드 개발자에게 token을 15초 단위로 중간중간 받아올수 있게 협업해야함
8) 중첩 삼항연산자는 if 문으로 바꾸기
•
삼항연산자 보다는 if, else if 문 사용하기
•
어떤 상황일때 어떤 페이지가 렌더링 되어야하는 상황일 때는 object 로 사용하
9) 채팅(-1점)
•
채팅 API 를 구축하지 못했을 경우, 통신이 완 되었다고 생각하고 api 파일에 더미데이터를 만들것이다. 더미데이터를 만들고 채팅 파일에 map을 돌면 간편하게 할 수 있음
10) 라우터 접근제한 Good
2. 질문사항
1) common 컴포넌트 기준
•
2번 이상 재사용되면 common 에 넣기 ⇒ 하지만 common 폴더 구조는 큰 프로젝트에서 사용될 수 있는 디자인 패턴은 아님
•
대규모 프로젝트에는 common 폴더 보다는 아토믹 패턴 도입하는게 좋음
common 폴더는 2.5 release까지는 커버가 되지만, 4 release 부터는 그 이상 커버가 힘들다.
4 release 에서 수 천 개 페이지가 발생되면 커버하기 힘들어.
2) useState 개수가 많아질 때 관리 방법
•
객체 형태로 관리
ex) user 에 대한 정보(유저 아이디, 유저명 등등) 를 모두 각각의 useState로 주는 것이 아닌 객체 형태로 주기
const [userInfo, setUserInfo] = useState ({})
•
객체 형태로 관리할 때 장점
1. 통합적으로 관리할 수 있다.
2. 렌더링 이슈 방지 - useState로 정보를 하나하나 관리했을 때는 다 업데이트가 된다. 따라서, 객체 형태로 관리하고 일반 변수로만 안에 있는 정보를 변경하게 하면 렌더링 되지 않고 관리할 수 있다.
⇒ 요약 : 렌더링을 하고 싶지 않은 변수는 일반 변수로 관리, 통합할 수 있으면 객체 형태로 통합해서 관리
3) 깃허브 전략
•
회사 바이 회사, 프로젝트 바이 프로젝트 , 리소스 대비 커밋/브랜치 전략이 타당한가??
•
기능 단위로 커밋하는 게 가장 좋다.
4) ESLINT, PRETTIER 실무 사용 여부
•
아예 신경 안쓰는 회사도 있다 ( 개발의 즐거움을 떨어뜨릴 수 있어서)
•
PM 마다 다르다.
5) fetch 에서 axios 변경 안해됨
•
fetch 나 axios 나 어차피 비동기 통신이라 똑같아. 변경 굳이 안해도 돼
6) 상태 관리는 이력에 이점이 된다.
•
이 프로젝트에서는 리코일로 할 게 별로 없다. 쓰려면 일부러 쓸 수는 있다.
•
하지만 리덕스도 이 프로젝트에서는 헤비. 둘 중 하고싶은 거 아무거나.
•
컨텍스트는 걷어 낼 필요는 없다. 컨텍스트와 상태관리 툴의 목적이 다르다. 컨텍스트는 프롭스 드릴링을 막기 위해서 하는것 (컨텍스트 VS 리덕스 비교 글을 찾아보기)
물론, 상태관리 툴을 쓰면 컨텍스트를 쓸필요가 없어짐. 상태관리 툴에서 프롭스 드릴링을 해결하기 때문에
두 개 다 사용해도 괜찮음
참고 영상