Dev Blog

브라우저는 최적의 사용자 UX 위해, 상세 페이지에서 '뒤로 가기'를 했을 때 이전 스크롤 위치를 자동으로 복원하는 기능을 갖추고 있다. 덕분에 사용자는 리스트의 탐색 흐름을 끊김 없이 이어갈 수 있으며, 이를 기술적으로 지원하기 위해 history.scrollRestoration API를 지원한다.페이지 간 경계가 명확한 SSR환경이면 모르겠지만 SPA은 구조적으로 브라우저가 스크롤을 복구하려는 시점과 리액트가 화면을 그리는 시점이 어긋나서 race Condition이 발생하는지 스크롤이 엉뚱한 곳으로 튀는 현상이 있다. 때문에 SPA 환경에서는 스크롤 복구 로직을 따로 구하는 경우가 많다.내가 쓰는 스크롤 복구 방법우선 브라우저의 복구 Api를 안쓰겠다고 설정해준다. 복구 값은 auto가 기본 값이기 때문에 manual로 수동으로 변경하겠다고 설정해둔다. if ("scrollRestoration" in window.history) { window.history.s

React는 Virual DOM을 이용한 최적화 방식의 랜더링을 지원하는 프레임워크이다. Fiber의 핵심은 조각내어 실행하게 되어 동시성 랜더링 ( Concurrent Rendering )을 이용하여 Suspense 컴포넌트 바운더리로 활용 되거나 브라우저 랜더링 최적화를 하면서 우선순위 랜더링의 기준을 정하여 더 좋은 사용자 경험을 가능하게 하는 핵심 패러다임이다.이 번 글은 Fiber의 핵심 기능인 Automatic Batching, Concurrent Rendering에 대해 정리해보고자 한다.test….# React Fiber16버전 이전에는 Fiber가 아닌 Stack 개념으로 처리 되었다. Stack은 작업이 실행 된다면 도 중에 멈출 수 가 없다. 만약에 핸들러를 통해 상태가 변경되거나 하여 매우 무거운 작업을 진행한다고 가정해보자. 만약 작업 중이지만 사용자는 onclick 같은 사용자 입력을 했다고 가정한다면 이전의 작업을 처리 중이기 때문에 무 응답일 가능성이 매

모바일에서의 vh퍼블리싱 하다보면 특정 모바일 브라우저 주소창이나 하단 네비게이션의 on off로 인해 100vh가 가변적으로 변화하는 경우가 빈번하다. 이번에 Gsap을 이용해서 직접 Full page Slider를 구현하다 또 다시 만난 이슈였고 추가된 “dvh, svh” 등 모바일 vh에 대응하기 위한 방법들에 정리하기 위해 포스팅을 남긴다.모바일에서는 주소창과 하단 네비게이션의 on Off가 되고 vh의 크기가 변화 할 경우가 생긴다. 이때는 Css 리플로우(Reflow)가 발생하게 되어 다시 페인팅이 되게 되고 이는 성능적으로는 이슈를, Ux로는 미흡한 모습을 띄게 되는 단점을 가지게 된다.구현하고 테스트하는 도중 모바일에서 삼성 브라우저에서는 정상적으로 동작하였지만, 카카오 브라우저에서는 높이 값이 가변적으로 적용 되는 현상이 있었다. 분명 100vh를 반영하여도 브라우저마다 다르게 해석 하는지가 의문 이었다.vh의 크기의 기준은?vh는 기본적으로 주소 창, 하단 네비게이

1️⃣ "Css in Js에서 -> Scss"난 React로 개발 할때, 스타일링을 Css in Js를 주로 사용중이다.이유는.. 스타일링이 조금 리액트? 스럽다 라고 생각되었고.. 동적으로 props만 내리면 스타일링도 자유롭게 변경되며,컴포넌트나 라이브러리에도 styled()를 이용하여 Css를 추가적으로 반영 할 수 있다 라는 것이 가장 큰 장점이었기 때문이다.근데 요즘 Next를 공부하면서 Css in JS의 단점을 파악하게 되었다.버셀에서도 Css in JS를 사용을 지양하라는 것이 권고사항이다.이유는, Css in Js는 "동적"으로 JS를 이용하여 스타일링하기 때문이다.정적 Css와 달리 동적은 연산을 필요로 하며, 이미 계산된 스타일이 서버에 정적으로 반영 되어 있는 것이 아닌,매번 요청에 따라 스타일링을 생성해 내야 하기 때문에 그 만큼 오버헤드를 초래한다.따라서 Next는 Css in Js보다 module.css 나 tailwind 같은 정적 스타일링을 권장하고 있

Tstory에서 개인 블로그 이동하면서 기타 React 라이브러리 들에 대한 기능을 복습이 필요했다.그냥 기능에 대해 나열하는건 인터넷 검색으로도 충분하니까 권한 확인하는 기능을 Route로 Checking 하는 설치부터 구현 방법을 남긴다.1️⃣ "Install"React Route 설치npm install react-router-dom @types/react-router-dom tsx에서는 기타 라이브러리를 사용하기 위해서는 @types 을 이용해 해당 기능에 대한 타입 정의도 설치해 주어야 한다.typeSciprt의 stric

포트폴리오를 만들다가 뭔가 정적인 느낌의 서브 페이지에 반딧불 효과를 넣고싶었다..효과야 인터넷에 널리고 널렸지만이 왕 만드는거 라이브러리 말고 직접 간단하게 구현해보기로 했다.내꺼 쌓아두는게 최고✔️결과물사진이 은은하게 좋은 것도 있지만 반딧불 생각보다 분위기가 좋게 잘나온거 같다. ?함수형으로 제작하였고 클래스로 인스턴스를 useEffect를 통해 마운트 시에 for문으로 생성해도 되지만함수형이 더 끌렸기에 함수로 ..❗ 제작 및 고려사항원하는 컨테이너 영역 내에서 반딧불이 무작위로 생성되어야함반짝이는 애니메이션과 더불어 동시가 아닌 개개인 개체 별로 다른 Duration을 가지고 있어야함 (그래야 입체적이기떄문에)반딧불 갯수는 쉽게 커스텀 마이징이 가능해야함✔️ 무작위 생성무작위 위치의 경우 divElement의 크기를 파악한 후 벗어나지 않도록 내부에 생성해야 하기때문에divElement 크기를 파악하고 크기 내 숫자를 랜덤하게 도출하면 반딧불의 좌표가 될 것이다.좌표는 le

"Zustand"전역 상태관리 라이브러리 중 인기있는 Redux Toolkit과 다른 성향을 가진 라이브러리이다.Redux는 Reducer를 통해 상태값을 변경하고 각 Slice마다 캡슐화를 시켜 유지시키지만,Zustand는 캡슐화나 로직의 구조보다는 편하게 사용하는 것에 초첨을 맞춘 라이브러리이다.create 프로퍼티를 통해 하나의 스토어 객체를 생성하여

기존에 Redux로 개발해두었던 상태관리를 "Zustand"로 변경하기로 하였다.기존에는 Redux Toolkit을 사용하여 Slice로 Action을 컨트롤하여 로그인 상태나 다크모드를 전역 상태 관리를 통해보일러 플레이트를 줄이고 전역적인 상태 통일화하였다.허나 요즘엔 Zustand를 사용하여 더 간편한 관리를 할 수 있다고 하여 변경하여 습득을 해보기