FrontOverflow logo

FrontOverflow

Q&A
문서
매거진

개발자를 위한 슬라이드 작성 도구

logo

React Conf 2024 정리 (Day 2)

안녕하세요, 소플입니다.

지난 매거진(React Conf 2024 (Day 1))에 많은 분들께서 뜨거운 관심을 보여주셨는데요,

이번 매거진에서는 지난 매거진에 이어 2024년 리액트 컨퍼런스 둘째날에 발표된 내용들을 한 번 정리해보도록 하겠습니다 😀

목차

Keynote

💡 소플의 한 줄 요약
점점 더 빨라지는 성능, 그리고 커져가는 리액트 네이티브 생태계와 사용 사례에 대한 이야기

Keynote

🔗 영상 링크

인사 및 소개

  • Nicola: 리액트 팀의 엔지니어
  • Riccardo와 Kadi와 함께 리액트 네이티브에 대해 이야기하려고 함.

리액트 네이티브 소개

  • 웹의 리액트 코드를 네이티브 앱으로 전환할 수 있는 도구
  • React Conf 모바일 앱을 예로 들어 설명.
    • Play Store 및 App Store에서 다운로드 가능.

리액트 네이티브의 역사

  • 2015년 리액트 컨퍼런스에서 첫 오픈 소스 릴리즈.
  • 현재 리액트 네이티브의 주간 다운로드 횟수는 2백만 건을 넘었음.
  • 2023년 전체 다운로드 횟수는 7천 8백만 건 초과.

프로젝트 업데이트

  • 2024년 첫 5개월 동안 19개의 패치 릴리즈 출시.
  • 최신 리액트 네이티브 버전 074에는 1,600개 이상의 커밋이 포함됨.

파트너 및 사용 사례 소개

새로운 아키텍처

  • 새로운 아키텍처는 성능을 개선하면서 더 빠른 업데이트를 가능하게 함.
  • JSI(JavaScript Interface)를 활용하여 더 빠른 메모리 공유 방식 도입.

적용 및 피드백

  • 현재는 베타 단계로, 모든 사용자가 새로운 아키텍처를 쉽게 적용할 수 있도록 준비 중.
  • Expo와 협력하여 새로운 아키텍처가 모든 도구와 원활히 작동하도록 수정.
  • 다양한 파트너와 협력하여 라이브러리가 새로운 아키텍처에서도 원활하게 작동하도록 핫픽스 제공.

프로덕션 준비

  • 2024년에 프로덕션 준비 상태의 앱을 구축하기 위한 최적의 방안 제시.
  • Expo를 사용하면 네이티브 개발 문제들을 효율적으로 해결할 수 있음.
  • 새로운 아키텍처와 기능들을 쉽게 도입할 수 있는 환경 제공.

Extending React Native Beyond Mobile & Desktop Apps

💡 소플의 한 줄 요약
모바일, 데스크탑을 넘어 TV용 애플리케이션까지 영역을 넓혀가는 리엑트 네이티브

Keynote

🔗 영상 링크

인사 및 소개

  • Chris와 Anisha는 아마존의 developer evangelism 팀 소속.
  • 아마존이 리액트 네이티브를 사용하는 이유 소개.

리액트 네이티브와 아마존의 사례

  • 아마존 쇼핑 앱, Alexa, 아마존 사진, Kindle, 아마존 앱 스토어, 아마존 뮤직 등 다양한 앱에서 리액트 네이티브 사용.
  • 리액트 네이티브의 장점
    • 개발 시간 단축, 비용 절감, 일관된 사용자 경험 제공 등.

다중 디바이스 경험을 위한 고려사항

  • "Learn once, write anywhere." 의 철학을 통해 여러 디바이스에서 사용 가능한 앱 개발.
  • 다중 디바이스 개발 시 중요한 세 가지 요소
    • 코드 재사용성, 사용자 및 디바이스와의 상호 작용, 성능 최적화.

코드 재사용성 (RN + Web UI (Reusability))

  • 비즈니스 로직, 앱 상태, 디자인 토큰 등 재사용 가능한 부분 소개.
  • 네비게이션 및 UI 구성 요소의 경우 플랫폼별로 약간의 커스터마이징 필요.
  • Tamagui, Gluestack 등의 라이브러리 사용 예시.

사용자 및 디바이스 상호 작용

  • TV 앱의 경우 주로 리모컨과 음성 검색을 사용함.
  • Amazon의 다양한 앱과 TV에 React Native를 사용한 사례 설명
  • TV 이벤트 핸들러를 사용한 리모컨 이벤트 처리 예시.
  • 공간 네비게이션 구현 방법 소개.

성능 최적화

  • 성능 최적화는 모든 디바이스에서 중요한 요소라고 설명.
  • BAM 팀의 React TV Navigation 라이브러리 사용 예시 제공.
  • React Native의 새로운 아키텍처와 동시 렌더링 기능 활용.

아마존의 지원 방안

  • 아마존 앱 스토어에 리액트 네이티브 앱을 출시하는 개발자를 지원하고자 하는 프로그램 소개.
  • 런칭 앱을 위한 백엔드 인프라 지원.
  • 오픈 소스 펀딩과 라이브러리 테스트/지원 시간 제공.

React Compiler Deep Dive

💡 소플의 한 줄 요약
리액트의 규칙과 그에 맞춰 설계된 리액트 컴파일러에 대한 자세한 설명

Keynote

🔗 영상 링크

주요 발표 내용

  • React Compiler의 강점을 설명
  • Compiler가 기여하는 부분에 대한 자세한 데모.
  • React Compiler가 실제 사용 시 추가적인 이점을 제공함.
  • Compiler의 내부 작동 방식 설명.
  • Compiler 내부의 메모이제이션 및 최적화를 위한 분석.
  • JavaScript를 변환하고 최적화하는 도구와 관련된 추가 정보 공유.

React

  • Declarative UI
    • React는 UI 코드를 선언형으로 작성하는 접근 방식을 대중화했음.
  • Reactive UI
    • React는 애플리케이션 상태의 반영으로 UI를 표현함.
    • React는 UI를 트리 구조로 표현하며, 상태나 컨텍스트가 변경될 때 UI를 재계산함.
    • 모든 컴포넌트의 값이 재계산되는 문제로 인해 불필요한 재계산이 발생할 수 있음.

React Compiler

  • React 컴파일러는 영향을 받은 값이나 컴포넌트만 재계산하도록 최적화함.
  • 컴파일러는 React의 규칙을 사용해 코드를 최적화함.
  • Rules of React
    • 컴포넌트와 훅은 순수해야 함.
    • 외부 변수를 읽거나 쓰는 것을 피해야 함.
    • 동일한 아이템을 여러 컴포넌트에 전달할 때의 예측 가능하지 않은 행동을 피해야 함.
    • Hook에 전달된 값은 변경하지 않아야 함.
  • 로컬 추론 원칙: 컴포넌트나 훅의 동작을 자체적으로 이해할 수 있어야 함.

And Now You Understand React Server Components

💡 소플의 한 줄 요약
개발자이자 교육자인 Kent의 리액트 서버 컴포넌트에 대한 설명

Keynote

🔗 영상 링크

서문

  • 2020년에 React 서버 컴포넌트 발표 당시, 발표자가 흥분하지 않았던 이유
    • 리믹스(Remix)와 유사한 문제 해결.
  • 그러나 리믹스와 다른 점 발견.

React Server Component (RSC)의 필요성

  • Remix, Next.js 등의 프레임워크가 해결하지 못하는 문제를 RSC가 해결함.
  • 발표자가 React 서버 컴포넌트를 사용하여 만든 간단한 프레임워크 소개.

기술적 설명

  • 기존 클라이언트 측 React 애플리케이션 구조
    • 데이터를 요청하고 컴포넌트와 결합하여 렌더링.
  • 서버 측 React 컴포넌트로의 전환
    • 동일한 구조이나 React element 생성을 서버로 이동.
  • renderToPipeableStream 함수 사용
    • 클라이언트에서 React 요소를 수신하고 DOM 노드로 변환.
    • 서버와 클라이언트 간의 React 요소 데이터 전송 방식 설명.

핵심 이점

  • 비동기 컴포넌트, 스트리밍, 서버 컨텍스트 등 다양한 새로운 기능 사용 가능.
  • 서버와 클라이언트의 UI 구성 가능성 강조.

구현 예시

  • 편집 가능한 텍스트 컴포넌트 예시.
  • 'use client' 지시어로 클라이언트 컴포넌트 사용.

라우터 구축

  • 클라이언트 측 라우터 기능 추가로 사용자 경험 향상.
  • 내용 상태 관리 및 내비게이션 처리 방법 설명.

추가 문제

  • Pending UI, 히스토리 관리, 브라우저 캐시 처리 필요성 언급.
  • 프레임워크 사용 권장: 프레임워크가 복잡한 문제를 해결함.

React Rhythm & Blues

💡 소플의 한 줄 요약
클라이언트와 서버에서의 리액트 최신 기능 이해하기

Keynote

🔗 영상 링크

소개

  • 청중 중에서 음악을 하는 사람들이 있는지 질문.
  • 음악적 주제와 연결된 발표의 배경 이야기.

발표의 목표

  • React의 최신 기능이 클라이언트와 서버에서 어떻게 작동하는지 설명.
  • 클라이언트와 서버의 조합의 중요성 설명.
  • 발표자 소개 및 Next.js와의 관계 설명.
  • 아이오와(Iowa) 주에서 살고 있으며, 데이터 센터로 유명한 지역임 설명.

React 디자인 원칙들

  • 점진적 채택(Incremental Adoption): 애플리케이션 전체를 다시 작성할 필요 없이 React를 사용할 수 있어야 함.
  • 구성 가능성(Composability): 여러 팀에서 작성한 컴포넌트들이 잘 작동해야 함.
  • 공통된 추상화(Common Abstraction): 최소한의 API를 통해 표면적으로 최대한 효율적으로 사용자 경험을 향상.

React의 이전과 현재

  • 10년 전 React의 시작과 당시의 방식 설명.
  • HTML과 바닐라 자바스크립트를 사용한 초기 구현 예시.
  • React 컴포넌트로의 전환과 장점 설명.
  • 커뮤니티와 생태계의 발전(Routing, Data Fetching, Caching) 설명.

최신 React 기능을 이용한 Chatbot 구현

  • 간단한 채팅 위젯을 예시로 활용.
  • 클라이언트 액션과 비동기 전환 사용.
  • 상태를 관리하고 서버와의 상호작용을 단순화함.

Server Actions 소개

  • 네트워크 요청을 직접 작성하지 않고 서버 액션을 사용하여 서버 호출 기능 구현.
  • 서버 측 함수 가져오기 및 사용 예시.
  • 통합된 React 프로그래밍 모델의 장점.

구성 가능 컴포넌트 구현

  • 완전한 채팅 위젯을 구성 요소로 패키징.
  • 고급 사용자 인터페이스 생성의 가능성 강조.
  • 예시로 고객 지원 애플리케이션과 같은 복잡한 상호작용을 보여줌.

향후 전망

  • RSC를 활용하여 성공한 사례 공유(Chatbase)
  • 피날레에 일부 실제 프로젝트와 데모를 통해 차세대의 강력한 구성 요소와 사용자 인터페이스 가능성 강조.

마무리

  • React 팀과 커뮤니티의 지난 10년 동안의 혁신과 발전에 감사 표시.
  • 미래의 React 생태계에 대한 기대와 비전 공유.

Solve 100% of your errors

💡 소플의 한 줄 요약
실제 데모를 통한 Sentry Replay 기능에 대한 자세한 설명

Keynote

🔗 영상 링크

소개 및 목적

  • Sentry의 프론트엔드 리드 엔지니어
  • 디버그 및 버그 해결을 가속화하는 Session Replay에 대해 논의하고자 함.

오늘 이야기할 네 가지 주요 주제

  • 프라이버시 문제
  • 브라우저에서 Sentry로 가져오는 개발 도구
  • React 인식 및 경험 향상
  • Hydration 오류 해결 방안

예시 웹사이트

  • Pokemart라는 포켓몬 마켓플레이스 웹사이트를 예로들어 설명.
  • 최근 500 네트워크 오류 발생.

Session Replay를 사용한 오류 분석 절차

  • Sentry의 스택 추적 기능을 통해 API 요청 및 오류 코드 확인.
  • Session Replay를 활용하여 실제 사용자의 행동 및 오류 발생 시점 확인.
  • 네트워크 탭에서 요청 및 응답 데이터 추적.
  • 프라이버시 기능을 통해 개인 식별 가능 정보(PII) 보호.

개발 도구 개선 및 React 인식 기능

  • Session Replay로 네트워크 오류와 프론트엔드 오류를 동시에 분석 가능.
  • React 컴포넌트에 대한 구체적인 정보(예: 클릭한 버튼의 CSS 셀렉터) 제공.
  • Dev Tools처럼 작동하므로 개발 중일 때 뿐만 아니라 프로덕션에서도 유용.

Hydration 오류 문제

  • Gatsby에서 Next.js로의 마이그레이션 후 발생한 Hydration 오류.
  • Session Replay를 통해 코드 변화 및 시각적 변화를 비교하고 분석 가능.
  • 시각적 및 텍스트 차이점(PDIFF)을 통해 구체적인 문제 파악.

결론

  • Session Replay는 디버깅을 크게 향상시킴.
  • 실시간 HTML 스냅샷으로 상세한 DOM 분석 가능.
  • 사용자 경험을 개선하고 디버깅 시간을 단축하는데 기여.

Demystifying accessibility in React apps

💡 소플의 한 줄 요약
웹 접근성의 중요성과 이를 구현하는 다양한 방법들을 예시를 통해 설명

Keynote

🔗 영상 링크

웹 접근성

  • 웹 접근성의 중요성에 대해 이야기함.
  • 글로벌 접근성 인식의 날을 언급하며 이에 대한 박수를 유도함.
  • 접근성을 위한 여러 기술적 예시들을 소개하고자 함.

웹 접근성

  • 먼저 HTML과 접근성 트리의 관계에 대해 설명함.
  • HTML이 브라우저에서 렌더링될 때 접근성 트리도 함께 생성됨.
  • 접근성 트리에 있는 각 요소는 역할(role)과 접근 가능한 이름(name)을 가짐.
  • 이 트리는 브라우저의 API를 통해 보조 기술에 노출됨.
  • 웹 페이지의 예시를 통해 접근성 트리가 어떻게 생겼는지 설명함.
  • 각 HTML 요소가 내장된 의미를 가지며 이를 사용하면 접근성이 높아짐.
  • ARIA 속성을 통해 접근성을 제어하는 방법도 소개함.
  • 그러나 ARIA 속성은 신중하게 사용해야 하는 책임이 따른다고 강조함.
  • 예제를 통해 아이콘 버튼의 접근성을 설명함.
  • 접근성 트리에서 불필요한 요소들을 숨기기 위해 ARIA 속성을 사용하는 방법을 설명함.
  • 텍스트 입력 필드의 접근성을 개선하는 방법도 다룸.
  • 라벨과 입력 요소를 연결하여 접근 가능한 이름과 설명을 설정하는 방법을 설명함.
  • 유효성 확인과 오류 메시지를 전달하는 방법도 설명함.
  • 알림 메시지를 접근성 요소로 구현하는 방법을 소개함.
  • 라이브 리전과 라이브 롤을 사용하여 중요한 업데이트를 사용자에게 알릴 수 있는 방법을 설명함.

마무리

  • 접근성을 천천히 개선해 나가야 한다고 강조

Pigment CSS, CSS in the server component age

💡 소플의 한 줄 요약
서버 컴포넌트 시대의 CSS에 대한 이야기와 Pigment CSS 라이브러리 소개

Keynote

🔗 영상 링크

소개

  • 발표자의 이름은 Olivier이며, Material UI를 공동 창립했음.
  • 현재 MUI의 CEO로 활동 중임.
  • 오늘의 주제는 CSS가 아닌 React 서버 컴포넌트에 관한 것임.
  • 발표 끝부분에서는 CSS의 새로운 공간에 대한 이해를 돕고 도전에 대해 설명하고자 함.

주요 목표

  • React 서버 컴포넌트가 CSS 공간에 미치는 영향 설명.
  • 현재 세대 라이브러리의 도전 과제를 다룸.
  • 새로운 스타일링 솔루션의 주요 특성 소개.

도전 과제

  • 번들 크기: styled-components 사용 시 기본적으로 11KB의 JavaScript와 추가 4-5KB 필요.
  • 성능 문제: CSS 모듈, Material UI V4, V5 비교 시 CSS 모듈이 더 빠름.
  • 서버 컴포넌트 문제: 현재 Emotion이나 styled-components는 React 서버 컴포넌트와 호환되지 않음.

해결 방안

  • MUI에서 Pigment CSS 도입
    • 1년 동안 개발해온 새로운 CSS-in-JS 라이브러리.
  • 스타일 상위 집합, 성능 향상, Atomic 클래스 사용 가능, 스타일 로딩 세분화 등 특징 보유.

Pigment CSS 특징

  • 런타임 없는 설계, 혹은 번들러 통합 불가 시 예비 대책.
  • React 서버 컴포넌트 지원.
  • 성능 측면에서 CSS 모듈에 가까운 성과.

관련 프로젝트

  • Base UI: 스타일 없는 헤드리스 컴포넌트 라이브러리.
  • MUI 및 MUI V6: 현대화된 스택으로 업데이트됨.

결론

  • CSS 로딩 트리 셰이킹(Tree Shaking)을 자바스크립트처럼 중요한 요소로 인식했으면 좋겠음.
  • 청중에게 Pigment CSS를 시도해볼 것을 권장하며, 다음에 다시 만날 것을 기원함.

Spatial computing with React

💡 소플의 한 줄 요약
Apple Vision Pro용 앱을 위한 리액트 네이티브의 가능성에 대한 이야기

Keynote

🔗 영상 링크

제품 경험

  • 청중에게 Apple Vision Pro를 체험해봤는지 물어봄
  • 많은 손이 올라왔으며, 아직 체험하지 못한 사람들을 위해 부스에서 체험할 수 있다고 안내함

Apple Vision Pro 발표

  • 1년 전 Apple에서 Vision Pro 및 공간 컴퓨팅 시대를 발표했음.
  • 폴란드 출신이지만, 큰 노력을 들여 이 기기를 구입하게 되었다고 함.
  • React와의 공간 컴퓨팅 가능성을 보고 매우 흥분했음.

React의 적응력

  • React와 React Native는 다수의 플랫폼에서 사용 가능하며, 4백만 명의 개발자가 이를 사용함.
  • React는 웹, 모바일, 데스크탑, TV, VR 장치 등 다양한 플랫폼에서의 앱 개발에 적합함.

공간 앱의 차이점

  • 공간 앱은 일반 앱과 다르며, 마우스나 키보드 대신 손 제스처와 고급 눈 추적을 사용함.
  • 다중 스크린에서 동시에 작업하며, 스크린이 공간에 몰입될 수 있다고 설명했음.

Apple의 개발 지침

  • Apple은 SwiftUI를 사용하여 Vision Pro용 앱을 개발하도록 권장함.
  • 이 선언형 언어는 React와 닮아있으며, React Three Fiber 프로젝트는 이미 이를 가능하게 했다고 함.

VisionOS

  • VisionOS는 Apple Vision Pro의 운영 체제이며, 네이티브 방식과 호환 모드로 앱을 실행할 수 있음.
  • 호환 모드에서 앱은 다소 부자연스럽게 보일 수 있다고 설명했음.

React Native VisionOS 소개

  • React Native를 VisionOS에 맞게 fork했음.
  • Objective-C로 작성된 부분을 수정하여 네이티브 앱을 렌더링함.

손 추적 및 눈 추적

  • React Native가 플랫폼의 기능을 사용하기 때문에 손 제스처와 눈 추적을 대부분 곧바로 연동할 수 있었음.
  • View element를 위한 추가 API는 Apple API를 통해 구현했음.

다중 창 지원

  • VisionOS의 다중 창 지원을 위해 React Native의 내부를 조정했음.
  • Window Manager API를 도입하여 여러 플랫폼에서 호환되도록 했음.

몰입형 콘텐츠

  • 확장 현실 API를 구현하여 3D 공간을 Swift에서 제어하게 했음.
  • 시뮬레이터를 통해 빠른 수정이 가능함.

라이브 데모

  • 라이브 데모에서는 실시간 코드를 수정하며 VisionOS 환경에서 앱을 실행해보였음.
  • Mac 성능 문제로 일부 제한이 있었음.

커뮤니티 기여

  • Apple Vision Pro의 성공 여부는 불확실하지만, React Native 커뮤니티에 많은 기여를 했음.
  • 오픈 소스 프로젝트로서 많은 기여자들과 함께 작업했음을 강조했음.

감사 인사

  • 프로젝트에 핵심적으로 기여한 Oscar와 Matt에게 감사 인사를 전했음.

Enhancing Forms with React Server Components

💡 소플의 한 줄 요약
리액트 서버 컴포넌트와 서버 액션을 사용하여 form을 향상시키는 방법

Keynote

🔗 영상 링크

소개

  • 웹 개발자이며, 노르웨이 Inmeta에서 컨설턴트로 근무
  • React Server Components를 사용하여 폼을 향상시키는 방법에 대해 발표.

설정 및 구성

  • 앱: Next.js App Router 사용.
  • 데이터베이스: Prisma ORM과 SQLite 로컬 데이터베이스 사용.
  • 스타일링: TailwindCSS 사용.

주요 컴포넌트 설명

  • 메시지 박스 컴포넌트: 비동기로 데이터베이스에서 데이터 가져옴.
  • 메시지 표시 컴포넌트: UI 렌더링.
  • 메시지 입력 컴포넌트: 폼.

폼 기능 추가

  • React 19의 폼 요소 확장을 사용하여 서버 액션에 바인딩.
  • 서버 액션 파일 생성 및 함수 작성.
  • 비동기 함수로 폼 데이터 수신 및 데이터베이스에 메시지 생성.

폼 데이터 유효성 검증

  • Zod와 같은 런타임 유효성 검사기를 사용하여 클라이언트로부터 받은 데이터 검증.
  • 오류 처리 및 에러 경계 추가.

메시지 입력 컴포넌트 개선

  • 추가 데이터 검증: 유저 아이디와 메시지 제한 설정.
  • 유효성 검사 실패 시 에러 반환.
  • 클라이언트에서 유효성 검사 오류 처리.

폼 상호 작용성 추가

  • 상태 변경을 감지하여 토스트 메시지 출력.
  • 폼 데이터 초기화 문제 해결 및 사용자 경험 개선.

진보적 향상

  • 자바스크립트 없이도 기본 기능이 작동하도록 폼 구성.
  • 클라이언트 자바스크립트 로드 전에도 폼 기능 사용 가능.

낙관적 업데이트 (Optimistic Update)

  • 사용자가 입력한 데이터에 대한 낙관적 상태 관리 추가.
  • 서버 상태와 일치하지 않을 경우 롤백 기능.

Cross Platform React

💡 소플의 한 줄 요약
다양한 플랫폼을 지원하기 위한 리액트 네이티브의 발전 과정과 미래에 대한 이야기

Keynote

🔗 영상 링크

React Native 등장 배경

  • React Native 소개하기 전 2015년 리액트 컨퍼런스 회상함.
  • React의 선언적 UI 프로그래밍 모델의 우수성을 설명함.
  • 2015년 모바일 네이티브 앱의 중요성이 증가하고 있었음을 언급함.
  • 네이티브 모바일 개발의 어려움과 비용 문제를 설명함.
  • React Native가 네이티브 개발의 성능과 React의 선언적 프로그래밍 모델을 결합했음을 소개함.

React Native 생태계

  • Meta는 React Native를 다양한 자체 앱 및 타사 앱에 사용했음을 언급함.
  • React Native 커뮤니티의 성장과 다양한 회사를 언급함.
  • React Native가 여러 플랫폼으로 확장되었음을 설명함.
  • React Native의 한계와 개선 필요성을 언급함.
  • React Native와 웹 개발 간의 차이점과 이로 인한 성능 타협을 설명함.
  • React Native를 웹 표준과 일치시키기 위한 변화 계획을 설명함.
  • React Native API가 웹과 유사하게 바뀔 것임을 예고함.
  • 개발자들이 플랫폼 간의 코드 공유를 더 쉽게 할 수 있게 하려는 목표를 설명함.
  • Meta는 Account Center라는 프로젝트에서 코드 공유의 이점을 확인했음을 설명함.

React Native의 발전

  • React Native와 웹 코드베이스의 차이점을 줄이기 위한 여러 레이어에서의 작업을 설명함.
  • React Native 코어, React, 그리고 새로운 React Strict Mode를 포함한 여러 레이어에서의 변화 설명.
  • React에서의 경험이 웹과 더 일치하도록 개선했음을 설명함.
  • React useLayoutEffect()가 React Native에서 비동기적으로 동작했으나 이제 동기적으로 동작하게 되었음을 언급함.
  • React Strict DOM이 Web API를 React Native로 가져와 더욱 통일된 코딩 모델을 제공함을 설명함.

React Native의 미래

  • React Native의 새로운 비전과 목표를 요약함.
  • React Native와 웹 코드베이스를 통일시키기 위한 실험적 작업을 설명함.
  • React Strict DOM 실험에 대한 파트너십과 피드백 요청함.

Q&A with the React Native team

💡 소플의 한 줄 요약
리액트 네이티브의 현재와 앞으로의 방향에 대한 이야기

Keynote

🔗 영상 링크

개회사

  • 모두가 잘 지내고 있는지, 컨퍼런스에 대한 만족도 확인
  • 마지막 순서 진행 중이며, 너무 오래 끌지 않을 것이라고 언급
  • 진행자 소개: 이름은 Jamon Holgren, 네 번의 아이스하키 챔피언, 소프트웨어 개발 경력 20년, 8년간 React Native 사용

자기소개 및 패널 소개

  • Jamon Holgren
    • Portland 거주, React Native 컨설팅 회사 Infinite Red 운영, React Native Radio 팟캐스트 호스트, Chain React 콘퍼런스 조직자
  • Kevin
    • Meta 소속, React Native 초창기부터 참여
    • 디버깅 시 프린트 스테이트먼트와 콘솔 로그 사용
  • Nicola
    • Meta 소속, React Native 이슈 대응 담당
    • 오픈 소스 관련 팟캐스트 운영
  • Olga
    • Meta 소속, React 팀 소속 엔지니어링 매니저
    • 크로스 플랫폼 React 및 React Native Desktop에 관심
  • Riccardo
    • Meta 소속, iOS 엔지니어
    • 과거 Symbian에서 C++로 휠체어 컨트롤러와 블루투스 통신 구현

주요 토론 내용

  • React Native의 새로운 아키텍처
    • 2023년 말까지 안정된 버전을 목표로 함
  • React Native의 역사와 가능성
    • Kevin 💬: React Native의 초창기 참여 경험 공유
  • 미래의 React Native와 Expo의 관계
    • Nicola 💬: Expo와의 협력 및 커뮤니티 지원 계획 발표
  • React와 React Native의 융합 여부
    • Olga 💬: 두 기술의 갭을 줄이는 방향으로 노력할 것
  • React Native의 성장 가능성
    • Kevin 💬: Meta 내에서의 지속적인 성장과 확대
    • Olga 💬: 내부적으로 투자와 사용자 증가
  • 커뮤니티 참여 및 기여 방법
    • Riccardo 💬: RFC 및 깃허브 이슈 통해 기여 가능
  • 다양한 언어와 API의 관리
    • Nicola 💬: 다양한 언어와 플랫폼에서의 개선 노력

추가 논의

  • React Native Web의 역할
    • Olga 💬: React Native API를 웹에서 사용할 수 있도록 얇은 레이어 제공
  • React Native의 1.0 버전 계획
    • Nico 💬: API 안정성과 장기적인 변화 없는 상태를 유지한 뒤에 출시 예정

마무리

  • 참여 패널들에게 감사의 인사와 박수 👏

둘째날은 대부분 React Native와 관련된 발표들로 구성되었습니다.

개인적으로도 모바일 앱을 개발할 때는 React Native를 주로 사용하는데,

굉장히 불안정한 상태였던 과거에 비해 현재는 많이 안정화 된 것 같습니다.

그래고 몇년 내로 버전 1.0이 나올 것이라고 굳게 믿고 있습니다ㅎㅎ

주변에 React Native를 사용하시는 개발자분이 있다면 이 글을 공유해주시면 도움이 될 것 같습니다ㅎㅎ

그럼 저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀

지금 가입하고 새로운 매거진을 이메일로 받아보세요!

Copyright ⓒ Soaple. All rights reserved.