김희태

· [문제] 결제 과정에 요구사항 변동이 생겨도 유연한 수정이 가능한 방법 필요

· Toss의 퍼널 패턴 개념을 활용하여 결제 프로세스 구축

· 결제 과정에 추가 변동이 생겨도 유연한 결제 프로세스로 유지보수가 용이해짐

· [문제] 무한 스크롤로 인한 상품 목록 로드 시 마운트된 상품 리렌더링 문제 발견

· React Dev Tools를 활용하여 리렌더링 병목구간 확인

· react 메모이제이션 기법을 사용하여 리렌더링 발생하는 컴포넌트 문제 해결

· 컴포넌트 렌더링 속도 50% 개선 / 22.4ms → 11.6ms

· [문제] 프로젝트 빌드 시간이 오래 거리며, 번들 사이즈가 큰 문제 발견

· Lighthouse Treemap을 통해 번들링된 큰 사이즈 라이브러리 확인

· 트리 쉐이킹 기법을 통해 필요한 불필요한 모듈 제거

· 코드 스플리팅 기법을 통해 큰 라이브러리 청크 파일 사이즈 최적화

· 빌드 크기 73% 개선 / 1,074KB → 289KB

· 빌드 시간 94% 개선 / 1m 46s → 5.57s

· [문제] 사이트 접속 시 최초 렌더링 까지 시간이 오래 걸리는 문제 발견

· Lighthouse을 통해 LCP 시간 단축 필요성 및 개선 항목 확인

· 이미지 최적화, 라우터 페이지 코드 분할 및 지연 로딩으로 LCP 속도 개선

· LCP 29% 개선 / 12.4s → 8.7s / 프로덕션 : 1.4s

· [문제] 쿠키나 localStorage로 사용자 인증 토큰 저장 시 XSS 공격 보안 문제 발견

· window.localStorage 와 같이 스트립트로 쉽게 접근할 수 있는 문제 확인

· 세션을 통한 인증 방법은 서버에 리소스 부담을 주기 때문에 JWT을 사용하여 보안 쿠키에 저장

· 더 이상 스크립트를 통한 인증 토큰에 접근 불가

· [문제] 게시 글 수정 요청 API가 다른 Origin에서도 호출이 가능한 문제 발견

· 서버에서 승인된 Origin으로만 API 요청이 가능하도록 CORS Origin 설정

· CORS Credentials 방식으로 보안 토큰을 함께 서버로 전송하여 무단 요청 방지

· 지정된 Origin 클라이언트에서 인증 헤더 토큰을 가진 경우에만 API 요청 가능

· [문제] 로딩 컴포넌트 마운트 시 레이아웃이 요소 뒤로 겹치는 문제 발견

· z-index의 값을 높여 주는 방법으로는 코드의 복잡성과 유지보수성이 저하됨

· React Portal을 사용하여 새로운 루트 노드에 마운트하여 레아아웃 복잡성 제거

· [문제] 포스 최초 접속 시 렌더링 시간이 오래 걸리는 문제 발견

· 최초 로드 시 모든 페이지 컴포넌트를 다운로드하여 blocking 시간이 길어짐 확인

· React 18의 lazy, Suspense를 통해 라우터 기준 코드 분할하여 렌더링 시간 개선

· 리소스 Finish Time 31% 개선 / 4.12s → 2.82s

· Lighthouse Performance 점수 43% 개선 / 60 → 86

· [문제] 영화 데이터 조회 비동기 요청이 직렬로 처리되는 문제 발견

· react query + Suspense 사용 시 직렬로 water fall 호출이 진행됨을 Network 탭에서 확인

· 비동기 요청을 병렬로 처리하기 위해 따로 자식 컴포넌트로 분리하여 API 요청

· useQueries를 통해 Suspense 병렬 처리가 가능하도록 개선 (react-query ^4.5)

· [문제] 사용자가 콘텐츠를 보기 까지 흰 화면이 오랫동안 보여지는 문제 발견

· Chrome Network 탭에서 모든 페이지 리소스가 다운로드 진행됨을 확인

· 코드 분할을 통해 Dynamic import하여 필요한 페이지의 컴포넌트 및 파일 다운로드 진행

· Lighthouse Performance 점수 93 / LCP 시간 1.4s

· [문제] 마운트된 영화 목록 컴포넌트가 목록 개수만큼 리렌더링 되는 문제 발견

· 컴포넌트에 선언된 console.count 를 통해 불필요한 리렌더링이 일어나는 컴포넌트 확인

· 고차 컴포넌트 react memo를 사용하여 Virtual DOM에 이전 DOM을 메모이제이션

· 메모리는 더 사용하지만 렌더링 성능은 개선

· 컴포넌트 렌더링 속도 62% 개선 / 13.2ms → 4.9ms

· 100만건 이상 대량부동산 데이터를 50개의 고유번호로 필터링

· 영업점 화면에서 10초 이상 소요되는 중복 데이터 확인 작업을 6초 이내로 개선

· 차세대 프로젝트 시작을 준비하기 위한 선도개발을 진행 및 I/O 테스트 및 가이드 문서 제공

· 은행 내부 인터페이스를 통한 파일 암/복호화 모듈과 공개키 협의