Appearance

2025년 4월 8일 ​

패키지 업데이트 ​

다음 패키지를 업데이트했어요.

  • react-native-bedrock: 0.0.16
  • @react-native-bedrock/native: 0.0.16
  • @apps-in-toss/framework: 0.0.18
  • @apps-in-toss/web-framework: 0.0.18

웹 localStorage, IndexedDB가 초기화되는 이슈 해결 ​

서비스에 진입할 때마다 localStorage와 IndexedDB 데이터가 초기화되는 문제가 있었어요. 이번 업데이트에서 이 문제가 해결돼서, 이제 사용자가 저장한 데이터를 유지할 수 있어요.

토스 앱 버전 확인하기 ​

이제 getTossAppVersion 함수를 사용해서 현재 실행 중인 토스 앱의 버전을 문자열로 가져올 수 있어요. 버전 조건에 따라 기능을 분기할 때 유용해요.

tsx
import { getTossAppVersion } from "@apps-in-toss/framework";

const version = getTossAppVersion();
// 예: "5.206.0"

샌드박스앱 WebView 디버깅 기능 ​

이제 앱인토스 샌드박스 앱에서 WebView를 디버깅할 수 있어요.

자세한 방법은 React Native WebView 디버깅 가이드 문서를 참고해보세요.

Storage 지원 ​

@apps-in-toss/framework에서 데이터를 저장하고 불러올 수 있는 Storage API를 사용할 수 있어요. 앱이 종료되었다 다시 시작해도 데이터가 유지돼야 할 때 유용해요.

예시 ​

ts
import { Storage } from "@apps-in-toss/framework";

await Storage.setItem("my-key", "hello");
const value = await Storage.getItem("my-key"); // 'hello'
await Storage.removeItem("my-key");
await Storage.clearItems();

Safe Area 여백 값 구하기 (getSafeAreaInsets 지원) ​

@apps-in-toss/web-framework에서 getSafeAreaInsets 함수를 사용할 수 있어요. 모바일 브라우저에서 상태바나 홈 인디케이터 같은 시스템 UI에 의해 콘텐츠가 가려지는 문제를 방지할 수 있도록, 화면의 안전 영역(Safe Area) 여백 값을 픽셀 단위로 계산해줘요.

ts
import { getSafeAreaInsets } from "@apps-in-toss/web-framework";

const insets = getSafeAreaInsets();
// 예: { top: 44, bottom: 34 }

자세한 내용은 Safe Area 여백 값 구하기 문서를 참고해보세요.

Type-Safe Router의 자동 타입 생성의 기본 값 변경 ​

bedrock dev를 실행한 상태에서 /pages 폴더에 파일을 추가하면, 해당 페이지에 대한 타입이 자동으로 생성돼요. 별도 설정 없이 바로 타입 안전한 라우팅을 사용할 수 있어요.