@0610studio/expo-skia-date-wheel-picker를 만들었다.

Expo / React Native에서 사용할 수 있는 날짜/시간 휠 피커이고, 이름 그대로 Skia를 사용했다.

GitHub: 0610studio/expo-skia-date-wheel-picker

Expo 프로젝트에 위젯 기능을 적용하는 방법을 정리한 글이다.

Expo SDK 55에서 expo-widgets iOS alpha가 공개되었지만, Android까지 포함한 커스텀 구성이나 상세 제어가 필요하면 이런 방식이 여전히 유효하다.

Server-Sent Events(SSE) 란?​

서버에서 클라이언트로 실시간으로 데이터를 보낼 수 있게 해주는 웹 기술.

SSE는 HTTP 연결을 사용하며, 클라이언트가 'text/event-stream'이라는 MIME 타입으로 GET 요청을 서버에 보내고, 서버는 이 연결을 유지. 이후 서버가 새로운 이벤트를 이 연결을 통해 전송함.

웹소켓과 비슷하지만, SSE는 단방향 통신만을 지원함. 만약 클라이언트에서 요청을 보내기 위해서는 별도의 HTTP 요청을 사용해야 됨.

RN 에서의 SSE​

이벤트 루프란?​

자바스크립트는 싱글 스레드(single-thread) 기반으로 동작됨. 즉, 한 번에 하나의 작업만 처리할 수 있다는 것을 의미. 하지만 자바스크립트는 이벤트 루프(event loop)를 통해 비동기적으로 동작할 수 있도록 지원.

이벤트 루프는 자바스크립트 엔진의 메인 스레드에서 동작하는 무한 루프. 이 루프는 실행 중인 코드와 이벤트 큐(event queue)를 관찰하고, 이벤트 큐에 이벤트가 들어오면 해당 이벤트를 처리하는 작업을 수행.

JSX란?​

JSX는 Facebook에서 개발한 JavaScript의 확장 문법. React와 함께 사용되며, 컴포넌트 기반 UI 라이브러리.

JSX는 XML과 유사한 문법으로, HTML 태그와 비슷한 형태로 UI를 작성할 수 있음.

컴파일러에 의해 JavaScript 코드로 변환됨.

Babel이란?​

Gap 이란?​

react native 0.71 버전 부터 지원.

Flex Gap 속성을 사용하면 각 아이템들의 margin 값을 일일히 조정하지 않고도, 아이템들 사이의 간격을 일관되게 유지할 수 있음.

(단, 0.71 버전의 경우 픽셀만 지원. 백분율과 같은 값은 불가.)

마진 사용시 가장자리까지 적용됨.

HOC 이란?​

Higher-Order Component

HOC 패턴은 기존 컴포넌트를 감싸서 새로운 기능을 추가하는 방식.

HOC는 고차 컴포넌트를 반환하며, 이를 이용해 상태 관리, 인증, 라우팅 등 다양한 기능을 추가함.

예제​

Atomic 디자인 패턴 이란?​

• Atoms: UI의 가장 작은 부분을 나타내는 컴포넌트. 예: 버튼, 아이콘, 텍스트, 이미지

• Molecules: 두 개 이상의 Atom 컴포넌트를 조합하여 만든 작은 컴포넌트. 예: 로그인 폼, 메시지 박스

• Organisms: Molecule 컴포넌트와 Atom 컴포넌트를 조합하여 만든 큰 컴포넌트. 예: 헤더, 푸터, 사이드바

문제점?​

출처-휴몬랩 기술블로그

기존 MVC 패턴의 문제점​

기존의 MVC 패턴 state 변경 흐름

MVC 패턴에서 양방향 데이터 흐름이 발생하면 데이터 변환 작업과 유효성 검사를 위해 추가적인 코드 작업이 필요하며, 뷰와 컨트롤러 간의 데이터 전달 과정에서도 문제가 발생할 수 있습니다.

Pure Component / memo / shouldComponentUpdate​

부모 컴포넌트가 업데이트되었을 때 자식 컴포넌트의 불필요한 렌더링을 방지.

그렇다고 해서 모든 컴포넌트에 memo를 사용하게 되면 컴포넌트가 다시 렌더링되지 않도록 최적화를 하지만, 이를 위해서는 컴포넌트를 비교하는 작업이 추가적으로 필요.

이 작업은 일반적인 렌더링 작업보다 더 많은 리소스와 시간이 소모될 수 있기 때문에, 오버헤드가 발생할 가능성이 있음.

렌더링 속도가 느린경우, 자주 불필요하게 재렌더링이 예샹되는 경우에만 사용.