React Native 사용하면서 배운 것 정리

로컬 저장소?

웹은 브라우저가 기본적으로 로컬 저장소를 제공하지만 앱은 브라우저가 없어서 AsyncStorage나 Secure Storage 같은 라이브러리를 이용해 별도로 로컬 저장소를 구현해야한다.

 

Access Token 과 Refresh Token을 발급하는 것까지 Thunder Client 로 잘 발급되는지 확인하고 이제 프론트로 기능을 만들 차례중 겪은 에러 

 

ReferenceError: Property 'localStorage' doesn't exist

React Native 환경에는 브라우저가 없다 때문에 local Storage도 존재하지 않는다

==> Local 은 Web 전용 기능, App에서는 다른 저장소를 사용하여야함

 

App은 보통 Async Storage 와 Secure Storage 두개의 로컬을 사용한다고 함

---

Async Storage

브라우저의 localStorage 개념

앱의 파일 시스템에 저장함

 

특징:

1. 비동기 방식

2. 간단한 키-값 저장

3. 문자열, JSON 형태 저장 가능

4. 민간정보 보관 안전하지 않음

 

---

Secure Storage

OS가 제공하는 보안금고같은 개념

iOS => Keychain

Android => Keystore

 

특징:

1. 내부적으로 암호화해 저장

2. 앱이 직접 파일을 만지지 않고, OS API통해 접근

3. 루팅/탈옥하지 않으면 접근이 불가함

4. 저장 공간이 작음. ==> 토큰, 민감 정보들만 저장함

---

차이점 정리

항목	Async Storage	Secure Storage
보안	낮음 (파일 노출 가능)	높음 (암호화, OS 관리)
속도	빠름 (파일 접근)	약간 느림 (암호화/복호화 과정)
용량	비교적 큼 (수 MB 가능)	작음 (토큰·비번 같은 소량 데이터)
적합한 용도	설정값, UI 상태, 캐시 데이터	Access/Refresh Token, 비밀번호, API Secret

 

 

정리하면 Async Storage는 단순 로컬 저장소로 보안이 약하기 때문에 일반 데이터 저장에 쓰이고

Secure Storage 는 OS가 제공하는 암호화된 저장소이기 때문에 토큰 같은 민감한 정보들을 보관할때 사용된다

 

==> 나는 토큰을 저장할 것이기 때문에 Secure Storage를 사용해야겠따는 생각이 들었음 그리고 App은 브라우저가 존재하지 않기때문에 쿠키가 존재하지 않는다 원래는 HttpOnly , secure 같은 설정들을 적용할 생각이었는데 전혀 필요하지 않게 됐다.