차별화 포인트, 개선점, 느낀점 등
차별화 포인트
협업 방식
•
1
•
함께 성장하려는 팀 프로젝트를 하려면 어떻게 해야할지 고민했다로 시작해 아래 내용 말하기
◦
목표, 지켜줬으면 하는 사항들 이야기
→ “진행 공유와 피드백”
▪
2
▪
(개발 시작) 페어 프로그래밍으로 공통 컴포넌트 작업: 컨벤션을 함께 체크하며 코드 작성, 공통 컴포넌트에 대한 이해도가 높아 이후 작업에서 수월하게 사용
▪
(매일) 데일리 스크럼: 수업 시작할 때와 마칠 때 10분 정도 작업 분배, 진행 상황 체크
▪
(매주) 스프린트 회고: KPT 방식을 활용해 현재 잘하고 있는 점, 부족한 점, 앞으로 시도해보고 싶은 점을 공유
▪
3
▪
(회고 예시 - 피그잼 캡쳐) : 문제를 해결한 과정을 기록, 내 걸로 만들고 싶다! 의견 → 트러블 슈팅 게시판을 만들어 함께 기록
▪
4
▪
(그외 - 사진 위주): 문서화(피그잼, 깃헙 위키, 프로젝트), 게더타운 활용
▪
5
⇒ 진행 상황 공유와 피드백 주고 받기를 활발하게 진행
▪
작업 능률이 높은 편
•
문제가 발생하면 함께 코드를 보며 문제 해결
•
한 가지 이슈 보통 하루~이틀 정도 걸려 완료 (현재 배포까지 진행한 상태)
•
코드 개선이 즉각적으로 이루어짐
•
적절한 작업 분배
•
처음에 페어 프로그래밍, 라이브쉐어 → 공통컴포넌트 페어 프로그래밍으로 팀원들이 분리해둔 컴포넌트에 대한 이해도가 높다는 걸 어필해도 좋을 거 같아!!
•
KPT 회고를 통해 나온 안건 실천 (실제로 한거 캡쳐)
•
스프린트 방식, 트러블 슈팅 기록, 깃헙 위키, 프로젝트, 이슈 활용, 게더 타운 활용
개발
•
react-hook-form (유효성 검사 및 form 제출)
구현 목적) react-hook-form을 적용하지 않고 폼을 구현할 때는 각 입력값을 관리해줄 state, 에러 메세지 state, 입력값과 연관된 유효성 검사 함수 선언 등을 작성하므로 코드와 로직이 복잡해진다. 따라서, react-hook-form을 도입하여 폼내 입력값 관리, 유효성 검사 관리, submit까지 편리하게 관리할 수 있도록 했다.
구현 방식) react-hook-form의 register 함수로 로그인, 회원가입, 상품 등록, 상품 수정, 프로필 설정 폼 내의 input들을 등록시키고, 각 input에 validation을 추가했습니다.
코드 설명) signupForm 코드 보여주기
•
무한스크롤(useIntersect)
구현 목적) 페이지네이션보다는 무한 스크롤 방식이 사용자들이 많은 피드를 보는데 편리할 것 같았기에 UX를 고려해 무한 스크롤 구현
구현 방식) intersection observer API로 무한 스크롤 구현, 컴포넌트에서 intersection observer API 관련 로직을 분리하고, 재사용하기 위해 커스텀 훅 (useIntersect)로 분리
코드 설명) useIntersect 코드, 홈페이지 보여주기
•
검색 페이지 디바운싱(useDebounce)
구현 목적) 사용자가 검색어를 입력할 때마다 이벤트가 발생해 API 서버에 요청을 보내게 되면 서버에 부하를 일으키고, 클라이언트에서는 API 응답 결과를 매번 렌더링해야 하기 때문에 성능 저하가 발생한다. 따라서, 성능적인 개선을 위해 구현함.
구현 방식) useDebounce 커스텀 훅을 분리해 검색 페이지 컴포넌트에서 호출
코드 설명) setTimeout 함수를 호출해 설정한 delay 값 만큼의 시간이 경과하면 검색어를 debouncedValue 상태 값에 저장하고, debouncedValue를 리턴한다. 그리고 useDebounce가 리턴한 값을 useEffect Hook이 감지하여 값이 바뀌면 검색 API를 요청하도록 했다.
useDebounce 코드, 검색 페이지 보여주기
•
apiController(axios 커스텀)
•
github pages 배포
개선점(개선해야할 점)
•
api 로직 분리
→ 각 컴포넌트 내에서 API 호출이 이루어지다 보니 코드가 길어지게 되고, 반복적으로 요청되는 호출을 재사용할 수 없어 필요성을 느낌
•
상태관리 (props drilling 개선)
→ 상태관리를 useState를 사용해서 하다 보니 컴포넌트를 사용할 때 props drilling의 depth가 깊어지게 되어 복잡성이 올라가게 되어 필요성을 느낌
•
렌더링 최적화, 이미지 스프라이트
→ 성능 개선
느낀점
1/5(목) 발표 피드백
•
앞으로의 계획 → 클린코드 워딩 삭제, 경직성을 낮추고, 유지보수를 고려해 API로직 분리
•
BDD와 코드 일관성의 연관성이 궁금해짐. BDD를 잘 모르는 사람에게도 친절하게 설명하도록 하기
•
무한 스크롤 시 상단으로 올리는 위젯 추가
•
깃허브 프로젝트도 잘 보여주면 좋을 듯!
