개발 창고

[React] ky로 로그인 유지 구현하기 (with. JWT 인증)

들어가며 ky는 fetch와 ESM을 기반으로 하는 HTTP Client를 제공하는 라이브러리입니다. 주로 사용되는 Axios의 interceptors와 비슷하게 ky는 응답을 intercept 하여 커스텀하게 조작이 가능한 AfterResponse, BeforeRequest와 같은 훅을 제공합니다. 따라서 해당 훅을 이용하여 JWT 인증을 통해 로그인 상태를 처리하는 앱에서, 로그인을 유지하도록 하는 방법을 소개하겠습니다. API 요청 전 Header에 access token 담기 beforeRequest 훅에서는 HTTP request 이전에 수행 할 동작을 지정할 수 있습니다. 따라서 아래와 같이 accessToken을 Authorization Header에 담는 로직을 구현합니다. import {..

[React] 함수의 중복 호출을 막기 위한 throttling 기능 적용기

문제사항 const handleSubmit = async () => { // API 호출... }; API를 호출하는 위와 같은 함수가 있습니다. 이러한 함수는 보통 button, input의 이벤트 함수에서 실행되는데, 예를 들어 유저가 단시간 내에 버튼을 여러번 클릭시 API 통신 오류가 발생하는 경우가 있었습니다. 이에 해당 함수의 클릭 시간을 조절하는 throttle기능이 필요했고, 이를 구현한 방법을 소개하겠습니다. 중복 호출을 막기 위한 useThrottle 훅 구현하기 throttle기능을 구현하는 방법 중에는 여러 방법이 있지만, 저는 slash 라이브러리처럼 함수 전체를 감싸서 throttle기능을 적용하는 방식으로 구현하고 싶었습니다. 이에 throttle의 callback의 시간을 관..

[React Native] deeplink를 이용해 알림을 여는 방법(with. notifee)

들어가기 전에 딥링크(deeplink)는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 딥링크를 이용하여 React Native 어플리케이션의 특정 페이지에 도달시킬 수 있습니다. 예를들어 'app://targetPage' 링크를 딥링크로 열게되면 targetPage가 표시됩니다. 구현 요구사항 우선 아래와 같이 notifee를 이용하여 서버에서 보내는 데이터인 notifee.data 영역에 deepLinkUrl을 담습니다. 이후 알림을 전송하고, 앱에서 알림을 받으면 해당 deeplink url을 이용하여 앱을 열어야 하도록 구현합니다. 하지만 이런 방식은 레퍼런스가 없어 기능을 직접 구현하였고,지금부터 구현한 방법을 살펴보겠습니다. "data": { "notifee": { "id": "1", "t..

[iOS] 스플래시 화면이 찌그러지는 문제

문제점 앱 접근시 아래와 같이 splash screen이 xcode에서 작성한대로 표시가 되지 않고 로고(png)가 원래 사이즈대로 표시되는 문제가 발생했습니다. 해결방안 1. 로고 이미지의 하단에 'Add New Constraints' 버튼을 클릭합니다. 2. 간격을 모두 0으로 설정한 다음, 'Constrain to margins' 버튼을 선택 해제한 후 Add 4 Constraints 버튼을 눌러 새 Constraint를 생성합니다. 3. constrains의 trailing, leading의 기준을 safe area로 설정하고, 마찬가지로 Top, Bottom의 기준을 superView로 설정합니다. 4. 마지막으로 전체 View의 Content Mode를 'Scale To Fill'로 설정합니다..

[React Native] 앱 접근시 필요한 동작을 구현해보자

시대생 앱은 최초 앱 접근시 로그인 유무에 따라 AccountScreen을 보여주거나, MainScreen을 보여줘야 합니다. 또한 로그인이 되어있다면 device 정보를 서버에 업데이트 시키거나, 알림을 위한 firebasePushToken 정보를 얻어오는 과정이 필요하기 때문에 이와 관련된 로직이 앱 접근시 실행되어야합니다. 본 글은 앱 접근시 어떤 로직이 실행되도록 구현했는지, 그리고 어떻게 앱의 전체적인 회원 로그인 관련 처리를 구현했는지를 설명합니다. 시작하기 앞서 시대생 앱의 사용자 인증 인가 방식은 JWT 방식을 사용합니다. React Native의 Device Storage로는 mmkv를 이용합니다. 앱 화면을 보여주는 RootStackNavigator는 아래와 같습니다. const [is..