211216 백엔드(인증) 리액트 네이티브

Posted on In

211216

백엔드-Authentication

  • 인증이란? : you are who you say you are, 다양한 방법으로 인증 가능하다 통상적으로 password, id 로
    • 먼저 회원가입을 진행해서 서버에 id, passwrod 를 저장한다.
    • 클라이언트는 로그인 할때 회원가입한 id, password를 서버에 전송한다.
    • 어떻게 로그인 상태를 유지할 수 있을까?
  • 세션과 쿠기 (서버에서 사용할 수 있는 전통적인 옵션- 어떻게 로그인 상태를 유지할지에 대한 방법)
    1. 세션
      • 서버에서 확인후 세션을 만든다 (userId, sessiontId, expiration) - Session DB에 저장 or 파일시스템이나 메모리도 될 수 있음
      • 쿠키에 HTTP Only로 sessiontId 정보를 전달함.
      • 다음 요청때마다 쿠키 정보를 전달해줌
      • 장점 : 브라우저에 전달만 하면 되서 간단하고, sessionId 만 전달하면되서 사용자의 정보를 전달하지 않아도 된다. HTTP Only를 사용하면 스크립트로 못읽기 때문에 보안상의 이점도 있다.
      • 단점 : Stateful 하기 때문에 다양한 서버들이 SettionDb를 읽어야 하고 많은 요청이 들어오게 된다. 내부적으로 네트워킹이 많아짐. 성능 하락
    2. JWT (Json Web Token)
      • 다음과 같은 정보를 JSON으로 만들고 토큰화해서 보낸다. header, payload, signature, 모든 정보는 인코딩해서 보내고 서버에서 secrete으로 사용하는 키도 인코딩해서 signature에 포함해서 보낸다.
      • 로그인 하면, 로그인 정보 + 만료 시간 등등 합쳐서 JWT를 만듦.
      • 클라이언트는 Header를 이용하여 모든 request마다 JWT를 포함해서 전달해 줌.
      • 서버는 JWT를 검증한 후에 데이터를 반환함.
      • 장점 : 서버에 State가 없다. 서버를 확장하거나 분산하기에 용이하다.
      • 단점 : JWT 자체가 단점이 될 수 있다. → 계속 JWT를 주고 받아야 한다. 만약 영원히 만료되지 않은 JWT를 헤커가 탈취한다면.. 사용할때 보안에 신경써야 한다.
  • bcrypt 란? : 사용자 정보를 그대로 저장하는 것이 아니라 암호화 해서 저장하기 위해 사용함. → 암호화만 가능한데 (암호화 한것을 비교하는 것), salt 가 없다면 경우의 수로 암호화 해 보면서 유추할 수 있어서 salt를 포함하여 경우의 수를 늘림. 10~12 정도로 설정. 길어지면 cpu 부하 심해짐..
  • JWT, 32 시크릿 키로 권고 됨. 한번 발행된 토근은 변경되면 안된다. → 만약 한버이라도 변경 한다면 최종적으로 붙은 signature도 변경되어서 verify시 오류 발생하고 누군가 변경한 토큰인지 확인 가능하다.
    • 만료될 수 있도록 만들어야 한다. → option으로 전달함. {expiresIn: 2} 이런식으로 → 2초 후에 만료

리액트 네이티브

  • Platform.OS 로 플랫폼 종류를 알 수 있다.
  • KeyboardAvoidingView 에서 behavior Props 로 동작 장식을 정의할 수 있다.
    • padding : 키보드 열렸을때 뷰 하단에 패딩을 설정
    • height: 뷰의 높이 자체를 변경
    • position: 뷰의 위치를 설정
  • Platform.select({ios:, android,}) 를 사용해서 플랫폼 별로 옵션을 줄 수 있다.
  • 터치 했을때 효과 주기
    • TouchableHighlight: 터치했을 대 배경색 변경
    • TouchableNativeFeedback: 안드로이드에서 물결 효과 ios에서는 오류
    • ToucableOpacity: 투명도 조정
    • ToucableWithoutFeedback: 아무 효과도 적용하지 않는다.
  • keyboard.dismiss() 는 현제 나타난 키보드를 닫는다.
  • onSubmitEditing → enter 눌렀을때 이벤트
  • returnkeyType=”done” → 키보드 눌렀을대 return 타입을 보여줌.
  • FlatList에 ItemSeparatorComponent Props를 지정해서 컴포넌트 사이에 구분선을 설정할 수 있다.
  • react-nativevector-icons 를 사용하면 벡터 아이콘을 리액트 네이티브 프로젝트에서 간편하게 컴포넌트처럼 사용할 수 있게 해준다.
  • ios/proejctForderName/info.plist → 앱의 이름, 아이콘, 버전 등 앱에서 필요한 설정값을 지니고 있다.
  • android/app/build.gradle → 프로젝트의 의존성, 프로그인 및 빌드에 필요한 설정에 대한 정보를 지니고 있다.
  • Alert.aler(제목, 내용, 버튼, 옵션) 버튼 부분에 {text, onPress, style} 을 각각 설정해서 버튼 스타일 내용, 눌렀을때 동작등을 정의할수 있다. 안드로이드에서는 버튼 스타일이 적용되지 않아서 따로 만들어야 한다. 설정할 수 있는 style은 다음과 같다.
    • cancel: 취소 기본에 폰트 두껍게
    • default: 기본 파란색
    • destructive: 파괴적인? 삭제하는 상황에 적합 빨간색이 됨.
  • 옵션으로는 바깥에 눌렀을때 동작이나, 안드로이드에서는 바깥에 눌렀을때 취소 옵션 같은걸 줄 수 있다.
  • 브라우저에 localStorage 와 비슷한 AsyncStorage 를 사용할 수 있다. API도 비슷한데 다른점이라면 AsyncStorage는 비동기로 동작해서 Promise를 반환한다. yarn add @react-native-community/async-strage 로 설치한다.
  • useEffect 에는 cleanup 하는 기능이 있는데 내부 함수가 promise를 반환하면 충돌하기 때문에 내부에서 async 함수를 선언한 후에 호출하는 방법을 사용한다.
  • AsyncStorage를 사용할때는 추상화 해서 사용하는 것을 추천한다 → 나중에 다른 스토리지를 사용할때 쉽게 교체할 수 있도록
  • android 는 AsyncStorage 로 6MB를 저장할 수 있다 늘리려면 gradle.properties를 수정한다. ios 는 따로 최대 용량이 설정되어 있지 않다.
  • AsyncStorage는 데이터가 많아지면 성능이 떨어진다. 또한 정렬이나 인덱싱 기능을 지원하지 않는다. 소규모에서 적합하고 조금 규모가 커지면 대안으로 react-native-sqlite-storage 같은것을 사용하면 된다.