사용자 경험이 매우 중요한 웹 서비스에서 최적화는 빼놓을 수 없는 주제인데요. 그런 맥락에서 이번 토스 모닥불 EP9 "프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다!" 를 흥미롭게 시청했습니다. 유익한 내용이 많아서 최적화 기본 개념부터 React 기반 최적화 방법까지 영상 내용을 토대로 인사이트를 정리해보았습니다.

최적화의 기본 원칙
 1. 최적화는 필요할 때만: 하면 좋을 것 같다면 하지 말고, 진짜 해야 한다고 느껴지면 프로파일링부터 시작합니다. 하지만 실제 최적화가 필요한 시점을 생각보다 늦게 알 수 있으므로 신중히 접근해야 합니다.
 2. 현실적인 테스트 환경: 일반적으로 최적화 작업은 좋은 컴퓨터와 빠른 네트워크 환경에서 테스트되기 때문에 실제 사용자 경험을 반영하지 못할 수 있습니다. 따라서 최악의 상황에서도 서비스가 원활히 동작하는지 테스트해야 합니다.
 3. 트레이드오프의 이해: 최적화를 통해 성능을 개선했다면, 그 과정에서 개발 시간이나 유지보수 비용 같은 다른 요소들이 희생될 수 있습니다. "은탄환"은 존재하지 않으므로, 트레이드오프를 명확히 인지해야 합니다.

주요 최적화 영역
1. 초기 로딩 속도
 * 번들 크기 관리: 번들이 클수록 대역폭과 지연시간에 영향을 미칩니다. 또한 번들을 작은 단위로 쪼개면 캐싱에도 유리합니다.
 * 필요한 리소스 우선 로드: React에서는 화면에 꼭 필요한 요소만 먼저 렌더링하고, 나머지는 비동기로 로드합니다.
 * 프리페칭: 페이지 이동 시 필요한 리소스를 미리 가져와 페이지 전환 속도를 향상시킵니다.
   
2. 런타임 성능
 * 반응성 개선: 사용자 입력에 대한 빠른 반응성을 확보하여 사용 중 부드러운 경험을 제공합니다.
 * 성능 측정 방법: 런타임: FPS(Frame Per Second)를 통해 성능을 확인하고, 크롬 개발자 도구의 프로파일러를 사용하여 렌더링 병목 현상을 분석합니다.
 * FPS 유지: 드래그 앤 드롭 같은 동작이 60프레임을 유지하는지 확인 합니다.메인 스레드 블로킹 여부를 파악하고, 프로파일러에서 노란색 막대를 줄이는 방향으로 개선 합니다.
   
React에서의 렌더링 최적화
 1. 불필요한 상태 업데이트 줄이기:
    useEffect
    안에서 상태를 변경해 연쇄적으로 리렌더링이 발생하지 않도록 주의 합니다. 파생 상태는 별도의 상태로 관리하기보다, 계산된 값으로 사용 합니다.
 2. 메모화 활용:
    React.memo
    를 사용하여 컴포넌트가 불필요하게 렌더링되지 않도록 하여 렌더링이 필요한 특정 컴포넌트만 업데이트되도록 최적화 합니다.
    
프론트엔드 개발자로써 성능 최적화는 항상 도전적인 과제인데요. 이번 영상을 통해 최적화의 개념과 실행 방법을 정리할 수 있었습니다. 언제, 어떻게 최적화를 해야 할지 고민이 될 때 이 영상을 참고하면 좋을것 같습니다. 보다 더 자세한 내용은 영상을 통해 확인해보세요.

https://www.youtube.com/watch?v=upUON56UEYo

프론트엔드 성능 최적화: 토스 개발팀의 전략과 인사이트

다른 개발자 분들의 의견이 궁금해지는 질문이네요 : )

제가 이해한 바로는 "props로 자식 컴포넌트에게 react query 응답 데이터를 전달해야할까?" 의 질문으로 이해했습니다.

저의 경우에는 개발시에 데이터를 호출 및 가공처리를 담당하는 컴포넌트와 UI만을 담당하는 컴포넌트를 구분해서 개발하는편입니다.

그 이유는, 대부분의 버그나 이슈는 예측하기 어려운 곳에서 나타나는데요, 데이터를 Api를 이용해 호출해오거나 그 결과를 가공하는 과정이 대부분 해당이 된다고 생각해서에요.

그래서 react query를 쓰더라도 무조건적으로 데이터를 한곳에서 호출 후 자식에게 내려준다는 개념보다는 특정 기능을 하는 페이지를 개발할때 해당 페이지가 어떠한 비즈니스 기능들을 갖고 있는지 구분하고 각 비즈니스별로 Container 라는 컴포넌트를 만들어 해당 파일에서 필요한 데이터를 호출 및 관리하고 있습니다. 

공통된 데이터 호출일지라도 react query가 캐싱된 데이터를 가져다가 사용해주기 때문에 중복호출 처리에 대해서는 react query를 믿고 그 역할을 위임하는 편입니다.

이후 각 비즈니스별로 필요한 UI들을 자식컴포넌트로 만들고 각 UI컴포넌트에서 필요로 하는 데이터를 Container에서 내려주고 UI 컴포넌트들은 데이터만 받아서 화면을 구성하도록 개발하고 있습니다.

질문에 대한 답변이 되셨을지 잘 모르겠네요 ?

흠... 질문 내용만 봐서는 어떤게 원인이었는지 쉽게 유추하기 어려울것 같습니다.

다만, 가끔 제가 사용하는 IED에서 규모가 어느정도 있는 프로젝트에서 작업할때 로직적으로 말도 안되는 경고가 뜰때가 있습니다 ㅎㅎ 그럴땐 해당 파일을 닫았다가 열면 정상적으로 돌아오더군요. 주로 풀을 땡기거나 할때 발생했던거 같아요 ㅎㅎ

참고로 저는 웹스톰을 사용하고 있습니다 ; )

MADUP 퍼포먼스 마케팅 AE

조현진

Product manager

htaihen

디지털 트랜스포메이션

우현석

매드업 매니저

광고사업 2부

매드업 AE

송지연

매드업 광고사업부 글로벌팀 리드

전민규

매드업 프로덕트 오너

안현우

매드업 퍼포먼스 마케터

김성연

이종관

매드업 게임 & 글로벌 팀장

박기덕

매드업 프로덕트 마케터

강윤영

매드업 콘텐츠 마케터

매드업 AE / 퍼포먼스마케터

김현지

지운

매드업 팀장

Yu seon Park

매드업 광고사업부장

송호중

용호

MADUP l 퍼포먼스 마케터

오승학

매드업 퍼포먼스마케터

임유정

퍼포먼스 마케터

하은지

매드업 채용/채용브랜딩

현준호

매드업 카피라이터 Team Lead

이상미

Performance Marketing Manager

김경빈

홍익대학교 광고홍보학부

맹주형

라리루

매드업 AE 인턴

노란자동차

장수진

매드업 

테크사업부

김경민

매드업 AE 

이효정

주니어 퍼포먼스 마케터

강주성

매드업 사원

이현진

매드업 브랜드매니저

박미라

매드업 프론트엔드 개발자

Gorilla.Kim

매드업 퍼포먼스마케팅매니저

장희수 Skylar

매드업 퍼포먼스 팀 리드

현석

매드업 Recruiter

매드업 마케터

아이스크리미

매드업 백엔드 개발자

류수영

소프트웨어 엔지니어

김성현

박정후

매드업 카피라이터

이경래

임한민

매드업 팀리드

정승원

안주형

송민구

남승철

데이터

정재경

매드업 마케팅 분석가

민정수

송나영

뭐뭐

양뭐뭐

매드업

언어

프론트엔드

백엔드

데이터베이스

데브옵스

핵심 프로세스는 아니지만, 상황에 따라 코드 리뷰를 하기도 한다

하지 않거나 형식적인 리뷰 절차만 있다

코드리뷰가 업무의 핵심 프로세스로 자리 잡혀 있나요?

일주일에 야근은 며칠 정도 하나요?

주변에 나의 성장에 도움이 되는, 배울 만한 동료가 있나요?

매드업에서 계속 일 하는 건 내 커리어에 도움이 된다고 생각하시나요?

제품의 구현 과정에 개발자들의 의견이 어느 정도 반영된다고 생각하시나요?

구현하는 제품이 회사의 성장에 기여한다고 느껴지나요?

개발, 인간 관계 등에 대해 어려움을 겪을 때 회사 내에 도움을 받을 멘토가 있나요?

나의 개발 생산성을 극대화 할 수 있도록 재택 근무 여부를 자유롭게 선택할 수 있나요?