본문 바로가기

분류 전체보기

 (28)
React hook 리팩토링 하기 (xstate) 최근 위와 같은 스타일의 페이지를 개발할 일이 아주 많았다. 첫 페이지 로드 시 A 화면, 3초 뒤에 B 화면, API 응답 성공 후에 C 화면, 다시 2초 뒤에 D 화면 ... 이런 식이다. 이런 유형의 페이지를 처음 작성할 땐 아래처럼 작성했다. function useTransition() { const [isPending, setIsPending] = useState(true); const [isFinishSoon, setIsFinishSoon] = useState(false); const [isFinishAll, setIsFinishAll] = useState(false); useEffect(() => { const handle = setTimeout(() => setIsPending(false)..
react-query에서 Throttling API 호출 구현하기 (leading, trailing) 요구사항 1. 슬라이더 값이 바뀌면 API 호출 2. 3초에 최대 1회 API를 호출할 것 3. API 호출만 제한하고, 슬라이더는 실시간으로 변경되어야 함. 해결과정 API 호출을 제한하는 일이기 때문에 자연스럽게 debounce와 throttle을 생각하게 된다. 해당 개념들을 간단히 보면, 얼핏 디바운싱이 적절할 것으로 생각했지만, 슬라이더를 이리저리 움직이고 있으면 API 호출을 전혀 하지 않게 된다. 3초에 최대 1번이 요구사항이기 때문에 디바운싱보다는 쓰로틀링이 더 적합하다. 해결 전략을 정했고 쓰로틀링을 직접 구현하고 싶어서 우선 구글링했다. 버그가 있던 구글링 코드 import React from "react"; export default function useThrottleValue(va..
requestAnimationFrame 정리 최근 requestAnimationFrame이라는 브라우저 API를 많이 사용하고 있다. 크롬에서 웹을 개발할 때는 렌더링 성능이 좋기 때문에 그냥 css의 translate를 사용하면 웬만한 요구사항은 해결할 수 있지만 웹뷰에서는 성능이 좋지 않기 때문에 평범한 css의 translate도 굉장히 버벅이게 된다. 특히 translate 되는 Element가 화면에서 클수록 사용자 체감은 크다. 보통 프론트엔드를 처음 배울 때 javascript 보다 css를 이용해 구현하는 것이 성능적으로 좋다고 배웠는데 꼭 그런 것은 아닌 것 같다. css의 최대 단점은 기기의 성능에 영향을 많이 받기 때문에 디바이스, 브라우저 상관없이 균일한 사용자 경험을 위해서라면 번거롭더라도 javascript를 이용하는 것이..
IOS 웹뷰 페이지 개발 업무에서 문제 해결 과정 업무에서 페이지 슬라이딩 애니메이션을 구현할 일이 생겼는데 개발 중에 예상하지 못한 문제가 많이 발생했고, 해결하면서 배운 것들이 많았다. 프레임워크는 Next.js를 사용하고 요구사항은 다음과 같다. [요구사항] 개발할 페이지는 아이템 목록 페이지, 아이템 상세 페이지 목록 페이지에서 상세 페이지 이동 시 목록 페이지의 스크롤 위치, 상태값 등 유지해야 함 (돌아왔을 때 모든 것이 그대로여야 함) 상세 페이지는 화면 오른쪽 끝에서 왼쪽으로 슬라이딩으로 부드럽게 와야 함 상세 페이지가 슬라이딩될 때 목록 페이지가 겹쳐서 보여야 함. 목록 페이지에서 상세 페이지로 이동한 뒤, 다시 뒤로가기를 통해 목록 페이지로 이동했다면 목록 페이지에서는 상세 페이지로 앞으로가기는 불가능(브라우저 이벤트 자체를 막아야 함..
Next.js 13 마이그레이션 소감 및 아쉬운 점 들어가기 12버전을 오래 사용하면서 피부로 와닿던 Next.js의 문제점들을 vercel이 인지하고 해당 내용으로 13버전을 준비한다고 했을 때 묘한 쾌감을 느꼈었는데 이번에 토이프로젝트에서 13버전으로 마이그레이션 작업을 진행했다. 내가 Next.js 13을 기다렸던 이유는 훨씬 빨라진 터보팩도 있지만 무엇보다 기존 pages 폴더의 구조적 한계였다. 파일 경로가 곧 URL이 되는 구조로 인해 pages 폴더에 파일을 함부로 추가할 수가 없었기에 전체 프로젝트 구조는 번잡해졌고 중첩 레이아웃이 적용이 되지 않기에 페이지마다 레이아웃을 따로 설정해야 했다. 그리고 가장 중요한 것은 위와 같은 구조적 문제로 인해 유사 SPA 방식을 지원한다고 소개하는 next/router 패키지는 말그대로 유사 SPA이기..
BFF 활용하여 프론트엔드만을 위한 API 만들기 이번 포스트는 최근 웹뷰 서비스를 개발하면서 백엔드 개발자와 커뮤니케이션 갈등을 BFF 기술을 활용해 해결했던 개인적인 경험을 소개하는 글입니다. 프론트엔드 개발자라면 누구나 겪는 상황이라 그런지 해외 개발자 커뮤니티에서도 위와 같은 재밌는 밈이 많았다. 프론트엔드 개발자가 바라는 가장 이상적인 백엔드 개발자는 화면에 Fit한 API를 제공받는 일이다. 아직 주니어 개발자인 나는 이번 웹뷰 서비스를 개발하면서 아주 아주 복잡한 API를 받자마자 당황했다. 이 하나의 API를 이해하기 위해 따로 회의를 잡아야 할 정도로 커뮤니케이션 비용이 컸는데 나는 이런 상황이 익숙하지 않아서 백엔드 개발자에게 화면에 맞춰서 새로운 API를 개발해줄 것을 요구했다. 하지만 백엔드 개발자도 이유가 있었다. 이미 만들어진 ..
requestIdleCallback을 활용한 렌더링 성능 개선 경험 웹 개발에서 성능 개선은 여러 기준이 있지만 가장 중요한 것은 사용자 경험이다. 사용자 경험을 최대한 끌어올리기 위해선 성능이 중요한데 제한된 디바이스 환경에서 사용자에게 당장 필요한 요소를 먼저 처리해줘야 사용자에게 좋은 경험을 줄 수 있다. 그러기 위해 사용자에게 당장 필요하지 않은 요소를 후순위로 미루게 된다면 자연스럽게 높은 사용자 경험을 달성할 수 있게 되는 것인데 그것을 도와주는 브라우저 API 중 하나가 requestIdleCallback이다. 아직 완벽하게 표준이 된 API는 아니지만 사용이 권장되고 있다. requestIdleCallback window.requestIdleCallback(callback); 브라우저가 idle 상태일 때 큐에서 콜백을 꺼내서 실행하는 API이다. 따라서 ..
css-in-js 컴포넌트의 성능 개선과 버그 해결 (feat. useInsertionEffect in React18) 토이프로젝트로 하고 있는 모두의파티 서비스에서 차트를 보여주는 것이 필요했다. 처음엔 차트 관련 라이브러리들을 이용하다가 커스텀 기능들이 마음에 들지 않아서 css-in-js 방식으로 직접 라이브러리를 만들고 있었다. 차트를 구성하는 선, 막대 형태들을 hook으로 만들어서 필요한 형태에 따라 선언하고 각 형태 hook에서는 css-in-js 방식이기 때문에 style 태그를 만들어서 document.head에 추가해준다. 스타일을 추가해주는 역할이기 때문에 useEffect보다 우선적으로 실행되어 동기적으로 처리되는 useLayoutEffect에서 관련 처리를 넣었다. 차트 관련 라이브러리를 만들다보니 이 훅을 많이 쓰게 되는 것 같다. 문제는 각 형태 hook에서 스타일을 계산하는데 간혹 디바이스 크..
브라우저는 html을 다 받았는지 어떻게 알고 렌더링 할까 과거에 봤던 면접 질문이 갑자기 생각났다. 브라우저의 렌더링 과정에 대한 질문을 받고 답변하는 중에 브라우저에서 html을 다 받았는지 어떻게 알고 파싱을 시작하냐는 꼬리질문을 받았다. 그 당시 나는 굉장히 당황스러웠지만 http는 tcp 위에서 돌아가는 것이니 tcp의 close 핸드쉐이크 후에 알 수 있다고 답변했던 것 같다. 하지만 현재 대부분 브라우저에서 사용되는 http/2는 TCP 커넥션을 귀하게 여긴다. 왜냐하면 TCP 커넥션을 다시 맺는 것은 비용이 크기 때문이다. 핸드쉐이크도 맺어야 하고, 혼잡제어라는 TCP의 독특한 방식 때문에 커넥션이 최적화 되기까지 시간이 걸리기 때문이다. (처음에 크기를 1보내보고 괜찮으면 더 크게, 이래도 괜찮아? 하면 더 더 크게 보내는 방식..) 따라서 ht..
[Next.js] Script 추가하기 (채널톡 추가하기, next/script) 최근 업무에서 웹뷰 서비스를 개발 중에 채널톡 서비스를 추가하는 일이 있었다.카카오 공유하기 기능처럼 외부 플러그인이기 때문에스크립트를 로딩하는 일이 필요했다.도입하는 과정에서 알게된 지식들을 이 포스트에서 정리하려고 한다. 스크립트 로딩 원리브라우저에서 스크립트를 읽는 과정은 html을 파싱하면서 시작된다.서버로부터 html을 받으면 파싱하기 시작하고 순차적으로 읽으면서 script 태그를 만나면 특별한 예외 지시자가 없을시 스크립트를 로딩한다. 외부 자바스크립트를 로드하는 것도 원리는 동일하다.html에 script 코드를 추가하면 된다. 원본 html 파일에 특정 코드를 추가시키는 DOM 메서드는 innerHTML인데이것은 크로스 사이트 스크립트 보안 문제가 있다.원리는 똑같이 악성 사용자가 악성 ..

티스토리툴바