본문 바로가기

TIL

[TIL-171] Session 세션 & 토큰 & 쿠키 쿠키 쿠키는 서버가 브라우저에 데이터를 넣는 수단. 도메인에 따라 제한됨. 서버가 정한 유효기간 있음. 인증(세션)뿐 아니라 웹사이트 언어설정 등의 정보를 담을 수 있음. 브라우저의 요청에 서버가 응답할 때 쿠키를 보냄. 쿠키가 브라우저에 저장됨. 이제 해당 웹사이트에 방문해서 요청할 때마다 브라우저는 자동으로 쿠키를 함께 보냄. HTTP http 프로토콜은 무상태(stateless)임. 서버에 보내는 모든 요청이 이전 요청과 독립적으로 이뤄짐. 따라서 요청이 끝나고 다시 요청 보내면 서버는 누군지(같은 사용자임을) 알 수 없음. 그래서 사용자 인증을 위해 세션이나 토큰을 사용함. 세션 어떤 사용자가 id와 비밀번호를 통해 로그인에 성공하면, 서버는 세션 DB에 해당 유저를 생성함.. 더보기
[TIL-170] React Native React Native 안드로이드 개발 중 앱 "계속 중단됨" 특정 화면 이동 시, 앱 "계속 중단됨" 잘 돌아가던 앱이 에러도 없이 확 꺼졌다. 홈에서 다음 화면으로 넘어가는 그 지점에서 반복적으로 "계속 중단됨"이라는 알림창이 뜨고 앱이 닫힌다. 앱이 중단되는 지점에서 다른 화면으로 이동시켜보았더니 잘 작동한다. 해당 화면에서 문제가 있기는 한 것 같다. 데이터 import에서 문제가? import {BANKS} from '../../assets/data/bankData'; 아무리 봐도 잘못된 코드가 없어서 찾아보다가 고친 부분 중 data를 import한 부분을 주석 처리해보았다. 그랬더니 에러가 뜨면서 앱이 꺼지지 않았다. 그래서 온갖 방법으로 imoprt한 데이터를 고쳐보았지만 에러가 발생하지 .. 더보기
[TIL-169] React Native React state 업데이트 불가 마운트되지 않은 컴포넌트의 상태값 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in SwipeUpDownModal (at Bank.js:175) Toast 만들기 react-native-easy-toast 뒤로가기를 두번 눌러 앱 종료하기 위해, 뒤로가기를 한번 눌렀을 때 앱종료 안내 토스트를 띄우려고 라이브러.. 더보기
[TIL-168] React Native : 안드로이드 BackHandler 앱 종료, Promise로 fetch 동기 처리, 세션 BackHandler 뒤로가기 버튼 -> 앱 종료 BackHandler는 RN의 API로, 안드로이드에 있는 네비게이션바의 뒤로가기 버튼을 눌렀을 때를 감지하여 특정 동작을 실행하게 해준다. 이벤트 구독은 역순, 즉 최신순으로 이뤄진다. 어떤 구독이 true를 반환하면 그보다 이전에 등록된 구독은 호출되지 않는다. 아무 구독도 true를 반환하지 않거나 등록된 구독이 없으면, 자동으로 기본 백 버튼 기능을 실행한다.(뒤로 갈 화면이 없으면 어플이 종료됨.) ※ 모달이 열려있으면 아무 이벤트도 인식하지 않음. // Home.js const exit = () => { BackHandler.exitApp(); }; useEffect(() => { BackHandler.addEventListener('hardw.. 더보기
[TIL-167] React Native [Blocker] Redux 값 정리 로그인이 해제되어야 할 때(로그아웃) 로그인에 성공했을 때 받은 토큰을 redux store에 저장했다. 그런데 뒤로가기를 해서 로그인이 해제될 때를 어떻게 감지해서 토큰을 삭제해야 할지 고민이다. 새로운 로그인을 할 때 이전 로그인에서 받은 토큰이 있어도 덮어쓰기 때문에 상관은 없지만, 토큰이 남아있는 건 보안상 올바르지 않은 것 같다. 그래서 Login(시작화면)이나 PwVerify(비밀번호 입력) 화면에서는 항상 저장된 토큰이나 유저 정보 state가 있을 때 초기화하도록 코드를 썼다. 그랬더니 Login => PwVerify => Home => Bank 로 화면이 넘어가는데, Home에 온 다음 토큰이 삭제되어서 Bank로 넘어갈 때 로그인이 해제된다. 토큰을.. 더보기
[TIL-166] React Native StatusBar 높이 안드로이드 StatusBar.currentHeight https://velog.io/@zlemzlem5656/ReactNative-%EC%97%90%EC%84%9C-StatusBar-%EB%86%92%EC%9D%B4-%EA%B5%AC%ED%95%98%EA%B8%B0 React Native 클립보드 복사 clipboard 라이브러리 https://github.com/react-native-clipboard/clipboard#react-native-communityclipboard npm install --save @react-native-clipboard/clipboard 리액트 네이티브가 기본 제공하던 Clipboard는 이제 쓸 수 없어서 커뮤니티 라이브러리를 이용해야 한다. 위.. 더보기
[TIL-165] React Native ScrollView에서 아래로 당겨 새로고침하기 RefreshControl ScrollView에는 refreshControl이라는 prop이 있다. 공식문서 : https://reactnative.dev/docs/scrollview#refreshcontrol , https://reactnative.dev/docs/refreshcontrol [React Native] ScrollView Refresh Control https://velog.io/@beanzinu/React-Native-ScrollView-Refresh-Control https://enappd.com/blog/refreshcontrol-pull-to-refresh-in-react-native-apps/130/ 뒤로가기 새로고침 Refresh.. 더보기
[TIL-164] React Native React Native && 연산자 사용 시 변수를 문자열로 인식하는 에러 Error: Text strings must be rendered within a component. 잘 뜨던 화면이 렌더링되지 않고 에러가 났다. 내용은 문자열을 컴포넌트로 감싸야 렌더링할 수 있다는 것이다. {isInsufficient ? ( 송금가능금액이 부족해요. ) : point == 0 ? ( 송금가능금액이 없습니다. ) : null} {point && ( 송금가능금액: {parseInt(point - 500).toLocaleString('ko-KR')}원 ? 수수료는 500원이 부과돼요. )} 그런데 문제가 된 부분의 코드를 보면 당연하게도 문자열은 모두 컴포넌트로 감쌌기 때문에 잘못된 부분이 없었다. [React N.. 더보기

티스토리툴바