Frontend/문제 해결기

이전 게시글들에서 React Webview와 ReactNative의 통신을 시켜보았고, 추가적인 데이터도 주입시켜보았다. 이때의 통신은 ReactNative->React 통신의 경우 onLoad시 React Webview에서 필요한 데이터를 한번에 주입시켜주는 형태 하나였고 React->ReactNative 통신이 대다수여서 불편함이 있지 않았었다. 하지만 프로젝트가 커지고, 서버 API호출을 줄이고자 내활동을 저장하는 부분에 대해 네이티브 기기의 DB를 사용하는 부분을 적용시켰고, 이에 따라 Webview가 열린 후에 데이터를 요청해야하는 부분이 점점 커져갔다. 기존의 방식 처음에는 native DB에 있는 하나의 데이터만이 필요하여 ReactNative의 WebView컴포넌트가 열린 후, onLoad..

이전 게시글에서 React Webview와 ReactNative의 통신을 시켜보았다. 이때의 방식은 WebView가 onLoad되었을때, React Webview에서 필요한 토큰을 주입하게 하는 형태였다. 하지만, 프로젝트가 커지고, 다양한 API요청이 많아짐에 따라 우리팀은 자연스럽게 비용문제가 발생할 수 있을거라는 걱정을 하게되었고, 이에 서버 API호출을 줄이고자 데이터를 받아오는 부분에서 네이티브 기기의 DB를 사용하기로 하였다. 문제상황 기기 DB에 저장된 데이터를 받아와서, 웹뷰에서 보여줘야했다. 이때의 DB테이블은 우리팀원이 이미 만들어 둔 상태였기에, 나는 이것을 조회해서 웹뷰에 넣어만 주면 됐다. 그런데 DB조회는 비동기적으로 일어난다. Promise를 resolve시켜야 실제 데이터를 ..

이전 글에서 useInfinityQuery를 사용하여 무한 스크롤 피드를 구현해보았다. 하지만 두가지 문제가 존재했다. 새롭게 글을 작성/수정/삭제 하는경우 피드데이터는 어떻게 최신화 되어야 하는가? 세부 글보기에서 좋아요/댓글을 추가/삭제하는 경우 피드데이터는 어떻게 최신화 되어야 하는가? 이번에는 이 두 가지 문제를 해결해보자. 이 문제 중 두번째 문제가 당근마켓 그룹플랫폼 인턴직무의 사전 질문이었다...! 이걸 직접 해결해 볼 수 있는 기회가 이렇게나 빨리 오게 될 줄이야.... https://0422.tistory.com/331 당근마켓 윈터테크 인턴십 그룹플랫폼 직무면접 불합격 회고 그룹 플랫폼 팀에 지원 이번 윈터테크 인턴십은 프론트엔드가 코어, 광고, 그룹플랫폼 3가지 형태로 구성되어있었다...

이전글에서 무한스크롤에 필요한 두가지 조건을 정리했다. 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드 첫번째 조건은 이전글에서 완료했으니, 2번째 미션을 해결할 차례다. 어떻게 콘텐츠가 계속 로드되게 만들 수 있을까? 데이터를 페이지네이션 형태로 제공하는 방법은 크게 cursor 기반과 offset 기반, 두가지 방법이 존재한다. 하지만 그것은 백엔드 개발자의 일이구요... 라고 하면 큰일나니 간단하게 알아보자. offset 기반 페이지단위로 구분해서 구현이 간단하나 데이터 중복문제(중간에 글이 써지는경우)가 발생한다. offset값이 커지면 앞의 데이터를 모두 읽어야해서 DB상 성능문제가 발생할 수 있다. cursor 기반 cursor라는 사용자에게 마지막으로 응답해준 마지막 데이터 식별자 값을..

배경 커뮤니티 서비스를 만들고 있는데, 피드를 만들어야 했다. 이전에 당근마켓 인턴십의 사전 질문이기도 했던 세부 글보기 에서 좋아요/댓글이 추가/삭제된 경우 어떻게 피드에 반영할 것인가?라는 질문에 직접 구현해보며 답할 수 있는 좋은 기회라고 생각해서 구현하게 됐다. 무한스크롤에 필요한 것들을 하나씩 확인해보면서 구현할 것이다. 필요한 것 알아내기 무한 스크롤은 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드되는 사용자 경험 방식이다. 그럼 구현에 필요한 두가지 필수 조건을 알 수 있다. 사용자가 페이지 하단에 도달했을때 콘텐츠가 계속 로드 이 두 가지 미션을 해결하면 무한스크롤이 되는 것이다. 이 게시글에서는 1번 항목에 대해 어떻게 구현할 것인지를 고민해보았다. 사용자가 페이지 하단에 도달했음..

https://0422.tistory.com/347 React, RN 환경에서 WebView 통신하기 (react-native-webview) 배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그 0422.tistory.com 위 글에서 이어진다. 이전 게시글을 통해 앱-웹간 통신으로 토큰을 받아오고 이벤트를 발생시키는 것까지는 완료했다. 하지만 이제부터 시작이다. 받아오기전에는 어떻게 하고, 받은 토큰을 어떻게 관리할 것인가? 토큰을 받아오기 전에는? 토큰은 앱의 onLoad를 통해 주입되지만, 이 이벤트가 동기적으로 작동하지는 않는다. 따라서 웹 화면은 로..

배경 웹뷰를 사용하여 앱을 구성하고 있다. 웹뷰는 마치 HTML의 iframe 태그처럼, 내부적으로 하나의 화면을 띄우는 형태이다. 그런데 우리 서비스의 로그인 로직은 앱에 있어서, 웹에서 따로 로그인/로그아웃을 구현하지 않고, 앱 내부의 JWT토큰을 웹으로 전달할 수 있어야 했다. 또한 웹내에서 JWT토큰이 만료되는 경우 로그인 페이지로 이동시켜줄 필요가 있었다. 우선 Web과 App환경의 통신 방법에 대해 알아보고, 이후에 토큰을 내부적으로 관리해볼 것이다. 기본 구성하기 기본적으로 react-native-webview 라이브러리를 사용해서 WebView 화면을 띄워주었다. https://www.npmjs.com/package/react-native-webview react-native-webview..

Indexed Carousel 이제 Index 기반의 Carousel을 구현해보자. 사실 로직은 이전 글과 거의 동일하다. 시작 터치 위치를 기억하고, 움직일때 transX를 변경하고, transX를 기반으로 translateX를 통해 스크롤을 구현한다. 여기서 Index를 추가하고, 특정 scroll값을 넘으면 인덱스를 변경시켜 주고, translateX값을 Index기반으로 작동하도록 만들어주면된다. 그래서 handleTouchStart와 handleTouchMove콜백함수는 Non-Indexed와 동일하다. // Non-Indexed와 동일하다. const handleTouchStart = (e: React.TouchEvent) => { setTouchStartX(e.touches[0].client..

문제상황 Teengle 프로젝트는 웹뷰프로젝트로, 모바일 기기에서 실행되어야하다보니, 여러 정보를 작은 화면에서 조회하기위해서 상당히 많은... Carousel이 필요했다. Non-Indexed Carousel 첫번째 Carousel은 커뮤니티 피드에서 마치 스레드처럼 여러개의 사진을 볼 수 있는 기능에 필요했다. 이 Carousel은 아래 사진 처럼 스크롤한 만큼 자유롭게 이동이가능해야했다. 그냥 overflow scroll로 구성해서는 스크롤 속도가 너무 빨라서 사용할 수 없었다. Indexed Carousel 두번째 Carousel은 투표기능에서 여러 투표를 슬라이드를 통해 확인하기 위해 필요했다. 이 Carousel은 스크롤시에 요소를 중앙으로 배치시켜주어야 했기에 Non-Indexed와 로직은 ..

배경 새로운 프로젝트는 많은 사용자들이 모바일 환경에서 사용할 수 있도록 앱 형태를 택했다. 또, 플레이스토어/앱스토어에서의 업데이트 없이, 실험을 통해 앱을 지속적으로 빠르게 업데이트해보고자 그 중에서도 웹뷰를 선택하게 되었다. 사실 웹뷰는 토스/당근에서 다양한 실험/빠른 업데이트 때문에 사용한다는 이야기를 들은 뒤부터 사용자에게 정말 유효한 가치를 전달하려면 꼭 필요한 기술이라고 생각해서 꼭 한번 도전해보고 싶었다. 문제 웹뷰 화면 설계를 이야기 하지 않을 수가 없다. 웹뷰, 아니 앱의 문제점중 하나라고 한다면, 바로 스토어 리젝이다. https://orangebrother.dev/blog/app_why_reject iOS / Android 앱 심사 시에 발생하는 Reject 사유들 앱을 배포하기 위..