Facebook이 React를 만든 이유를 알아보자
TIL 23. 11. 01
오늘 한 일
- Facebook이 React를 만든 이유
들어가며
TIL 23.10.31 리액트 등장 배경 알아보기 이어서 Facebook이 리액트를 만든 이유를 알아보았다. ‘React.js Conf 2015 Keynote’ 영상을 많이 참고했다.
페이스북이란?
Facebook은 전 세계에서 가장 많이 사용되는 온라인 소셜 미디어 및 소셜 네트워크 서비스이다. 사용자들이 인터넷을 통해 친구, 가족, 동료와 연결하고 정보를 공유하는 데 사용되며, 다양한 기능과 서비스를 제공한다.
2023년 10월 기준으로 약 30억의 월간 활성 사용자 수(MAU: Monthly Active Users)를 보유하고 있다.
Most popular social networks worldwide as of October 2023, ranked by number of monthly active users
2011, 페이스북이 직면한 문제
2012년, Naver D2에 게재된 글에 따르면 페이스북은 하루 평균 25억개의 컨텐츠를 공유하고 500TB 이상의 데이터를 처리했다고 한다. 수억, 수십억의 사용자들이 엄청난 양의 데이터를 생성하고 변경한다.
8월 4주 Tech Sensing: Facebook, 하루 평균 25억개의 컨텐츠 공유 및 500TB 이상의 데이터 처리
페이스북은 대규모 웹 애플리케이션을 운영하고 있었으며, 기존의 웹 개발 도구 및 접근 방식은 대규모 애플리케이션의 규모와 복잡성을 다루기에 어려움이 있었다.
페이스북은 단일 웹 서비스로 가장 성공한 사례이다. 이제는 앱, 게임, 연결, 채팅, 메신저 등 다양한 기능들을 페이스북에서 가능한 하나의 플랫폼으로 도약하기를 원했다.
계속 확장되는 복잡한 코드베이스를 처리하기 위해, 더 많은 기능을 추가하기 위해 새로운 프로그래머들이 팀에 합류한다.
프로그래머들을 더 많이 추가하면 생산성이 높아질 것 같으나 실제로는 그렇지 않다. 새로운 프로그래머가 프로젝트에 대해 배우는 데 필요한 시간과 늘어난 소통량으로 인해 사용 가능한 시간이 줄어들기 때문에 오히려 개발 속도가 느려진다. Mythical Man-Month
문제점은 무엇?
페이스북은 댓글을 달거나 좋아요를 누르는 것과 같이 애플리케이션의 일부 변경으로 데이터가 생성된다. DOM Tree 깊은 곳에 작은 변화가 발생하면 무엇을 바꿔야 하는지 알아내고 해당 부분을 업데이트하거나 전체를 다시 화면에 그려야했다.
변경해야 할 부분을 파악하기 위해 모든 영역에 대한 코드(기록)를 작성해야 한다. DOM API를 다루는 것은 매우 까다로운 일이다. 변경되어야 할 DOM 노드를 찾고 리스너를 변경… 점점 작성한 코드를 예측하기가 어려워졌다.
웹은 DOM(Document Object Model)으로 구성되어 있습니다. 그리고 이 DOM의 동적 변경을 위해서 웹은 API를 제공하는데 그것이 DOM API입니다. 문제는 이 DOM API를 다루는 것이 매우 까다롭다는 것인데요. - 만들어 가며 알아보는 React: React는 왜 성공했나
하나의 변경 사항이 다른 요소에도 계단식으로 영향을 끼친다. 아주 작은 변경 사항에도 불구하고 계단식 업데이트와 애플리케이션 리렌더링으로 인해 코드를 예측할 수 없게 되었다. 이제는 무엇이든 바꿀 때마다 애플리케이션 대부분을 리렌더링해야 했다.
시스템을 효율적으로 만들고 사용자 경험을 향상시키기 위해 프로토타입을 제작한다. 페이스북의 소프트웨어 엔지니어인 Jordan Walke가 만든 React의 초기 버전 FaxJS이다. 당시 내부에서 이를 사용해보며 긍정적인 반응과 함께 회의적인 반응이 공존했다.
페이스북의 광고 플랫폼 개발
당시 페이스북은 비즈니스 모델인 Facebook Ads를 만들고 있었다. 페이스북은 사용자의 관심사에 맞는 광고를 보여준다. 광고주가 타겟 사용자를 설정하는데 무수히 많은 옵션을 선택해야 할 것이다.
문제는 사이드바에 보이는 뷰에 적용되는 모델이 너무 많다는 것이다. Facebook Ads를 개발하고 배포하는데 일반적인 MVC 접근 방식으로는 만들기가 너무 어려웠다. 게다가 오류 발생이 빈번했다.
페이스북의 Instagram 인수
2012년 페이스북이 인스타그램을 인수했다. Instagram 개발자가 페이스북 웹 개발 스택을 살펴보면서 React를 사용하고 싶어했다. 그러나 당시 React는 페이스북 개발 스택과 긴밀하게 결합되어 있었다.
개발자 중 한 명인 Pete Hunt는 React를 페이스북 스택에서 분리하고자 했다. 오픈 소스화하기 위한 많은 작업을 수행하였고 React는 성공적으로 분리되어 2013년에 오픈 소스로 공개된다.
댓글남기기