리액트 (8) 썸네일형 리스트형 [Vite] Bundle 사이즈 최적화 하기 평화롭게 개발을 하던 어느날... 빌드를 돌렸는데 Vite가 노란색으로 읽고 싶게 경고를 주었다.500kb가 넘는 chunk가 있으니 코드 스플리팅을 하라는 친절한(?) 경고였다. 번들 크기가 1.7MB라 생각보다 크기도 하고, 성능 측정도 해볼겸 번들 사이즈를 줄여보기로 했다! 1. 현재 번들 크기 확인하기빌드 했을 때 나온 번들 크기가 정확하게 어떻게 되고 있는지 확인해보기 위해 rollup-plugin-visualizer를 이용하여 확인해보기로 했다. yarn add -D rollup-plugin-visualizeryarn build //vite.config.tsimport { visualizer } from "rollup-plugin-visualizer";...export default defi.. iOS 15 Input 입력 안되는 이슈 해결기 웹뷰 기반의 애플리케이션을 개발하던 중에 iOS 특정 기기에서 필드 입력이 안되고 있다는 이슈를 제보 받았다. 현상을 확인해보니 정말 입력이 안되고 있었다.... 입력필드가 덮인줄 알고 여러방면으로 디버깅 했지만 덮여있는 상태는 아니었고(키패드가 올라오는데 안덮이는게 당연하긴 하네..;) QA팀에서 확인 해주셨을 때 입력이 안되는 버전은 다음과 같았다. iOS 14,15 버전Mac :Monterey GPT와 구글링을 총 동원하여 찾아보니 이유는 다음과 같았다. 웹뷰 내에 들어가야 하는 애플리케이션이기 때문에 css에서 기본적인 user-select:none;으로 설정해놓았다. 이 부분이 문제였는데, 이 설정이 사용자가 텍스트를 선택하지 못하게 하기 때문입니다. 이로 인해 Webkit에서 input 필드.. 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기(2) 2023.12.07 - [리액트] - 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기 이 글은 위 글과 이어집니다. 프로그래스 바는 잘 구현을 했고 저 프로그래스 바 퍼센테이지 안에서 3개의 API를 구현해야한다. 그런데 어떤 API는 좀 오래걸리는 API가 있고, 또 어떤 API는 빠르게 결과값이 오는 API가 있어서 속도를 조절해주는게 필요했다. import { useEffect, useState } from 'react'; const usePercentage = ( isLoading: boolean, isSuccess: boolean, startPercent: number = 0, targetPercent: number = 100, speed: number = 250 ) => { const.. 웹뷰 로딩 성능 개선하기 개요 각 네이티브 및 클라이언트에 웹뷰 형태로 제공하고 있는 프로젝트를 서빙하던 중에 고민점이 생긴 부분이 있었다. 해당 서비스는 탭 형태로 제공이 되어 클라이언트 같은 경우는 한 웹 뷰에서는 하나의 페이지만 보인다는 것이다. 그러나 한 페이지를 로드 하는데 약 6.4초 정도의 시간이 걸려 생각보다 로드 시간이 너무 오래 걸리는 느낌이었다. 정적 이미지가 많은 프로젝트는 아니었기에 다른 부분에서 렌더링 성능을 향상해보기로 했다! 현재 성능 네트워크 탭을 열고 분석하기 시작할 때 처음 번들이 3.4MB가 걸리는 것을 확인할 수 있었다. 웹 -> 웹을 열 때는 그리 큰 문제가 아니지만 네이티브에서 웹뷰를 열어줄 때는 꽤나 많은 데이터를 가져오고 있고 탭 하나에 한 페이지 씩만 보여주기 때문에 다른 페이지는 .. 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기 다음과 같은 형태로 프로그래스 바를 구현해달라는 디자인 요청이 왔다. .....? 진행률에 따른 가운데 퍼센테이지의 색상이 글자를 지나감에 따라서 색상을 반전시켜달라는 것이 디자인 요청의 목적이었다. (한번도 해본적 없는데...) 일단은 구현을 해보기로 했다. import styled from 'styled-components'; import { alignItemCenter, flex, justiCenter } from '../style/cssCommon'; type ProgressBarProp = { progressPer: number; }; const ProgressWrap = styled.div` width: 100%; height: 40px; position: relative; background.. Should have a queue. This is likely a bug in React. Please file an issue 해결하기 문제 개요 백엔드 API 4개를 한 화면에서 모두 처리해야하는 상황이 생겼다..! 심지어 모두 병렬적으로 실행하는 것이 아니라 동기적으로 처리해야 한다는게 고민이 되었다.. 그 중에서 한 API는 백엔드에서 분석하는 시간이 오래걸릴 수도 있기 때문에 분석이 완료되었는지 주기적으로 호출하는 Polling 작업도 필요했다. 정리해보자면 다음과 같다. API 4개를 한 화면에서 처리 첫 번째 API는 Polling 처리 고민 우리는 react-query를 사용하지 않기 때문에 의존성 분리를 위해 hook을 만들어서 사용하는 방식을 채택하고 있다. 다행히(?)도 4개의 API는 모두 같은 request payload를 가지기 때문에 하나의 모듈 형태로 만들어 사용하기로 하였다. // useCreateVector.. React VS jQuery Why React 사내에 새로운 프로젝트를 시작하게 되면서 어떻게 jQuery로 되어 있던 코드들을 버리고 React를 도입하게 된 배경을 React의 메인 컨셉과 jQuery의 비교를 통해 설명하고자 한다. jQuery jQuery는 작고, 빠르며, 기능이 풍부한 자바스크립트 라이브러리입니다. 2006년에 jQuery가 처음 나왔을 당시 자바스크립트는 현재처럼 발전되어 있지 않았기 때문에 널리 사용되지 않았으며(현재는 Node.js를 통해 여러 분야에서 사용되고 있다.) 브라우저에 종속되어 있었다. 그렇기에 간편한 API들로 DOM 조작을 한다는 것으로 jQuery는 자바스크립트 영역에서 큰 혁명을 불러일으켰다. //javascript document.getElementById('root') //jQu.. 리액트 라우터 기본적으로 우리 팀이 관리하는 프로젝트는 MPA(Multi-Page-Application) 구조를 가지고 있다. MPA란, 각각의 Page URL을 통해 그에 맞는 HTML을 불러와서 보여주는 형식을 말한다. React를 도입하게 되면서 React는 기본적으로 SPA(Single-Page-Application)을 취하고 있기 때문에 그에 맞는 라우팅을 설정해주어야 한다. 즉, SPA는 CSR(Client-Side-Routing)을 취하고 있기 때문에 하나의 HTML 파일에서 모든 라우팅을 다 처리한다는 의미이다. History and Locations React Router가 어떠한 라우팅 작업이든 할 수 있으려면 브라우저의 History Stack의 변경 사항을 구독할 수 있어야 한다. 브라우저는 사용.. 이전 1 다음
