2022년 08월 07일 코드리뷰

 

내가그린얼굴그림

오늘 고맙게도

개발자 지인에게 코드리뷰를 받을 기회가 있었다.

코드리뷰 내용을 페이지 별로 정리해보았다.

 

공통

1. 에러처리 => 토스트
2. 라우터에 스피너 처리 => 라우터에 스피너 없어도 될듯 차라리 로고 넣는게 낫다. 부분적으로 스피너 넣기 (컨텐츠 들어가는부분)
3. props로 넘겨주는 함수들은 해당 컴포넌트에서만 봐도 알 수 있도록 명시적으로 작성해준다.
=> state, setState 넘겨주기 x, onclickGoToLogin() 처럼 이벤트로 넘겨주기 o
=> True/false 값은 is- 로 시작한다.
4. 문자열 입력시 js에선 싱글쿼트(''),jsx에선 더블쿼트("") 로 구분하는 것도 좋은 방법
5. 객체분해 상단에서 쓰는거 조심 => 없을 때 에러 날 수 있음. 옵셔널 체이닝이나, 값이 없을 떄 빈 객체를 할당해준다.
6. 클릭이벤트 길어지면 따로 함수로 빼주는게 좋음
7. 취향인데 난 styled-components 보단 모듈 css 가 낫다. 조건부 렌더링은 클래스 이름 추가해서 하고 cs라이브러리 사용해보자. 이번 프젝은 말고....
8. 메인페이지는 "/" 로 라우트하는게 좋다
9. 컴포넌트 짤때 작은것부터 => 모듈짜기 편함. ㅇㄱ ㄹㅇ 센세이션.
예) 부모 -> 자식1 -> 자식2 -> 자식3 (X) / 자식3 -> 자식2 -> 자식1 -> 부모

Main

1. 워크스페이스 이름이 url담기는건 좋지않다. 유저아이디 = 개인정보니까. _id 데이터에서 뽑아온 몇 글자를 써서 url에 담아준다 유니크한 문자로.

 

Login

1.  현재 패스워드가 콘솔찍으면 그대로 노출 => 암호화해서 넘겨주기. 토큰으로 넘겨주던가.
2.  글자만 들어가면 버튼이 활성화되고, 요청도 보내짐 => 아이디 valid체크 마친 뒤에 버튼 활성화 되게끔 + valid체크에 실패한 인풋에 빨간 글씨 에러와 빨간 줄 만들기 *Onblur 이벤트 사용해보자
참고로 valid check는 클라 쪽에서도 해줘야함 
3. SignUp, LogIn 컴포넌트 화
4. JoinRouter를 만들어서 안에서 LogIn, SignUp 콤포넌트로 나눈다

Logout

1. 로컬스토리지 remove 할 떄 하나하나 하지말고 => clear()

 

GitHub

1. 마일스톤을 사용해보자(마감기한 설정 할 수 있음 + 이슈와 함께 시너지)
마일스톤 = 큰 단위 / 이슈 = 작은단위