7.20 항구로그 미니프로젝트

https://flatland.shop/

https://github.com/taehyunkim3/hhblog-team9-Front

GitHub - taehyunkim3/hhblog-team9-Front

React App

trouble shooting

[로그인, 회원가입 먹통] : 아이디 중복등으로 오류가 있는 경우, alert창으로 알려주고 새로고침하여 데이터를 reset시킴.

 

[회원가입 어려움] : 회원가입에 필요한 폼을 줄이는 대신, 그 폼을 수월하게 작성하기 위해 최대한 많은 정보를 실시간으로 제공(아이디 중복확인, 조건 성립 여부)

 

[회원가입 오류]: 백앤드와 프론드앤드의 정규식 규칙에서 차이가 있음. -> 직접 비교하면서 똑같거나, 프론트쪽이 조금더 엄격하게 바꿈.

 

[커스텀훅 분리 오류]: 커스텀훅으로 로직을 무작정 분리하다가 전체 사이트가 먹통됨. 해당 부분에 대해 천천히 하나씩 분리하면서 분석이 필요함.

 

[일부 브라우저 정렬 깨짐 문제] : 미디어 쿼리에서 FLEXBOX로( flex: 0 0 14%;) 와 같이 합이 100이 약간 안되게 해서 갯수를 3, 5, 7개로 맞췄으나, 브라우저마다 약간의 오차로 인해 7개가 6개가 되면서 모든 정렬이 틀어지는 문제 발생 -> GRID로(grid-template-columns: repeat(3, 1fr)) 갯수를 직접 지정하면서 갯수가 바뀌는 문제를 원천 차단함.

 

[컴포넌트 재활용 미흡] : 처음부터 어떤 버튼이 필요할지 계획을 하고 들어간게 아니라, 하나씩 만들면서 가져다 쓰거나, 새로 만들어서 쓰거나, 가져와서 조금 고쳐서 쓰는 식으로 진행하니 코드가 매우 길어졌음. 적어도 input창, 버튼, 레이아웃(중요)는 재활용이 가능하도록 모듈화 할 필요가 있었음.

 

 

 

피드백

서버도메인도 환경변수로 처리할 것

throw 로 에러 던져주지 말고 한곳에서 처리할것.

axios의 기본설정옵션->중복된 부분 모두 합치는등\ axios인스턴스 생성에 대해 공부할 것

파일업로드: 프로필과 책상이미지가 따로따로 업로드 되는데, 같이 업로드 되도록 해야함.(두개를 하나로 실어보내야)

요청응답의 비용은 큼

파일 있나 없나 살펴보는 에러처리에서 typeof object는 객체보다 더 큼(null과 배열까지 포함. )이렇게 하려면 좀더 좁게 해야함.

통신에러부분 비슷한 코드는 axios 인터셉터로 한번에 처리

리엑트쿼리->캐시된 데이터 활용시 쿼리 관리 중요(쿼리 캐시 관리법 )

 

질문

FE : 모듈화 잘하는 방법… 로직과 컴포넌트 모두… 정리 너무 어려워요.. 어떤 마음가짐을 가지고 만드시나요?

 

본 프로젝트에서 리엑트 쿼리를 사용할 이유가 있었는지?

 

토큰검증을 navbar에 내장했는데 이런건 어디에 두는게 좋을까요?

 

 

깨달은 점

박서윤님 김민규님 너무 수고 많으셨습니다.

 

조원들과 협업, 특히 백앤드분들과 협업에 필요한 의사소통의 중요성과, api 문서, 와이어프레임등이 왜 중요한지 몸으로 깨달을 수 있는 시간이었다.

 

svg파일을 좀더 자유롭게 다룰 수 있게 되었다.