react

라이브러리를 만들어 배포해보자 - (1) tsc만으로 기본 설정하기

배경아직 대학생이기에, 아직 취업을 하지 못하기에 최근에 용돈벌이용으로 외주를 시작했다.첫 외주를 진행하다가 문득, 보통 외주를 통해 개발하는 웹페이지는 구성, 기능들이 어느 정도 비슷할 수 있다 생각하게되었다. 특히 랜딩페이지와 같이 사용자 UI를 신경써야하는 부분은 더욱 그런 기능이 겹치기 마련이다. 그래서 이런 부분들을 빠르게 개발하기위해 자주 반복되는 로직을 react-hook형태로 모아보자는 다짐을 하게되었다.이번 글에서는 기본적인 설정만 간단하게(아무생각없이...) 하기에 간단하게 살펴보고, 이로인해 발생한 문제들을 다음 게시글에서 해결해 볼 것이다. 기본 설정package.json아래와 같이 구성해주었다.{ "name": "@rapiders/react-hooks", //패키지의 이름 "v..

React-ReactNative Webview통신을 Event-Driven에서 Request-Response형태로 확장하기

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

무한스크롤 (2) - 데이터 요청과 캐시 처리 (react-query)

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

무한 스크롤 (1) - 하단 감지하기 (Scroll Event vs Intersection Observer)

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

React, RN 환경에서 WebView 통신하기 (react-native-webview)

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

React로 라이브러리 없이 Carousel 만들기 (2) - Indexed Carousel

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..

React로 라이브러리 없이 Carousel 만들기 (1) - Non-Indexed Carousel

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

규격이 없고 중첩이 가능한 모달 시스템을 만들어보자

모달이란 무엇인가? 모달은 이목을 집중시키기 위해 사용하는 화면 전환 기법이다. 프론트엔드에서는 반드시 구현하게 되는 그것이다. 공통 모달을 위하여. 왜? 모달이 딱 하나라면 딱히 고민하지 않겠지만, 우리 서비스는 정말 모달이 많다. 반복해서 사용되기에 이를 공통 컴포넌트로 만들어줄 필요가 있었다. 더불어, 모달 자체 규격이 존재하지 않았기에 조금 더 고민해볼 필요가 있다. 어떻게 구현할 것인가? 모달을 구성하는 방법을 찾아보니 여러 방법이 있지만 크게 두 가지로 분류되는 것 같았다. 1. 루트에 하나만 생성하여 전역 상태(type, props)를 변경하며 재사용 이런 느낌으로 사용할 수 있을 것이다. export const ModalWrapper = () => { const { setModalState..