2023년 3월 3주차 개발 뉴우스

안녕하세요. 구독자님 이번주 뉴스도 봐주셔서 감사합니다 😄

1. Understanding Resumability from the Ground Up

https://www.builder.io/blog/resumability-from-ground-up

이 문서에서는 소프트웨어 개발에서 '재개 가능성'의 개념과 이를 통해 애플리케이션의 안정성과 성능을 향상시킬 수 있는 방법에 대해 설명합니다.

재개성은 애플리케이션이 오류나 중단으로부터 복구하고 데이터나 진행 상황을 잃지 않고 작동을 재개할 수 있는 기능을 말합니다.

저자는 처음부터 애플리케이션에 재개 가능성을 구축하면 애플리케이션을 더욱 견고하고 확장 가능하게 만들 수 있다고 주장합니다.

이 문서에서는 상태 관리, 오류 처리 및 재시도 로직과 같은 주제를 다루고 다양한 유형의 애플리케이션에서 재개 가능성을 구현하는 방법에 대한 예를 제공합니다.

전반적으로 이 글은 최신 소프트웨어 개발에서 재개성의 중요성을 강조하고 이를 애플리케이션에 통합하려는 개발자를 위한 실용적인 조언을 제공합니다.

2. Avoiding Async/Await Footguns

https://www.builder.io/blog/avoiding-async-await-footguns

이 글에서는 개발자가 자바스크립트에서 비동기/대기 기능을 사용할 때 흔히 저지르는 실수와 이를 방지하는 방법에 대한 팁을 제공합니다.

저자는 비동기/대기 기능을 사용하면 코드를 더 쉽게 읽고 쓸 수 있지만 올바르게 사용하지 않으면 성능 문제가 발생할 수 있다고 지적합니다.

이 문서에서는 오류 처리, 불필요한 대기 방지, Promise.all()을 사용하여 성능 개선하기 등의 주제를 다룹니다.

또한 문제가 발생하기 전에 잠재적인 문제를 포착하기 위해 ESLint와 같은 도구를 사용할 것을 권장합니다.

전반적으로 이 글은 코드에서 비동기/대기를 효과적으로 사용하고자 하는 개발자에게 실용적인 조언을 제공합니다.

3. Speculative Module Fetching: a Modern Approach to Faster App Interactivity

https://www.builder.io/blog/speculative-module-fetching

이 문서에서는 자바스크립트 모듈을 미리 로드하여 웹사이트 성능을 개선할 수 있는 '추측 모듈 불러오기'라는 새로운 기법에 대해 설명합니다.

이 기술은 사용자의 브라우징 행동을 기반으로 사용자가 필요로 할 가능성이 높은 모듈을 예측하여 백그라운드에서 미리 로드하는 방식으로 작동합니다.

저자는 이 기술을 통해 웹사이트 로딩 시간을 크게 단축하고 전반적인 사용자 경험을 개선할 수 있다고 주장합니다.

그러나 저자는 이 기술이 아직 초기 단계에 있으며 모든 웹사이트에 적합하지 않을 수도 있다고 지적합니다.

4. Code Prefetching is a LIE

https://www.builder.io/blog/code-prefetching-is-a-lie

이 글에서는 리소스를 미리 로드하여 웹사이트 성능을 개선하는 데 사용되는 기술인 코드 프리페칭이 흔히 알려진 것만큼 효과적이지 않다고 주장합니다.

저자는 프리페칭이 귀중한 네트워크 리소스를 사용하고 불필요한 요청을 유발하여 실제로 웹사이트 속도를 저하시킬 수 있다고 제안합니다.

대신 코드를 최적화하고 웹사이트의 요청 횟수를 줄여 성능을 개선할 것을 권장합니다.

5. JSCodeShift로 기술 부채 청산하기

https://toss.tech/article/jscodeshift

토스팀에서 JSCodeShift로 기술 부채를 청산한 이야기입니다.

이 도구는 코드의 AST(추상 구문 트리)를 사용하여 코드베이스를 변경합니다.

이 문서에서는 JSCodeShift의 작동 방식을 설명하고 코드를 대량으로 변경하는 데 사용할 수 있는 예제를 제공합니다.

이 도구는 더 이상 사용되지 않는 API를 업데이트하고, 새 라이브러리로 마이그레이션하고, 수동으로 수행하기에는 시간이 많이 걸리는 기타 변경 작업을 수행하는 데 사용할 수 있습니다.

이 문서에서는 JSCodeShift에 대해 자세히 알아보고 효과적으로 사용하는 방법에 대한 리소스 링크도 제공합니다.

전반적으로 JSCodeShift는 코드베이스를 대규모로 변경할 때 개발자의 시간과 노력을 절약할 수 있는 강력한 도구입니다.

6. 리액트의 useCallback useMemo, 정확하게 사용하고 있을까

https://yceffort.kr/2022/04/best-practice-useCallback-useMemo

이 글에서는 React에서 useCallback과 useMemo Hook을 사용하는 모범 사례에 대해 설명합니다.

저자는 이러한 Hook이 불필요한 재렌더링을 줄임으로써 React 애플리케이션의 성능을 향상시킬 수 있다고 말합니다.

이 글에서는 사용Callback과 사용Memo를 언제 사용해야 하는지, 올바르게 사용하는 방법, 피해야 할 일반적인 실수 등의 주제를 다룹니다.

또한 저자는 비용이 많이 드는 계산을 최적화하고 불필요한 함수 재생성을 방지하는 등 다양한 시나리오에서 이러한 Hook을 어떻게 사용할 수 있는지에 대한 예시를 제공합니다.

전반적으로 이 글은 애플리케이션의 성능을 개선하고자 하는 React 개발자를 위한 실용적인 조언을 제공합니다.

7. 리액트의 렌더링은 어떻게 일어나는가?

https://yceffort.kr/2022/04/deep-dive-in-react-rendering

이 글은 React 애플리케이션의 렌더링 프로세스에 대해 자세히 설명합니다. 저자는 React가 가상 DOM을 사용해 상태나 소품의 변경에 반응하여 UI를 효율적으로 업데이트하는 방법을 설명합니다.

이 글에서는 조정 알고리즘, 컴포넌트 수명 주기 방법, 렌더링을 최적화하기 위한 키 사용과 같은 주제를 다룹니다. 또한 shouldComponentUpdate 및 PureComponent와 같은 기술을 사용하여 렌더링 성능을 최적화하는 방법에 대한 실용적인 예제도 제공합니다.

또한 이 글에서는 setState를 잘못 사용하거나 컨텍스트를 과도하게 사용하는 등 React 렌더링 작업 시 피해야 할 일반적인 실수에 대해서도 설명합니다.

전반적으로 이 글은 React 렌더링 프로세스에 대한 포괄적인 개요를 제공하며 애플리케이션의 성능을 최적화하려는 개발자에게 유용한 인사이트를 제공합니다.

8. Scale From Zero To Millions Of Users

https://bytebytego.com/courses/system-design-interview/scale-from-zero-to-millions-of-users

이 문서에서는 0명에서 수백만 명의 사용자까지 확장할 수 있는 시스템을 설계하는 방법에 대해 설명합니다.

저자는 개발 프로세스 초기부터 확장성을 고려한 설계의 중요성을 강조하고 이 목표를 달성하기 위한 실용적인 조언을 제공합니다.

로드 밸런싱, 캐싱, 데이터베이스 샤딩과 같은 주제를 다루고 이러한 기술을 사용하여 시스템 성능과 확장성을 개선하는 방법에 대한 예를 제공합니다.

또한 증가하는 트래픽과 사용자를 처리할 수 있는지 확인하기 위해 시스템을 모니터링하고 테스트하는 것의 중요성에 대해서도 설명합니다.

또한 데이터 일관성 처리 및 시스템 복잡성 관리 등 시스템 확장 시 발생하는 문제와 이를 해결하는 방법에 대한 인사이트를 제공합니다.

전반적으로 이 문서는 수백만 명의 사용자를 처리할 수 있는 확장 가능한 시스템을 설계하려는 개발자와 시스템 아키텍트에게 유용한 인사이트를 제공합니다.

9. Interaction to Next Paint (INP): What is it and How to Improve It

https://calibreapp.com/blog/interaction-to-next-paint

이 글은 웹 페이지의 성능을 개선하기 위한 방법 중 하나인 "Interaction to Next Paint"에 대해 다룹니다.

이 방법은 사용자가 페이지와 상호작용할 때, 다음 화면이 그려지기 전까지의 시간을 최소화하는 것입니다.

이를 위해, 페이지의 로딩 시간을 줄이고, 브라우저가 다음 화면을 그리기 위해 필요한 자원을 최적화하는 방법을 제시합니다.

이를 통해 사용자 경험을 개선하고, 페이지의 성능을 향상시킬 수 있습니다.

10. How to measure CWVs on SPAs

https://estelafranco.com/blog/spa-cwv/

이 글은 SPA(Single Page Application)에서 Core Web Vitals(CWV)를 개선하는 방법에 대해 다룹니다.

SPA는 초기 로딩 시간이 길어지는 단점이 있지만, 사용자 경험을 향상시키는 장점이 있다. 그러나 SPA에서 CWV를 개선하기 위해서는 몇 가지 고려해야 할 사항이 있습니다.

첫째, 초기 로딩 시간을 줄이기 위해 코드 스플리팅과 프리로딩을 사용해야 합니다.

둘째, SPA에서는 페이지 이동이 없기 때문에, 브라우저 히스토리와 URL을 관리해야 합니다.

셋째, SPA에서는 데이터를 비동기적으로 로딩하기 때문에, 데이터 로딩 시간을 최소화해야 합니다.

이러한 방법을 통해 SPA에서 CWV를 개선할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.

11. Performance audit of an Italian news website

https://www.giacomodebidda.com/posts/performance-audit-of-an-italian-news-website/

이 글은 이탈리아 뉴스 웹사이트의 성능 감사 결과를 다룹니다.

글쓴이는 Lighthouse와 Calibre를 사용하여 웹사이트의 성능을 측정하고, 개선할 수 있는 부분을 분석하였습니다.

분석 결과, 웹사이트의 초기 로딩 시간이 길고, 이미지 최적화와 캐싱이 부족한 것으로 나타났습니다.

또한, 웹사이트에서 사용하는 JavaScript 라이브러리의 크기가 크고, 불필요한 리소스를 로딩하는 것으로 확인되었습니다다.

글쓴이는 이러한 문제를 해결하기 위해 이미지 최적화와 캐싱, 코드 스플리팅, 불필요한 리소스 제거 등의 방법을 제안하며, 이를 통해 웹사이트의 성능을 개선할 수 있다고 결론지었습니다.

12. Improve Largest Contentful Paint (LCP) by removing image transitions

https://performance.shopify.com/blogs/blog/improve-largest-contentful-paint-lcp-by-removing-image-transitions

이 글은 이미지 전환 효과를 제거하여 Largest Contentful Paint (LCP)를 개선하는 방법에 대해 다룹니다.

LCP는 페이지의 가장 큰 콘텐츠가 로드되는 시간을 측정하는 지표로, 페이지의 사용자 경험에 큰 영향을 미칩니다.

글쓴이는 이미지 전환 효과가 LCP에 부정적인 영향을 미치는 것을 발견하고, 이를 해결하기 위해 이미지 전환 효과를 제거하는 방법을 제시합니다.

이를 위해, CSS transition 및 animation 속성을 사용하여 이미지 전환 효과를 제거하고, 이미지 로딩 시간을 최적화하는 방법을 제안합니다.

이러한 방법을 통해 LCP를 개선하고, 페이지의 사용자 경험을 향상시킬 수 있습니다.

13. 병원 상세 웹뷰 통신 및 크로스 브라우징

https://boostbrothers.github.io/hospital-detail-webview/

이글은 웹뷰와 네이티브 앱간에 통신하는 방법과 웹뷰를 진행할때의 이슈를 다룬 글입니다.

멀티 웹뷰를 다룰때 유용한 글로 보여집니다.

14. React Is Holding Me Hostage

https://emnudge.dev/blog/react-hostage

이 블로그 게시물은 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 React에 대한 작성자의 경험에 대해 설명합니다.

저자는 처음에는 단순성, 유연성 및 재사용 가능한 코드 작성 기능 때문에 React를 좋아했다고 설명합니다.

그러나 시간이 지남에 따라 저자는 생태계의 복잡성, 가파른 학습 곡선 및 과잉 엔지니어링 가능성과 같은 React 단점이 있음을 시사합니다.

이번주 준비한 것은 여기까지입니다 😄

읽어주셔서 감사합니다 😉