호준님 코드 리뷰
•
동작 주도개발(일단 여러분에게 요구되는 사항) => 그럼에도 불구하고 80점 짜리 코드는 되어야 한다.
•
"프로그래머에게 요구되는 것은 100점이 아닌 80~90점짜리 프로그램을 기한 내에 완성하는 일" - 나카지마 사토시
•
"아무리 급해도 항상 80점짜리 소프트웨어를 개발할 수 있는지가 중요하다" - 인프랩 이동욱
•
마틴이 클린코드에서 주장한 원칙 5개(solid)
SRP : 단일 책임 원칙(각 클래스(또는 모듈, 오브젝트)는 하나의 정보만 가지게 만들어야 한다)
OCP : 개방 폐쇠 원칙(확장에는 열려 있으며, 변경에는 닫혀 있어야 한다)
LSP : 리스코프 치환 원칙(인터페이스의 서브타이핑은 인터페이스에 정의된 형태를 최대한 유지)
ISP : 인터페이스 분리 원칙(인터페이스는 최소한으로 유지)
DIP : 의존 관계 역전 원칙(상위 레벨의 모듈이나 인터페이스가 서브 클래스나 타이핑에 영향을 받아서는 안된다)
•
클린소프트웨어 - 악취
경직성 : 프로그램 변경이 어렵다. 원하는 곳만 변경하면 장애가 난다.
취약성 : 프로그램 변경시 아무런 연관이 없는 부분에서 장애 발생
부동성 : 재사용할 수 있는 컴포넌트로 구분이 어려움
점착성 : 개발 환경이 비효율적
불필요한 복잡성 : 직접 효용이 없는 구조가 디자인에 포함
불필요한 반복 : 단일 추상 개념으로 통합할 수 있는 반복구조 포함
불투명성 : 직접 만든 사람이 아닌 다른 사람이 코드를 읽고 이해하기 힘들다
•
개발자들이 가장 많이 사용하는 개발 원칙
KISS : 최대한 단순함을 유지하라
DRY : 똑같은 기능, 코드를 반복하지 마라
YAGNI : 그 기능이 필요하기 전까지는 미리 만들지 마라
•
작은 효율성에 대해서는, 말하자면 97% 정도에 대해서는 잊어버려라. 섣부른 최적화는 모든 악의 근원이다. - 도널드 커누스
•
패스트캠퍼스 CTO님
1.
일단 동작하게 만든 다음 더 좋게 만들어라
2.
언제나 발견했을 때보다 깨끗하게 해놓고 캠핑장을 떠나라
3.
바퀴를 새로 발명하는 일의 좋은 점은 둥근 바퀴를 얻을 수 있다는 점입니다. (바퀴를 새로 만들지 말라.)
피드백
•
eslint 컴파일 에러 CR
◦
윈도우와 맥북 개행 문제
•
폴더트리 : 재사용되는 컴포넌트는 따로 빼기(이게 안되면 10점 깎인다!)
◦
common 폴더로 빼거나 아토믹 패턴
•
로딩 화면 슬며시 사라지게 해주기 (현재 스플래시 오류)
•
프로필 이미지 width값만 줘서 깨지는 문제
•
하트 미작동
•
무한 스크롤 작동
•
이동 링크 적용
•
여러 이미지 좌우 슬라이드 처리
•
/my_profile/null 뜨는 문제
◦
다른 계정으로 /my_profile/hyepp 들어가면 위에는 본인 프로필/아래는 hyepp …
◦
URL 구조가 적절치 않다. : 마이 프로필이니까 뒤에 다른 아이디가 들어가지 않아야 함
•
앨범형 클릭했을 때 이동 안 됨
•
완성도는 600 커밋이면 100% (대부분의 기능 구현)
우리 기능보다 더 잘 되어있는 게 300 중간치 (커밋 갯수보다는 구현이 덜 되어있고 열심히 한 거다 ㅠㅠ)
최소치는 60커밋 …
•
프로그램의 경직성
◦
로그인 API base url 안 쓰는 점 -10점
◦
API.jsx에 다 모아두기 (8팀 참고)
복잡성 낮추기. API를 이해하고 싶으면 이 폴더를 보면 된다. 그게 아니면 API를 어디서 처리하고 있는지 다 찾아봐야한다. (신입에게 이해하기 어려운 코드)
아토믹 패턴 : 굉장히 복잡해졌을 때 릴리즈가 세 번 이상 되었을 때 빛을 발하는 코드. 도입 자체로 가산점.
•
header
◦
if else는 처음 봤다. 거의 switch문이나 삼항연산자로 달라지는 부분만 따로 렌더링되게 하거나 props로 변수를 만들어서 해당되는 페이지가 렌더링 됐을 때 보이게끔.
◦
중괄호 생략 why? 아마 eslint
◦
좋은 점 : 읽기 편하다
◦
불편한 점 : 중복된 코드가 컴포넌트화되어있지 않아서 복잡해보임(nevigate 등)
중복된 코드가 보이면 안 된다. (이런 최적화는 동작 구현 후 나중에)
onClick={onClick} 핸들러 함수와 이름 구분 해야함! 내려주더라도 onClick={handleOnClick}
•
signup
월요일에 다시 코드리뷰.ᐟ.ᐟ.ᐟ.ᐟ.ᐟ.ᐟ
•
지금 코드 상으로 70점 더 리뷰 할수록 깎일 것이다
•
우선 동작이 되어야하는데 최적화를 먼저 하면 안된다 기능이 우선이다
•
한달에 끝낼 수 있으면 3주의 시간을 준다
•
리액트는 효율과 거리가 멀고, 견고함과 확장성에 초점이 맞추어져있다
•
취약성 : A 컴포넌트 코드 변경 → C 컴포넌트 오류 ㅎㅎ
•
리액트 프젝에서는 부동성 ** 중요하게 생각하심
◦
하나의 컴포넌트에 재사용할 수 있는 코드가 있음에도 분리하지 않았다거나 common 폴더에 구분하지 않았으면 프젝 확장되었을 때 감당할 수 없다 중간에 뜯어고치는 건 힘들다
→ 모달 재사용 코드 분리하기 (은영)
•
내가 할당되지 않은 일이더라도 잘못된 부분이 보이면 발견하는 사람이 깨끗하게 해놓고 얘기하고 떠나는 거다~!
•
모듈 통일! 컴포넌트마다 때려넣지 말고~
•
월요일 코드 리뷰 요청 디엠 드리기 ** ⇒ 월요일 3-4시
해야할 일 검토
•
MyPofile.jsx, Nav.jsx에서 아톰을 사용하고 있는데,, 로컬스토리지 바로 읽지 못해서 문제가 자꾸 발생..
const account = JSON.parse(localStorage.getItem('account')) 이런식으로 바로 로컬스토리지 읽으면 해결되서,, 일단 이렇게 처리했는데 문제..!
•
공통 : 콘솔, 주석 정리
•
어플리케이션의 무언가…
스플래쉬 페이지 로직 다시 짜기(미경)
로딩 페이지 로직(미경) ⇒ 이거 지금 작업 + 확인은 다 했는데 get 해오는 페이지마다 넣어줘야해서 다른분들 메인 기능 수정 다 끝나시면 그때 다시 적용하겠습니당. 처음 홈 화면에 ‘검색하세요!’ 1초 나오는거 로딩페이지 설정안되서 그런거더라구요
404 페이지 뒤로가기 링크(미경)
•
회원가입
input require(풍윤)(6자 미만일때 아무알람이 뜨지않습니당!)
프로필 설정 : 계정 ID 한글 했을 때 .. .. 클라이언트에서 처리 (풍윤)
회원가입 disabled 버튼 (풍윤)
프로필이미지 overflow: hidden으로 감싸기
이메일 회원가입 → 회원가입 하면 프로필 설정이 나오는데 새로고침 하면 이메일 회원가입으로 다시 로드되는 문제(우선순위 최하)
초기 프로필 이미지(기본이미지) 설정 ⇒ 회원가입할 때 프로필 이미지를 설정하지 않으면 기본 이미지도 안떠요. 이유는 이미지 경로 때문인 것 같습니다..!(풍윤)
•
로그인
required, 실시간 유효성 검사 (혜빈)
이메일로 회원가입 ⇒ 회원가입
로그인 ⇒ 회원가입
로그인 직후 프로필/null (혜빈) 아톰 값을 바로 읽어오지 못해서 그랬던 것..! 바로 로컬스토리지 읽어오게하니까 해결은 되었지만 그러면 아톰 왜 씀..?
•
내 프로필
유저프로필 팔로우 버튼(혜빈)
share&chat 아이콘 선택 시 ~ 기능
팔로우 버튼 토글 팔로우 버튼을 따로 만들어서 api 통신하게끔 만들면 어떨까 싶운데.. 괜찮은 방법일까용..?ㅠ
프로필 수정 (혜빈)
판매중인 상품/게시글이 없을 때 뜨는 안내 (미경)
상품 등록 : 가격 숫자가 아닌 데이터를 넣으면 NaN → 먹통되는 문제 (미경)
상품 업로드/수정시 이미지 미리보기 처리를 fileReader로 변경 (미경)
상품 업로드시 링크 마이프로필로 수정 (미경)
상품 업로드 유효성 검사 추가 (미경) 유효성 검사가 생각보다 넘 ………ㅋㅋㅋㅋㅋ 이미지 진짜 열받네요 ㅎ
상품 삭제 후 새로고침 되지 않게 처리 (미경)
상품 수정 시 버튼 초기값 able 처리 (미경)
팔로우/ 팔로잉 링크 (풍윤)
앨범형 상세 페이지 - 보이는 이미지 overflow (혜빈)
무한 스크롤 프로필 페이지에도 적용 (혜빈)
다른 계정으로 /my_profile/hyepp 들어가면 위에는 본인 프로필/아래는 hyepp … URL 구조가 적절치 않다.(혜빈) → 마이프로필이니까 다른 계정을 뒤에 넣었을 때 권한이 없도록 하기
•
채팅 → 은영 먼저 하기
챗리스트 : Link 말고 다른 방식으로 페이지 이동, li 간격 조정 (은영)
챗리스트 : 프로필 가상요소 (은영)
챗룸 메세지창 : 글씨 입력되면 전송 버튼 활성화 (은영)
•
게시글 작성/수정
이미지 삭제 (은영) ⇒ 이미지 삭제 시 텍스트도 삭제됨
이미지 fileReader (은영)
업로드 버튼 비활성화 (은영)
•
홈 피드
더보기 클릭시 수정/삭제 모달이 아니라 유저프로필 계정으로 이동되는 문제 (미경)
프로필 이미지 동그랗게 하기 (미경)
포스트 카드 출력 레이아웃 다시 만들기 (미경)
팔로잉 없을 때 ‘유저를 검색해 팔로우 해보세요’ 화면 안뜸 ⇒ 해결했고 간단한 코드라서 로딩페이지랑 (둘다 홈 문제 때문에 하는 작업이라) 같이 PR 하겠습니다.
•
검색 페이지
로딩 느림(혜빈)
유저프로필로 이동(혜빈)
•
좋아요 기능 .. ^^ (은영… 다같이 .. 부탁해요)
•
기타
◦
버튼 disabled (버튼안에 disabled 적고 삼항처리) → ProductEdit.jsx 참고
회원가입 버튼 (풍윤)
게시글 업로드 버튼 (은영)
Nav바 이동시 아이콘과 글씨색 변경 (혜빈)
nav 클릭 시 덜컥덜컥 거리는 현상
파비콘 (미경) - 시간되면 Nav 아이콘 디자인 정도 바꿔보고싶닷
폰트 적용 안되는 이슈
•
최종
공통 컴포넌트 폴더링 common
api 파일 분리
•
페이지나 기능 단위로 브랜치 파서 작업하기
•
콘솔, 주석 정리
•
onClick={onClick} 핸들러 함수와 이름 구분 해야함! 내려주더라도 onClick={handleOnClick}
