본문 바로가기

업무

 (11)
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..
IOS 웹뷰 페이지 개발 업무에서 문제 해결 과정 업무에서 페이지 슬라이딩 애니메이션을 구현할 일이 생겼는데 개발 중에 예상하지 못한 문제가 많이 발생했고, 해결하면서 배운 것들이 많았다. 프레임워크는 Next.js를 사용하고 요구사항은 다음과 같다. [요구사항] 개발할 페이지는 아이템 목록 페이지, 아이템 상세 페이지 목록 페이지에서 상세 페이지 이동 시 목록 페이지의 스크롤 위치, 상태값 등 유지해야 함 (돌아왔을 때 모든 것이 그대로여야 함) 상세 페이지는 화면 오른쪽 끝에서 왼쪽으로 슬라이딩으로 부드럽게 와야 함 상세 페이지가 슬라이딩될 때 목록 페이지가 겹쳐서 보여야 함. 목록 페이지에서 상세 페이지로 이동한 뒤, 다시 뒤로가기를 통해 목록 페이지로 이동했다면 목록 페이지에서는 상세 페이지로 앞으로가기는 불가능(브라우저 이벤트 자체를 막아야 함..
BFF 활용하여 프론트엔드만을 위한 API 만들기 이번 포스트는 최근 웹뷰 서비스를 개발하면서 백엔드 개발자와 커뮤니케이션 갈등을 BFF 기술을 활용해 해결했던 개인적인 경험을 소개하는 글입니다. 프론트엔드 개발자라면 누구나 겪는 상황이라 그런지 해외 개발자 커뮤니티에서도 위와 같은 재밌는 밈이 많았다. 프론트엔드 개발자가 바라는 가장 이상적인 백엔드 개발자는 화면에 Fit한 API를 제공받는 일이다. 아직 주니어 개발자인 나는 이번 웹뷰 서비스를 개발하면서 아주 아주 복잡한 API를 받자마자 당황했다. 이 하나의 API를 이해하기 위해 따로 회의를 잡아야 할 정도로 커뮤니케이션 비용이 컸는데 나는 이런 상황이 익숙하지 않아서 백엔드 개발자에게 화면에 맞춰서 새로운 API를 개발해줄 것을 요구했다. 하지만 백엔드 개발자도 이유가 있었다. 이미 만들어진 ..
requestIdleCallback을 활용한 렌더링 성능 개선 경험 웹 개발에서 성능 개선은 여러 기준이 있지만 가장 중요한 것은 사용자 경험이다. 사용자 경험을 최대한 끌어올리기 위해선 성능이 중요한데 제한된 디바이스 환경에서 사용자에게 당장 필요한 요소를 먼저 처리해줘야 사용자에게 좋은 경험을 줄 수 있다. 그러기 위해 사용자에게 당장 필요하지 않은 요소를 후순위로 미루게 된다면 자연스럽게 높은 사용자 경험을 달성할 수 있게 되는 것인데 그것을 도와주는 브라우저 API 중 하나가 requestIdleCallback이다. 아직 완벽하게 표준이 된 API는 아니지만 사용이 권장되고 있다. requestIdleCallback window.requestIdleCallback(callback); 브라우저가 idle 상태일 때 큐에서 콜백을 꺼내서 실행하는 API이다. 따라서 ..
[Next.js] Script 추가하기 (채널톡 추가하기, next/script) 최근 업무에서 웹뷰 서비스를 개발 중에 채널톡 서비스를 추가하는 일이 있었다.카카오 공유하기 기능처럼 외부 플러그인이기 때문에스크립트를 로딩하는 일이 필요했다.도입하는 과정에서 알게된 지식들을 이 포스트에서 정리하려고 한다. 스크립트 로딩 원리브라우저에서 스크립트를 읽는 과정은 html을 파싱하면서 시작된다.서버로부터 html을 받으면 파싱하기 시작하고 순차적으로 읽으면서 script 태그를 만나면 특별한 예외 지시자가 없을시 스크립트를 로딩한다. 외부 자바스크립트를 로드하는 것도 원리는 동일하다.html에 script 코드를 추가하면 된다. 원본 html 파일에 특정 코드를 추가시키는 DOM 메서드는 innerHTML인데이것은 크로스 사이트 스크립트 보안 문제가 있다.원리는 똑같이 악성 사용자가 악성 ..
Prefetching을 활용한 웹뷰 서비스 설계 및 회고 이번 포스트는 Next.js로 SPA 웹뷰 서비스를 설계해본 경험을 정리하는 포스트이다. 설계한 서비스 플로우 설계한 웹뷰 서비스는 위 예시처럼 페이지를 순차적으로 이동한다. 많은 웹뷰 서비스가 이런 형태로 설계되는데 매우 단순해보이지만 높은 사용자 경험을 주기 위해선 고려할 것이 많다. 특히, 뒤로가기가 단순하지 않을 경우 설계가 복잡해진다. 위 플로우를 보면 페이지 4에서 뒤로가기를 하면 페이지 2를 가야하고, 페이지 3에서는 페이지 1로 가야 한다. 뒤로가기도 경우의 수가 있다. 뒤로가기 버튼을 클릭하여 클릭 이벤트를 통해 넘어가는 경우도 있고 스마트폰 화면에서 스위핑하여 브라우저 이벤트가 발생하여 뒤로가는 경우도 있다. 또한, 웹뷰에서 처리가 불가능하고 네이티브 앱에서 처리가 필요한 경우도 고민해..
커밋시 eslint 속도 개선 (lint-staged, husky) 우리팀 git 시스템은 커밋 한 번 할 때마다 10~20초씩 걸린다. 그렇다 보니 커밋을 최대한 나중에 하려는 습관이 생기는 것 같다. (다른 팀원들도 그렇다고 한다) 그리고 갈수록 더 느려진다. 처음엔 코드베이스에 익숙하지 않아서 그냥 별로 문제로 여기지 않았지만 문득 내가 왜 이 시간을 기다려야 하지? 라는 생각이 들었다. 그래서 우리 커밋 시스템을 살펴보니 매 커밋마다 전체 프로젝트를 eslint 하고 있는 것이다. 이러니 느릴 수 밖에 없던 것이다. 아마도 우리팀 규모가 처음엔 이렇게 크지 않아서 이런 방식을 사용했던 것 같다. 매 커밋마다 전체 파일을 eslint 해야 할까? 그냥 커밋에 올라가는 변경된 파일만 eslint 하면 되는 것 아닌가? 생각했고 문제 없다고 팀원들과 얘기했다. 그래서 ..
배포 자동화 도구 개발 회고 내가 핀다에 입사하자마자 내가 나서서 제안하고 주도한 프로젝트가 배포 자동화 도구 개발이다. 업무도 하면서 틈틈이 하느라 두 달 정도 개발 기간이 걸린 것 같다. 핀다에 입사했을 때 배포 과정은 파이프라인 자동화는 되어있지만 (빈스톡에 배포) 파이프라인 전까지의 브랜치 병합, 버전 업데이트, 변경사항 기록을 개발자가 직접해야했다. 이게 개선해야 할지 되게 애매한 부분이었다. 이 배포 자동화 도구를 개발하면서 줄인 시간이 1배포당 길어야 10분 정도다. 일주일에 3번 정도 배포하니까 일주일에 30분, 한 달에 2시간, 1년에 24시간 정도의 시간을 절약하는 것인데 저 정도의 시간을 절약해야 할까? 고민을 많이 했다. 그럼에도 개선하기로 제안한 이유는 생각보다 저 10분의 시간이 꽤 귀찮았다. 그리고 변경사..
Next.js Middleware 업무에 활용하기 소개 Next.js의 12버전에서 Middleware 기능이 공개되었다. 12.2부터는 정식 기능이 되었다. (사용법도 12.2부터 많이 다르다.) 공개 시점부터 관심을 가진 기술이다. 기존에 알고 있던 미들웨어의 개념과 전혀 다른 개념이 아니다. 단지 Next.js에서 미들웨어 개념이 생긴 것이다. 이 개념이 없었어도 Node.js를 이용해 충분히 미들웨어 기능이 구현 가능했다. Next.js의 Middleware가 뭐냐면 간단히 말하면 '사용자의 요청을 처리하여 응답을 반환하기 전에 뭔가 조작하여 응답할 수 있는 기능'이다. 여기서 조작할 수 있는 뭔가의 개념은 상당히 제한적이다. 기본적으로 요청 헤더, 응답 헤더, 쿠키, 경로 등을 수정할 수 있다. (난 이 기본적인 기능만으로 당장 업무에 해볼 수..

티스토리툴바