성능 최적화 체크리스트

성능 최적화 체크리스트

SpeedCurve | 15 page speed optimizations that sites ignore (at their own risk)

Many top sites are not taking advantage of optimizations that could make their pages faster, their users happier, and their businesses more successful.

심윤섭: 성능 최적화라고 해서 어려운 부분만 있는 것은 아닙니다. 어떨 때는 의외로 간단하게 해결할 수도 있고, 어떤 경우에는 메모리 덤프까지 내려가야 하는 경우도 있습니다(ex. 리디의 객체 다형성 문제). 그래서 빠르게 만드는 경우에 놓친 성능 이슈를 성장한 다음에도 못 고치는 경우도 많다고 생각합니다. 그래서 한번에 해결하지 않더라도, 간단하게 시작할 방법을 어떻게 제안해야 할지 고민해야겠네요. 설득도 하나의 일이니까요(항상 라인의 리코드 글이 참고가 된다라고 생각합니다).

김대관: 웹 성능 최적화는 모든 프론트 엔지니어라면 고민해봐야하는 문제라고 생각합니다. 위 글에서 나와있는 문제 중 해결해본 것도 있고, 해결하지 못한 것도 있을 것이라고 생각합니다. 하지만 위와 같은 문제들을 해결하기 위해서는 웹에서만 해결할 수 있는 문제도 있고, 서버 개발자와 협업을 통해 최적화가 필요할 수 있습니다. 웹 성능 최적화를 위한 다양한 방법이 있음을 생각하고 자신의 웹 특성이 CSR인지? SSR인지? 부터 시작해서 웹에서 렌더링을 발생시키는, 빌드와 배포가 되는 과정이 어떻게 되어 있는지를 분석해서 성능 최적화를 진행하는 것이 중요합니다.

Tanstack query가 React Suspense를 위해 구현한 방법

Learn Suspense by Building a Suspense-Enabled Library :: Building Better Software Slower

Suspense has been a feature in React since v16.6.0. Despite this, I haven’t seen much of it in action beyond limited applications of “suspense-enabled libraries”. The React team seems to think Suspense is so incomplete that the entire API remains undocumented. I think that purposefully hiding APIs in documentation is silly, but fine! I’ll play their game! Let’s build a Suspense-enabled library, and use it. We will peel back the curtain of Suspense along the way.

심윤섭: Tanstack query를 처음부터 만들어보면서 Suspense와 ErrorBoundary를 활용하기 위해, 그리고 요청 수를 줄이기 위해 공유 캐시(SWR 없이)를 구축하는 과정까지 살펴봅니다. Tanstack query가 어떤 이유에 의해서 지금과 같은 형태로 만들어졌는지 볼 수 있고, 만약 다른 방식으로 Suspense를 사용해야 할 경우 어떻게 사용해야 할지 보여줍니다. Susepnse가 내부에서 동작하는지를 자세히 알기 위해서는 Suspense는 내부에서 어떻게 동작하나요?를 살펴보면 더 좋습니다.

김대관: Suspense와 ErrorBoundary를 활용하기 위한 과정에서 사용되는 fetch와 Promise 동작들을 유심하게 볼 필요가 있습니다. 개인적으로 FetchCache Class 코드부분에서의 Promise 상태 핸들링을 hook과 연결 짓는 부분이 아주 인상적이었습니다. 혹시나 Promise와 친숙하지 않다면 Promise 동작 관련 자료를 참고하시면 좋을 것 같습니다.

애니메이션에 clip-path()첨가하기

The Magic of Clip Path

One of the most underrated CSS properties.

심윤섭: cilp-path()는 CSS로 도형을 만드는 경우가 아니라면 많이 못 봤을 속성이지만, 비교 슬라이더나 스크롤 애니메이션, 탭 전환 애니메이션에도 사용할 수 있다는 쉽고 간단한 접근법을 제시합니다. 애니메이션 넣어달라는 요청을 위해 한번 보시고 접근법을 나중에 찾아보기 위해 알아두는 것도 나쁘지 않겠네요!

Remix의 route match의 새로운 접근

Fog of War | Remix

Introducing Fog of War: infinitely scalable Remix and React Router applications

심윤섭: Remix에서는 처음 로드 시에 경로에 대한 manifest 파일을 모두 로드했는데, 이제 Fog of War 아키텍쳐를 도입하게 되면 전체 경로를 보내지 않고 경로에 따라 관련된 경로만 가져오는 과정을 거칩니다. 새로운 접근법인만큼 안정되고 잘 쓰인다면 다른 메타 프레임워크에도 영향을 끼칠 수도 있겠네요.

Node.js에서 이벤트 루프 지연

How we tamed Node.js event loop lag: a deepdive | Trigger.dev

We recently experienced some service degradation and downtime due to event loop lag in our Node.js service. Here's how we diagnosed and fixed the issue.

Node.js에서 이벤트 루프에서 block을 감지하고 해결하는 글이지만, 이벤트 루프 지연은 무엇인지, 그리고 모니터링과 해결(그리고 서버리스가 인기있는 이유까지) 제시하는 좋은 글입니다. 단순히 메인 스레드를 block하는 코드를 작성하지 않는 해결책도 중요하지만, 그에 못지않게 모니터링도 중요하니 글을 따라가보길 추천드립니다.

React 컴파일러는 메모리 누수를 잡지 못한다.

Sneaky React Memory Leaks: How the React compiler won’t save you | Kevin Schiener

How the React compiler handles memory leaks caused by closures and why it won’t save us from them.

리액트 컴파일러로 React에서의 메모리 누수와 같은 상황을 재현해도, 클로저의 메모리 누수는 막을 수 없다는 글입니다. 오늘 리액트 컴파일러를 사용해 봤는데, 어땠을 것 같나요? (한국어 번역)에서와 같이, 아직 컴파일러가 갈 길이 멉니다.

리액트에서 로직분리

Path To A Clean(er) React Architecture (Part 7) - Domain Logic

Ever wondered where to put all the small functions that often end up in utility files? The domain layer might be the answer.

하나의 관점으로 생각할만한 글이여서 가져왔습니다. "use server"디렉티브가 새로 생기면서 로직이 혼합될 수 있고, 그 과정에서 validate 과정을 하나의 함수로 빼는 과정을 설명하는 글입니다. 이외에도 여러 다른 방식으로 접근할 수도 있으니(validate 과정을 라이브러리에 위임, validate 부분과 서비스 호출 부분을 다른 함수로 분리…) 하나의 관점으로 생각해도 괜찮다고 생각합니다!