안녕하세요. 구독자님 이번주 뉴스도 봐주셔서 감사합니다 😄
1. ES2023 is Here, Hurry Up to Learn
https://javascript.plainenglish.io/es2023-is-here-hurry-up-to-learn-2de85c61f0ae
이 개념 문서에서는 최근 몇 년 동안 ECMAScript(JavaScript) 표준에 추가된 새로운 기능에 대한 포괄적인 개요를 제공합니다. 이 문서에서는 ES2023, ES2022, ES2021, ES2020을 다루며 각각의 새로운 기능을 예제와 설명으로 설명합니다.
ES2023에 포함된 기능 중 하나는 배열이 수정될 때 복사본을 반환하는 기능으로, 개발자는 원본 배열을 그대로 유지할 수 있습니다. 이는 `toSorted()`, `toReversed()`, `toSpliced()`와 같은 메서드를 사용하여 달성할 수 있습니다. 또한 ES2023은 이제 Symbol 유형의 약한 맵 키를 지원하여 개발자에게 더 큰 유연성을 제공합니다.
ES2022에는 예외 체인, 클래스 정적 코드 블록, `getPrivateField` 메서드를 사용하여 개인 속성에 액세스하는 기능 등 몇 가지 새로운 기능이 포함되어 있습니다. 또 다른 기능으로는 객체에 특정 프로퍼티가 있는지 확인하는 프로세스를 간소화하는 `Object.hasOwn`이 있습니다.
ES2021에는 숫자 구분 기호, 논리 연산자 할당, 약한 참조와 같은 몇 가지 새로운 기능이 도입되었습니다. Promise.any`는 개발자가 하나의 입력이 해결되는 즉시 프로미스를 해결할 수 있는 또 다른 새로운 기능입니다.
ES2020에서 개발자는 널 값 병합 연산자를 사용하여 왼쪽 피연산자가 널이거나 정의되지 않은 경우에만 오른쪽 피연산자를 반환할 수 있습니다. 또 다른 새로운 기능은 선택적 체인으로, 개발자는 객체가 널이거나 정의되지 않은 경우에도 오류를 일으키지 않고 객체의 프로퍼티에 액세스할 수 있습니다.
전반적으로 이 문서는 최근 몇 년간 ECMAScript(JavaScript) 표준에 추가된 새로운 기능에 대한 유익하고 상세한 개요를 제공하므로 언어의 최신 발전 사항을 파악하고자 하는 개발자에게 유용한 리소스입니다.
2. The Ultimate Guide to Image Optimisation
https://calibreapp.com/blog/image-optimisation-guide
이 문서는 웹 성능과 페이지 속도를 위한 이미지 최적화에 대한 완전한 가이드를 제공합니다. 먼저 이미지 최적화가 무엇이며 왜 중요한지 설명하고 단일 이미지 최적화를 통해 얻을 수 있는 잠재적 보상을 강조합니다. 그런 다음 이미지 압축기, 콘텐츠 전송 네트워크(CDN) 등 이미지 최적화에 도움이 되는 다양한 도구에 대해 간략하게 설명합니다.
이어서 이미지를 완전히 최적화하는 방법에 대한 자세한 단계별 설명을 제공합니다. 이미지가 제대로 작동하고, 적절한 파일 형식과 크기를 가지고 있으며, 크기 조정이나 레이아웃 변경 없이 페이지에 완벽하게 맞고, 페이지의 다른 중요한 리소스의 렌더링을 지연시키지 않도록 로드되는지 확인하는 것이 중요하다는 점을 강조합니다. 이 가이드에서는 이미지에 적합한 형식을 선택하는 방법과 이미지 파일을 효과적으로 압축하는 방법도 다룹니다.
또한 이 가이드는 이미지 응답성을 위한 디자인에 대한 조언과 플레이스홀더 및 스켈레톤 화면을 추가하여 사이트 속도와 체감 속도를 개선하는 방법을 제공합니다. 초급 웹사이트 속도 최적화, 성능 예산, 핵심 웹 바이탈 평가 등 사이트 성능 개선을 위한 추가 리소스를 제공하는 것으로 마무리합니다.
이 포괄적인 가이드의 조언을 따르면 모든 기술 수준의 학습자가 이미지를 효과적으로 최적화하여 상당한 속도 향상, UX 개선 및 핵심 웹 바이탈 개선을 달성할 수 있습니다.
3. Why web performance still matters in 2023
https://performance.shopify.com/blogs/blog/why-web-performance-still-matters-in-2023
이 문서에서는 2023년에도 웹 성능이 중요한 이유에 대한 포괄적인 개요를 제공합니다. 이 글에서는 성능이 중요한 네 가지 주요 이유, 즉 사용자 경험 개선, 비즈니스 성과 향상, 형평성 및 접근성 향상, 웹을 더 친환경적으로 만들 수 있다는 점을 강조합니다.
첫째, 성능은 사용자 경험을 개선하는 데 필수적입니다. 연구에 따르면 사람은 대기 시간이 0.3~3초 이상으로 길어지면 집중력을 잃고, 상호작용에 대한 응답이 0.1초 미만이면 즉각적인 것으로 인식하는 것으로 나타났습니다. 또한 휴스턴의 수하물 찾는데 어려움을 겪은 사례에서 알 수 있듯이 사용자의 인식이 항상 현실과 일치하는 것은 아닙니다. 따라서 원활하고 만족스러운 사용자 경험을 제공하려면 웹 성능을 최적화하는 것이 중요합니다.
둘째, 웹 성능은 더 나은 비즈니스 성과로 이어질 수 있습니다. 사용자가 만족하면 제품 구매나 구독 신청 등 원하는 행동을 완료하기 전에 웹사이트를 떠날 가능성이 줄어듭니다. 수많은 사례 연구를 통해 웹 성능과 이탈률 및 전환과 같은 주요 비즈니스 지표 간의 연관성이 입증되었습니다. 또한 검색 엔진은 이제 웹 성능 데이터를 순위 결정 요소로 고려합니다.
셋째, 성능은 형평성과 접근성을 높입니다. 모든 사람이 고사양 디바이스와 빠른 네트워크에 액세스할 수 있는 것은 아니기 때문에 고가의 디바이스를 구입할 수 있는 사람과 그렇지 않은 사람 사이에 큰 격차가 발생합니다. 웹사이트 소유자는 저사양 디바이스 및 네트워크에 최적화함으로써 전 세계 및 지역적으로 더 많은 사람들이 자신의 사이트에 액세스할 수 있도록 할 수 있습니다.
마지막으로 성능은 웹을 더욱 친환경적으로 만들 수 있습니다. 웹사이트 소유자는 사용자가 웹사이트를 로딩하고 사용하는 데 필요한 기기의 전력량을 줄임으로써 친환경 웹과 배터리 수명 연장에 기여할 수 있습니다. 자바스크립트 처리는 다른 어떤 자산 유형보다 비용이 많이 들고, 동영상은 이미지보다 더 많은 전력을 소비합니다. 따라서 사용자 경험과 빠른 작업 완료를 위해 최적화하면 단일 세션의 전력 소비를 줄일 수 있습니다.
전반적으로 비즈니스 소유자이든 형평성과 환경에 관심이 있는 사람이든 웹 성능 향상을 위한 노력은 필수적입니다. 웹사이트 소유자는 사용자 경험을 개선하고, 액세스를 늘리고, 웹이 환경에 미치는 영향을 줄임으로써 더 나은 지속 가능한 디지털 세상을 만들 수 있습니다.
4. Halve the size of images by optimising for high density displays
https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
이 문서에서는 점점 더 많은 비율을 차지하는 고밀도 화면에 대한 이미지 최적화의 중요성에 대해 자세히 설명합니다. 모바일 디바이스와 같은 고밀도 화면이 등장함에 따라 이러한 화면에 최적화되지 않은 이미지는 흐릿하거나 저품질로 보일 수 있습니다. 선명도를 보장하기 위해 저자는 이미지를 CSS 픽셀이 아닌 사용자의 디바이스 픽셀로 타겟팅할 것을 권장합니다.
이 문서에서는 고밀도 화면에서 이미지를 압축하는 데 유용한 팁도 제공합니다. 예를 들어, 2배 이미지를 인코딩하고 페이지에 표시될 크기가 될 때까지 이미지를 축소할 수 있습니다. 그런 다음 이미지가 나빠지기 전에 품질 슬라이더를 가능한 한 낮게 조정할 수 있습니다. 이 기법을 사용하면 파일 크기를 크게 늘리지 않고도 선명도를 크게 향상시킬 수 있습니다.
또한 저자는 `<사진>` 및 `<소스>` 태그 사용을 포함하여 다양한 화면 밀도에 맞는 기법도 살펴봅니다. '<picture>` 태그를 사용하면 화면 해상도 및 기타 요인에 따라 다양한 이미지를 제공할 수 있으며, '<source>` 태그는 특정 이미지 형식이 브라우저에서 지원되지 않는 경우 대체 옵션을 제공합니다. 이러한 태그를 사용하면 각 사용자에게 최적의 이미지를 제공하여 다운로드해야 하는 불필요한 데이터의 양을 줄이고 전반적인 사용자 경험을 개선할 수 있습니다.
요약하면, 고밀도 화면에 이미지를 최적화하는 것은 선명도를 보장하고 사용자 경험을 개선하는 데 매우 중요합니다. 이 문서에 제공된 팁을 따르면 각 사용자에게 최적의 이미지를 제공하여 로드 시간을 단축하고 데이터 사용량을 줄이며 전반적인 경험을 개선할 수 있습니다.
5. Migrating from ts-node to Bun
https://johnnyreilly.com/migrating-from-ts-node-to-bun
이 문서에서는 작성자가 콘솔 앱을 ts-node에서 대체 JavaScript 런타임인 Bun으로 마이그레이션한 경험에 대해 설명합니다. 저자는 한동안 대체 자바스크립트 런타임을 탐색하는 데 관심이 있었지만 npm 호환성이 필요해 망설였습니다. 하지만 Bun이 이 요구 사항을 충족한다는 사실을 알게 되어 사용해 보기로 결정했습니다.
저자는 우분투 머신에 Bun을 설치하는 과정을 설명하는 것으로 시작합니다. Bun을 설치하는 데 사용된 명령어를 제공하고 출력에 들여쓰기가 일관되지 않다는 점에 주목했습니다. 하지만 이 문제를 해결하기 위해 풀 리퀘스트를 제출했습니다. Bun을 설치한 후, 작성자는 ts-node에서 앱을 포팅할 준비가 되었습니다.
그런 다음 작성자는 ts-node에서 Bun으로 의존성을 포팅하는 프로세스를 설명합니다. 먼저 Node.js 런타임에 대한 TypeScript 정의가 포함된 `@types/node` 패키지를 제거하는 것으로 시작합니다. Bun을 사용하기로 했으므로 더 이상 이 패키지가 필요하지 않습니다. 대신, 프로젝트에 Bun 런타임 유형을 제공하는 `bun/types` 패키지를 추가합니다. 또한 작성자는 `tsconfig.json` 파일을 변경하여 Bun 문서에 맞게 조정합니다.
다음으로, 작성자는 사용 중인 Bun 버전에서 지원되지 않는 `fs.promises` API와 관련된 오류를 발견합니다. 그들은 `fs.promises.readFile`과 `fs.promises.writeFile`을 Bun에 상응하는 것으로 대체하지만, `fs.promises.readdir`에 대한 Bun에 상응하는 것을 찾지 못합니다. 대신 동기식 Node.js API를 사용합니다. 이러한 변경을 통해 작성자는 오류 없이 앱을 실행할 수 있습니다.
그런 다음 작성자는 ts-node와 비교하여 Bun으로 앱을 실행한 경험에 대해 설명합니다. 저자는 자신의 사용 사례에서 Bun이 ts-node보다 약 50% 더 빠르다는 것을 발견했습니다. 저자는 이러한 성능 차이는 Node.js가 Bun보다 시작 속도가 느리기 때문일 가능성이 높다고 언급합니다.
결론적으로 작성자는 ts-node에서 Bun으로의 마이그레이션 과정이 쉬웠으며 향후 Bun 사용에 대해 긍정적으로 평가했습니다. 이 문서는 대체 자바스크립트 런타임을 탐색하거나 ts-node에서 Bun으로 마이그레이션하는 데 관심이 있는 모든 분께 유용한 가이드를 제공합니다.
6. Some Cross-Browser DevTools Features You Might Not Know
https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/
이 문서는 크로스 브라우저 개발자 도구의 잘 알려지지 않은 기능에 대한 유용한 정보를 제공합니다. 이 문서에서는 임시 변수로 DOM 노드 액세스하기, 배지로 요소 시각화하기, 스크린샷 찍기, 최상위 레이어 요소 검사하기 등 여러 가지 기능을 중점적으로 다룹니다.
임시 변수로 DOM 노드에 액세스하기 섹션에서는 사용자가 콘솔에서 직접 노드에 액세스하는 방법을 설명합니다. 이 옵션은 노드를 마우스 오른쪽 버튼으로 클릭하고 옵션을 선택하면 사용할 수 있습니다. 이 옵션은 각 브라우저의 개발자 도구에서 다르게 레이블이 지정됩니다. 예를 들어, Chromium에서는 마우스 오른쪽 버튼을 클릭하고 "전역 변수로 저장"을 선택할 수 있습니다. Firefox에서는 "콘솔에서 사용"을 선택하고 Safari에서는 "요소 로그"를 선택할 수 있습니다.
배지로 요소 시각화하기 섹션에서는 개발 도구가 노드 옆에 배지를 표시하여 특정 속성과 일치하는 요소를 시각화하는 데 어떻게 도움이 되는지 설명합니다. 배지는 클릭할 수 있으며 브라우저마다 다양한 배지를 제공합니다. 예를 들어 Safari의 경우 요소 패널 도구 모음에 특정 배지의 표시 여부를 전환하는 데 사용할 수 있는 배지 버튼이 있습니다. 배지를 클릭하면 페이지에서 그리드 영역, 트랙 크기, 줄 번호 등이 강조 표시됩니다. 현재 개발자 도구에서 지원되는 배지는 Firefox 소스 문서에 나열되어 있습니다. 예를 들어 스크롤 배지는 스크롤 가능한 요소를 나타냅니다. 배지를 클릭하면 오버플로의 원인이 되는 요소가 강조 표시되고 그 옆에 오버플로 배지가 표시됩니다. 크롬에서 사용자는 아무 노드나 마우스 오른쪽 버튼으로 클릭하고 "배지 설정..."을 선택하여 사용 가능한 모든 배지가 나열된 컨테이너를 열 수 있습니다.
스크린샷 찍기 섹션에서는 사용자가 전체 페이지 스크린샷을 포함하여 페이지의 스크린샷을 찍는 방법을 설명합니다. 프로세스는 사용자가 캡처하려는 DOM 노드를 마우스 오른쪽 버튼으로 클릭하는 것으로 시작됩니다. 그런 다음 사용자는 사용 중인 개발 도구에 따라 레이블이 다르게 표시되는 노드 캡처 옵션을 선택할 수 있습니다. 또한 사용자는 특정 뷰포트 너비로 페이지를 캡처할 수 있는 페이지의 "반응형" 스크린샷을 찍을 수도 있습니다. 브라우저마다 다른 방법으로 캡처할 수 있습니다.
최상위 레이어 요소 검사하기 섹션에서는 Chrome에서 사용자가 대화상자, 알림 또는 모달과 같은 최상위 레이어 요소를 시각화하고 검사하는 방법을 설명합니다. 최상위 레이어에 요소가 추가되면 그 옆에 최상위 레이어 배지가 표시되며, 이 배지를 클릭하면 </html> 태그 바로 뒤에 있는 최상위 레이어 컨테이너로 이동합니다. 최상위 레이어 컨테이너에 있는 요소의 순서는 스택 순서를 따르므로 마지막 요소가 맨 위에 표시됩니다. 사용자는 공개 배지를 클릭하여 해당 노드로 다시 이동할 수 있습니다.
마지막으로 이 문서에서는 새로운 개발자 도구 기능에 대한 최신 정보를 얻을 수 있는 리소스를 제공합니다. 이러한 리소스에는 개발자 도구 팁, 개발자 팁, 개발자 도구를 사용할 수 있나요? 이 리소스에서는 유용한 크로스 브라우저 개발자 도구 팁과 요령, 사용자의 받은 편지함으로 전송되는 개발자 도구 팁, 개발자 도구용 Caniuse와 유사한 리소스를 제공합니다.
전반적으로 이 문서는 크로스 브라우저 개발자 도구와 각 브라우저에서 사용할 수 있는 기능에 대해 자세히 알고 싶은 사용자에게 유용한 리소스입니다.
7. 6 CSS snippets every front-end developer should know in 2023
https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/
이 글에서는 2023년에 모든 프론트엔드 개발자가 알아야 할 6가지 CSS 스니펫에 대해 설명합니다. 첫 번째는 컨테이너 쿼리로, 개발자가 컨테이너의 크기에 따라 스타일을 조정할 수 있습니다. 두 번째는 스크롤 스냅으로, 정지 지점이 있는 부드러운 스크롤 환경을 제공합니다. 세 번째는 그리드를 사용하여 절대 위치를 피하는 것입니다. 네 번째는 CSS에서 원을 만드는 간단한 방법입니다. 다섯 번째는 캐스케이드 레이어로, 나중에 발견한 새로운 CSS 변형을 삽입하는 데 도움이 될 수 있습니다. 마지막으로 개발자가 작성 모드와 방향에 따라 스타일을 조정할 수 있는 논리적 속성에 대해 설명합니다.
이 6가지 CSS 스니펫은 최신 정보를 파악하고 보다 효과적인 디자인을 만들고자 하는 프론트엔드 개발자에게 필수적입니다. 컨테이너 쿼리는 개발자가 뷰포트가 아닌 컨테이너의 크기에 따라 스타일을 조정할 수 있으므로 반응형 디자인에 특히 유용합니다. 스크롤 스냅은 웹사이트 방문자에게 더욱 매력적이고 사용자 친화적인 경험을 제공하는 데 도움이 되는 또 다른 유용한 기능입니다. 그리드를 사용하여 절대적인 위치 지정을 피하는 것도 다양한 화면 크기와 기기에서 요소가 올바르게 배치되도록 하는 데 도움이 되는 또 다른 중요한 기법입니다.
네 번째 스니펫은 CSS에서 원을 만드는 간단한 방법을 제공하며, 디자인에 시각적 흥미를 더하고 싶은 디자이너에게 유용합니다. 다섯 번째 스니펫인 캐스케이드 레이어는 디자이너가 나중에 발견한 새로운 CSS 변형을 원래 변형 세트와 함께 캐스케이드의 적절한 위치에 추가하는 데 도움이 될 수 있습니다. 마지막으로 논리적 속성은 디자이너가 작성 모드와 방향에 따라 스타일을 조정하는 데 도움이 될 수 있으며, 이는 여러 언어를 지원하는 웹사이트에 특히 중요합니다.
요약하자면, 이 여섯 가지 CSS 스니펫은 2023년 이후에도 현대적이고 효과적인 디자인을 만들고자 하는 모든 프론트엔드 개발자에게 매우 중요합니다. 개발자는 이러한 기술을 숙지함으로써 디자인을 개선하고 웹사이트 방문자에게 더 나은 경험을 제공할 수 있습니다.
8. You Might Not Need an Effect
https://react.dev/learn/you-might-not-need-an-effect
이 문서는 React의 Effect Hook을 효과적으로 사용하기 위한 종합적인 가이드입니다. 언제 이펙트를 사용해야 하는지, 앱 초기화를 처리하는 방법, 부모 컴포넌트에 상태 변경 알림, 부모에게 데이터 전달, 데이터 불러오기 등 이펙트와 관련된 다양한 주제를 다룹니다. 이 가이드에 설명된 모범 사례를 따르면 React 컴포넌트의 성능과 유지보수성을 최적화할 수 있습니다.
이 문서에서 다루는 핵심 주제 중 하나는 언제 이펙트를 사용해야 하는가입니다. 이 가이드는 코드 조각을 이펙트로 구현해야 하는지 여부를 결정하는 방법에 대한 지침을 제공합니다. 또한 메모화 및 상태 리프팅과 같은 기술을 사용하여 효과를 최대한 효율적으로 최적화하는 방법에 대한 조언도 제공합니다.
이 가이드에서 다루는 또 다른 중요한 주제는 앱 초기화를 처리하는 방법입니다. 여기에는 앱 로드 시 코드가 한 번만 실행되도록 하는 방법과 컴포넌트가 다시 마운트되어 데이터가 무효화되는 등의 문제를 방지하는 방법에 대한 조언이 포함됩니다.
또한 이 가이드에서는 상위 컴포넌트에 상태 변경 알림, 상위 컴포넌트에 데이터 전달 및 데이터 가져오기와 관련된 주제를 다룹니다. 이 가이드에 설명된 모범 사례를 따르면 React 컴포넌트의 성능과 유지보수성을 최적화하고 코드를 읽고 이해하기 쉽게 만들 수 있습니다.
이 문서에는 모범 사례와 지침을 제공하는 것 외에도 Effects를 효과적으로 사용하는 연습에 도움이 되는 과제도 포함되어 있습니다. 이러한 과제를 해결하면서 다양한 시나리오에서 Effects를 구현하는 실질적인 경험을 쌓고, 이를 사용해 React 컴포넌트를 최적화하는 방법에 대해 더 깊이 이해할 수 있습니다.
전반적으로 이 문서는 효과적이고 효율적인 방법으로 React의 Effect Hook을 사용하는 방법을 배우고자 하는 모든 사람에게 필수적인 리소스입니다. 초보자이든 숙련된 React 개발자이든 이 가이드에서 제공하는 지침과 모범 사례는 더 나은 React 코드를 작성하고 성능과 유지보수성을 위해 컴포넌트를 최적화하는 데 도움이 될 것입니다.
9. Rethinking React best practices
https://frontendmastery.com/posts/rethinking-react-best-practices/
이 개념 문서에서는 React에서 크고 깊은 트리를 최적화하는 데 따르는 어려움과 차세대 React 프레임워크가 이러한 문제를 해결하는 방법에 대해 자세히 설명합니다. 이 글은 React의 개발 역사와 프론트엔드 개발자와 백엔드 개발자 사이의 '큰 격차'와 같은 과거에 직면했던 과제에 대해 논의하는 것으로 시작합니다. 그런 다음 "프론트엔드를 위한 백엔드" 스타일 코드의 대부분을 서버로 다시 옮기는 등 두 세계의 장점을 조정하는 데 중점을 두고 React 생태계가 어떻게 다시 중간으로 이동하고 있는지에 대해 설명합니다.
그런 다음 이 글에서는 서버 측 렌더링, 데이터 불러오기 제약 조건, 릴레이, React 서버 컴포넌트와 같은 주제를 살펴봅니다. 특히 콘텐츠가 많은 페이지의 경우 서버 측 렌더링이 체감 성능을 개선하는 데 도움이 될 수 있지만 고도로 인터랙티브한 페이지의 사용자 경험을 저하시킬 수 있는 방법을 설명합니다. 그런 다음 최종 사용자 기기에서 로드하고 실행해야 하는 코드의 양을 줄이고 필요한 것만 다운로드하고 실행하는 원칙의 중요성에 대해 설명합니다. 이를 위해 Remix와 Next와 같은 프레임워크는 React의 단방향 데이터 흐름을 서버까지 확장하여 MPA의 단순한 요청-응답 멘탈 모델과 SPA의 상호 작용을 결합합니다.
그런 다음 데이터 불러오기 제약 조건의 문제를 논의하고 컴포넌트가 데이터 종속성을 GraphQL 조각으로 선언적으로 정의할 수 있는 프레임워크인 Relay를 소개합니다. 릴레이 컴파일러는 트리를 통해 각 컴포넌트의 데이터 요구 사항을 수집하고 최적화된 GraphQL 쿼리를 생성하며, 이 쿼리는 런타임에 경로 경계에서 실행됩니다. 그런 다음 이 문서에서는 Remix 및 Next와 같은 프레임워크에서 볼 수 있는 서버의 중첩 경로가 데이터와 코드를 가져올 때 트리를 통과하지 않도록 하는 방법에 대해 설명합니다. 컴포넌트의 초기 데이터 종속성은 일반적으로 URL에 매핑될 수 있으며, URL의 중첩된 세그먼트는 컴포넌트 하위 트리에 매핑되어 프레임워크가 특정 URL에 필요한 데이터와 컴포넌트 코드를 미리 식별할 수 있게 해줍니다.
그런 다음 이 문서에서는 서스펜스, 동시 모드 및 스트리밍이 앞서 설명한 데이터 가져오기 패턴을 어떻게 향상시키는지 자세히 설명합니다. Suspense를 사용하면 데이터를 사용할 수 없을 때 하위 트리가 로딩 UI를 표시하는 것으로 되돌아갔다가 데이터가 준비되면 렌더링을 재개하여 리소스 가져오기와 렌더링을 동시에 병렬로 수행할 수 있습니다. 그런 다음 이 글에서는 서버를 사후 최적화가 아닌 일류 시민으로서 소개하는 React 서버 컴포넌트를 소개합니다. React는 백엔드가 컴포넌트 트리에 포함되는 강력한 외부 레이어를 성장시키기 위해 진화합니다. 이 문서에서는 데이터 변형을 위한 서버 액션 함수의 이점과 React와 Remix에서 어떻게 활용되고 있는지에 대해서도 살펴봅니다.
전반적으로 이 개념 문서는 React에서 크고 깊은 트리를 최적화하는 데 따르는 어려움과 차세대 React 프레임워크가 이러한 영향을 완화하는 방법에 대한 포괄적인 개요를 제공합니다. 더 나은 정보에 기반한 절충안을 만들기 위해 우리가 작동하는 근본적인 제약 조건을 이해하는 것의 중요성과 프레임워크가 개발자가 특정 상황에 대해 더 세분화된 절충안을 만들 수 있는 수단을 점점 더 많이 제공하고 있다는 점을 강조합니다.
10. A Complete Visual Guide to Understanding the Node.js Event Loop
https://www.builder.io/blog/visual-guide-to-nodejs-event-loop
이 문서는 Node.js 프로그래밍에서 중요한 측면인 이벤트 루프를 이해하는 데 전면적인 가이드입니다. 이벤트 루프는 비동기 작업을 관리하고 메인 스레드가 차단되지 않도록 보장하는 역할을 합니다. 이는 고성능 애플리케이션을 구축하는 데 필수적입니다.
가이드는 자바스크립트에서 비동기 프로그래밍의 기본 사항을 다루며, 기본적으로 동기적이고 차단되며 단일 스레드로 작동한다는 것을 설명합니다. 그런 다음 브라우저 외부에서 JavaScript 코드를 실행할 수 있게 해주는 Node.js 런타임을 소개합니다. Node.js 런타임은 외부 종속성, C++ 기능 및 JavaScript 라이브러리 등 여러 구성 요소로 구성되어 있지만, 비동기 프로그래밍에 가장 중요한 구성 요소는 libuv입니다.
가이드는 그러면 libuv에 대해 자세히 설명합니다. libuv는 C로 작성된 크로스 플랫폼 오픈 소스 라이브러리입니다. Node.js 런타임에서 libuv는 비동기 작업 처리를 지원합니다. 가이드는 Node.js 런타임에서 코드 실행이 어떻게 작동되는지와 libuv가 비동기 메서드의 실행을 어떻게 수행하는지 설명합니다. 가이드는 또한 파일 읽기와 같이 네이티브 OS 지원이 없는 비동기 작업을 처리하는 방법에 대해서도 다룹니다. 이를 위해 스레드 풀을 사용하여 메인 스레드가 차단되지 않도록 합니다.
가이드는 그런 다음 Node.js에서 동기 및 비동기 코드 실행을 조율하는 C 프로그램인 이벤트 루프를 소개합니다. 이벤트 루프는 Node.js 애플리케이션이 실행되는 동안 계속 실행되는 루프이며, 여섯 개의 다른 큐로 구성됩니다. 각 큐는 호출 스택에서 최종적으로 실행해야 하는 하나 이상의 콜백 함수를 보유합니다. 가이드는 큐의 우선 순위 및 실행 순서를 지배하는 규칙을 설명합니다.
마지막으로, 가이드는 Node.js 애플리케이션을 구축하는 데 이벤트 루프가 어떻게 작동하는지 이해하는 것이 중요하다는 점을 강조합니다. 가이드는 각 큐의 미묘한 세부 사항에 대한 자세한 정보를 얻기 위해 이벤트 루프에 대한 블로그 게시물 시리즈의 다른 부분을 확인하는 것을 권장합니다.
요약하면, 이 가이드는 Node.js 이벤트 루프 및 비동기 프로그래밍을 이해하기 위해 깊이 있는 지식을 얻고자 하는 모든 사람들에게 훌륭한 자료입니다.
11. The 2023 guide to React debugging
https://raygun.com/blog/react-debugging-guide/
이 문서는 React 애플리케이션 디버깅에 대한 포괄적인 가이드입니다. UI 버그, 논리 오류, 네트워크 오류 및 회귀 버그와 같은 React 오류의 네 가지 가장 일반적인 유형에 대한 자세한 개요를 제공합니다. 이 가이드는 또한 로컬 Node.js 서버, Node.js 패키지 관리자, React.js 패키지 및 React 구문 강조 기능이 있는 소스 코드 편집기를 사용하여 개발 환경을 설정하기 전에 필요한 사전 요구 사항도 다룹니다.
이러한 기초 요소뿐만 아니라, 이 가이드는 Chrome DevTools, React Developer Tools, Visual Studio Code JavaScript Debugger 및 Raygun4JS 및 Raygun APM과 같은 최고의 React 디버깅 도구 네 가지도 강조합니다. 각 도구는 다양한 디버깅 시나리오에 효과적으로 사용하는 방법에 대한 설명과 함께 자세히 설명됩니다.
또한, 이 가이드는 디버깅을 워크플로에 통합하고 오류를 방지하기 위해 DevOps 관행을 따르는 팁도 제공합니다. 이러한 관행은 오류를 방지하고 디버깅 작업 부담을 줄일 수 있는 일반 개발 워크플로를 설정 및 유지하는 데 도움이 될 수 있습니다.
전반적으로, 이 가이드는 React 디버깅에 처음 접하는 개발자나 디버깅 기술을 개선하려는 경험 많은 개발자들에게 가치 있는 자원입니다. 이 가이드에서 제시된 권장 사항을 따르면 더욱 쉽고 효율적으로 성능 우수한 React 애플리케이션을 개발 및 유지할 수 있습니다.
12. React Labs: What We've Been Working On – March 2023
https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023
React Labs는 사용자 인터페이스를 구축하기 위한 인기 있는 자바스크립트 라이브러리인 React의 개발과 관련된 여러 진행중인 프로젝트를 수행하는 팀입니다. 이 문서에서는 각 프로젝트의 진행 상황과 미래 계획과 목표를 제공합니다.
그들이 논의하는 프로젝트 중 하나는 React Server Components(RSC)인데, 이것은 React 팀에서 디자인한 새로운 애플리케이션 아키텍처입니다. RSC의 개요와 서버 중심적인 멀티 페이지 앱과 클라이언트 중심적인 싱글 페이지 앱의 장점을 결합하는 방법에 대해 설명합니다. 그들은 또한 RSC의 최근 업데이트, 특히 서버 컴포넌트에서 데이터 가져 오기의 기본 방법으로 async/await가 도입되었다는 것을 논의합니다.
그들이 논의하는 다른 프로젝트는 자산 로딩입니다. 특히, 스타일 시트, 글꼴 및 이미지의 로딩 라이프 사이클과 Suspense를 통합하는 방법에 대해 설명합니다. 이렇게하면 UI 점프와 연속 레이아웃 시프트를 방지하여 사용자 경험을 개선할 수 있다고 설명합니다.
그들은 또한 문서 메타데이터와 React 구성 요소의 메타데이터 정보를 유지하는 도전 과제에 대해 논의합니다. 그들은 컴포넌트 트리의 어느 곳에서든 <title>, <meta> 및 메타데이터 <link> 태그를 렌더링하는 데 내장 된 지원을 추가하는 방법에 대해 설명합니다.
그들이 논의하는 다른 프로젝트는 React 최적화 컴파일러입니다. 이 컴파일러는 React 앱이 기본적으로 적절한 반응성만 갖도록 보장하는 최적화 컴파일러입니다. 그들은 컴파일러의 개요와 작동 방식, 그리고 제품화에 성공한 후에 오픈 소스화할 계획을 제공합니다.
그들은 또한 React에서 기대되는 화면 외 렌더링 기능에 대해 논의합니다. 이 기능은 추가적인 성능 오버헤드 없이 화면을 백그라운드에서 렌더링하는 기능입니다. 이것이 라우터 및 UI 라이브러리와 같은 것들에 통합되는 방법과 사용자의 성능을 개선하는 방법에 대해 설명합니다.
마지막으로, 개발자가 React 전환(transition)이 느려지는 경우를 감지하고 그들이 느리게 되는 이유를 조사할 수 있도록 하는 새로운 API로 전환 추적을 논의합니다. 그들은 React 전환을 기반으로 구축된 라우터에서 특히 유용하다는 것을 설명합니다.
이번주 준비한 것은 여기까지입니다 😄
읽어주셔서 감사합니다 😉
댓글
의견을 남겨주세요