💪🏻 카테부 부하 테스트 토너먼트 대회 - 최적화

앞으로 꾸준한 운동을!!!

작심삼일..

이면 3일마다의 결심을

---

💪🏻 최적화

백엔드 : Redis Adapter 구현을 위한 단계별 계획 / 어스틴

1단계:

기본 Redis 설정 (2-3시간)

Redis 서버 설치

Socket.IO Redis Adapter 연결

기본적인 에러 핸들링

간단한 연결 테스트

 

2단계:

Redis Sentinel 구성 (3-4시간)

Master-Slave 구조 설정 (2대)

Sentinel 노드 1대 추가

자동 페일오버 설정 페일오버 테스트

 

3단계:

안정성 보완 (1-2시간)

재연결 메커니즘 구현

기본적인 메모리 제한 설정

 

클라우드  / 소피아 누나

route53 (도메인) -> alb -> front(??대) -(nginx) -> backend(??대)

로드밸런서로 서버 연결 작업

테스트 서버 추가하고 nginx 연결작업 진행

서버 공통 설치 스크립트 작성 및 CORS 문제 수정 (시간이 된다면 정적 콘텐츠는 서버대신 cdn s3 버킷연결)

cloudwatch 전체서버 확인

 

프론트엔드 최적화

React 컴포넌트 메모이제이션 적용 (useMemo, useCallback) ✅
무한 스크롤 구현으로 초기 로딩 속도 개선 
이미지 lazy loading 적용 
웹소켓 연결 상태 관리 개선  ✅
디바운싱/쓰로틀링 적용
React.lazy와 Suspense를 활용한 코드 스플리팅 (lazy loading) ✅

 

프론트엔드 문제

.chat-messages 셀렉터 타임아웃
채팅방 UI 컴포넌트가 제때 로드되지 않는 문제
대량의 동시 접속자가 있을 때 프론트엔드 렌더링 성능 이슈
'Load-Test' 텍스트를 찾지 못하는 문제
채팅방 목록 화면에서 특정 방을 찾지 못하는 UI 렌더링 문제
대량의 채팅방 목록을 효율적으로 표시하지 못하는 문제

---

Cursor

클로드 기반 IDE 

한번 써보기로

이열

---

뭐지? 이.모순적인

..

.npmrc 앞에 띄어쓰기가..

 

하...한참헤맸잖아....

화난다

---

그리고 

macOS의 Control Center 앱 프로세스가 포트 5000을 점유하고 있어서 절대 죽지 않는다는 점

 

난 또 내가 천년 전에 켜 놓은 쿠버네티스가 있었던 줄 알고...

---

/backend 에서 실행
docker build --load -t be .
docker run -p 5000:5000 be

/frontend 에서 실행
docker build --load -t fe .
docker run -p 3000:3000 fe

암튼 드디어..

그냥 실행만 하는 것도 참 오래 걸린...

 

도커는 왜 됐다 안 됐다 하는 것?

---

💪🏻 E2E 테스트 실행 

호엑

500명도 터져서.. 50명.. 

이 정도 크기면 유의미한 최적화를 진행한다고 해도 눈에 띄는 지표를 얻을 수 없을 듯하오..  

---

메모이제이션 (memoization)

반복적으로 호출되는 계산의 결과를 저장하여 동일한 계산을 다시 수행하지 않도록 최적화하는 기술

 

- useMemo

: 값을 메모이제이션하는 데 사용

복잡한 계산이나 값 생성 로직이 있을 때, 종속성(dependency)이 변경되지 않으면 이전 값을 재사용

 

- useCallback

: 함수를 메모이제이션하는 데 사용

종속성이 변경되지 않으면 동일한 함수 참조를 반환

 

 

- hook들의 객체나 상수의 메모이제이션 진행

---

Lazy Loading(지연 로딩)

애플리케이션의 초기 로드 속도를 개선하기 위해, 필요하지 않은 코드나 리소스를 나중에 필요할 때 로드하는 기술

 

- React.lazy와 Suspense를 사용하여 컴포넌트 단위에서 Lazy Loading을 구현 가능

---

웹소켓 연결 상태 관리 개선 

재연결 시도 간의 지연 시간을 점진적으로 증가시키는 지수 백오프 전략을 사용하여 서버에 과부하를 주지 않으면서도 재연결을 시도

---

집갈뤠