미리보기

Mock Data를 활용하여 작업 시간 차이 극복

• 원인 : API 작업이 아직 완료되지 않은 상태에서, 프론트엔드 개발이 진행되어야 했고, 이로 인해 API 응답을 기다리는 동안의 작업 공백이 발생

• 해결 방법

  1. API 명세서에 맞춰 서버의 응답값과 동일한 Mock Data를 생성하여, API 완료 전이라도 컴포넌트 개발과 테스트를 진행할 수 있도록 함

• 성과 : Mock Data를 활용하여 API 작업과 컴포넌트 개발을 병렬로 진행, 협업 속도가 개선되었고, 대기 시간 없이 개발 일정 단축

에코이코 유저 데이터 전역 상태 관리

• 원인 : 여러 컴포넌트에서 State & Props로 데이터를 전달하는 방식은 Props Drilling을 발생시켜 코드의 복잡도와 유지보수의 어려움

• 해결 방법

  1. 각 컴포넌트에서 공유해야 할 데이터를 분석하여, Recoil의 Atom을 사용해 전역 상태로 관리

• 성과 : 전역 상태 관리 도입으로 컴포넌트 간의 데이터 흐름이 단순화되고, 유저 데이터를 요청하는 API 호출 횟수가 4번 → 1번으로 감소

토큰이 담겨지는 쿠키의 보안 관리

• 원인 : 쿠키에 저장된 사용자 토큰이 XSS, CSRF, 쿠키 탈취 공격에 노출될 위험이 존재

• 해결 방법 → 쿠키가 가져와지지 않는 문제

  1. 로그인 시 서버로부터 받은 토큰을 AES 암호화하여 쿠키에 저장하고, 쿠키에 Secure 속성을 적용해 보안 강화

• 성과 : 민감한 정보를 암호화하여 보호하고, 쿠키 위조 및 탈취 방지와 함께 데이터 무결성을 보장

비동기 데이터의 상태 관리

• 원인 : 비동기 데이터 처리에서 에러, 로딩 상태, 리패칭 등의 상태를 State로 관리하여 코드가 복잡해지고 유지보수가 어려워짐

• 해결 방법

  1. TanStack Query를 도입해 로딩 & 에러 상태 , 리패칭 등을 간소화

• 성과 : 3가지의 비동기 데이터 상태 → TanStack Query의 옵션으로 단순화하고, 코드 유지보수와 확장성 개선

웹 사이트 성능 개선

• 원인 : 프로젝트가 고도화되면서 초기 로딩 시간이 길어져 사용자 이탈로 이어질 가능성이 높아짐

• 해결 방법 → 자세한 개선 과정 보기

  1. 이미지 Lazy Loading을 적용하여 사용자 화면에 보이는 사진만 로드하도록 개선

  2. React Lazy와 Suspense를 사용하여 chunk를 나눠 로딩 시간을 단축

• 성과 : 페이지 초기 로딩시간을 2.6초 → 1.1초까지 단축

좋아요 반영 시간 문제 개선

• 원인 : 사용자가 좋아요를 눌렀음에도 즉시 반영되지 않고, API 지연 시간만큼 기다려야 하는 문제 발생

• 해결 방법 → 자세한 개선 과정 보기

  1. TanStack Query의 낙관적 업데이트를 적용하여, 좋아요가 즉각적으로 반영되도록 개선

• 성과 : 좋아요 API의 0.6초 지연시간 → 실시간으로 반영되도록 개선하여 사용자 경험(UX)를 향상

레시피 공유 서비스 상태 관리

• 원인 : 서비스가 발전하고 데이터가 점점 많아짐에 따라, 데이터 관리가 복잡해지고 유지 보수에 어려움이 발생

• 해결 방법 → 데이터 관리 전략 보기

  1. Recoil을 사용해 전역적으로 관리해야 할 데이터와, State & Ref를 사용해 지역적으로 관리해야 할 데이터를 명확히 구분

  2. 마인드맵을 통해 데이터 흐름을 시각화하여 서비스 내의 데이터를 이해하고 관리

• 성과 : 불필요한 Props Drilling을 제거하고, 변경이 필요한 컴포넌트들만 리렌더링되도록 최적화하여 비용 절감과 유지보수성을 향상

지속적 배포(CD) 환경 구축

• 원인 : 서비스의 변경사항을 AWS에 지속적으로 반영하는 작업이 번거로움

• 해결 방법 → 자세한 CD 환경 구축 보기

  1. GitHub Actions를 사용하여 main 브랜치에 푸시할 때 자동으로 S3와 CloudFront에 변경 사항을 반영하도록 설정

• 성과 : 3단계 배포 프로세스를 자동화하여, 한 번의 push로 서비스의 변경사항이 즉시 반영되도록 하여 배포 효율성 및 안정성을 향상

AWS로 도메인 배포 & HTTPS 배포

• Amazon S3를 사용하여 정적 웹 사이트 호스팅

• CloudFront를 이용해 전 세계에 분산된 CDN 엣지에서 정적 파일을 서빙하고, 캐싱을 적용하여 로딩 속도를 최적화

• Route 53과 ACM을 사용하여 도메인 및 HTTPS 설정