미리보기

[팀 구성] : 프론트엔드 2 / 백엔드 1

• 컴포넌트의 재사용성과 유지보수의 용이성을 위해 Atomic Design 패턴 적용
• 배포시간 단축과 동일한 배포 환경 보장을 위해 Docker + github-actions를 사용해 CI/CD 자동화
• 예기치못한 에러 발생으로인한 사용자 경험 저하를 막기위해 ErrorBoundary 적용
  • 해당 api의 책임만을 가지도록 <ApiErrorBoundary /> 컴포넌트로 감싸주고, 처리하지못하는 에러는 다시 throw해서 최상위
    <GlobalErrorBoundary />에서 캐치하도록 구현
• 의도한 상황에서 새로고침과 뒤로가기 시, Confirm Modal을 띄우고 재사용성을 위해 useRouteControl + useModal 훅 구현
  • 새로고침 감지를 위해 window.addEventListener('beforeunload') 적용
    뒤로가기 시, 취소할 경우 history stack이 삭제되는 것을 보완하기 위해 window.history.pushState로 history stack 추가
• mixin과 variables로 공통 스타일링 요소를 쉽게 사용하기 위해 SCSS 사용
• 실시간으로 유저의 답변에 대한 피드백을 주기 위해 chatGPT 사용
• 예기치 못한 에러를 사전에 방지하고 앱의 안정성을 높이기 위해 Jest를 사용한 TDD 방식 개발 적용

[성과]

• Atomic Design 패턴 적용, 재사용성을 고려한 Hook 설계 등 추후 코드의 유지보수와 앱의 최적화를 위해 심도있게 고민해볼 수 있는 계기가 되었음
• github-actions을 이용한 CI/CD 자동화 구현으로 DX를 상당히 높일 수 있었음
• Jest 를 사용한 테스트 주도 개발로 테스트 로직 작성 조금 더 익숙해 질 수 있었음

[프론트엔드 담당역할] : 앱 UI 스타일링 및 전반적인 기능 개발

• 검색엔진 SEO 최적화 및 빠른 로딩을 위해 Next.js + ReactQuery(hydrate, prefetchQuery)를 사용
• 랜딩페이지의 섬세한 스크롤 애니메이션을 위해 AOS 라이브러리 대신, 스크롤위치 계산을 위한 순수 JS 함수를 만들어 사용, 랜딩페이지 전체 제작
• Redux에 비해 boilerplate 코드가 적으면서 손쉬운 전역 상태관리를 위해 Recoil을 도입
• 테스팅을 위해 백엔드 서버 배포 전, MSW 라이브러리를 공부해서 팀원들에게 사용법을 공유하고 프로젝트에 도입
• 앱의 배포 시 번들사이즈를 줄이고 최적화하기 위해 next-analyze-bundler 를 사용한 분석
  • next.js 13버전의 swc 컴파일러를 이용한 next.config.js - swcMinify: true 세팅
  • package.json - "sideEffects": false 세팅으로 tree shaking
• 앱의 identity 및 보안을 위해 domain 구입 및 AWS EC2 최적화 세팅
  • nginx reverse-proxy 설정으로 보안성을 높임
  • cloudFlare를 이용한 https 설정
  • og 데이터 세팅으로 앱 공유 시 접근성을 높임
• UI 스타일링의 로직 구현시간을 절약하기 위해 Headless UI 와 tailwindCSS를 사용, 세부 스타일링은 Emotion 라이브러리로 구현
• 서비스의 접근성과 편리성을 높이기위해 github OAuth 2.0을 사용
  로그인 시 서버에서 받은 JWT 토큰을 Next.js의 getInitialProps로 cookie에 저장, 페이지 이동시 로그인 유지되도록 구현하는 과정에서 SameSite CORS 에러 발생
  • → 기존 passport 로직에서 top-level navigation인 Link 태그 방식으로 변경하고 추가로 서버에서 프론트 host를 CORS 허용하도록 설정해서 해결
• 프로젝트 정보 공유 페이지에서 기록한 정보의 수정을 용이하게 하기위해 HTML- contentEditable 속성 과 라이브러리를 사용해, 블럭단위의 드래그가 가능하도록 구현
• 빠른 정보 공유와 소통을 위해 Socket.io 를 사용한 실시간 채팅 구현
  • 코드와 같이 기본 텍스트 외에 다양한 정보공유를 위해 react-markdown 라이브러리 사용
• 장기적인 관점으로 익숙하지만 비효율적인 방법 대신 새로운 기술스택을 배워 팀원에게 공유
  • 기존 백엔드 vercel 배포 소요시간 : 5분 대 → Docker-compose 배포 : 1분 대
  • 기존 무거운 node_modules의 yarn → yarn-berry(pnpMode) 도입으로 용량 1/3 수준으로 줄임

[팀 구성] : 프론트엔드 5 / 백엔드 2

[프론트엔드 담당역할] : 로그인 & 로그아웃 / 내가 쓴 글 목록 & 내가 쓴 글 상세 페이지 및 서비스 기획

• [Styled-Components]

  • 회원 / 비회원 로그인 페이지 UI
  • 구글 로그인 커스텀 버튼, 로그아웃 버튼
  • 내가 쓴 글 전체 목록 페이지 UI
  • 내가 쓴 글 상세 페이지 UI
  • 신고 modal UI

• [기능구현]
  〔로그인〕

  • OAuth 2.0 google 로그인으로 사용자에게서 받는 정보 최소화, 서비스에대한 사용자 접근성 ↑ : @react-oauth/google 라이브러리 사용
  • JWT 토큰을 Cookie에 저장해서 회원만 이용가능한 컨텐츠 클릭시 검증 → 비회원일시 로그인 유도

  〔내가 쓴 글〕

  • 전체 목록에서 개별 글 마다 아직 확인하지않은 칭찬이 있다면 → 초록색 테두리로 표시, 읽으면 회색 테두리로 초기화 : 목록 조회 API response로 받은 isClicked 속성을 체크
  • 받은 칭찬 개수를 라벨로 표시 직관적인 확인이 가능하도록 구현 : " response의 받은 칭찬.length를 이용
  • 별점 평가 : form & input[type='radio'] , e.currentTarget으로 데이터 추출 후 API 요청
  • 북마크 : props로 받아온 해당 칭찬의 ID 값을 가지고 클릭 시 API 요청
  • 신고 : selectBox의 신고 타입과 textarea로 받은 신고 사유, 해당 칭찬 ID로 API 요청 → 신고 후 ::before 를 사용해 블러처리

[성과]

• repo를 나눠 front/back 따로 개발 시 마주칠 수 있는 악명높은 CORS 에러를 해결했던 소중한 경험
• 첫 React, TypeScript를 활용한 프로젝트로 앞으로의 개발 주요 스택을 미리 경험해볼 수 있었음