# 저번 주 프론트엔드 볼 거리
- SPA에서 데이터는 어떻게 받아올까
https://martinfowler.com/articles/data-fetch-spa.html
React와 Vue에서 일반적 fetch 로직에서 시작해서 loading, suspense, Fetch-On-Render / Fetch-Then-Render, parallel fetching…같은 Fetch에 관련된 거의 모든 개념을 말해주는 글입니다. @tanstack/query를 사용하면서 Fetch 전략을 사용하는 것이 자연스러워졌지만 전략의 개념을 다 설명해주지 않기 때문에 볼 만한 글이라고 생각합니다.
- Tanstack Query에서의 메모리 누수
https://schiener.io/2024-05-29/react-query-leaks
React에서의 메모리 누수(https://schiener.io/2024-03-03/react-closures )와 같은 저자가 쓴 글입니다. Tanstack Query에서의 누수라고 하지만, 컴포넌트 안에서의 함수 선언을 조심하라는 글과 같다고 생각합니다. 여기서 제공하는 해결방식 말고도 queryOptions(https://tanstack.com/query/latest/docs/framework/react/reference/queryOptions )라는 해결책도 있습니다.
- CSS gap을 사용하세요.
https://ishadeed.com/article/the-gap/
flex가 도입되기 이전에는 요소 사이의 간격을 margin과 CSS 선택자를 활용해 처리했습니다. 검색하면 gap에 대한 답이 많이 안 나오는 것도 한 몫했구요. 지금 컨테이너 쿼리를 사용하고 있나요?(https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/ )에서도 나왔듯이, CSS 신 기술이 개발자들에게 닿으려면 오래 걸리지만, 팀원들에게 퍼트려서 사용처를 늘리는게 중요하다고 생각합니다.
- DOM depth를 줄이세요.
https://frontendatscale.com/blog/how-deep-is-your-dom/
저자의 간단한 실험으로 DOM depth가 커지면 커질수록 HTML 파싱과 CSS 트리 생성에 차질이 생기는 것을 확인하는 글입니다. 항상 신경을 곤두세울만한 부분은 아니지만, 주기마다 한 번씩 체크하는 것은 필요해보이네요.
- Micro Frontends…?
https://martinfowler.com/articles/micro-frontends.html
MSA에 대해서는 단순한 아키텍쳐 방어하기(https://danluu.com/simple-architectures/ )라는 글로만 간접적으로 소개했었는데, 우아한 형제들의 웹 애플리케이션 페이지를 패키지로 개발해 본 경험 공유(https://techblog.woowahan.com/16910/ )에서 Micro Frontends의 기법 중 하나인 Module Federation을 소개하길래 그 상위 개념인 Micro Frontends을 정리한 글을 가져왔습니다. Module Federation은 발전하고 있고(이전에도 적용한 강남언니(https://blog.gangnamunni.com/post/saas-microfrontends/ )의 사례도 있죠), 네트워크 속도만 충분하다면 이상적이지만 GraphQL과 동일하게 특정 상황을 해결하기 위해 만들어진 도구이니 충분히 고려 후에 적용하는 것이 중요하다고 생각합니다. 또한 MSA는 이제 끝인가요?(https://blogs.mulesoft.com/dev-guides/microservices/is-this-the-end-of-microservices/)에서도 말하듯이, MSA는 인프라 뿐만 아니라 서비스, 개발문화, 소통 방식까지 포함되어 있습니다. 많은 것을 고려해야 하겠네요.
- Promise의 역사
https://www.joshwcomeau.com/javascript/promises/
Promise의 역사에 대해 친절하게 풀어놓은 글입니다. 더 깊게 알아보실 예정이라면 JavaScript Info의 프라미스와 async, await(https://ko.javascript.info/async )파트를 보시는 것을 추천합니다.
- 제발 Skip to main content 만들어주세요.
https://technicalwriting.dev/a11y/skip.html
접근성을 위해 Skip to main content를 만들어달라는 가벼운 글입니다.
- Storybook의 type-safe mocking 접근법
https://storybook.js.org/blog/type-safe-module-mocking/
Storybook에서 Jest나 Vitest의 mocking 접근법(mocks 폴더를 탐색하거나 테스트 파일 안에서 mocking 둘 다 허용하는 방식)과 다르지만 표준에 맞춘 접근법을 소개합니다. Mocking이 이루어지는 위치를 분명하게 하고 type-safe도 챙길 수 있다고 소개합니다.
- Framer Motion을 대체하는 CSS 신기술
https://motion.dev/blog/do-you-still-need-framer-motion
현재 출시하거나 출시 할 예정인 CSS 기능들을 Framer Motion의 기능과 연결지어 소개하는 글입니다. CSS 신기능은 좋지만 출시하고 안정적이게 되려면 시간이 걸리기 때문에 CSS에 이러한 신 기능이 있을 예정이다만 알고 계시면 좋다고 생각합니다.
- SSR에서 JSX 속도 빠르게 하기
https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-9/
React에서 태그를 `React.createElement`로 변환하는 것 대신 String으로 만들어서 삽입하는 방식으로 변환해서 변환 속도를 빠르게 하겠다는 글입니다. 가볍게 볼만한 글이네요.
- Corepack 사용법
https://www.totaltypescript.com/how-to-use-corepack
Corepack은 Node.js 14버전부터 시작된 다른 패키지 매니저를 사용하기 쉽고 패키지 매니저를 고정하는 내장 라이브러리입니다. 간단하게 소개하는 사용법을 보고 사용해보세요. 다른 Node.js 기능을 알아보려면 10가지 모던 Node.js 런타임 기능(https://snyk.io/blog/10-modern-node-js-runtime-features/ )을 보세요.
더 오래된 볼 거리를 찾으신다면 https://ones-to-watch.ethansup.net/news/list/1 를 참조해주세요. :)
콘텐츠를 더 읽고 싶다면?
원티드에 가입해 주세요.
로그인 후 모든 글을 볼 수 있습니다.
로그인 후 모든 글을 볼 수 있습니다.
・댓글 1