1. API 통신 간의 보안
1-1. 중간자 공격(MITM)
- 악성 루트 CA 설치로 트래픽 장악
- 토큰, 개인정보, 요청 파라미터 노출
1-1-1. 방지 방법
Root CA → Intermediate → Leaf Cert → TLS Handshake → Encrypted
1-1-2. SSL Pinning
서버 인증서에서 공개키 추출 → SHA-256으로 계산 → Config Plugin 혹은 네이티브로 설정 → Pin 값을 앱 빌드에 포함
2. 에러 트레이싱
2-1. 오류의 종류
- Syntax Error
- Runtime Error
- Logical Error
Syntax Error
코드 작성 규칙을 어겼을 때 발생하는 오류입니다.
- 코드의 문법 틀림
- 컴파일 / 피싱 단계에서 감지
- 앱 실행되기 전에 발견
- Metro 빌드가 바로 실패
Runtime Error
실행 도중에 발생하는 오류로, 문법은 맞지만 실행과정에서 조건이 맞지 않아서 멈추는 문제 때문에 발생한다.
- 실행 중에 발생
- 문법은 맞지만 동작이 불가능
- 사용자 화면에 빨간 에러 창
Logical Error
문법 밎 실행은 잘되지만 결과가 틀렸을 경우 발생하는 오류
- 에러 메시지가 나오지 않음
- 앱은 정상적으로 동작하지만 결과와 다름
- 디버깅 도구로도 찾기 어려움
Note
Sentry, Debugger로도 논리 오류를 잡아내기 어렵다. 따라서 값이 제대로 나오는지 테스트 코드를 짜거나, 지속적인 test 코드 갱신으로 해결하는게 유일한 방법이다.
2-1-2. 그외 React Native 자주 발생하는 오류
- undefined
- 네트워크 실패
- 네이티브 모듈 오류
- Redner Loop
- 플랫폼 차이
3. 로컬 디버깅의 한계
console.log
가장 쉽게 사용할 수 있는 디버깅 도구이다.
실행 과정 JS 엔진 → Metro Bundler → 개발자 터미널
장점
- 사용하기 쉬움
- 바로바로 만들수 있음
단점
- 개발 환경에서만 동작 → 사용자 기기에서 볼 수 없다.
- Context 없음.
운영 환경에서 필요한 것
- remote logging
- 사용자 기기의 로그를 서버로 전송
- crash reporting
- JS + Native 크래시를 자동으로 수집
- device context
- OS, 기기, 버전 등 메타 데이터 첨부
Error boundary
https://ko.legacy.reactjs.org/docs/error-boundaries.html
잡을 수 있는 에러
- 렌더링 중 에러
- 라이프사이클 메서드
- 자식 컴포넌트의 에러
잡을 수 없는 에러
- 이벤트 핸들러
- 비동기 코드
- 서버 사이드 렌더링
- Boundary 자신의 에러
4. Sentry
4-1. Sentry가 해결해 주는 문제
모바일 앱에서 발생할 수 있는 앱, 에러를 원격으로 수집할 수 있는 도구이다.
- 에러가 보이지 않을 겨웅
- 사용자 입장에서 생기는 문제를 자동 수집
- 네이티브 크러쉬 문제를 쉽게 수집할 수 있도록 도와준다.
4-2. 전체 흐름
앱 에러 → SDK가 에러 catch, 기기 정보 수집 → Json format으로 데이터 준비 → Sentry 서버로 데이터 전송 → Dashboard에서 에러 수집
4-3. SDK가 자동으로 수집해 주는 것
1. 에러 정보
2. 디바이스
3. 앱, 릴리즈
4. 세션, 상용자
4-4. Sentry 기본 세팅
주요 옵션
- dsn : Sentry 프로젝트 고유 주소
- environment : 개발/운영 환경 구분
- traceSampleRate : 성능 추적 비율(0~1 퍼센트 기준)
- enabled : 운영 환경에서만 켜기
