원티드 프리온보딩 Day 01

프리온보딩 코스에서 가장 중요한 것은 동료 학습 과 케이스 스터디 입니다.
누군가에게 내가 아는 내용을 설명하는 것이 지식 습득의 가장 빠른 길 입니다.
항상 서로 배려하며 동료들과 협력하여 교학상장(敎學相長)을 이뤄냅시다-!

오늘은 팀원들과 자기소개를 하고 팀장을 정했다. 멘토님 코드를 봤냐고 이야기하다가 서로의 코드 이야기를 하였다. 로그인해서 유저 정보 중복 확인을 구현하는 방법만해도 다양했다. 코드리뷰를 하고 코드 리팩토링에 대해서 이야기 하기로 하였다.

우선 혜림님은 면접이 있으셔서 먼저 코드리뷰를 하고 면접을 다녀오시기로 하였다.

혜림님

• ref를 사용하기 어려워서 useDebounce hook 사용
• pageOffset window 사용해서 헤더 숨김
• 구글링을 정말 잘하신다....
• 데이터를 feed와 user로 따로 따로 구현
• 리다이렉트 맵 돌림 (..?)
• userData {auth : false} 인 상태면 유저 데이터가 있는지 없는지 확인
• 이 유저 데이터를 가져올 때는 recoil 사용
• replace는 react Router Dom에 있는 기능으로 새로고침 해주는 기능
  • 로그인할 때는 replace를 거의 씀
  • state를 담아서 보내주면 새로고침을 한번 해서 보내줌
• feed list를 불러와서 뿌려준다.
  • 한번에 보내면 문제가 될 수 있어서 props로 데이터를 전달해줌
• useAuth
• lodash
• fakeAuth 사용 signIn 할 때 시간이 걸리게 구현
• image 컴포넌트 빼서 setLoading 해주고 onLoad 메서드? 사용
  • style 부분에서 loading true 일 때 display none 처리

이제 점심 시간을 이용해 다른 분들의 깃허브 레파지토리로 코드를 보고 다시 모이기로 하였다.
우선 코드도 코드지만 다른 분들은 리드미를 엄청 자세하고 꼼꼼하게 작성하셨다.. 대단하다고 생각했다. 사용한 기술 스택부터 시작해서 폴더구조, 기능 시연 gif 및 동영상은 기본이고 과제를 하면서 막혔던 부분과 해결과정을 코드의 링크와 함께 작성하였다. 마지막으로 보완해야하는 부분까지 작성하신 것을 보고 나의 리드미가 부끄럽게 느껴졌다.....ㅎ 같은 과제를 하더라도 배운 것을 기록해놓는 습관은 항상 중요한 것 같다. 기존에 올라가 있던 레파지토리의 리드미도 자세하게 작성해봐야겠다.

승연님

• replace true로 하면 경로가 바뀌게 된다

• lazyloading 처리하기 위해 hook을 따로 빼줌

• feedData , useList 하드코딩

• token이 존재한다면 페이지 이동

• 이벤트핸들러에 콜백함수 사용해서 hook 이용

• context api 사용

• api -> 데이터 받아옴

• fetch 비동기 처리가 어려워서 suspender 비동기 처리

  • 기존에는 useState 나 useEffect 사용했었는데
  • 그 대신 suspense 사용해서 로딩중에는 fallback 을 구현함

• regex - email, pw 넣어줌

• 컴파운드 컴포넌트 사용위해서 input field data 따로 빼줌 (재사용 위해)

• 에러 바운더리 -> 비동기 처리를 못한다

  • try -catch를 모두 에러 바운더리에서 진행
  • rejectedFallback = [({error})=>(<div>에러</div>)]
  • 경로가 잘못됐을 경우 등에 화면으로 띄워줌

• route 기반 코드 스플리팅

  • 현재 사용자가 들어온 페이지만 비동기적으로 해당 페이지 로딩
  • 번들 최적화

• 로그인 페이지

  • 로그인 페이지 form 사용
  • 베이스 컴포넌트 이용

• 선언적으로 이용한다 - 다른 곳에서 사용할 수 있으므로 해당 로직을 이해할 필요 없다

• 로딩 될 때 로딩 스피너 있는 컴포넌트 넣어줌

• 레이지-로딩 구현 - 뷰포트 안에 들어왔을 때 이미지 로딩

  • 뷰포트 안에 들어왔을 때 훅 1 개
  • 뷰포트 안에 들어오기 전에는 회색 이미지를 받아온 이미지로 변경해주는 훅
  • obsever 사용

• 새로운 것을 많이 도입하시고 도전하셨다.
• 폴더 구조를 잘 나누신 점
• 글로벌 레이아웃
• 로그인 중복 점검 할 때 아이디를 하드코딩 한 이유
• 여러 훅들을 다양하게 사용하심
• 컴포넌트들을 기능별로 빼서 사용함
• 레이지-로딩 구현

수빈님

• image가 떠야 다른 컴포넌트가 떠야 하는 부분이 어려웠다
  • style로 처리
• useRef
• onLoad
• 댓글 한글 누르면 두번 실행 되는 현상 때문에 e.nativeEvent.isComposing 사용
• scss 사용
  • 가독성에 좋음
• 이메일 정보 값은 localstorage로 보냄
• 배포 완료

상지님

• 폴더구조
• 추가적으로 구현한 부분
  - 더보기, 댓글 삭제 등..
• 로그인 로직이 자세해서 좋았다
• onFocus, onBlur 사용해서 사용자 배려 ㅎㅎ
• header - 로그인 로그아웃 버튼 토글
• feed - 데이터 props로 받아옴 (레이아웃처럼)
• 시맨틱 태그 사용
• 이미지 레이지-로딩
• object-fit : cover;

---

이제 팀원들과 사전과제 리팩토링을 시작하였다. 새로운 git Organization을 만들어서 진행하기로 하였다. 팀플이다 보니 commit, issue, branch 템플릿 및 규칙 등 정해야 할 것이 많았다. 하지만 앞으로 계속 사용해야 하는 규칙들이기 때문에 처음에 잘 정해놓는 것이 좋다고 생각한다.

우리는 수빈님의 코드로 함께 리팩토링을 진행하기로 하였다.
수빈님의 코드가 깔끔해서 다른 분들도 알아보기 쉬웠고 styled-component 말고 scss를 사용해서 가독성이 좋다고 판단했기 때문이다.
팀장님인 상지님의 노션 계정으로 팀 노션을 하나 만들어서 회의록도 정리 하였다.
회의는 꽤 길었다.
앞으로 한달 간 필요하게 될 커밋, 이슈, 코드 등 컨벤션들을 정하였고 작업 전 일단 공통적으로 디렉토리 구조를 회의하였다. 그 후 어떤 부분을 보완해야 할지, 어떻게 보완할지 그리고 누가 어떤 부분을 맡을지 등을 정했다.

우선 보완해야 할 부분으로는

  1. 헤더를 GNB로 구현하기 
  2. 코멘트 컴포넌트 나누기 
  3. image lazy loading 구현하기 
  4. 로그인 정보 전역 상태관리 (recoil 또는 useContext) 
  5. 로그인 로그아웃 콜백함수 useAuth Hook 분리 

정도 였다.

나머지 부분은 정했는데 로그인 전역상태 관리 부분에 대해 회의를 꽤 길게 하였다. 우선 짧은 시간내에 구현할 수 있는 context API를 사용하기로 하였고 context 파일을 하나 만들어서 데이터를 관리하기로 하였다. 사실 이번 프로젝트는 그리 크지 않다보니 간단하게 리팩토링을 끝내고 기능을 더 추가했으면 하는 바램이었는데 나의 의견과 다른 방향으로 흘러가는 것 같아서 조금은 아쉬웠다. 하지만 팀원들이 적극적이고 기록을 잘하시는 터라 너무 든든했고 제대로 된 협업을 하는 느낌이 들었다. 또한 이전 팀플을 하면서는 해보지 못했던 이슈 라벨이나 클린 코드를 작성하기 위한 코딩 컨벤션 등 여러가지 시도를 많이 하고 있어서 배워가는 것이 많은 팀플이 될 것 같다.
앞으로가 더 기대된다!