살려주세요…
아무리 봐도 React는 점점 어려워지고 있는 것 같습니다. React 18에 동시성(Concurrency) 개념이 들어오고, 서버 측 렌더링도 좀 더 본격적으로(당연하게도 예전부터 가능은 했습니다) 함께 고려하는데다, useMemo, useCallback 등의 API를 최적화 컴파일러로 대체시키는 아이디어(React Forgot - 링크) 등 많은 부분에서 개선이 이뤄지고 있습니다.
언뜻 들으면 좋아지고 있다는 것 같지만, 한편으로는 React 물밑에서 돌아가는 작업들을 파악하기 위해 알아야 할 것들이 점차 늘어나고 있다는 뜻이기도 합니다. 얼마 전 github 상에서 확인할 수 있는 React의 가장 초기 버전인 0.3-stable 버전(링크)의 그렇게 많지 않은 코드 라인 수, 그렇게 까진 높지 않은 추상화 수준의 코드를 보며 잠시 생각에 빠지기도 했는데요. 선배 개발자들이 이야기했던 JavaScript Fatigue(자바스크립트 피로) 가 무슨 뜻인지 조금씩 알 것만 같은 요즘입니다. 프론트엔드 누가 쉽대!
하지만 너무 조급하게 생각할 것은 없습니다. 이 기능들은 충분한 시간을 두고 도입될 것이고 때에 맞춰 새로운 기술들의 이해를 돕기 위한 여러가지 아티클과 컨퍼런스 영상들이 생산되겠지요…(사망 플래그?)
라고 2022년 10월 챌린지 강의에서 말씀드린 바 있습니다만(?)
그 말을 한지 일주일도 지나지 않은 10월 25일, Next.js 13 버전이 발표되면서 App Router(beta)도 함께 배포되었습니다. 12 메이저 버전 발표 후 1년, Layouts RFC 발표 후 5개월 만입니다. 강의 자료를 만들자마자 자료가 바로 레거시가 되어 버리는 놀라운 광경을 목도하게 됐습니다.
그렇다 해도 아직까지는 당장 기술 면접이 급한 우리들이 그렇게까지 휘둘릴 주제는 아니라고 생각합니다. 그렇기에 지금 다루는 이야기들은 당장 너무 깊게는 공부하지 말아주세요. 프론트엔드 앱을 잘 만들기 위해서 필요한 더 많은 중요한 지식들이 많습니다(링크). 외국어를 공부할 때 처럼 1) 자주 쓰이며, 2) 최소한의 문장을 완성하기 위한 지식을 위주로 효과적으로 연습해주세요. 모든 지식에는 다 필요해서 만나러 가야할 때가 있다고 생각합니다.
다만 제가 이 파트에서 말씀드리고 싶은 주제의 핵심은 너무나도 중요한 개발자 커뮤니티 의 존재, 그 자체입니다. 이번 파트에서는 우리가 자연스럽게 사용하고 있는 기술들이 어떤 과정을 거쳐 발전되어 나가는지에 대한 이야기를 해보겠습니다. (🚨 다소 두서가 없을 수 있습니다…)
RFC라는 개념이 있습니다. 들어보셨나요? RFC란 ‘Request For Comments’의 약자로, 실제 구현에 들어가기 전에 어떠한 방식으로 구현할 계획인지 아이디어를 교환하는 단계입니다. React 같이 거대한 개발자 커뮤니티에서 특정한 기능을 소통 없이 무작정 구현해버리는 건 여러모로 곤란한 일이겠죠.
<aside> 💡 RFC(Request for Comments) 문서는 "의견을 요청하는 문서"라는 의미로, 국제 인터넷 표준화 기구(IETF; Internet Engineering Task Force)에서 관리하는 기술 표준입니다.
</aside>
앞서 말씀드린 대로 React 진영에서는 React Server Components, 즉 RSC 관련한 작업이 한창입니다. 당연하게도 더 좋은 방법을 만들어 나가기 위해 구현해야 하는 사항들에 대해 RFC를 열고 커뮤니티와 소통하며 작업 방향에 대한 의견을 받고 있습니다.
그 중 하나를 살펴보자면 RSC를 사용할 때 어떠한 컨벤션을 따르게 할 것인지에 대한 두 번째 RFC가 10월 12일에 열렸는데요. 어떤 방향이 좋을지에 대해 개발자들끼리 벌였던 활발한 토론을 확인할 수 있습니다. 원래는 *.server.js, *.client.js 로 제안되었던 것이 토론을 통해 "use client" 로 바뀐 것을 볼 수 있습니다.
https://github.com/reactjs/rfcs/pull/227
RFC와 그 아이디어의 구현이라는 한 사이클을 큰 축으로 많은 개발자들의 Issue와 Pull Request, Article 작성, 컨퍼런스 발표, 트위터 활동 등 모든 활동들을 통해 오픈소스 생태계는 유지 발전되어 나가고 있습니다.
아래의 도표는 Flex 안희종님의 ‘나는 왜 리액트를 사랑하는가(FEConf 2021)’ 발표에서 발췌했는데요. 도표는 React의 기술 발전상에 대해서만 좁혀 이야기 하고 있지만, 단지 React 뿐만 아니라 연관 생태계의 많은 기술들이 특정한 문제를 풀기 위해 도전을 거듭하고 있습니다. 한번 시간 내시어 React의 RFC 레포지토리에서 그 고투의 흔적들을 직접 확인해보시기 바랍니다.
https://www.youtube.com/watch?v=dJAEWhR83Ug
Next.js 또한 마찬가지 입니다. Blog(링크)에는 그간의 릴리즈에 대한 설명이 남아있습니다. 9버전 부터 어떤 굵직한 기능들을 릴리즈 해왔는지 살펴보겠습니다. 가장 최근에는 이런 공지를 통해 개선 사항을 개발자들에게 알리기도 했죠. (App Router 개선에 대한 공지 : https://nextjs.org/blog/june-2023-update)