🤩 서비스 소개

• 개발자를 위한 AI 북마크 비서

• 서비스 이름 Devook은 Dev와 hook/book의 합성어로, 유저들이 추가(hook) 개발 관련 북마크들이 모여 개발자들을 위한 하나의 책(book)이 된다는 의미를 가지고 있습니다.

• Devook은 북마크 크롬 확장 프로그램과 웹앱, 모바일앱을 지원합니다.

• 주요 기능

  

  

🔑 핵심 기능

1. 북마크 자동 분류

   Devook은 유저가 북마크한 글을 파악해 자동으로 카테고리를 부여합니다. 유저는 북마크한 글들을 따로 분류할 필요 없이, 카테고리별로 북마크를 쉽게 필터링하여 볼 수 있습니다.

2. 읽기 TODO

   유저는 읽기 관리 페이지에서 읽지 않은 북마크만 확인할 수 있고, 체크박스 UI를 통해 읽었는지 여부를 입력할 수 있습니다.

3. 읽기 알림

   Devook은 읽지 않은 북마크가 있을 때 주기적으로 알림을 보내 읽기를 유도합니다. 또한 북마크마다 읽기 기한을 설정할 수 있어, 꼭 읽고 싶은 글을 놓치지 않고 읽을 수 있습니다.

👩‍👩‍👧‍👧 팀원 구성

• FE 개발자 2명 (본인 포함)
• BE 개발자 2명

🛠 기술 스택

TypeScript React React Query styled-components ESLint Prettier Cypress Storybook AWS Amplify Flutter

🪄 기여한 부분

[1] 프로젝트 관리

• 팀 노션 구성, 팀 규칙 작성

  팀 규칙

• 깃헙 issue, pull request 템플릿 생성

• 깃헙 프로젝트 칸반보드 생성

[2] 코드 리뷰

• 모든 pull request마다 상호 코드리뷰 진행 👀 자세히 보기

  코드리뷰 예시

[3] 테스트 자동화

• Cypress 테스트 환경 설정
• Cypress E2E 테스트 코드 작성 👀 자세히 보기
• Github Action을 이용해, CI 구성
  • 코드가 push될 때마다 Cypress E2E 테스트를 자동 실행하도록 설정

[4] 배포 자동화

• AWS Amplify 배포 환경 설정

• 프로덕션 CD 설정

  : main 브랜치에 push될 때마다 변경 사항이 프로덕션 환경에 자동 배포되도록 설정

• web preview 설정

  • pull request를 열 때마다 pr-*.devook.com에 변경 사항을 자동으로 배포하여, 코드 merge 전 미리 구현한 기능을 확인할 수 있게 설정

[5] 기능 구현, 로직 개선

1. 로그인 구현

   • OAuth + JWT

2. GNB prefetch 기능 추가 👀 PR

   : react-query의 prefetch를 이용해, 네비게이션 바 아이템에 마우스를 올렸을 때 해당 페이지에 필요한 리스트 데이터를 prefetch하도록 설정

3. 북마크 추가 기능 구현 👀 PR

   : react-query의 mutation을 이용해, 포스트를 북마크 목록에 추가하는 요청에 optimistic update 적용

4. 북마크 생성, 삭제 로직 개선 👀 PR

   : react-query의 mutation을 이용해, 북마크 생성, 삭제 요청 성공시 갱신된 데이터를 refetch하도록 설정

5. 읽기 기한 설정 기능 구현 👀 PR

   : react-query의 mutation을 이용해, 북마크 읽기 기한 설정 성공시 갱신된 데이터를 refetch하도록 설정

6. Button 디자인 시스템 추가 👀 PR

   : 공용 컴포넌트 Button의 디자인 시스템을 구축하고, 이를 Storybook에서 확인할 수 있도록 설정

[6] 최적화

• React.memo, useCallback을 이용해 컴포넌트 렌더링 최적화 👀 PR
• 반응형 디자인 적용 - 모바일, 태블릿, PC 환경 고려

💚 경험과 성장

개발

• CSS 미디어 쿼리를 이용해 모바일, 태블릿, 데스크탑 환경을 고려한 반응형 디자인을 구현했습니다.
• 인증 방식에 대해 공부한 후, 토큰 방식을 선택해 로그인을 구현했습니다.
• CORS 정책과 관련 에러 해결 방법에 대해 공부했습니다.
• 프론트엔드 테스트 종류에 대해 공부하고, 그 중 현재 상황에 가장 도움이 될 것 같은 E2E테스트를 Cypress를 활용해 도입했습니다.
• 테스트와 배포를 자동화해, 변경된 코드가 프로덕션에 매끄럽게 통합될 수 있도록 하였습니다.
• React Query 사용법에 대해 공부하고, 이를 이용해 server state를 관리했습니다. optimistic update와 prefetch 기능을 이용해 매끄러운 UX를 구현하였습니다.

협업

• 상호 코드 리뷰를 통해 팀원간 시너지를 느낄 수 있었습니다. 리뷰를 위해 더 좋은 코드에 대해 고민하게 되고, 개선 근거에 대해 더 공부하게 되어 혼자 서비스의 프론트엔드를 구현할 때보다 더욱 성장할 수 있었습니다.