주특기 주차 다른 팀들의 프론트엔드 부분 피드백을 함께 정리합니다.
스타일 & UI/UX
- CSS Inline : 사용을 비추천한다. 우선 순위가 높은데 속도는 느리다.
- 엑시오스 인스턴스 util 함수처럼 사용할 수 있다.
- 모바일 웹으로 확장 가능성을 고려할 것(모바일에서 불가능한 액션들을 모바일에서 가능하게)
- 모달 -> 포탈 사용을 고려해볼 것.
- 검색 입력이 없으면 없다고 명시
- 파일명이 기존과 새로운 파일이 같을 경우 처리 -> 백엔드에서 다른 임의의 파일명을 넣는다. -> 이전 파일명이 보이도록 할 때, 내가 올린 파일명이 아닌 문제가 발생
- 폰트 안티엘리어싱 (윈도우 폰트 픽셀 깨짐을 뭉게서 부드럽게함)
- 글자 수가 보이는게 매우 좋다
커스텀 훅
- 커스텀 훅 -> 제대로 동작하고 있지 않다. 에러가 캐치 되어야 한다. useEffect를 보고 왜 안 돌아갔는지 생각할 것
- 커스텀 훅 : 명명할 때, 소문자로 시작
상태 관리
- 상태관리 훅으로 묶어서 재사용
- 리덕스 상태관리 -> 유지 보수에 유리
리액트 쿼리
- 리액트 쿼리 : 고정 데이터가 계속 불러와지니까 캐싱 관리를 해볼 것.
- 리액트 쿼리 캐싱된 데이터를 활용 -> 쿼리키 관리가 필요(유니크하게 잘 관리)
- useQurey를 컴포넌트 안에서 사용
- 리액트 쿼리 뮤테이션을 한 곳에서 받아서 보내기
- mutation 에러 핸들링이 없다.
- 인벨리드 데이터를 사용한 이유
내가 모르는 단어
- 레이즈 로딩 알아보기
- 이미지 플레이스 홀더
- 에러 바운더링
- png, jpg 모바일 이미지 에일리언싱 현상
- 객체 리터널
axios
- axios 만 쓰는 것과 axios와 리액트 쿼리 뮤테이션을 같이 쓰는 차이
- try catch 문 밖으로 나온 건 오류 캐치가 되지 않는다.
- 비슷한 코드 / axios 인터셉트 api 찾아보기
비동기
- 실행되지 않는다면 비동기는 지울 것
api 연결
- 데이터를 보낼 때 하나씩 보내도록 하는 것보다 여러개를 보내게 할 것(한번에 가능한 일을 서버와 통신 10번을 하게 하는 것은 비효율적)
보안
- 환경 변수를 사용해서 보안을 지킬 것
- 통신 보안에 신경 쓸 수 있는 것들을 해야한다.
github 관리
- 커밋 컨벤션 따로 정의 : 작업 내역 확인에 이로움
- 리드미 이쁘게 적기
- jpr이랑 커밋 메세지
- 브랜치를 마스터 메인 피처로 나눠서 사용
백엔드와 커뮤니케이션
-
회의를 원활하게 하는 법
회의는 상대방을 설득하는 일
내 컨텍스트를 설명해서 설득을 못 시키면 테스트의 리스크가 커진다. -
플로우 차트를 잘 그리는 게 좋다.
소통을 잘 한다는 건 회의를 길게 갖자는 게 아니다. 애매한 걸 계속 확인해라
(소통을 잘 하는 게 일 2~3번 하는 걸 줄인다)
기타
-
eslint, pritter 적용
-
같은 라이브러리 두 개를 사용한 이유 -> 목적이 같다면 라이브러리는 하나로 통일
-
페이로드를 배열로 보낼 때 인덱스가 어떤 컬러인지 모름
-
요즘은 다들 잘하니까 도전적인 시도를 해라. 그래야 눈이 간다.
-
any 스크립트 덜 쓰기
-
주석을 쓰는 법 / 주석이 필요한 코드는 좋지 않다.
-
api 문서를 따로 만들지 않은 게 아쉽
-
오류가 났다면 어떤 코드가 오류였는 지 기록할 것
-
방어코드 한 번에 여러 요청이 들어올 때
-
챌린지 계획
만약 일주일이 주어진다면 2~3일은 챌린지에 투자하고 안된다. -
수정이 없으면 수정을 막을 수 있게 처리 할 수도 있다.(프론트에서)
