리액트

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와 로직은 ..

코드 스플리팅으로 리액트 초기 렌더링을 개선한 이야기

문제점 성능을 측정해보기 위해 lighthouse를 사용하던 중 점수대가 심상치 않다는 것을 알게되었다. 무려 79점...이었다. 문제파악하기 우리 AlgoITNi는 Home과 Room 두가지 페이지로 구성된다. 대부분의 기능은 Room에 필요하고, Room에서만 사용한다. 그러나, 리액트는 SPA이기에 이런 모듈들을 Home을 렌더링할때도 가져오게되고, 따라서 Home의 초기렌더링 성능이 나빠지는 것이라 추측했다. 확인해보기 프로덕션에서는 빌드가 완료된 청크가 네트워크 응답으로 오기때문에 정확하게 분석하기 어렵다. 따라서 개발환경에서 Home에 접속했을때 개발자도구의 네트워크 탭을 통해 어떤 코드를 불러오는지 확인했다. 빨간색 부분이 Room에서 필요한 코드들이다. 즉, Home에 접근했을때는 필요없는..

ContextAPI로 라이브러리 구현부 의존성 제거하기

https://0422.tistory.com/334 실시간 동시편집 구현 연대기 (3) - Yjs를 도입해보자 이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있 0422.tistory.com 이전 게시글에서 CRDT를 Yjs를 사용해서 구현했다. 하지만, 언젠가는(하겠지...?) 직접 구현해놓고 싶기때문에 라이브러리를 통해 만들어둔 기능을 언제든 내가 만든 모듈로 교체할 수 있도록 처리해둘 것이다. 문제점 실제 구현부인 handleRecieveCodeMessage, 즉 통신을 통해 다른 피어의 코드 데이터를 받았을때의 로직인데, 대부분이 Yjs의 모듈..

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

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

진짜 리액트는 어떻게 생겼나? (2) - renderWithHooks와 훅의 본체

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이전 게시글에서 reconciler 패키지의 rednerWithHooks함수를 찾았고, 거기서 훅을 주입한다는 것을 알게되었다. 그럼 실제 코드를 확인하며 어떻게 훅을 주입하고 있는지 확인해보자. renderWithHooks 우선 함수의 인자들을 확인해보자. current와 workInProgress, Component, props, refOrContext, nextRenderExpirationTime을 받아서 사용한다. 자... 하나씩보자. 일단 current와 workInProgress는 넘어가자. Component는 실행시켜야할 함수를 말한다. (ReactElement의 tag 프로퍼티) props는 ReactElement의 props를 ..

진짜 리액트는 어떻게 생겼나? (1) - useState 따라가며 흐름잡기

본 게시글의 코드는 리액트 16버전을 기준으로 하고있습니다. 이 글을 쓰게된 계기 이전 게시글까지 리액트처럼 동작하는 코드를 작성해보았다. 그런데 이전 게시글에서 만든 useState는 한가지 치명적인 문제가 있다. useState를 쓰는 컴포넌트가 조건부 렌더링이 되는 경우, states배열이 망가진다는 것이다. const Component1=()=>{ const [inner,setInner]=useState("컴포넌트1입니다!"); return {inner}; } const Component2=()=>{ const [inner,setInner]=useState("컴포넌트2입니다!"); return {inner}; } const App=()=>{ const [state,setState]=useState..