정동환

프로젝트 세팅

1. 브랜치 전략

• Github flow를 이용했고 feature브랜치에서 main branch로 머지할때는 1명이상의 코드 리뷰를 받아야 머지할 수 있도록 했다.

• 이를 위해 github에서 main branch 보호룰을 적용했고 추가로 pr에 코드리뷰를 반영한 커밋이 추가되면 approve가 초기화되고 다시 코드리뷰를 받을 수 있도록 설정하였다.

• 팀 프로젝트를 처음하는 팀원들이 있어서 이슈 생성 → 이슈에서 브랜치 생성 → 작업후 pr하는 워크 플로우를 진행하는 작업 설명을 문서화해서 팀원들에게 공유했다

2. husky, lint-staged, commitizen, commitlint를 이용한 Commit, Push 검사

• husky와 lint-staged를 이용해 eslint를 통과한 코드만 commit이 가능하도록 하였다. 이로 인해 팀원들이 코드 리뷰에 사용하는 시간을 줄일 수 있었다

• 팀에서 정한 commit convention을 편하게 지킬 수 있도록 commitizen을 사용해 커밋 템플릿을 만들었다. 하지만 윈도우에서 commitizen 실행이 실패하는 이슈가 있어서 commitlint를 이용해 커밋 컨벤션에 맞는 커밋만 작성할 수 있도록 설정했다.

• 또한 로컬 브랜치에서 원격 브랜치에 push하기 전에 build test를 진행하도록 설정해서 빌드 테스트를 통과한 코드만 push할 수 있도록 했다.

React Router

권한 이슈

• 회원가입이나 로그인을 성공하면 access token은 로컬 스토리지에 저장하고 user는 context에 저장했다

• 그리고 app이 처음 생성될 때 로컬스토리지에 저장된 access token을 이용해 로그인된 user를 fetch받도록 진행했다.

• 이때 궁금했던 게 게시글 작성과 같은 권한이 있는 페이지로 갈때마다 로그인된 유저를 체크하는 api를 호출하는게 맞는 건가 아니면 기존 구현대로 app이 처음 작동될 때 user를 가져오는게 맞는 건지 궁금했다.

• 이를 실험하기 위해 권한 없이 글 작성 api를 사용하면 어떻게 되는지 postman을 이용해 찔러보았다.

• 그 결과 권한이 없다는 뜻의 401 에러를 응답받았고 권한이 있는 페이지로 이동할때마다 checkuser api를 사용하지 않아도 서버에서 오는 응답을 이용해 에러핸들링하면 되겠다는 판단을 했다.

• 그리고 권한이 있는 페이지로 이동할때에는 context에 유저가 저장되어 있는지 확인하고 만약 저장되어 있지 않다면 로그인 페이지로 이동하도록 설계할 계획이다.

context → react query 마이그레이션

회원가입 기능

• react hook form을 이용해서 validation 진행

• 로딩중에는 폼의 회원가입 버튼만 로딩화면을 보여준다

• form을 제출할때 react query의 useMutation.mutate를 호출했고 성곰및 에러는 onSuccess, onError를 이용해 해결했다

고민중인 이슈

• 그런데 axiosError가 발생하는 이슈를 어떻게 해결할지 모르겠다

• 또한 form을 제출할때 form 수정을 막기 위해 form 전체에서 로딩화면을 보여줘야 하는가?

고민 이후 수정한 이슈

1. 이메일 validation

• 회원가입을 위해 이메일을 필수로 입력받아야 한다.

• type이 email인 input 태그를 통해 email을 입력받고 react hook form을 이용해 정규식을 이용한 강한 유효성 검사를 진행하고 있다

• 문제는 입력받은 email이 type이 email인 input태그에서 진행하는 약한 유효성 검사를 통과하지 못할때 우리가 설정한 error 메시지를 보여주는 게 아니라 html에서 제공한 결과를 보여주는 것이다.

• 약한 유효성 검사를 통과하지 못하면 react hook form의 정규식 검사를 진행하지 못하고 html에서 바로 결과를 보여주기 때문에 다른 input들에서 보여주는 메시지와의 통일성을 해친다.

• 이를 해결하기 위해서는 email을 입력받는 이메일의 type을 text로 하는게 맞다

• 하지만 시맨틱 관점에서는 type email을 사용하는 게 맞는 것 같다.

• 고민 끝에 유저에게 통일성있는 에러 메시지를 보여주는 게 맞는 것 같아서 email을 입력받는 input의 type을 text로 변경하기로 했다.

비밀번호와 비밀번호 확인 onChange모드로 검사하기

알림 기능

스토리북

React query 키 관리가 잘 안된 것 같다 - 다음 플젝때는 쿼리 키 팩토리를 만들어보자

한 것

1. 프로젝트 초기 세팅
1. 깃허브: 깃허브 프로젝트, 이슈템플릿, pr 템플릿, 브랜치 보호 룰 - 문서화해 팀에 공유
2. Eslint, prettier, husky, lint-staged, import-order 적용
3. commitlint로 커밋 메시지 검사하고 commitizen으로 커밋 템플릿 자동화

2. 회원가입 기능
1. React hook form을 이용해 Validation
2. 폼 제출시 React Query의 useMutation사용, onSuccess, onError 이용해 에러 관리

3. 프로필 수정 기능
1. 위와 같음

4. 알림 기능
1. react query로 이용한 polling
2. 읽은 알림과 안 읽은 알림을 ui로 보여줬다
3. 알림 읽음 처리 api가 전체 읽음 밖에 없었다
1. 알림 페이지에 들어오면 전체 읽음 처리
2. 같은 페이지에서 리패치 받을 때 읽지 않은 알림이 읽은 알림 ui로 변하는 문제 발생
4. 이를 해결하기 위해 알림 페이지에서 나갈때 에러

5. 다른 사람들 도와준 것
1. 낙관적 업데이트 적용 도와주기?
1. 팀원들이 좋아요, 팔로우 등의 작업시 ui적 피드백이 느린 것 같다고 문제 제기
2. react query를 이용해서 낙관적 업데이트를 적용하기로 함
3. 기존 Context로 저장하던 유저 정보 react query로 마이그레이션
2. 이미지 리페인팅 수정 - 이미지가 로드 되면 이미지 크기때문에 리페인팅 되는 이슈가 있었다
1. 이미지 크기 고정해서 해결

1. 얻어간 것

1. husky, lint-staged, commitlint, commitizen으로 팀들이 편하게 일할 수 있는 시스템을 만드는 방법

2. React query 낙관적 업데이트

3. React Router의 eror element가 error boundary역할을 하는지 처음 알았다

4. 태스크 관리: 스프린트 단위로 매기다가 태스크 단위로 매기니까 태스크 현황과 밀린 태스크 도와주는 것이 좋았다

5. Storybook 크로마틱에 배포 + ui 테스팅

2. 아쉬운것

1. 공통 컴포넌트를 만들 때 너무 ui 컴포넌트로만 만들려고 했다

2. 알림 페이지에 너무 매달렸던 것 같다 - 팀원들이 해줄때까지 기다리면서 다른 것 하고 있었음
1. 이거 때문에 채팅 기능도 못한 것 같다

3. 이슈 관리가 잘 안된 것같다. 깃허브 이슈에 있는 체크박스와 status 업데이트 안함 - 서로의 상태를 추적하기 어려움
1. 팀원들한테 하자고 할 수 있는데 말할 수 있는데 나도 지키기 귀찮아서 말 안함

4. PWA - 시간 없어서 미룸, service worker 초보

5. 다른 사람들 더 적극적으로 도와주지 않은것
1. 다른 사람이 물어볼때만 도와주고 먼저 물어보려 하지 않았다

6. Suspense, ErrorBoundary에 대해 초반부터 설정했어야 했다
1. 나중에 적용하려고 하니 다른 작업들에 우선순위가 밀려서 미뤄지는 중

궁금한점

라인

• 라인은 모바일 서비스가 많은 것 같은데 프론트엔드 개발자들은 어떤 것들을 하나요?

• 라인에서 좋아할 만한 기술경험이 있을까요?
• 지금 생각나는건 i18과 같은 다국적 서비스나 웹소켓, SSE와 같은 통신입니다

• 라인은 cs를 주로 물어본다고 유명한데 그래서 멘토님이 Error에 대해 탐구해보라고 한건가요?

• 기술 스택 얇고 넓게 공부하는건 안좋다곤 하지만 그래도 후임으로 들어왔을때 이 정돈 해야지 - 라는 기준이 있나요?

개인 고민

• 개발 속도가 느린 것 같은데 개발 속도를 늘리는건 프로젝트를 많이 하는 방법말곤 없나요?

• 개발을 잘해서 당근 갈 정도로 잘하지도 않고 코테를 잘해서 대기업을 뚫을 정도는 아니다. 그래서 항상 뭐에 집중할 지 몰라서 갈피를 못잡는것 같다. 둘다 해야하는건 아는데 멀티태스킹이 잘 안되서 이도저도 안되는 느낌이다. 조언이 필요합니다

이력서