Web
-
스크롤을 최적화하고 싶은데..Web/자바스크립트 2022. 12. 30. 17:47
"스크롤 애니메이션이 뭔가 이상해요 😭" 스크롤 애니메이션을 고쳐달라는 요구사항이 새로 들어왔다. 정확히 말하면 애니메이션은 아니고, 스크롤할 때 동작하는 간단한 로직에 문제가 있었다. 문제가 된 스크롤 동작은 fixed 상태인 특정 컴포넌트가 스크롤로 인해 지정된 범위를 벗어나려고 하면 해당 범위의 끄트머리를 넘어서지 않도록 위치를 고정해주는 동작이었다. 사실 요 동작 자체만으로는 문제가 없었지만, 여기에 throttle이 더해지자 문제가 생겼다. 원래는 스크롤을 할 때마다 컴포넌트의 위치를 지속적으로 감시하면서 위치를 고정시켜줘야 하는데, throttle로 인해 로직이 띄엄띄엄 실행되는 바람에 감시를 못하고 놓치는 구간이 발생했다. 그래서 컴포넌트가 범위 밖으로 튀어나갔다가 다시 들어오는 현상이 나타..
-
useEffect가 나를 열받게 했다Web/React 2022. 7. 15. 20:32
이번에 새로운 기능을 개발하면서 상태의 변화에 따른 side effect들을 처리해주기 위해 useEffect를 많이 사용하게 됐다. 기능의 생명 주기를 stage라는 단위로 구분했는데, 원래는 페이지 단위로 사용자의 행동을 구분하는 것이 보편적이겠지만 사실 페이지의 형태도 거의 비슷하고 로직만 약간씩 바뀌는 식이어서 굳이 페이지를 나눌 필요가 없겠다는 생각이었다. 그래서 사용자가 '이번 페이지에서 할 작업을 다 마쳤으니 다음 페이지로 넘어간다' 라는 의도로 '다음' 버튼을 누르면 동일한 페이지 내에서 stage만 바뀌고, stage의 변화에 따라 useEffect에서 여러 작업을 수행하는 방식으로 구현을 했다. useEffect(() => { if (stage === ‘first-stage’) { //..
-
부드러운 애니메이션을 위한 FLIP 테크닉Web/CSS 2022. 2. 7. 00:42
height, width, top, left 같은 속성의 변화는 레이아웃(리플로우)을 유발한다. 그러면 브라우저는 다른 엘리먼트에도 레이아웃 변화가 있는지를 재귀적으로 확인해야하고 이를 계산하는 데에는 많은 비용이 든다. 만약 그 계산이 애니메이션의 1 프레임(약 16.7ms)보다 오래 걸리면 애니메이션의 프레임은 제 시간에 렌더되지 못하고 스킵되기 때문에 사용자 입장에서는 버벅거리는 것처럼 보인다. 그래서 height 같은 속성들을 이용한 애니메이션은 종종 버벅거리는 경우가 많다. 부드러운 애니메이션을 위해서는 최대한 적은 변화를 최대한 빨리 계산해야하고, 이를 위해서는 transform과 opacity로만 애니메이션을 구현해야한다. 그리고 FLIP 테크닉은 transform 속성만을 활용하여 애니메이..
-
S.W.R = Stale-While-RevalidateWeb/Network 2022. 2. 5. 00:57
Stale-While-Revalidate 클라이언트는 서버로부터 API를 통해 데이터를 받아온다. 데이터가 클라이언트에 한 번 전해진 이상, 클라이언트는 해당 데이터가 최신 데이터인지 더 이상 알 수가 없다. 이렇게 서버에서 클라이언트로 전해져 최신 데이터인지 알 수 없는, 즉 신선함을 잃은 데이터를 'stale response'라고 한다. stale-while-revalidate는 '캐싱 전략'의 일종이다. (아직 비표준 단계의 HTTP Cache-Control) 데이터가 stale response인지 아닌지는 Cache-Control 헤더에 함께 포함된 max-age로 판단한다. Cache-Control: max-age=600, stale-while-revalidate=30 캐싱된 데이터가 아직 최신..
-
visibility, display, opacity 그리고 조건부 렌더링Web/React 2021. 12. 14. 19:22
React를 사용하다가 컴포넌트의 렌더링과 관련해서 헷갈리는 사항이 생겨 정리했다. visibility: hidden과 opacity: 0은 모두 해당 요소가 화면에 렌더링되지만 투명하게 보이게끔 만들어준다. 하지만 둘 다 요소를 투명하게 보이게 할 뿐, 해당 요소는 여전히 자리를 차지한다. (차지하는 자리만큼 뻥 비어보이게 된다) 둘의 차이점이라면 visibility: hidden은 뒤에 있는 요소를 클릭할 수 있지만, opacity: 0은 불가능하다는 것. 반면, display: none은 해당 요소를 DOM 트리까지만 가져가고 렌더 트리에서는 제외해준다. 즉, 레이아웃에 포함되지 않는다. 그래서 해당 요소가 자리조차도 차지하지 않게 된다. 하지만 DOM 트리까지 해당 요소를 가져가야 하기때문에, 해..
-
React.memo와 useCallback, useMemoWeb/React 2021. 12. 13. 19:20
■ React.memo React.memo는 고차 컴포넌트. 컴포넌트의 렌더링 결과를 Memoizing 함으로써, 이후의 불필요한 리렌더링을 건너뛴다. 이전 렌더링과의 비교는 'props가 같은지'로 판단. (이전 렌더링 때와 props가 동일하다면 Memoizing 결과 재사용) props 객체를 비교할 때는 얕은(shallow) 비교를 사용한다. 비교 방식을 수정하고 싶다면 두 번째 인자로 비교 함수를 만들어 넘겨주면 된다. export const Component = ({ prop, anotherProp }) => { return ( prop1: {prop} prop2: {anotherProp} ); } export const MemoizedComponent = React.memo(Component..
-
default export를 피해야 하는 이유?Web/자바스크립트 2021. 12. 4. 02:14
우아한테크코스 크루인 도비의 블로그를 보다가, 기억해두면 좋겠다 싶은 내용이 있어 원문을 읽어본 후 짧게 정리한 글. ES Modules의 default exports는 기존에 존재하던 'CommonJS 모듈 시스템'과의 호환을 위한 타협. 기존의 CommonJS 모듈은 다음과 같은 형태를 띠고 있기 때문이다. (객체로 export하는 형식) 호환성을 위해 지원되는 문법일 뿐, 여러모로 비효율적인 부분들이 많다고 한다. module.exports = function() {...} 1. default exports는 import하는 곳에 따라 자유자재로 이름을 붙여줄 수 있기 때문에, 같은 모듈이더라도 사용처에 따라 이름이 달라질 수 있다. 이는 곧 큰 단위의 리팩토링을 어렵게 만드는 요인이 된다. 반면,..
-
🎨 곧 나올 CSS 기능들Web/CSS 2021. 11. 27. 15:43
요 동영상을 유튜브에서 보고 나서, 궁금해서 슥 찾아봤는데 위 영상에 나와있는 CSS 기능들은 대부분 드래프트(FPWD, WD) 단계에 위치해 있는 기능들인 듯. 보통 '표준'이라고 불릴만한 것들은 REC 단계부터이고, CR 단계만 돼도 W3C에서 everyday use, 즉 일상적인 사용을 권장하는 수준이라고 한다. 영상에서도 말하듯이, 점점 컴포넌트 기반으로 코드를 짜는 것이 대세가 되면서 그에 맞는 CSS 기능들이 적절하게 추가되고 있는 것이 아닌가 생각. 1. Cascade Layers 원래 CSS 코드의 우선순위를 결정하는 간접적인 요인들이 몇 가지 존재했었다. 더 나중에 선언할수록, CSS 선택자가 더 구체적으로 명시되어 있을수록 우선순위가 높다던가 하는 것들. @layer 를 사용하면 lay..