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

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

잡담​

바라봄을 오픈한 지는 6년이 지났고(20년 5월), 마지막으로 바라봄을 업데이트한 지 2년이 지났다.

바라봄은 처음에 설계할 때 기획했던 것보다 기능이 많이 들어갔고 복잡해졌다.

주니어 개발자 시절 설계/개발한 바라봄은 새 기능을 추가하기도, 유지보수하기도 너무 어려워졌다.

그래서 제로베이스로 바라봄을 다시 설계 및 개발에 들어갔다. 처음에는 1년이면 될 줄 알았는데 현실적인 이슈(이직, 결혼, 이사)로 2년이나 걸려버렸다.

잡담​

또롱이(우리집 고양이)와 대화하면 어떨까?! 라는 단순한 아이디어로 반려동물 채팅 MVP를 만든 지 벌써 3년이 지났다. (ChatGPT 활용해 반려동물 대화 기능 만들기)

AI Agent도 없던 시절이라, 반려동물 채팅 기능까지 유지보수하기는 1인 개발자로서 쉽지 않았다.

그렇게 얼마 지나지 않아 당시 연결해둔 LLM API가 종료되었고, 단일 문자열 프롬프트에 강하게 의존하던 구조는 LLM API 변경에도 쉽게 망가져버렸다.

그렇게 방치된 기능으로 2년이 흘렀다.

개인적인 일들​

잡담과 변명부터 하자면, 2025년은 중대사가 많았다.

Server-Sent Events(SSE) 란?​

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

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

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

RN 에서의 SSE​

이벤트 루프란?​

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

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

잡담​

필자의 본업은 코딩학원의 직원으로 주 업무는 외주개발이지만, 종종 아이들에게 강의도 하고 학부모 상담도 한다.

그리고 수 년전부터 코딩을 잘 모르시고 OA, 자격증을 원하시는 학부모 상담시 이런 말을 했었다.

'아이들이 성인이 되었을 때의 미래는 지금으로선 상상하기 힘들다. 20년 전 스마트폰을 상상하지 못했듯.'

'그렇기 때문에 아이들이 코딩을 배움으로 AI가 어떻게 생각하고, AI에게 어떻게 명령해야 할지를 깨우치는 게 중요하다.'

JSX란?​

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

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

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

Babel이란?​

Gap 이란?​

react native 0.71 버전 부터 지원.

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

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

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