안녕하세요. 구독자님 이번주 뉴스도 봐주셔서 감사합니다 😄
1. Common Beginner Mistakes with React
https://www.joshwcomeau.com/react/common-beginner-mistakes/
Josh Comeau의 "React 전문가들이 여전히 저지르는 일반적인 초보자 실수"라는 글에서는 초보 React 개발자들이 자주 저지르는 몇 가지 일반적인 실수에 대해 설명합니다. 다음은 주요 요점을 요약한 것입니다:
state가 어떻게 작동하는지 이해하지 못함 - React의 state는 컴포넌트에서 동적 데이터를 관리하는 데 사용됩니다. 상태를 올바르게 업데이트하는 방법과 애플리케이션에서 사용하는 방법을 포함하여 상태의 작동 방식을 이해하는 것이 중요합니다.
재사용 가능한 컴포넌트를 만드는 것도 중요하지만, 지나치게 복잡한 애플리케이션으로 이어질 수 있는 작은 컴포넌트를 너무 많이 만들지 않는 것도 중요합니다.
이벤트를 제대로 처리하지 않음 - React에서는 이벤트가 기존 HTML과 다르게 처리됩니다. 올바른 이벤트 핸들러를 사용하고 올바른 스코프에 바인딩하는 것이 중요합니다.
성능을 고려하지 않음 - 비효율적인 렌더링이나 과도한 재렌더링으로 인해 React의 성능이 영향을 받을 수 있습니다. 적절한 수명 주기 방법을 사용하고 가능하면 렌더링을 최적화하는 것이 중요합니다.
부작용을 제대로 관리하지 않는 경우 - 부작용은 컴포넌트의 상태나 소품 이외의 모든 변경 사항을 의미합니다. 버그를 방지하고 성능을 개선하려면 사이드 이펙트를 올바르게 관리하는 것이 중요합니다.
모범 사례를 따르지 않음 - 의미 있는 변수 이름을 사용하고 논리적인 방식으로 코드를 구성하는 등 React 코드를 작성하는 데는 많은 모범 사례가 있습니다. 코드를 가독성 있고 유지 관리하기 쉽게 만들려면 이러한 모범 사례를 따르는 것이 중요합니다.
이러한 일반적인 실수를 피함으로써 초보 React 개발자는 보다 효율적이고 효과적인 애플리케이션을 만들 수 있습니다.
2. WTF Is Code Extraction
https://www.builder.io/blog/wtf-is-code-extraction
Builder.io의 "WTF는 코드 추출인가요?" 문서에서는 코드 추출의 개념과 이를 통해 웹사이트 성능을 개선할 수 있는 방법을 설명합니다. 다음은 주요 요점을 요약한 것입니다:
코드 추출이란 무엇인가요? - 코드 추출은 큰 자바스크립트 번들을 개별적으로 로드할 수 있는 작은 조각으로 분할하는 프로세스입니다. 이를 통해 브라우저는 필요한 코드만 로드하여 페이지 로드 시간을 개선할 수 있습니다.
어떻게 작동하나요? - 코드 추출은 자바스크립트 번들을 분석하여 개별적으로 로드할 수 있는 모듈을 식별하는 방식으로 작동합니다. 그런 다음 이러한 모듈을 별도의 파일로 분할하여 필요할 때 온디맨드 방식으로 로드합니다.
왜 중요한가요? - 코드 추출은 로드해야 하는 코드의 양을 줄여 웹사이트 성능을 크게 향상시킬 수 있습니다. 이를 통해 페이지 로딩 시간이 빨라지고 사용자 경험이 향상되며 검색 엔진 최적화(SEO)가 개선될 수 있습니다.
어떤 어려움이 있나요? - 코드 추출은 자바스크립트 코드를 면밀히 분석하고 적절한 방식으로 모듈을 분할하는 능력이 필요하기 때문에 어려울 수 있습니다. 또한 코드가 효율적으로 로드될 수 있도록 캐싱 및 로딩 전략을 신중하게 고려해야 합니다.
웹사이트 개발자는 코드 추출을 사용하여 웹사이트 성능을 개선하고 방문자에게 더 나은 사용자 경험을 제공할 수 있습니다.
3. From 0 to Millions: A Guide to Scaling
https://blog.bytebytego.com/p/from-0-to-millions-a-guide-to-scaling-47a
블로그 게시물 "0에서 수백만까지: 확장 가이드"에서는 스타트업이 처음부터 수백만 명의 사용자로 확장하는 방법에 대한 지침을 제공합니다. 이 게시물은 확장 여정을 시작하기 전에 명확한 비전, 훌륭한 팀, 최소 실행 가능한 제품(MVP)을 갖추는 것이 중요하다는 점을 강조하는 것으로 시작합니다.
그런 다음 제품 시장 적합성, 고객 확보, 그로스 해킹을 포함한 다양한 확장 단계에 대해 설명합니다. 이 게시물은 고객에게 집중하고 고객의 요구를 충족하기 위해 제품을 끊임없이 반복하고 개선해야 할 필요성을 강조합니다.
또한 이 게시물에서는 올바른 기술 스택 선택, 클라우드 컴퓨팅 사용, 확장 가능한 아키텍처 구축 등 확장에 있어 기술의 중요성에 대해서도 다룹니다.
이 게시물에서 논의되는 다른 핵심 사항으로는 적합한 인재 채용, 혁신과 지속적인 학습 문화 조성, 필요한 경우 전환할 준비 등이 있습니다.
전반적으로 이 게시물은 스타트업 확장을 위한 포괄적인 가이드를 제공하며, 각 요점을 설명하기 위한 실용적인 조언과 실제 사례를 제시합니다.
4. React’s Upcoming Compiler Only Solves Part Of The Problem
https://www.builder.io/blog/react-compiler-will-not-solve-prop-drilling
Builder.io 블로그의 글에서는 React 컴파일러의 한계와 React 애플리케이션에서 "프롭 드릴링" 문제를 해결하지 못하는 이유에 대해 설명합니다.
프롭 드릴링은 여러 수준의 중첩된 컴포넌트를 통해 데이터를 전달하는 프로세스를 말하는데, 이는 시간이 많이 걸리고 오류가 발생하기 쉽습니다.
React 컴파일러는 코드를 최적화하고 성능을 개선하는 데 도움이 될 수 있지만, 프롭 드릴링의 근본적인 문제를 해결하지는 못합니다.
5. 웹어셈블리가 서버리스의 문제를 해결해줄 수 있는가?
https://thenewstack.io/can-webassembly-solve-serverless-problems
이 문서에서는 웹어셈블리(Wasm)가 서버리스 컴퓨팅에 존재하는 몇 가지 문제를 잠재적으로 해결할 수 있는 방법에 대해 설명합니다. 특히, 이 글에서는 Wasm이 콜드 스타트 문제를 개선하고 서버리스 함수의 이식성을 높이는 방법에 대해 설명합니다.
콜드 스타트 문제는 함수에 대한 첫 번째 요청이 후속 요청보다 실행하는 데 훨씬 더 오래 걸리는 서버리스 컴퓨팅의 일반적인 문제입니다. 이 글에서는 서버리스 함수를 미리 컴파일하고 캐시하여 첫 번째 요청에서 함수를 실행하는 데 걸리는 시간을 줄임으로써 이 문제를 해결하는 데 Wasm이 도움이 될 수 있다고 제안합니다.
또한 이 글에서는 Wasm이 서버리스 함수를 여러 언어로 작성하고 여러 플랫폼에서 실행할 수 있게 함으로써 이식성을 높이는 방법에 대해서도 설명합니다. 이를 통해 개발자는 다양한 클라우드 제공업체와 환경에서 작동하는 서버리스 함수를 더 쉽게 작성할 수 있습니다.
전반적으로 이 기사는 Wasm이 서버리스 함수의 성능과 이식성을 개선할 수 있는 잠재력을 가지고 있으며 향후 서버리스 컴퓨팅에 중요한 기술이 될 수 있음을 시사합니다.
6. Experiments with the JavaScript Garbage Collector
https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3
이 문서에서는 자바스크립트 프로그램에서 메모리 관리를 담당하는 자바스크립트 가비지 컬렉터에 대한 저자의 실험에 대해 설명합니다. 저자는 가비지 컬렉터가 어떻게 작동하는지, 가비지 컬렉터가 자바스크립트 프로그램의 메모리 사용량에 어떤 영향을 미치는지 시각화하기 위해 Chrome 개발자 도구를 사용한 방법을 설명합니다.
객체 생성 및 제거, 순환 참조 사용, 사용자 정의 가비지 컬렉션 알고리즘 구현 등 여러 가지 시나리오를 살펴봅니다. 이러한 실험을 통해 가비지 컬렉터가 작동하는 방식과 개발자가 코드를 최적화하여 메모리 사용량을 줄이고 성능을 개선할 수 있는 방법을 보여줍니다.
또한 불필요한 객체를 생성하거나 전역 변수를 사용하는 등 가비지 컬렉터로 작업할 때 개발자가 피해야 할 몇 가지 일반적인 함정에 대해서도 설명합니다.
전반적으로 이 글은 자바스크립트 가비지 컬렉터의 작동 방식에 대한 유용한 소개와 함께 자바스크립트 프로그램에서 메모리 사용량을 최적화하기 위한 실용적인 팁을 제공합니다.
7. The complete guide to CSS media queries
https://polypane.app/blog/the-complete-guide-to-css-media-queries/
이 문서는 사용자 장치의 크기와 특성에 따라 웹 페이지에 다양한 스타일을 적용하는 데 사용되는 CSS 미디어 쿼리에 대한 포괄적인 가이드입니다. 이 기사는 사용 가능한 다양한 유형의 미디어 쿼리에 대해 알아보기 전에 미디어 쿼리가 무엇이며 어떻게 작동하는지 설명하는 것으로 시작합니다.
저자는 화면 크기, 해상도, 방향 및 종횡비를 대상으로 하는 것을 포함하여 가장 일반적으로 사용되는 미디어 쿼리에 대한 자세한 설명과 예를 제공합니다. 이 기사는 특정 장치를 대상으로 하거나 여러 조건을 결합하는 것과 같은 고급 미디어 쿼리도 다룹니다.
또한, 미디어 쿼리가 작동하는 방식을 설명하는 것 외에도 미디어 쿼리를 테스트하고 디버그하는 방법과 유지 관리를 더 쉽게 하기 위해 CSS 코드를 구성하는 방법과 같이 미디어 쿼리를 효과적으로 사용하는 방법에 대한 실용적인 조언을 제공합니다.
전반적으로 이 기사는 CSS 미디어 쿼리와 이를 웹 개발 프로젝트에서 효과적으로 사용하는 방법에 대해 자세히 알아보려는 모든 사람에게 유용한 리소스입니다.
8. 자바스크립트 Map 자료구조 적극 이용하기
Map이 Object에 비해 성능이 좋다는 것은 인지하고 있었지만 잘 안 쓰게 되는 면이 있는거 같아서 다시 한번 리마인드 겸 해당 기술블로그 글을 읽게되었고 뉴스레터에서 공유드립니다.
9. Optimize Time to First Byte
https://web.dev/optimize-ttfb/
이 문서에서는 웹 페이지의 성능을 개선하기 위해 첫 바이트 전송 시간(TTFB)을 최적화하는 방법에 대해 설명합니다. TTFB는 웹 브라우저가 웹 서버로부터 첫 바이트의 데이터를 수신하는 데 걸리는 시간을 측정하는 것으로, 웹사이트 속도를 측정하는 주요 지표입니다.
이 문서에서는 서버 응답 시간 단축, 파일 크기 최소화, 캐싱 및 압축 기술 활용 등 TTFB를 최적화하기 위한 몇 가지 팁을 제공합니다. 또한 이 문서에서는 네트워크 지연 시간을 줄이고 TTFB를 개선하기 위한 콘텐츠 전송 네트워크(CDN) 사용의 중요성에 대해서도 설명합니다.
또한 이 문서에서는 Chrome 개발자 도구 및 WebPageTest와 같은 도구를 사용하여 TTFB를 측정하고 분석하는 방법에 대한 실용적인 조언을 제공합니다. 이 문서에서는 TTFB를 정기적으로 모니터링하고 데이터를 사용하여 개선이 필요한 부분을 파악하는 것이 중요하다는 점을 강조합니다.
10. Our top Core Web Vitals recommendations for 2023
이 문서에서는 웹 페이지의 사용자 경험을 개선하기 위해 2023년에 시행될 핵심 웹 바이탈(CWV) 지표와 변경 사항에 대해 설명합니다. 이 문서에서는 가장 큰 콘텐츠가 많은 페인트(LCP), 첫 번째 입력 지연(FID), 누적 레이아웃 이동(CLS)을 포함한 CWV 지표와 측정 방법에 대한 개요를 제공합니다.
이 글에서는 2023년에 도입될 CWV 지표의 새로운 목표에 대해 간략하게 설명하고, 좋은 사용자 경험을 제공하기 위해 이러한 목표를 달성하는 것이 중요하다는 점을 강조합니다. 또한 이미지 및 동영상 파일 크기 줄이기, 서버 응답 시간 개선, 타사 스크립트 최적화 등 CWV 지표를 위해 웹 페이지를 최적화하는 방법에 대한 실용적인 조언도 제공합니다.
또한 이 문서에서는 CWV 지표를 정기적으로 모니터링하고 PageSpeed 인사이트 및 Chrome 사용자경험보고서와 같은 도구를 사용하여 개선이 필요한 영역을 파악하는 것의 중요성에 대해 설명합니다.
11. How I improve my skills in Typescript #5 : Satisfies operator
https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312
이 글에서는 객체가 주어진 인터페이스를 만족하는지 확인하는 데 사용되는 "Satisfies" 연산자라는 TypeScript 기능에 대해 설명합니다. 저자는 Satisfies 연산자를 사용하여 TypeScript 기술을 향상시키고 코드를 더욱 견고하게 만드는 방법을 설명합니다.
이 글에서는 객체에 특정 속성이나 메서드가 있는지 확인하는 등 TypeScript 코드에서 만족 연산자를 어떻게 사용할 수 있는지에 대한 몇 가지 예를 제공합니다. 저자는 코드 품질을 개선하고 런타임 오류 가능성을 줄이기 위해 만족 연산자를 사용하는 것이 중요하다고 강조합니다.
또한 이 글에서는 TypeScript 문서 읽기, 실제 프로젝트로 연습하기, 다른 개발자로부터 피드백 구하기 등 TypeScript 기술을 배우고 향상하는 방법에 대한 실용적인 조언도 제공합니다.
12. The History of Ecommerce: 1979 to 2023
https://dev.to/medusajs/the-history-of-ecommerce-1979-to-2023-2k9n
이 글은 1979년 전자상거래의 시작부터 2023년 예상되는 미래 트렌드까지 전자상거래의 역사를 타임라인으로 정리한 것입니다. 이 타임라인은 최초의 온라인 쇼핑 시스템, Amazon과 eBay의 등장, 모바일 커머스의 부상 등 전자상거래 발전의 중요한 사건과 이정표를 강조합니다.
또한 보안 문제, 물류 및 배송 개선의 필요성, 전자상거래에서 인공지능과 머신러닝의 사용 증가 등 전자상거래가 지난 수년간 직면한 도전과 기회에 대해서도 논의합니다.
또한 소셜 커머스의 중요성 증가, 온라인 쇼핑 경험에서 증강 현실 및 가상 현실 기술의 사용 증가 등 이커머스의 미래에 대한 인사이트를 제공합니다.
전반적으로 이 기사는 전자상거래의 역사에 대한 유익한 개요를 제공하고 향후 몇 년 동안 업계를 형성할 미래 트렌드에 대한 인사이트를 제공합니다.
13. Event-Driven vs Workflows: A Comprehensive Comparison for Developers and Architects
이 문서에서는 소프트웨어 개발에서 이벤트 중심 아키텍처와 워크플로 기반 아키텍처의 차이점에 대해 설명합니다. 저자는 이벤트 중심 아키텍처는 시스템의 이벤트나 변화에 대응하도록 설계된 반면, 워크플로 기반 아키텍처는 복잡한 비즈니스 프로세스를 관리하도록 설계되었다고 설명합니다.
이 글에서는 두 아키텍처를 자세히 비교하고 다양한 시나리오에서 장단점을 논의합니다. 저자는 이벤트 중심 아키텍처는 이벤트가 많고 실시간 데이터 처리가 필요한 시스템에 적합하며, 워크플로 기반 아키텍처는 복잡한 비즈니스 로직과 다단계 프로세스가 필요한 시스템에 더 적합하다고 설명합니다.
또한 금융, 의료, 이커머스 등 다양한 산업과 애플리케이션에서 이벤트 기반 아키텍처와 워크플로우 기반 아키텍처를 어떻게 사용할 수 있는지에 대한 예시를 제공합니다. 저자는 시스템과 비즈니스의 특정 요구 사항에 적합한 아키텍처를 선택하는 것이 중요하다고 강조합니다.
전반적으로 이벤트 기반 아키텍처와 워크플로 기반 아키텍처를 포괄적으로 비교하고 개발자와 아키텍트가 프로젝트에 적합한 아키텍처를 선택하는 방법에 대한 실용적인 조언을 제공합니다.
14. The Coolest JavaScript Features from the Last 5 Years
https://dev.to/ppiippaa/some-cool-javascript-features-from-the-last-5-years-4alp
이 글에서는 지난 5년 동안 도입되어 보다 효율적이고 간결한 코드를 작성하는 데 사용할 수 있는 몇 가지 자바스크립트 기능에 대해 설명합니다. 저자는 각 기능의 예제를 제공하고 그 작동 방식을 설명합니다.
이 글에서 다루는 기능은 다음과 같습니다:
1. 구조화 할당: 개발자가 배열과 객체에서 값을 추출하여 보다 간결한 방식으로 변수에 할당할 수 있습니다.
2. 기본 함수 매개변수: 호출자가 함수 매개변수를 제공하지 않은 경우 개발자가 함수 매개변수의 기본값을 지정할 수 있습니다.
3. 템플릿 리터럴: 변수와 표현식이 포함된 문자열을 더 쉽게 생성할 수 있는 방법을 제공합니다.
4. 화살표 함수: 이벤트 핸들러와 콜백에 특히 유용할 수 있는 함수를 정의하기 위한 보다 간결한 구문을 제공합니다.
5. 스프레드 구문: 개발자가 배열을 개별 인수로 분산하거나 배열을 단일 배열로 결합할 수 있는 구문입니다.
이 문서에서는 보다 효율적이고 가독성 높은 코드를 작성하는 데 유용할 수 있는 비동기/대기, 프로미스 API, Object.assign() 메서드 등의 다른 기능에 대해서도 설명합니다.
전반적으로 이 글은 개발자가 더 나은 코드를 작성하는 데 사용할 수 있는 몇 가지 최신 JavaScript 기능에 대한 유용한 개요를 제공합니다.
15. Functions Are Killing Your React App's Performance
https://dev.to/crutchcorn/functions-are-killing-your-react-apps-performance-222a
이 글은 함수를 과도하게 사용하면 React 앱의 성능에 부정적인 영향을 미칠 수 있다고 주장합니다. 저자는 React의 함수가 불필요한 재렌더링을 유발할 수 있으며 컴포넌트를 업데이트하는 데 걸리는 시간을 늘릴 수 있다고 설명합니다.
이 글에서는 함수를 소품으로 사용하거나 익명 함수를 소품으로 전달하는 등 함수가 React에서 어떻게 오용될 수 있는지에 대한 몇 가지 예를 제공합니다. 저자는 콜백 참조와 메모화 기법을 사용해 컴포넌트의 성능을 최적화함으로써 이러한 문제를 피할 수 있다고 제안합니다.
또한 이 글은 필요할 때만 함수를 사용하고 불필요한 컴포넌트 중첩을 피하는 등 React에서 함수를 효과적으로 사용하는 방법에 대한 실용적인 조언을 제공합니다.
또한 이 글에서는 React 앱의 성능을 측정하고 분석하는 것의 중요성에 대해 설명하고, 성능 문제를 식별하기 위해 Chrome 개발자 도구 및 React 프로파일러와 같은 도구를 사용할 것을 제안합니다.
16. React Server Component
https://twitter.com/dan_abramov/status/1633574036767662080?s=20
댄형이 설명해주는 서버컴포넌트에 대한 멘탈 모델입니다
댄형이 알려주는 서버컴포넌트 인사이트를 보시죱!
https://twitter.com/dan_abramov/status/1633716537474285573
이 다이어그램에서 강조하는 또 다른 사항은 두 '화살표'를 같은 위치에 둘 필요가 없다는 것입니다. 데이터에 가까운 엣지에는 RSC를, 사용자와 가까운 엣지에는 SSR을 배치할 수 있으며, 둘 다 스트리밍을 위해 설계되었습니다.
https://twitter.com/dan_abramov/status/1633709651643576321
"SSR"이라는 용어는 컴포넌트에 서버 전용 기능을 허용하지 않기 때문에 아쉽습니다. PHP, Rails 등과 같은 의미의 SSR이 아닙니다.
RSC는 이 문제를 해결합니다. 컴포넌트가 서버를 최대한 사용할 수 있도록 SSR 앞에 계층을 추가합니다. SPA 스타일 탐색에도 동일한 계층이 사용됩니다.
이번주 준비한 것은 여기까지입니다 😄
읽어주셔서 감사합니다 😉
댓글
의견을 남겨주세요