안녕하세요. 구독자님 이번주 뉴스도 봐주셔서 감사합니다 😄
1. One In Two New Npm Packages Is SEO Spam Right Now
https://blog.sandworm.dev/one-in-two-new-npm-packages-is-seo-spam-right-now
샌드웜(Sandworm)의 최근 보고서에 따르면, npm에 제출되는 새로운 패키지 중 상당수가 SEO 스팸이라고 합니다. 특히, 현재 npm 레지스트리에 제출되는 모든 새로운 패키지 중 절반 이상이 악성 웹사이트로 연결된 README 파일 하나만 있는 빈 패키지로 이루어져 있습니다. 이는 npm 생태계의 보안에 상당한 위협을 가하는 우려스러운 추세입니다.
샌드웜의 보고서는 이 스팸 패키지의 대부분이 러시아어를 구사하는 사람들을 대상으로 하는 러시아 텔레그램 채널에서 온다는 것을 강조합니다. 패키지 이름은 우크라이나 전쟁이나 가즈프롬에 대한 투자 결정과 같은 여러 민감한 주제의 검색어와 일치하도록 설계되어 있습니다. 패키지 설명에서는 "금전적 문제를 영원히 잊을 수 있다"와 "집을 나가지 않고 수백만을 벌 수 있다"는 거짓된 약속을 합니다. 이 링크들은 7,000명 이상의 사용자를 보유한 악성 텔레그램 채널로 연결됩니다.
또한, 일부 스팸 패키지는 무료 책/동영상이나 가짜 포트나이트 V-Bucks를 제공하여 사용자를 다운로드하도록 유인합니다. 이러한 패키지는 존재하지 않는 다운로드 링크를 얻기 위해 일련의 작업을 수행해야하는 웹사이트로 이어집니다. 이러한 작업은 주로 광고 시청과 상호 작용을 필요로 합니다. 이러한 스팸 패키지에서 사용되는 URL의 도메인은 자주 변경되어 감지하기 어렵습니다.
샌드웜은 이 문제에 대한 조치를 취하기 위해 이 스팸 패키지를 npm에 신고하고 있습니다. 그러나 보고서는 샌드웜이 uyo-xint와 같이 몇 년 동안 npm 레포지토리에서 활동한 많은 패키지를 식별할 수 있었기 때문에 이것이 얼음산의 일각에 불과할 수 있다는 것을 시사합니다. 샌드웜은 미래의 블로그 게시물에서 전체 레지스트리에서의 스팸을 조사할 계획입니다.
요약하면, npm의 SEO 스팸 패키지의 보급은 즉각적인 주의를 요구하는 우려스러운 추세입니다. 사용자와 개발자는 이러한 악성 패키지로부터 자신을 보호하기 위해 주의를 기울여야 합니다. 샌드웜의 보고서는 npm 커뮤니티에 SEO 스팸 패키지의 잠재적인 위험과 이러한 패키지가 레지스트리에 들어오는 것을 탐지하고 방지하기 위한 더 견고한 시스템의 필요성에 대한 경고입니다.
2. Speeding up the JavaScript ecosystem - npm scripts
https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-4/
이 문서에서 저자는 자바스크립트 개발자들에게 일반적인 작업 중 하나인 npm 스크립트 실행 시간을 최적화하는 방법에 대해 논의합니다. 저자는 프로파일링 및 코드 분석을 이용하여 불필요한 모듈 로딩 및 문자열 정렬과 같은 비효율적인 영역을 식별하고 코드를 대상적으로 변경하여 npm 스크립트의 오버헤드를 줄입니다. 이러한 변경으로 저자는 npm 스크립트의 실행 시간을 400ms에서 22ms로 크게 개선합니다.
저자는 먼저 package.json의 "scripts" 필드가 프로젝트의 공통 작업을 설정하는 데 사용되며, 이러한 스크립트가 터미널에서 npm run을 사용하여 실행될 수 있다는 방법을 설명합니다. 그런 다음, 기본 명령을 직접 호출하는 것이 npm run을 이용해 쉘에서 실행하는 것보다 더 빠르다는 것을 설명하며, 이로 인해 npm run이 느린 이유를 조사합니다.
저자는 대부분의 시간이 npm CLI를 구성하는 모든 모듈을 로드하는 데 사용된다는 것을 발견합니다. npm CLI를 다른 .js 파일과 마찬가지로 호출하고, 노드의 --cpu-prof 인수를 사용하여 프로파일링하는 방법을 찾습니다. 프로파일을 분석하여, 불필요한 모듈 로딩 및 문자열 정렬과 같은 비효율적인 영역을 식별합니다.
npm 스크립트의 오버헤드를 줄이기 위해, 저자는 코드를 대상적으로 변경합니다. 예를 들어, 필요할 때만 느리게 로드되는 방식으로 특정 모듈의 로딩 방식을 변경합니다. 또한, 주요 진입 파일을 가진 종속성을 식별하고, npm 스크립트 실행에 필요한 코드만 로드하여 모듈 그래프의 크기를 줄입니다. 또한, String.prototype.localeCompare의 사용을 더 빠른 Intl.Collator 객체로 대체합니다.
전반적으로, 저자의 조사는 코드의 작은 변경이 npm 스크립트의 실행 시간에 큰 차이를 만드는 방법을 보여줍니다. 또한, 다른 JavaScript 도구에 대한 문제인 모듈 그래프의 단락 회로 문제에 대한 주의를 끌며, 저자는 이 문제를 해결하기 위해 배포할 때 코드를 번들로 묶는 것을 제안합니다. 그러나 저자는 앞으로 JavaScript 엔진이 이 문제를 해결할 것을 기대합니다.
3. Node.js compatibility for Cloudflare Workers – starting with Async Context Tracking, EventEmitter, Buffer, assert, and util
https://blog.cloudflare.com/workers-node-js-asynclocalstorage/
Cloudflare Workers는 최근 Node.js 코어 API와 내장 호환성을 발표했습니다. 이는 자바스크립트 런타임 간 호환성을 증가시키는 노력의 일환입니다. Async Context Tracking, EventEmitter, Buffer, assert 및 util API가 이제 사용 가능하며 오픈 소스 Cloudflare Workers 런타임에서 직접 제공됩니다. 따라서 폴리필 구현과 함께 코드를 번들링할 필요가 없습니다.
AsyncLocalStorage API는 비동기 작업 전체에서 컨텍스트를 추적하여 사용자가 프로그램을 통해 값을 전달할 때 작업 사이에서 컨텍스트 값을 전달할 필요가 없도록합니다. 이렇게하면 컨텍스트를 명시적으로 전달하지 않아도 더 복잡한 응용 프로그램에서 올바르게 조정하기 쉬워집니다.
EventEmitter API는 많은 다른 고급 API를 지원하는 중요한 구성 요소입니다. 이는 리스너를 호출하는 이름 있는 이벤트를 발생시키는 객체입니다. Workers API는 captureRejections 옵션을 포함하여 전체 Node.js EventEmitter API를 완전히 지원하며, async 함수를 이벤트 핸들러로 사용할 때 처리를 개선할 수 있습니다.
Buffer API는 이진 데이터 조작을 위해 가장 일반적으로 사용되는 Node.js API 중 하나입니다. 이것은 JavaScript에서 표준 TypedArray 및 DataView API가 도입되기 전에 만들어졌습니다. 모든 버퍼 인스턴스는 표준 Uint8Array 클래스에서 확장되지만 내장된 base64 및 hex 인코딩 / 디코딩, 바이트 순서 조작 및 인코딩에 대한 하위 문자열 검색과 같은 고유한 기능을 추가합니다.
Node.js의 assert 모듈은 테스트 작성 시 유용한 여러 가지 어설션을 제공합니다. Workers 구현에서 모든 어설션은 Node.js가 "엄격한 어설션 모드"라고 부르는 모드에서 실행됩니다. 이렇게하면 테스트를 구현하고 실행하기가 더 쉬워집니다.
util.types API는 다양한 내장 형식의 인스턴스인지를 확인하는 더 신뢰성이 높고 일반적으로 더 효율적인 방법입니다. ArrayBuffer, ArrayBufferView 및 AsyncFunction과 같은 다양한 내장 형식의 인스턴스 여부를 확인할 수 있습니다. 이러한 형식은 일반 JavaScript보다 효율적이고 신뢰성이 높게 확인됩니다.
더 많은 Node.js 코어 API가 곧 Cloudflare Workers에 추가될 예정이며, 이는 시간이 지남에 따라 workers 런타임에 점진적으로 도입됩니다. nodejs_compat 호환성 플래그를 사용하는 모든 worker는 새 모듈이 추가됨에 따라 자동으로 업데이트됩니다.
전반적으로 Cloudflare Workers에 이러한 Node.js API를 추가하면 개발자들은 더욱 원활한 경험을 할 수 있으며, 더 고급 및 복잡한 응용 프로그램을 구축할 수 있습니다.
4. A Business Case for SvelteKit
https://elliscs.hashnode.dev/a-business-case-for-sveltekit
이 문서는 SvelteKit을 웹 애플리케이션 프레임워크로 사용하는 장점에 대해 설명하는 정보성 블로그 포스트입니다. XtendOps에서 일하는 저자는 회사의 경험을 공유하며, Meteor에서 SvelteKit으로 전환한 과정에서 겪은 기술적인 문제와 개발자 경험, 기술적 성능 및 비즈니스 영향에 대한 이점을 강조합니다.
저자는 XtendOps가 다른 회사가 우수한 고객 경험을 제공할 수 있도록 돕는 비즈니스 프로세스 아웃소싱 회사라고 설명합니다. 회사는 지난 18개월 동안 직원 수가 600명에서 거의 2000명으로 증가하는 등 큰 성장을 경험했습니다. 이러한 성장을 이루기 위해 회사는 가상 DOM이있는 프레임워크의 불필요한 부분을 제거하는 프레임워크 인 Svelte로 전환하기로 결정했습니다.
저자는 SvelteKit으로 Meteor 인증을 재인증하고 가장 복잡한 평가를 개발하고 흐름 전환을 관리하고 데이터 모델을 처리하는 등 이전 과정에서 마주한 문제점을 설명합니다. 그들은 SvelteKit의 솔루션과 Prisma 및 Mongo Client와 같은 다른 도구를 사용하여 이러한 도전 과제를 극복하는 방법에 대해 설명합니다.
저자는 또한 SvelteKit이 개발 및 경험에 미친 영향을 공유합니다. 그들은 빌드가 30분에서 약 1분으로 줄어들고 개발 시작 시간이 20배 감소한 것을 설명하며, 기술적 성능에서 큰 향상과 비즈니스의 주요 성과 지표에서 눈에 띄는 증가를 보았다고 말합니다.
저자는 이전과 같은 전환을 고려하는 다른 회사에 조언을 제공하며 비즈니스 유증례를 만들고 가장 어려운 부분을 증명하고 인증 및 데이터 모델을 계획하는 것을 제안합니다. 또한, 회사가 자신들의 상황에 맞게 이전과정을 조정하고 필요한 경우 도움을 요청하도록 권장합니다.
전반적으로, 이 블로그 포스트는 실제 마이그레이션 경험을 기반으로 한 SvelteKit을 웹 애플리케이션 프레임워크로 사용하는 장점과 도전 과제에 대한 유용한 통찰력을 제공합니다.
5. Ten tips for better CSS transitions and animations - Josh Collinsworth blog
https://joshcollinsworth.com/blog/great-transitions
이 문서는 효과적인 CSS 전환과 애니메이션을 만드는 데 유용한 조언을 제공합니다. 저자는 이징 커브, 하드웨어 가속화, 고유한 이징 커브로 여러 속성을 전환하는 방법을 설명하며 10가지 팁을 제시합니다. 저자는 과도한 애니메이션을 피하는 것이 중요하다며 섬세함이 대개 대단한 선언보다 나은 것이라는 것을 강조합니다. 이 문서는 또한 사용자 선호도를 존중하는 문제를 다루며, 움직임을 줄이는 것을 선호하는 사용자를 수용하는 방법을 제시합니다. 저자는 각 팁을 설명하기 위해 많은 예시와 코드 스니펫을 제공하여 독자가 조언을 구현하는 방법을 이해하기 쉽게 만듭니다. 전반적으로, 이 문서는 사용자 경험을 개선할 수 있는 부드럽고 효과적인 CSS 전환과 애니메이션을 만드는 포괄적인 가이드를 제공합니다.
6. Hiding empty elements with CSS :empty and :has()
https://tobiasahlin.com/blog/hiding-an-element-if-its-empty/
이 문서는 CSS를 사용하여 요소를 숨기는 데 도움이되는 정보를 제공합니다. 요소가 비어 있거나 비어있는 요소를 포함하는 경우 :empty 가상 클래스를 사용하여 숨길 수 있으며, 이는 자식이없는 요소를 숨길 수 있습니다. 또한, :has() 가상 클래스를 사용하면 비어있는 요소를 포함하는 요소를 숨길 수 있습니다. 또한, :not() 가상 클래스를 사용하여 특정 자식을 포함하지 않는 요소를 숨길 수 있습니다. 이러한 기술을 활용하여 개발자는 상태를 처리하기 위해 클래스를 전환하는 데 덜 의존하는 더 견고한 스타일을 생성할 수 있습니다. CSS를 사용하여 요소를 숨기는 방법을 인식함으로써, 콘텐츠에 따라 특정 요소의 가시성을보다 정확하게 제어하여 사용자 경험을 향상시킬 수 있습니다. 모두 합쳐보면, 이 문서는 CSS를 사용하여 요소를 효과적으로 숨기는 방법에 대한 유용한 통찰력과 실용적인 예제를 제공합니다.
7. The modern web’s underrated powerhouse
https://github.com/readme/featured/css-future
이 문서는 모던 웹 개발에서 카스케이딩 스타일 시트(CSS)의 중요성을 탐구하며, 인터넷의 기초적인 요소로서의 중요성을 강조합니다. CSS는 웹 페이지의 시각적 외형을 정의하는 데 필수적이며, 웹 애플리케이션을 디자인하는 데 매우 적응성 있는 시스템으로 진화해 왔습니다. CSS는 예전에는 귀찮은 기술이었지만 이제는 모던 웹 개발의 성숙하고 강력한 기반 요소가 되었습니다. 개발자들은 계속해서 CSS에서 가능한 것의 한계를 넓히고 있으며, 오픈 소스 생태계는 공통적인 문제들을 해결하고 언어의 능력을 확장하기 위한 도구들을 만들어내고 있습니다.
CSS는 이전에는 어려운 기술로 알려져 있었으나 시간이 지나면서 많은 디자이너와 개발자들에게 일을 할 때 즐거운 기술이 되었습니다. 오늘날 CSS는 웹 개발에서 매우 중요한 기술로서, 2021년 CSS 현황 조사에서 응답자의 80%가 CSS 작성을 즐긴다고 밝혔습니다.
CSS는 페이지의 모양뿐만 아니라 다양한 크기와 맥락에 대한 페이지의 적응방식도 정의합니다. Flexbox와 Grid는 다양한 화면 크기와 차원에 대한 반응형 레이아웃을 생성하는 데 도움이 되며, 해킹이나 특별한 작업 없이 적응 가능합니다. 또한, 컨테이너 쿼리를 이용하면 화면 크기가 아니라 컨테이너의 크기에 따라 요소에 스타일을 적용할 수 있습니다.
오픈 소스 생태계는 CSS 개발 경험을 개선하는 데 중요한 역할을 하고 있습니다. Sass, Less 및 PostCSS와 같은 도구들은 개발자들이 CSS를 프로그래밍 방식으로 작업할 수 있게 해주며, Bootstrap 및 Tailwind와 같은 프레임워크는 레이아웃과 디자인 시스템을 만드는 데 도움이 됩니다. 이러한 오픈 소스 도구들은 변수 및 중첩 규칙과 같은 기능이 표준으로 추가되는 CSS 명세의 발전에도 영향을 미쳤습니다.
CSS는 다양한 시나리오를 위한 일련의 매개변수를 기반으로 페이지에 적응하는 데 더 똑똑해지고 있으며, 많은 지시를 요구하는 대신 이러한 적응성을 높이는 추세입니다. 이러한 적응성의 추세는 컨테이너 쿼리와 상대적인 색 구문과 같은 기능으로 주도되고 있습니다. CSS는 지속적으로 진화하는 언어이며, 누구나 오픈 소스 커뮤니티에 참여하고 새로운 기능의 개발에 참여하여 미래를 제공할 수 있습니다.
결론적으로, CSS는 초기 단계에서부터 많은 발전을 이루어 현재 모던 웹 사용 경험을 형성하는 데 중요한 역할을 하고 있습니다.
8. Types in JavaScript With Zod and JSDoc
https://blog.jim-nielsen.com/2023/types-in-jsdoc-with-zod/
이 글은 자바스크립트에서 타입 검사를 위한 JSDoc와 Zod의 사용에 대해 논한다. JSDoc은 개발자들이 일반적인 자바스크립트 주석 내에서 타입을 선언할 수 있도록 하여 코딩 중 타입 힌트를 효율적으로 얻을 수 있는 방법이다. 또한 이 기능은 추가 구성 없이 VSCode와 매끄럽게 작동한다.
반면, Zod는 런타임에서 TypeScript 타입으로 추론될 수 있는 타입 스키마를 허용한다. JSDoc와 Zod를 결합함으로써, 개발자들은 컴파일 시간과 런타임에서 모두 타입의 이점을 얻을 수 있다. 이 접근 방식은 코드의 정확성을 보장하고 버그를 최소화하는 데 도움이 된다.
이 글에서는 JSDoc와 Zod를 함께 사용하는 방법에 대한 단계별 가이드를 제공한다. 개발자들은 일반적인 자바스크립트 파일에서 Zod 타입 스키마를 선언한 다음 JSDoc 타입으로 추출할 수 있으며, 이를 편집기에서 힌트로 사용할 수 있다. 이 접근 방식은 TypeScript 도구 설정 및 유지 관리를 필요로하지 않으면서 TypeScript의 이점을 제공한다.
전반적으로, 이 글은 자바스크립트에서 타입 검사를 위해 JSDoc와 Zod를 함께 사용하는 장점을 강조한다. 이는 코드를 더욱 신뢰성 있게 만들고, 버그의 수를 줄이며, 추가 구성을 필요로하지 않으면서 효율적이고 효과적인 코드를 작성하는 데 도움이 된다.
9. Making Tanstack Table 1000x faster with a 1 line change
https://jpcamara.com/2023/03/07/making-tanstack-table.html
이 문서는 자바스크립트 코드베이스의 작은 변화가 1000배의 성능 향상을 가져왔다는 것을 자세히 설명합니다. 문제는 groupBy 함수에서 배열을 연결하는 데 사용된 전개 연산자였습니다. 중첩 루프와 O(n^2)의 복잡도로 인해 병목 현상이 발생하여 groupBy 호출 시 최대 10초까지 소요되는 성능 문제가 발생했습니다.
저자는 Map에서 객체 리터럴로 전환하고 reduce 대신 for 루프를 사용하여 groupBy 함수를 최적화하려고 노력했지만 성능이 개선되지 않았습니다. 그래서 저자는 코드 라인을 주석 처리하면서 문제를 식별하고, 배열을 연결하는 데 사용된 spread 연산자가 문제임을 발견했습니다.
전개 연산자는 reduce의 각 반복마다 새로운, 점진적으로 더 큰 배열을 만들어 속도가 점점 느려지게됩니다. 이는 대규모 데이터 세트의 경우 막대한 수의 배열을 만들고 실행하는 데 상당한 시간이 소요될 수 있다는 것을 의미합니다.
문제를 해결하기 위해 저자는 전개 연산자를 push로 대체하여 기존 배열을 직접 변경하도록했습니다. 이 변경으로 인해 상수 시간 복잡도인 O(1)이 발생하여 이전 구현보다 훨씬 빠른 성능을 발휘했습니다.
저자는 또한 Array.from, slice, concat, immer를 사용하는 등 다른 코드 최적화 옵션도 탐색했습니다. 이러한 옵션은 일부 성능 이점이 있었지만 push 방법이 가장 효과적인 솔루션이었습니다.
요약하면, 이 문서는 전개 연산자와 같은 언어 기능의 성능 영향을 이해하는 것의 중요성과 가변 작업의 이점을 보여주며, 반복적인 문제 해결의 가치와 작은 변경이 코드 성능에 미치는 중요한 영향을 보여줍니다.
10. JavaScript import maps are now supported cross-browser
https://web.dev/import-maps-in-all-modern-browsers/
ES 모듈은 웹 애플리케이션에서 JavaScript 코드를 포함하고 재사용하는 현대적이고 효율적인 방법입니다. JavaScript 개발에 대한 예전 비모듈 접근 방식과 비교하여 여러 가지 이점을 제공합니다. ES 모듈을 사용하는 현대적인 방법 중 하나는 <script type="importmap"> 태그를 사용하는 것입니다. 이를 통해 개발자는 외부 모듈 이름과 해당 URL을 매핑할 수 있으며, 이는 여러 가지 이점을 제공합니다. 예를 들어, 코드가 의존하는 외부 모듈을 명확하고 명시적으로 지정하여 코드의 이해와 유지 관리가 쉬워집니다.
<script type="importmap"> 태그와 import 키워드를 사용하는 것은 type="module" 속성이 있는 script 태그 내에서만 가능하다는 점에 유의해야 합니다. 또한 <script type="importmap"> 태그를 사용하여 ES 모듈을 웹 애플리케이션에 포함하고 재사용하는 것은 강력한 방법입니다.
이 문서는 import 맵의 브라우저 지원에 대한 정보도 제공합니다. 현재 Chrome 89, Firefox 108 및 Edge 89가 이를 지원하고 있지만, Safari는 지원하지 않습니다. 이 주제에 대한 추가 정보도 제공되며, 명세와 import 맵이 있는 브라우저에서 ES 모듈을 사용하는 방법도 설명합니다.
요약하면, <script type="importmap"> 태그와 함께 ES 모듈을 사용하는 것은 웹 애플리케이션에서 JavaScript 코드를 포함하고 재사용하는 현대적이고 효율적인 방법이며, 이점이 있어 개발자들이 고려할만한 유익한 옵션입니다.
11. In Praise of Vite
https://cloudfour.com/thinks/in-praise-of-vite/
이 기사에서 작성자는 Webpack을 대체하는 현대적인 개발 환경 및 빌드 도구인 Vite에 대해 논합니다. 작성자는 자신이 프로젝트를 구동하는 인프라와 함께 작업하는 것을 즐기는 능력있는 개발자라고 생각하지만, Webpack과 Babel과 같은 복잡한 빌드 도구를 구성하는 것은 어렵고 압도적이라고 설명합니다. 작성자는 이러한 도구를 강력하지만 작업하기 어렵다고 생각하며, 많은 개발자가 이러한 감정을 공유한다고 믿습니다.
그런 다음 작성자는 Vite를 소개합니다. Vite는 쉽게 사용할 수 있고 의견이 분분한 도구로서, 대부분의 개발자가 필요로하는 것을 기본적으로 처리할 수 있다고 설명합니다. 작성자는 Vite의 간결함과 사용의 용이함을 가장 큰 기능으로 강조하며, Vite는 응용 프로그램의 진입 파일만 신경쓰고 연결된 모든 CSS 또는 JS 파일을 자동으로 처리한다고 설명합니다. 작성자는 또한 Vite가 Sass, PostCSS, JSON 및 TypeScript와 같은 다른 기술을 지원하므로, 최신 웹 개발에 유연한 도구임을 언급합니다.
총적으로, 이 기사는 Vite를 칭찬하며 웹 개발 프로세스를 단순화하고 효율적으로 만들어 개발자가 복잡한 구성 및 유지 보수 작업 대신 코드 작성에 집중할 수 있도록하는 능력을 강조합니다.
12. What are source maps?
이 문서는 소스 맵(Source Maps)에 대한 자세한 설명과 현대 웹 개발에서의 중요성을 제시합니다. 이 문서는 자바스크립트 프레임워크, CSS 전처리기, 템플릿 언어 등 다양한 도구를 사용하는 복잡한 웹 애플리케이션 개발의 어려움을 강조합니다. 이러한 도구는 웹 개발의 성능과 효율성을 향상시키지만, 일반적인 HTML, 자바스크립트 및 CSS로 코드를 변환하는 빌드 프로세스가 필요합니다. 하지만 이 최적화 과정은 압축된 코드에서 변수 이름이 짧아지는 등 디버깅 프로세스를 복잡하게 만들 수 있습니다.
이 문서는 이러한 도전에 대응하기 위해, 빌드 도구에 의해 생성된 원본 코드로의 맵핑 정보를 포함하는 소스 맵을 소개합니다. 이를 통해 디버깅이 용이해집니다. 이 문서는 소스 맵이 어떻게 생성되고 작동하는지, Variable Length Quantity(VLQ) base64-encoded string을 사용하여 컴파일된 파일에서 원본 파일의 줄과 위치를 매핑하는 방법도 다룹니다.
이 문서는 또한 소스 맵의 mappings 필드를 이해하고 이를 디코딩하여 문제의 원인을 파악하는 것이 중요하다고 강조합니다. 소스 맵 시각화 도구(source-map-visualization, Source Map Visualization 등)를 사용하여 코드 매핑을 시각화하는 방법도 제시합니다. 또한, 브라우저 DevTools에서 소스 맵을 적용하여 디버깅 문제를 빠르게 파악하는 방법도 논의합니다.
또한, 이 문서는 "x_" 네이밍 컨벤션으로 시작하는 사용자 정의 필드인 소스 맵 확장(Source Map Extension)도 다룹니다. 예를 들어 Chrome DevTools에서 제안하는 "x_google_ignoreList" 확장 필드는 개발자가 코드에 집중하는 데 도움이 됩니다.
마지막으로, 이 문서는 소스 맵을 사용하여 디버깅하는 것이 완벽하지 않다는 것을 인정하고, 빌드 프로세스에서 변수가 최적화되어 없어지는 경우 개발자가 직면하는 도전을 강조합니다. 이 문제를 해결하기 위해 소스 맵에 스코프 정보를 포함하는 것이 제안되고 있으며, 소스 맵을 사용한 디버깅 기능을 개선하는 방법에 대한 논의도 진행 중입니다.
요약하자면, 이 문서는 소스 맵의 자세한 설명과 현대 웹 개발에서의 중요성, 웹 애플리케이션 디버깅에 효과적으로 사용하는 방법을 제공합니다.
13 . Jumping HTML tags. Another reason to validate your markup
https://pepelsbey.dev/articles/jumping-html-tags/
이 가이드는 HTML 마크업 검증과 HTML 사양을 따르는 것의 중요성을 포괄적으로 설명합니다. 저자는 HTML 요소의 부적절한 중첩이 DOM 트리의 렌더링에 부정적인 영향을 미칠 수 있으며 HTML 태그의 부적절한 사용이 웹 페이지의 접근성과 사용자 경험에 영향을 미칠 수 있다는 실제 예시를 제공합니다.
HTML 코드가 유효한지 확인하는 데 도움이 되도록 이 가이드는 여러 가지 HTML 마크업 검증 도구를 제안합니다. 그 중 하나는 HTML 사양에 가장 가까운 W3C HTML 검증기입니다. 이 가이드는 이 도구를 사용하여 HTML 마크업을 검증하는 방법에 대해 상세히 설명합니다. 또한 이 가이드는 HTML-validate라는 독립적인 도구를 소개하며, 이 도구는 전체 문서뿐만 아니라 HTML 조각도 확인할 수 있고 W3C HTML 검증기보다 더 유연합니다.
마지막으로, 이 가이드는 HTML 린터에 대해 논의하고 코드 품질을 개선하는 데 도움이 될 수 있다는 것을 설명합니다. HTML 린터는 HTML 요소의 부적절한 중첩을 명시적으로 확인하지는 않지만 특정 코드 스타일을 강제하고 일반적인 실수를 잡아내는 데 도움이 될 수 있습니다. 이 가이드는 두 가지 인기있는 HTML 린터인 HTMLHint와 validate-html-nesting에 대해 강조합니다.
전반적으로, 이 가이드는 접근성이 뛰어나고 사용자 친화적이며 HTML 사양을 준수하는 웹 페이지를 만들고자 하는 개발자에게 필수적입니다.
14. 컴퓨팅 사고와 개발 실력 늘리는 공부법
https://velog.io/@teo/computational-thinking
이 문서는 개발자들이 개발 실력을 높이고 컴퓨팅 사고를 향상시키는 방법에 대해 다루고 있습니다. 여기서는 코드 작성 시 다른 코드와의 결합과 끊임없는 연습의 중요성에 대해 강조하고 있습니다. 이는 개발자들이 완성도 높은 코드를 작성하고, 실력을 향상시키는 데 큰 역할을 합니다.
또한, 이 문서에서는 컴퓨터적 사고의 중요성에 대해 다루고 있습니다. 컴퓨터는 0과 1의 세상에서 살기 때문에, 개발자들은 데이터의 관점에서 문제를 인식하고 변수, 타입, 조건, 반복, 함수 등의 구조로 표현하는 능력을 갖추어야 합니다. 이러한 능력을 효과적으로 발전시키기 위해서는, 개발자들은 의식적으로 컴퓨터적 사고를 훈련해야 합니다.
마지막으로, 이 문서는 개발자들에게 새로운 인사이트를 제공하며, 개발 실력 향상을 위한 조언을 제공합니다. 이러한 조언은 누구나 쉽게 따라할 수 있으며, 개발자들이 컴퓨팅 사고와 개발 실력을 높이는 데 큰 도움이 될 것입니다.
15. next.js Static Export
https://beta.nextjs.org/docs/configuring/static-export
이 가이드는 Next.js에서 정적 익스포트를 구성하는 방법에 대한 종합적인 개요를 제공합니다. 각 라우트마다 HTML 파일을 생성함으로써 정적 익스포트는 번들 크기를 크게 줄이고 페이지 로드를 더 빠르게 할 수 있습니다. 이 가이드는 구성, 지원되는 기능, 이미지 최적화, 라우트 핸들러 및 배포와 같은 정적 익스포트의 다양한 측면을 다룹니다.
정적 익스포트의 주요 이점 중 하나는 페이지 로드 속도를 높일 수 있다는 것입니다. next build를 실행하면 Next.js는 각 라우트마다 HTML 파일을 생성합니다. 엄격한 SPA를 개별 HTML 파일로 분할함으로써 Next.js는 클라이언트 측에서 불필요한 JavaScript 코드를 로드하지 않을 수 있으며, 이는 번들 크기를 줄이고 빠른 페이지 로드를 가능하게 합니다.
이 가이드에서는 next.config.js 내에서 출력 모드를 변경하여 정적 익스포트를 활성화하는 필요한 단계를 설명합니다. next build를 실행한 후, Next.js는 애플리케이션의 HTML/CSS/JS 자산이 포함된 .next/build 폴더 내에 out 폴더를 생성합니다.
또한, 이 가이드에서는 서버 컴포넌트, 동적 라우트 세그먼트, 클라이언트 컴포넌트로 동적 데이터 가져오기 및 이미지 최적화와 같은 지원되는 정적 익스포트 기능을 다룹니다. 이러한 기능을 사용하면 개발자는 빠르고 확장 가능한 애플리케이션을 빠르고 효율적으로 빌드 및 배포할 수 있습니다.
하지만, 정적 익스포트는 서버 기능, 재작성, 리디렉션, 헤더, 미들웨어 및 증분 정적 재생성과 같은 몇 가지 기능을 지원하지 않습니다. 정적 익스포트로 애플리케이션을 구축할 때 이러한 제한사항을 염두에 두는 것이 중요합니다.
마지막으로, 이 가이드에서는 정적 익스포트로 애플리케이션을 배포하는 방법에 대한 개요를 제공합니다. Next.js는 정적 익스포트를 out 폴더에 생성하며, 이 폴더는 HTML/CSS/JS 정적 자산을 제공할 수 있는 모든 웹 서버에서 호스팅할 수 있습니다. 이 가이드에서는 Nginx와 같은 정적 호스트를 사용하여 들어오는 요청을 올바른 파일로 재작성하는 방법에 대한 예시도 제공합니다.
16. What complex systems can teach us about building software
https://sookocheff.com/post/systems/what-complex-systems-can-teach-us-about-building-software/
이 기사는 복잡한 시스템의 연구를 활용하여 소프트웨어 시스템을 설계하는 방법을 탐구합니다. 소프트웨어 시스템이 커지고 더 복잡해지면 그들의 행동을 제어하고 예측하기가 어려워집니다. 이 기사는 비선형성, 신흥적인 행동 및 적응성과 같은 복잡한 시스템의 다양한 속성을 탐구하고 이러한 속성이 소프트웨어 시스템에 적용될 수 있는 방법에 대해 논의합니다.
복잡성을 줄이려는 대신, 저자는 이를 받아들이고 시스템의 행동을 모델링하는 데 사용하는 것을 옹호합니다. 소프트웨어 시스템이 복잡한 시스템이라는 것을 인정함으로써, 우리는 복잡성을 제어하는 방식과 마인드셋을 변경할 수 있습니다. 이는 개별 구성 요소의 동작과 그들을 어떻게 인센티브화하는지, 그리고 집단 시스템의 동작과 개별 구성 요소와의 연결 방식을 모두 고려하는 것을 의미합니다.
이 기사는 성공적인 복잡한 소프트웨어 시스템을 구축하기 위한 세 가지 핵심 요소를 제시합니다. 첫째, 조직이 믿고 체계적으로 시행하는 일련의 품질 아키텍처 원칙을 정의합니다. 이러한 원칙은 시스템 내 개별 구성 요소의 동작을 지배해야 합니다. 둘째, 지도자가 시스템의 구성 요소 중 어떤 것이 규칙을 따르고 있는지, 어떤 것이 성공하고 인센티브로 육성되어야 하는지, 어떤 것이 실패하고 제거해야 하는지를 결정할 수 있는 고품질 정보 집계 시스템을 개발합니다. 셋째, 다양성을 장려하고 팀 빌딩 및 소프트웨어 개발에서 넓게 실험합니다. 우리가 더 많이 실험하고 배우면, 우리가 원하는 동작을 이끌어내는 폭발적인 발전의 가능성이 커집니다.
요약하면, 이 기사는 복잡한 소프트웨어 시스템을 구축하는 방법에 대한 유용한 인사이트를 제공합니다. 복잡성을 받아들이고 이를 우리의 이점으로 활용함으로써, 저희는 보다 견고하고 적응성이 뛰어나며 효과적인 소프트웨어를 만들 수 있습니다. 이 기사에서 제시된 세 가지 요점은 성공적인 복잡한 소프트웨어 시스템을 구축하려는 조직에게 유용한 프레임워크를 제공합니다
17. You Want Modules, Not Microservices
https://blogs.newardassociates.com/blog/2023/you-want-modules-not-microservices.html
이 기사는 마이크로서비스의 개념을 탐구하면서, 이것이 새로운 아이디어가 아닌 모듈의 오랜 개념을 재탄생시킨 것이라 주장하고 있다. 저자에 따르면, 마이크로서비스의 진정한 이점은 조직적 명확성에 있으며, 이것이 자율적인 개발 팀이 다른 팀과 독립적으로 자신들의 코드를 만들고 유지할 수 있게 한다.
마이크로서비스의 다양한 이점인 확장성, 집중도, 가용성, 단순성, 반응성, 신뢰성 등이 다른 맥락에서 강조되어 왔지만, 저자는 이러한 이점의 근본적인 열쇠는 작은, 독립적인 "조각"의 코드와 데이터를 만들고 유지하는 것이며, 서로 다른 버전으로 관리되며, 공통 입력과 출력을 사용하여 시스템 통합을 용이하게 하는 것이 모듈의 핵심 개념이라고 언급한다.
또한, 이 기사는 분산 컴퓨팅의 도전과 통합 및 통신을 위한 공통 아키텍처 백플레인을 구축해야 하는 필요성에 대해 다루고 있다. 저자는 대부분의 마이크로서비스가 5~7차원의 지연을 유발하는 네트워크 라인을 통해 데이터를 전송하는 것이라는 점을 인정하며, 이는 더 많은 노드를 네트워크에 추가하여 "규모를 확장"할 수 없다는 것을 강조한다.
결론적으로, 마이크로서비스가 소프트웨어 개발 산업에서 인기를 얻고 있지만, 저자는 진정한 이점은 모듈의 개념과 조직적 명확성에 있다고 강조한다. 이 기사는 분산 컴퓨팅의 도전에 대한 대처를 위해 공통 아키텍처 백플레인을 구축하고, 자율적인 개발 팀이 다른 팀과 독립적으로 자신들의 코드를 만들고 유지할 수 있게 하는 것의 중요성을 강조한다.
18. Server Components can lazily send modules to client.
https://twitter.com/dan_abramov/status/1638760757239087104
번역본을 공유드립니다.
서버가 클라이언트에 함수를 "전송" 했습니다.
'client use'는 상태를 사용하는 컴포넌트에만 사용하는 것이 아니라 서버 전용 부분에서 클라이언트 부분을 "잘라내는" 부분을 표시하는 방식입니다. 여기서는 임의의 코드로 일부 모듈을 표시하고 있습니다: https://github.com/unstubbable/mfng/commit/b36d6af#diff-2a0244ea0fd241bffd74dd2622b5b605daea14f3a9a641db0f60da8a5d5eb5ed
이렇게 하면 이 모듈을 buy() RPC 응답의 일부로 클라이언트에 "반환"할 수 있습니다.
그리고 당연히 클라이언트 컴포넌트는 해당 모듈을 "수신"하고 (지금까지 <script> 태그로 로드되어 모듈 시스템에 설치되어 있는) 해당 함수를 호출할 수 있습니다.
유선을 통해 임의의 코드를 보내지 않으며, 평가 또는 이와 유사한 것을 사용하지 않는다는 점에 유의하세요. RSC는 서버에 클라이언트 모듈 그래프에 대해 "학습"하고 이를 통해 모듈을 클라이언트에 "전송"합니다. 클라이언트에게는 빌드의 또 다른 비동기 청크에 불과합니다.
19. Server Components is coming in Bun v0.6.0
https://twitter.com/jarredsumner/status/1642821108402630657
번역본을 공유드립니다.
위 gif는 bun의 새로운 번들러를 사용하여 서버 컴포넌트(코드 분할 + 공유 모듈 그래프 포함)를 번들링하고, bun의 런타임을 사용하여 서버 컴포넌트와 정적 에셋을 렌더링하는 모습입니다.
출시하기 전에 아직 정리해야 할 부분이 있지만, 이제 거의 완성 단계에 이르렀습니다.
청킹이 마지막 관문이었습니다.
소스맵, 식별자 최소화, 몇 가지 충돌 등 아직 해야 할 일이 더 있지만 진행 상황에 대해 기분이 좋습니다.
20. Improved sitemap support is coming to Nextjs
https://twitter.com/leeerob/status/1639639575843729409
번역본을 공유드립니다.
1. app/` 안에 `sitemap.ts` 파일을 생성합니다.
2. 동적 데이터 가져오기 + 경로 배열 반환하기
3. https://leerob.io/sitemap.xml 🎉
이제 `next@canary`에서 곧 안정된 버전으로 제공됩니다.
21. The Next.js App Router now supports static exports!
https://twitter.com/leeerob/status/1640445075959484418
번역본을 공유드립니다.
다음 @nextjs 앱 라우터가 이제 정적 내보내기를 지원합니다!
정적 사이트/SPA로 시작한 다음 나중에 서버 기능을 사용하도록 업그레이드하세요. 이제 정적 i18n 라우팅과 정적 API 라우트(라우트 핸들러 포함)도 지원합니다.
이제 '카나리아'에서 사용할 수 있으며 곧 안정화됩니다!
여러분의 피드백을 바탕으로 정적 내보내기를 몇 가지 개선했습니다:
'next export'가 더 이상 필요하지 않으며, '다음 빌드'에 내장되었습니다.
'output: export'를 한 줄로 구성하여 옵트인할 수 있습니다.
그리고 더 있습니다!
정적 내보내기 + 이미지 로더를 사용할 때 이미지 최적화(및 'next/image')가 작동합니다.
이제 문서에 Cloudinary를 사용하여 이미지를 최적화하는 예제가 포함되어 있습니다.
이전에는 정적 내보내기와 함께 API 경로를 사용할 수 없었습니다.
이제 라우트 핸들러를 도입하여 동적 데이터를 기반으로 HTML, JSON 또는 TXT 파일을 정적으로 내보낼 수 있습니다.
국제화도 가능합니다!
앱 라우터의 향상된 레이아웃 처리 지원으로 동적 'Accept-Language' 헤더를 읽지 않는 정적 i18n 라우트를 생성할 수 있으므로 기본적인 i18n 지원도 처리할 수 있습니다.
또한 Nginx로 배포하기 위한 문서도 추가했습니다. 'next build'는 어디에나 배포할 수 있는 'out' 폴더를 생성합니다.
22. Astro roadmap - Client-side Routing
https://github.com/withastro/roadmap/issues/532
번역본을 공유드립니다.
Astro는 서버 우선 프레임워크입니다. 따라서 탐색 시 전체 페이지 새로 고침과 서버 왕복이 발생하는 MPA(다중 페이지 애플리케이션) 아키텍처에 항상 의존해 왔습니다.
이 제안은 일반적으로 SPA(단일 페이지 애플리케이션) 아키텍처와 관련된 옵트인 CSR(클라이언트 측 라우팅) 환경을 제공합니다.
사용자가 점점 더 복잡한 경험을 구축함에 따라 UI 지속성은 전체 Astro 스토리에서 누락된 부분이 분명하게 드러났습니다. 현재 클라이언트 측 라우팅은 탐색 전반에서 UI 지속성을 달성할 수 있는 유일한 방법입니다.
MPA는 웹의 중추이며 Astro 프로젝트의 자연스러운 기본값으로 남아 있습니다. SPA에는 매우 복잡한 고려 사항과 단점이 있으며, 중요한 것은 클라이언트 측 라우팅이 업계에서 기본 접근 방식이 되었음에도 불구하고 "해결된 문제"라고 생각하지 않는다는 점입니다.
하지만 저희 팀은 프로젝트 초기부터 'SPA 모드'에 대해 논의해 왔습니다. 이제 Astro의 멘탈 모델과 내부 우선순위에 대한 확신이 생겼으므로, 새로운 기본 요소를 레이어링하여 Astro의 사용 사례를 완성하기에 이보다 더 좋은 시기는 없습니다.
23. we’ve changed our forms recommendations to emphasize uncontrolled inputs
https://twitter.com/dan_abramov/status/1641830612955803650
번역본을 공유드립니다.
제어되지 않은 입력을 훨씬 더 강조하도록 양식 권장 사항을 변경했습니다. 서버 데이터를 자동으로 새로 고칠 수 있는 RSC를 사용하면 이 기능이 더욱 강력해질 것입니다.
24. Learning React from two Angles in 2023
https://www.robinwieruch.de/learning-react/
React를 배우는 두 가지 접근법, 즉 라이브러리와 프레임워크에 대해 논의합니다. 새로운 React 문서는 완전히 통합된 프레임워크를 사용하는 것을 권장하지만, 저자는 Next.js와 같은 프레임워크에 진입하기 전에 React의 기초인 라이브러리부터 시작하는 것을 제안합니다.
이 기사는 또한 웹 개발의 간략한 역사와 React 및 다른 프레임워크와 함께 서버 사이드 렌더링(SSR)을 사용하는 현재 상태로 진화한 과정에 대해 설명합니다. 일부 개발자들은 이러한 전환에 대해 회의적이지만, 저자는 이전 웹 개발 주기에 비해 성능과 아키텍처의 큰 개선을 강조합니다.
React를 라이브러리로 배우면 요소, 컴포넌트, 훅, 사용자 정의 훅, 함수 컴포넌트, 이벤트 핸들러, 폼, ref, 조건부 렌더링 및 props와 같은 React의 기초에 집중할 수 있습니다. 이 접근법은 React Testing Library 및 Styled Components와 같은 보조 제3자 라이브러리를 프로젝트에 통합할 수있는 학습자를 가능하게합니다.
반면에 프레임워크로서 React를 배우기 위해서는 프레임워크에서 제공하는 구성 요소에 익숙해져야합니다. Next.js는 React를 배우기에 가장 적합한 프레임워크로 권장되며, 파일 기반 라우팅, 여러 렌더링 기술, 내장 SEO 및 글꼴 지원, React Server Components와 같은 기능에 대한 React와의 협업을 제공합니다.
저자는 React를 라이브러리와 프레임워크로 배우는 것이 반드시 선택과정이 아니라고 제안합니다. 학습자들은 Next.js와 같은 프레임워크로 시작한 다음 훅과 같은 React 기초를 만날 때마다 React의 기초인 라이브러리를 다시 검토하는 것이 좋습니다. 이 기사는 또한 개발자들이 스포츠, 애니메이션, 게임, 전자 상거래, 생산성 또는 음악과 같은 관심 영역을 선택하고, React 및 Next.js 문서를 사용하여 응용 프로그램을 구현하는 것을 권장합니다.
결론적으로, 이 기사는 2023년에 React를 배우고자하는 개발자들에게 유용한 통찰력을 제공합니다. React를 라이브러리로 배우면 개발자들은 더 나은 기반을 구축 할 수 있으며, 프레임워크로서 React를 배우면 프레임워크에서 제공하는 구성 요소를 활용할 수 있습니다. 두 접근법을 결합하면, 개발자들은 현재 웹 개발의 상태에서 React와 그 응용 프로그램에 대한 더 포괄적인 이해를 얻을 수 있습니다.
25. Refs in React: from access to DOM to imperative API
https://www.developerway.com/posts/refs-from-dom-to-api
이 문서는 DOM에 액세스하고 명령형 API를 설정하기 위해 React에서 refs를 활용하는 방법에 대해 포괄적인 가이드로 작성되었습니다. 저자는 refs를 사용하여 입력 필드에 초점을 맞추고 애니메이션을 시작하는 방법에 대해 상세한 지침을 제공합니다. 또한 부모 컴포넌트에서 자식 컴포넌트로 refs를 전달하고 useImperativeHandle 훅을 사용하여 명령형 API를 생성하는 방법을 명확하게 설명합니다.
문서에는 예시가 여러 개 포함되어 있어 설명된 개념을 이해하는 데 도움이 됩니다. 예를 들어, 저자는 하나의 컴포넌트(Form)에서 Ref를 생성하고 다른 컴포넌트(InputField)로 전달한 다음 해당 DOM 요소와 연결하는 방법을 보여줍니다. Ref는 수정 가능한 객체이며 DOM 요소를 관리하는 데 사용할 수 있습니다. 저자는 또한 useImperativeHandle 훅을 사용하여 InputField 컴포넌트에 적합한 명령형 API를 설정하는 방법을 보여주며, 초점 및 애니메이션과 같은 복잡성을 간소화합니다.
26. isMounted tricks are code-smell
https://reacttraining.com/blog/isMounted-tricks-are-code-smell
이 기사는 리액트에서 "isMounted" 트릭의 사용을 분석하고, 코드 스멜로 간주되는 이유를 설명하며, 이를 의존하는 것이 시간적인 측면에서 생각하는 것을 유도하고 이로 인해 함수형 컴포넌트에서 스냅샷을 고려하는 능력을 제한하는 문제가 있음을 주장합니다. "isMounted"에 의존하는 대신, 스냅샷을 고려하는 것이 더 효과적인 접근 방식이며, 컴포넌트의 생명주기에 제한되지 않습니다.
또한, 이 기사는 인기있는 오해와 달리, 마운트 해제된 컴포넌트 상태에 대한 설정을 피할 필요가 없는 이유를 명확히 합니다. 저자는 마운트 해제된 컴포넌트 상태를 설정하면 큰 문제가 발생하지 않는다고 주장합니다. 실제로, "isMounted"를 사용하여 마운트 해제된 컴포넌트에서 상태를 설정하는 것을 방지하면 때로 버그가 발생할 수 있다는 것을 지적합니다.
이 기사는 또한 "isMountedRef"의 사용과 이를 사용하는 것이 장황한 해결책이며, React의 특정 미래 방향에서 거짓 긍정 결과를 초래할 수 있는 이유를 설명합니다. 저자는 "isMountedRef"의 사용이 안티 패턴이며, 특정 정리를 사용하지 않거나 불필요한 로직을 추가하지 않는 것을 유도하므로 버그를 생성할 수 있습니다.
모두 합해서, 이 기사는 리액트에서 "isMounted" 트릭의 사용과 그것이 피해야 할 이유에 대한 유용한 통찰력을 제공합니다. 대신, 저자는 컴포넌트의 생명주기에 제한되지 않고 더 나은 결과를 제공할 수 있는 더 효과적인 접근 방식을 채택하는 것을 제안합니다.
27. Setting State On An Unmounted Component
https://reacttraining.com/blog/setting-state-on-unmounted-component
이 문서는 React 개발자가 언마운트된 컴포넌트를 다룰 때 만날 수 있는 경고 메시지에 대한 인사이트를 제공합니다. 이 문서는 "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application"라는 경고 메시지가 가지는 의미와 이로 인해 React 개발자들이 불필요한 수정과 나쁜 습관을 가지게 된 배경을 탐구합니다.
저자는 이 경고 메시지가 반드시 메모리 누수를 나타내는 것은 아니며, 언마운트된 컴포넌트에서 상태를 설정하는 것은 그저 no-op일 뿐이라고 설명합니다. React는 이를 무시하고 no-operation으로 처리합니다. 이 문서는 이 코드에 메모리 누수가 없다는 것을 강조하며, React가 이 경고 메시지를 통해 문제 가능성을 알리는 것입니다.
이 문서는 또한 구독에서 발생하는 실제 메모리 누수를 식별하고 해결하는 방법에 대한 지침을 제공합니다. 저자는 구독이 메모리 누수에 취약하며, 메모리 누수를 방지하기 위해 구독을 구독 해제하는 것이 중요하다고 강조합니다. 이 문서는 서버와 소켓, setInterval () 및 DOM 이벤트 리스너와 같은 클린업에서 구독을 구독 해제해야하는 구독의 예를 제공합니다.
요약하면, 이 문서는 "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application."라는 경고 메시지에 대한 귀중한 인사이트와 지침을 제공합니다. 이 문서는 이 경고 메시지가 반드시 메모리 누수를 나타내는 것은 아니며, 구독에서 발생하는 실제 메모리 누수를 식별하고 해결하는 것이 중요하다는 것을 강조합니다.
28. The useEffect cleanup and the two circumstances it's called.
https://reacttraining.com/blog/useEffect-cleanup
이 문서는 React의 useEffect 훅에서 cleanup 함수의 세부 정보를 탐구하고 호출되는 두 가지 상황을 설명합니다. 첫 번째 상황은 컴포넌트가 언마운트될 때입니다. 효과 함수가 호출되면 컴포넌트가 언마운트될 때 실행되는 cleanup 함수가 반환됩니다. 이는 컴포넌트가 DOM에서 제거되기 전에 일부 작업을 수행해야 할 때 유용합니다.
cleanup 함수가 호출되는 두 번째 상황은 의존성 배열이 변경되고 효과가 다시 실행되어야 하는 경우입니다. useEffect 훅을 사용하면 효과 함수가 의존하는 변수를 보유하는 의존성 배열을 지정할 수 있습니다. 의존성 배열의 변수 중 하나라도 변경되면 효과 함수가 다시 실행됩니다. 그러나 새로운 효과 함수가 실행되기 전에 이전 효과 함수의 cleanup 함수가 호출됩니다. 이것은 이전 효과에서 발생한 메모리 누수나 의도하지 않은 부작용이 없도록 보장하는 중요한 역할을 합니다.
이 문서는 cleanup 함수가 필요한 상황의 예를 제공합니다. 한 가지 이유는 경합 조건을 방지하기 위해서입니다. 예를 들어, 사용자 정보를 표시하는 'UserProfile' 컴포넌트가 있다고 가정해보십시오. 빠르게 다른 사용자를 클릭하면 매번 새로운 'userId' prop과 함께 컴포넌트가 다시 렌더링됩니다. 사용자 정보를 검색하는 네트워크 요청이 우리가 보낸 순서와 다른 순서로 반환되면 잘못된 사용자를 표시할 수 있습니다. cleanup 함수를 사용하여 새로운 효과가 실행될 때 이전 효과가 취소되도록 보장할 수 있습니다.
전반적으로 useEffect 훅에서 cleanup 함수를 이해하는 것은 효율적이고 안전한 React 코드를 작성하는 데 필수적입니다. 이 문서는 이 개념을 쉽게 이해할 수 있도록 명확한 설명과 예제를 제공합니다.
29. How Will the Future of Web Development Be Affected by Influential New React Docs?
이 문서는 개발자 커뮤니티에서 이야기되고 있는 새로운 React 문서 개요를 제공합니다. 새로운 문서는 프로젝트를 처음 시작할 때 Next.js나 Remix와 같은 React 기반 프레임워크를 사용하는 것을 권장하고 있으며, 이 권장 사항은 웹 개발의 미래에 대한 질문을 불러일으키고 있습니다. 이 문서는 이러한 권장 사항의 영향과 지침을 따를 수밖에 없는 적은 경험을 가진 개발자들에게 어떤 영향을 미칠 수 있는지 탐구합니다.
프레임워크 권장 사항 외에도, 문서는 useEffect의 필요성을 의심하고 Create React App에서 벗어나는 등 새로운 문서의 다른 변경 사항을 강조합니다. 이 토론은 React의 진화와 새로운 문서가 이러한 변화를 반영하는 방식을 밝히고 있습니다.
문서는 또한 프레임워크 권장 사항에 대한 비판에 대한 React 팀의 대응과 React 및 이러한 프레임워크의 인기에 미칠 수 있는 잠재적인 영향에 대해 논의합니다. 프레임워크 권장에 대한 논쟁은 많은 대화를 일으키고 있으며, 이것이 어떻게 진화할지 보는 것은 흥미로울 것입니다.
전반적으로, 새로운 React 문서는 개발자들에게 유용한 자료입니다. 문서는 공식적으로 출시되어 베타 버전에서 벗어나게 된 이점을 인정하고 있습니다. 그러나 프레임워크 권장에 대한 논쟁은 많은 대화를 일으키고 있으며, 계속된 토론과 웹 개발의 미래에 대한 탐구가 필요함을 강조합니다.
30. How to build zero-CLS A/B tests with Next.js and Vercel Edge Config
https://vercel.com/blog/zero-cls-experiments-nextjs-edge-config
이 기사는 Next.js와 Vercel Edge Config를 사용하여 A/B 테스트를 위한 고성능 실험 엔진을 만드는 방법에 대한 포괄적인 가이드를 제공합니다. 이 엔진은 클라이언트 측 렌더링 (CSR)과 서버 측 렌더링 (SSR)과 같은 문제로 인해 사용자 경험이 저하되는 것을 방지하며, 효과적인 UI를 테스트하는 동안 사용자에게 훌륭한 경험을 제공합니다.
이 기사는 A/B 테스트와 실험이 성장 문화 구축에 중요한 이유를 설명하고, 웹에서 좋은 테스트를 실행하는 데 어려움이 있는 것을 강조합니다. 이는 클라이언트 측 및 서버 측 렌더링으로 인해 나타나는 것으로, 이로 인해 사용자 경험이 저하되며, 데이터도 나쁠 수 있습니다.
이 기사는 사용자에게 영향을 미치지 않는 것, 기능 플래그 공급 업체를 사용하여 사용자를 실험 버킷에 유지하는 것, 사용자가 동의를 한 경우 이벤트를 데이터 웨어하우스로 보내는 것과 같은 요구 사항을 포함하여 실험 엔진을 구축하는 방법의 세부 정보를 다룹니다. 이 엔진은 개발자에게 우수한 "Out-of-the-box" 경험을 제공합니다.
이 기사는 지리적으로 가까운 위치에서 동적 데이터를 읽을 수있게 해주는 JSON 데이터 스토어 인 Vercel Edge Config를 활용하는 방법과 Next.js를 사용하여 유연하고 고성능의 경험을 만드는 방법, 코드의 유형 안정성을 만드는 방법, 서버에서 실험을 사전 렌더링하는 방법, 쿠키를 사용하여 올바른 페이지 변형을 사용자에게 제공하는 방법, React Context를 사용하여 이벤트를 자동으로 캡처하는 방법 등을 다룹니다.
이 기사는 첫 번째 페이지 로드에서 발생하지 않는 클라이언트 측 실험과 백그라운드 패처를 사용하여 실험이 항상 최신 상태로 유지되도록하는 방법에 대해서도 설명합니다. 마지막으로, 이 기사는 페이지 성능을 희생하지 않고 여러 페이지 및 컴포넌트 수준의 실험을 실행하고, 실험을 더 빠르고 안전하게 출시하고 개선하며, 사용자에게 가장 잘 작동하는 것에 대한 고가치 지식을 수집하는 이점을 강조합니다.
31. Custom fonts without compromise using Next.js and `next/font`
https://vercel.com/blog/nextjs-next-font
이 글은 웹 개발자가 웹사이트에서 사용자 지정 폰트를 사용할 때 직면하는 문제들을 탐구합니다. 주요 문제 중 하나는 폰트 로딩이 너무 오래 걸릴 때 발생하는 누적 레이아웃 이동(CLS)입니다. 이는 스타일이 지정되지 않은 콘텐츠(FOUC)가 번쩍이는 것을 일으키며 웹사이트의 사용자 경험 및 검색 엔진 순위에 영향을 미칠 수 있습니다.
이러한 문제를 해결하기 위해 이 글은 Next.js 13의 기능 중 하나인 next/font를 소개합니다. next/font를 사용하면 웹 개발자는 폰트를 자체 호스팅하고 웹사이트에서 필요한 문자만 미리 로드할 수 있습니다. 또한 이 기능은 실제 폰트 파일을 기반으로 size-adjust 속성을 계산하여 사용자 지정 폰트와 동일한 간격을 가진 대체 폰트를 생성할 수 있어 원활한 교체를 보장합니다.
이 글은 next/font를 사용하여 웹사이트에서 사용자 지정 폰트를 최적화하는 방법을 보여주는 코드 예제를 제공합니다. 코드 예제에서는 기존 CSS를 변경하지 않고 변수를 참조하는 방법을 보여줌으로써 TailwindCSS와 쉽게 통합할 수 있도록 합니다.
또한, 이 글은 독자들이 직접 next/font를 시도할 것을 권장하며 추가 자료에 대한 링크도 제공합니다. 또한 사용자 지정 폰트가 웹사이트의 브랜드와 사용자 경험을 향상하는 데 어떤 이점이 있는지에 대해서도 논의합니다.
32. Remix without Limits
https://vercel.com/blog/vercel-remix-integration-with-edge-functions-support
베르셀의 고급 Remix 통합은 개발자들을 위한 강력한 기능을 제공하는 흥미로운 새로운 개발입니다. 스트리밍 SSR, API 라우트, 고급 캐싱, 데이터 변이를 지원하여, 이 통합은 동적 웹 애플리케이션 구축에 대한 포괄적인 솔루션을 제공합니다.
이 통합의 가장 인상적인 측면 중 하나는 라우트별 런타임 선택을 지원한다는 것입니다. 이는 개발자가 각 특정 라우트에 대해 최상의 런타임을 선택할 수 있도록 하여, Node.js와 Edge 런타임의 장점을 모두 제공할 수 있게 합니다. 또한 이 통합은 어댑터나 사용자 정의 구성이 필요 없으므로 Remix를 시작하기가 이전보다 쉬워졌습니다.
베르셀의 강력한 캐싱 기능은 Remix 경험을 더욱 향상시키며, 'stale-while-revalidate' 및 'stale-if-error'와 같은 캐싱 헤더를 최대한 활용할 수 있게 합니다. 캐싱 헤더를 추가함으로써, 개발자는 백엔드 또는 데이터베이스의 일시적 다운타임에 더 견고한 Remix 애플리케이션 성능을 향상시킬 수 있습니다.
베르셀의 고급 Remix 통합은 또한 스트리밍 SSR을 지원하여, 동적 서버 렌더링 페이지의 성능을 크게 향상시킬 수 있습니다. React 18과 'Suspense' 위에 구축된 강력한 Remix 기능인 'defer()' 및 '<Await>'와 같은 기능을 사용하여, 개발자는 전 세계적인 네트워크에서도 애플리케이션이 빠르고 반응성 있게 동작하도록 보장할 수 있습니다.
33. Animated page transitions with Remix's nested routes
https://www.jacobparis.com/guides/remix-animated-page-transitions
이 문서는 중첩된 경로를 사용하여 Remix 앱에 애니메이션 페이지 전환을 추가하는 방법에 대한 포괄적인 가이드를 제공합니다. react-transition-group 라이브러리를 사용하여 네비게이션 상태를 관리하고 네비게이션을 애니메이션화하는 필수 단계를 다룹니다.
애니메이션 페이지 전환은 페이지 탐색 중 부드러운 시각적 피드백을 제공하여 웹 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. 그러나 탐색에 애니메이션을 추가하는 것은 때로 페이지 로드 속도를 늦추는 문제가 있습니다. 이 문제를 해결하기 위해 Remix는 현재 페이지를 즉시 언마운트하여 새 페이지로 교체할 수 있도록하고 이를 작동시키기위한 문제의 주요 원인입니다.
현재 페이지를 즉시 언마운트하는 문제를 해결하려면 가이드에서는 새 구성 요소를 만들지 않고 아웃렛 요소에 대한 안정적인 참조를 반환하기 위해 useOutlet 훅을 사용하는 것을 제안합니다. 또한 가이드에서는 애니메이션 중 탐색 중에 렌더링되지 않도록 아웃렛의 라우팅 컨텍스트를 고정하는 것을 권장합니다.
가이드는 또한 react-transition-group 라이브러리를 사용하여 페이지 전환에 애니메이션을 추가하는 방법을 보여주는 코드 스니펫을 포함하고 있습니다. 구체적으로 코드 스니펫은 경로 애니메이션을 구현하기 위해 SwitchTransition 및 CSSTransition을 사용하는 방법을 보여줍니다. 가이드는 또한 Tailwind CSS를 경로 전환에 애니메이션을 추가하는 유용한 도구로 강조하며, 높은 코드 분할 CSS를 처리하는 불편함을 개발자로부터 덜어줍니다.
34. Server Components Demo updated
https://twitter.com/dan_abramov/status/1641596168290312195
번역본을 공유드립니다.
2020년의 오리지널 서버 구성 요소 데모를 기억하시나요? 매트 캐롤 코드 와 협력하여 최신 버전의 RFC와 일치하도록 업데이트했습니다:
- .server.js/.client.js 확장자 대신 'client use' 사용
- 특수 라이브러리 대신 async/await 사용
PR:
https://github.com/reactjs/server-components-demo/pull/62
Next의 앱 라우터와 달리 아직 설정이 매우 단순하지만(예: 아직 SSR이 연결되어 있지 않음) 기본적인 흐름과 프레임워크 작성자로서 RSC에 접근하는 방법을 보여줍니다. 향후 몇 달 내에 더 자세한 내용을 문서화할 예정입니다.
35. Simple-RSC
https://github.com/bholmesdev/simple-rsc
위의 영상에서 보여준 간단한 Server Components 구현체입니다.
영상을 요약한 본을 공유드립니다.
요약: 이 동영상에서는 코드 및 데이터 전송 최적화를 위한 React의 서버 컴포넌트와 그 이점에 대해 설명하며, 구현 및 명명 규칙에 대한 문제점도 다룹니다.
00:00 👀 React의 서버 컴포넌트는 서버가 UI 레이어를 처리하고 필요한 데이터를 선택적으로 다운로드할 수 있도록 하여 코드와 데이터 전송을 최적화하는 것을 목표로 하지만, 명명 규칙과 구현에 대한 어려움이 있습니다.
40:34 👨💻 React의 서버 컴포넌트는 코드와 데이터의 비동기 로딩을 허용하여 점진적인 업데이트를 가능하게 하고, 다른 항목으로 이동하기 전에 한 항목의 전체 패스를 수행할 필요가 없도록 합니다.
01:00:43 🔑 React 컴포넌트에서 키를 사용하는 것은 적절한 렌더링과 잘못된 상태를 방지하는 데 중요하며, 특히 출력을 새로 고칠 수 있는 서버 컴포넌트에서 중요합니다.
01:25:09 👨💻 앨범 검색 필터 구현, 클라이언트 측 필터링과 서버 측 필터링의 장단점, 앨범 제목 및 아티스트 검색을 위한 공유 기능, 화면 공유 및 개발 도구 관련 문제 디버깅, React 서버의 컴포넌트 및 파일 구조에 대해 논의합니다.
01:47:19 👨💻 Dan은 React 서버 컴포넌트, 자동 코드 분할, 컴포저블 컴포넌트를 살펴보고 루트 서버에서 검색 기능 구현과 검색 상자 및 필터 코드 렌더링에 대해 논의합니다.
02:18:58 📚 쿼리 인수를 프롭으로 전달하고, 응답 데이터를 위한 캐시를 구현하고, 서버 엔드포인트와 캐싱 시스템을 사용하는 등 Next.js를 사용한 클라이언트 측 라우팅에서 부트스트랩과 인덱스를 다룹니다.
02:43:56 🔍 해당 위치에서 지속적으로 쿼리를 검색하고 업데이트하는 동시에 창 알림을 제공하는 창형 애플리케이션을 구축했습니다.
03:19:27 🔍 React의 트랜지션 및 서스펜스 기능을 사용하여 클라이언트 측 JavaScript와 서버 컴포넌트로 검색 상자를 구축하여 컴포넌트를 효율적으로 렌더링하고 새 데이터를 기다리는 동안 기존 콘텐츠가 숨겨지는 것을 방지합니다.
36. So I had a call with Dan...
요약: Dan Abramov가 React의 서버 컴포넌트와 진화하는 서버-클라이언트 관계에 대해 논의하고, 향후 React 개발을 위해 이러한 컴포넌트를 이해하고 활용하는 것이 중요하다고 강조합니다.
1. 00:00 💡 댄 아브라모프가 라이언 카르나도와의 채팅에서 서버 컴포넌트와 진화하는 서버-클라이언트 관계를 논의하기 위한 자신의 모델을 공유합니다.
1.1 라이언 카르나도와 댄 아브라모프와의 채팅에서는 서버 컴포넌트와 서버와 클라이언트 간의 새로운 관계를 논의하기 위한 댄의 모델을 포함해 네 가지 핵심 사항에 초점을 맞췄습니다.
2. 00:56 🚀 React의 서버 컴포넌트는 컴포넌트 작성을 위한 새로운 패턴을 제공하지만, 그 사용법은 제한되어 있으며 이 문서는 React의 미래를 강화하는 것을 목표로 합니다.
2.1 React의 서버 컴포넌트는 컴포넌트 작성을 위한 고유한 패턴을 제공하여 구성 가능성과 물리적 제어를 허용하지만, 모든 사람이 사용할 수 있는 것은 아니며 이 문서의 역할은 React의 미래를 강화하는 데 있습니다.
3. 02:19 👀 동적 클라이언트 컴포넌트를 사용하는 React의 정적 우선 접근 방식은 이해와 학습을 단순화하며, 서버 컴포넌트에 대한 향후 동영상을 구독해 보십시오.
3.1 클라이언트 컴포넌트에서 동적 동작과 함께 정적 우선 접근 방식을 사용하면 React를 더 쉽게 이해하고 학습할 수 있습니다.
3.2 구독을 신청하고 벨을 누르면 서버 컴포넌트에 대한 다음 여섯 개의 동영상을 볼 수 있습니다.
4. 03:48 🚀 리액트 팀이 버셀로 옮긴 것은 서버 측 혁신을 향한 자연스러운 과정이며, 버셀은 리액트와 서버를 가장 잘 이해하는 회사입니다.
4.1 React 팀이 Vercel로 옮긴다고 해서 혁신이 제한되는 것은 아니며, 서버를 향한 React의 자연스러운 방향이며, Vercel은 React와 서버를 가장 잘 이해하는 회사입니다.
5. 04:51 🚀 Next.js는 새로운 React 패턴을 채택했으며, 이는 다른 프레임워크가 이를 따르도록 영감을 줄 수 있습니다.
5.1 Next.js는 서버 측 및 정적 소품을 포함한 새로운 React 패턴을 수용했으며, 이는 핵심 React 팀원들을 흥분시켰고 다른 프레임워크에서 이러한 패턴을 채택하도록 유도할 수 있습니다.
6. 05:51 💻 서버 컴포넌트는 클라이언트를 위한 파일 번들링을 간소화하지만, 이러한 컴포넌트는 서버에서도 실행되므로 "클라이언트 사용"이라는 용어는 오해의 소지가 있습니다.
6.1 서버 컴포넌트를 사용하면 올바른 파일을 번들로 묶어 클라이언트에 쉽게 전송할 수 있지만 클라이언트 컴포넌트도 서버에서 실행되므로 "클라이언트 사용"이라는 용어는 오해의 소지가 있습니다.
7. 07:07 💻 React 애플리케이션에서 클라이언트 측 컴포넌트의 역할을 명확히 하기 위해 클라이언트 대신 인터랙티브를 사용하세요.
7.1 클라이언트 대신 인터랙티브를 사용하여 클라이언트 측 컴포넌트의 역할을 명확히 하고 React 애플리케이션에서 인터랙션 경계에 집중하세요.
8. 08:12 🎥 Dan의 이 비디오에서 API를 대체하는 서버 컴포넌트에 대해 알아보세요.
8.1 Dan의 이 매력적인 동영상에서 서버 컴포넌트와 서버 컴포넌트가 API를 대체하는 방법에 대해 알아보세요.
37. Smarter and Simpler React State
요약: 이 비디오에서는 React에서 로컬 상태를 더 쉽게 관리하기 위해 Zustand 또는 Redux와 같은 외부 상태 관리자를 사용할 때의 이점에 대해 설명하고, 별도의 컨텍스트와 기능을 가진 여러 채팅 시스템을 관리하기 위해 사용자 정의 후크와 상태 관리 저장소를 사용하는 방법을 보여줍니다.
00:00 👨💻 내장된 후크 대신 Zustand나 Redux와 같은 외부 상태 관리자를 사용하여 React에서 로컬 상태를 더 쉽게 관리하세요.
02:18 💬 React 훅과 상태 관리 저장소를 사용하여 별도의 컨텍스트와 기능을 가진 여러 채팅 시스템을 관리하기 위한 사용자 정의 훅을 생성합니다.
08:58 🎓 Brilliant는 프로그래밍, 데이터 분석 및 AI에 대한 대화형 강좌를 제공하며, Zustand는 createStore 및 useStore 함수를 사용하여 React에서 상태 관리를 간소화합니다.
13:42 💬 사용Ref, 사용Context, 사용Store를 사용하여 채팅 스토어를 생성하고 Zustand에서 선택기를 사용하여 메시지 배열의 길이를 업데이트합니다.
16:02 👥 Zustand와 Valtio는 React 애플리케이션에서 상태 관리 프로세스를 간소화하는 두 가지 상태 관리 라이브러리입니다.
19:54 🚀 Jotai는 커스텀 훅과 원자들로 로컬 데이터 관리를 간소화해주는 React용 상태 관리 라이브러리입니다.
22:58 📝 Jotai는 컨텍스트와 공급자 값에서 메시지 값과 카운트를 추적하는 쓰기 전용 원자(atom)를 제공하여 상태 관리를 간소화합니다.
25:43 💻 React에서 로컬 상태를 관리하는 네 가지 방법: 일반 Hook, 원자 상태용 Jotai, MobX 스타일 상태용 Valtio, Redux와 유사한 플럭스 모델용 Zustand.
38. Next.js App Router: Routing, Data Fetching, Caching
요약: Next.js는 레이아웃 및 중첩 레이아웃에 대한 지원을 개선하고, 데이터 가져오기를 간소화하며, 상호 작용 및 동적 라우팅을 위한 클라이언트 구성 요소로 안전한 서버 측 코드를 사용할 수 있습니다.
00:00 🚀 Next.js 앱 라우터는 이제 레이아웃 및 중첩 레이아웃에 대한 지원이 개선되어 주소 지정이 가능한 UI를 더 쉽게 정의하고 생성할 수 있습니다.
01:54 👨💻 Next.js는 상호 작용 및 동적 라우팅을 위한 클라이언트 구성 요소를 추가하는 옵션과 함께 안전한 서버 측 코드를 허용합니다.
03:23 📌 Next.js 링크 컴포넌트를 사용하여 컴포넌트 프로퍼티의 매개변수 키를 통해 액세스하는 동적 경로 세그먼트가 있는 경로 사이를 탐색합니다.
04:56 🚀 Next.js는 데이터 가져오기를 간소화하고 TypeScript는 앱 라우팅을 간소화하여 성능과 지원을 개선합니다.
06:49 👨💻 이제 Next.js의 데이터 불러오기를 별도의 폴더나 루트 레이아웃에서 수행할 수 있으므로 경로 간에 데이터를 공유하고 정적, 동적, 재검증된 데이터를 지원할 수 있습니다.
09:16 🚀 캐시 노스토어 및 Next.js API를 사용하여 5초마다 데이터를 재검증하여 점진적인 정적 재생성을 지원하고, 동일한 경로에서 여러 데이터 가져오기 전략을 함께 사용할 수 있습니다.
11:31 👀 Next.js에는 블로그 게시물의 제목 태그를 채우기 위한 생성 메타데이터 API를 포함하여 애플리케이션의 헤드 요소를 간단하게 업데이트할 수 있는 메타데이터 API가 있습니다.
13:54 📚 Next.js 앱 라우터에 새로운 규칙과 기반이 추가되었으며, 더 많은 Next.js 및 React 콘텐츠를 기대해 주세요.
39. T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScript, Tailwind, Prisma & More)
요약: 이 동영상에서는 T3 스택을 사용하여 트위터 클론을 구축하는 과정, 인증을 위해 Prisma와 PlanetScale MySQL을, 오류 로깅 및 게시물 인덱싱을 위해 Clerk를, 오류 로깅 및 게시물 인덱싱을 위해 Versel과 Axiom을 사용하는 과정을 다루며, 데이터 필터링 및 매핑, 스타일 추가, 사용자 인증 구현, 입력 검증 및 속도 제한, 새 경로 생성, 파일 기반 쓰기, 프로필 컨테이너 및 페이지 디자인을 위한 다양한 기술에 대해서도 설명합니다.
00:00 👨💻 T3 스택을 사용하여 트위터 클론을 구축하고, 조기에 자주 배포하고, PlanetScale MySQL로 Prisma를 설정하고, Clerk를 인증에 사용하고, 오류 로깅 및 게시물 인덱싱을 위해 Versel을 Axiom과 통합합니다.
22:49 🔧 삭제된 테이블로 인한 오류를 수정하고 올바른 데이터 유형을 보장하기 위해 Prisma 데이터베이스를 업데이트하고 새로운 DB 상태를 생성합니다.
43:28 📝 TRPC를 사용하여 타입스크립트에서 데이터를 필터링 및 매핑하고, 객체 간의 관계를 생성하며, CSS와 day.js 라이브러리를 사용하여 트윗의 사용자 이름과 시간을 표시하는 스타일을 추가하는 방법에 대해 알아봅니다.
01:13:13 👨💻 React 쿼리를 사용하여 사용자 인증을 위해 컨텍스트에 인증 상태를 첨부하고, 미들웨어로 코드를 간소화하고, Zod 유효성 검사로 입력 안전을 보장하고, Upstash 속도 제한기로 게시물을 제한합니다.
01:39:52 🔧 서버리스 환경에 전송률 제한기를 추가하면 데이터베이스나 외부 요인에 영향을 주지 않고 스팸을 방지할 수 있습니다.
🚨 몇 가지 간단한 단계로 화면 하단에 오류 메시지를 표시하도록 React Hot Toast를 설치하고 커스터마이징합니다.
👨💻 더 나은 클라이언트 측 유효성 검사 및 입력 상태 관리를 위해 Zod와 React Hook Form을 사용하여 사용자 정의 오류 메시지와 로딩 상태를 구현하는 방법에 대해 설명합니다.
🛣️ 강의에서는 특정 매칭 구문과 링크 컴포넌트를 사용하여 브라우저 전체 새로고침을 방지하고 사전 불러오기를 활성화하기 위해 Next.js에서 새 경로를 생성하는 방법에 대해 설명합니다.
📝 파일 기반 작성은 링크된 시스템을 만드는 데 강력하며, 파일에 메타데이터를 추가하는 것은 trpc 쿼리를 정의하고 하위 라우터를 생성하여 수행할 수 있습니다.
🔌 라우터에서 불필요한 구성 요소를 제거합니다.
01:59:42 📝 사용자 이름으로 사용자 데이터를 검색하는 공개 프로시저를 만들고, 유효성 검사기를 사용하여 입/출력을 보장하며, SSG 및 프리페치 헬퍼를 사용하여 로딩 시간을 단축하고 메타데이터를 수정합니다.
02:14:45 📝 프로필 정보와 피드가 포함된 프로필 컨테이너를 디자인하고, 사용자 ID별 게시물에 대한 클라이언트 측 로드 API 엔드포인트가 있는 프로필 페이지를 추가하고, 로딩 시간을 단축하기 위해 Next.js에서 SSG 헬퍼를 사용하는 방법에 대해 설명합니다.
02:52:48 🚀 Versall은 도메인 관리를 간소화하고, 발표자는 T3 스택 프로젝트를 선보이며 시청자가 Discord에 가입하고 상품을 구매하도록 장려합니다.
40. Will React's New Cache Fix Its "Use" Hook?
요약: 이 동영상에서는 웹 개발에서 효율적인 데이터 검색과 성능 향상을 위해 React와 NextJS에서 캐시와 새로운 후크를 사용하면 얻을 수 있는 이점에 대해 설명합니다.
1. React 18.2와 NextJS 13에는 보다 깔끔한 데이터 불러오기 컴포넌트를 위한 새로운 "사용" 후크가 있으며, React에서 캐시가 출시되어 이전의 무한 루프 문제가 해결될 가능성이 있습니다.
2. 👨💻 실험용 앱 디렉토리, TypeScript, eslint, import 별칭을 사용하여 NextJS 13 앱을 만들고, CSS를 구현하고, React Server 컴포넌트를 클라이언트 컴포넌트로 전환합니다.
3. NextJS는 캐시와 최소한의 변경으로 데이터 검색을 간소화하며, JavaScript와 React에서 무한 루프 요청을 피하려면 프로미스 참조를 이해하는 것이 중요합니다.
4. 🔍 캐시를 사용하면 결과를 저장하고 불필요한 연산을 줄여 함수 성능을 향상시킬 수 있습니다.
5. 🚀 React는 이제 진정한 기억 캐시 기능을 가지고 있으며, 캐싱을 통해 ID 번호를 문자열 템플릿으로 변환하여 가져오기 요청을 최적화할 수 있습니다.
6. 👥 이름과 성 컴포넌트를 결합하여 동일한 fetchUser 함수를 공유함으로써 사용자 데이터를 효율적으로 표시할 수 있습니다.
7. 📝 새로운 사용자 ID 컨텍스트 기능으로 React에서 보다 효율적인 데이터 전달과 조건부 훅을 사용할 수 있습니다.
8. 📈 웹 개발에서 캐싱을 사용하면 서비스 효율성을 개선하고 데이터 사용량을 줄일 수 있으며, 새로운 후크와 함수를 추가하여 기능을 추가할 수 있습니다.
41. State Management for NextJS 13 Server and Client Components
요약: 이 동영상에서는 서버 측 렌더링과 RTK 쿼리가 포함된 NextJS 13 앱에서 Redux를 사용하여 포켓몬 검색 페이지를 구축하고 소품 드릴링을 방지하는 방법과 간편한 문서화를 위해 Scribe를 사용하는 방법을 설명합니다.
1. 👨💻 서버 측 렌더링 및 RTK 쿼리와 함께 NextJS 13 앱에서 Redux를 사용하여 포켓몬 검색 페이지를 구축하고, Scribe를 사용하여 쉽게 문서화하는 방법을 알아봅니다.
2. 포켓몬을 이름으로 검색하는 API 경로를 생성하고 페치를 사용하여 상위 10개의 결과를 홈 페이지에 표시합니다.
3. 👨💻 CSS로 외관을 개선하고 데이터 형식을 지정하고, 타입스크립트 인터페이스와 포켓몬 테이블 컴포넌트를 만들고, Redux 스토어를 사용하여 SSR 포켓몬 테이블에 대한 소품 드릴링을 피합니다.
4. Redux 툴킷으로 스토어에 검색 슬라이스를 생성하고 React Redux에 연결하여 검색 및 시작 포켓몬을 관리합니다.
5. 👀 이커머스 사이트에서 SSR용 Redux를 사용하려면 React Redux 후크 없이 스토어에 직접 연결해야 하며, 검색 입력 컴포넌트는 클라이언트와 서버 모두에서 Redux를 연결하여 생성할 수 있습니다.
6. 클라이언트 측 렌더링을 위해 스토어를 설정하는 프리로더 컴포넌트를 생성하고 Visual Studio 코드에서 클라이언트용 스토어 상태를 미리 로드합니다.
7. React 툴킷 쿼리를 사용하여 포켓몬 API용 API 슬라이스를 생성하고 데이터 선택기와 useEffect로 검색 결과를 표시합니다.
8. 👨💻 서버에서 Redux를 사용하고, 프리로더로 클라이언트로 상태를 가져오고, React 툴킷 쿼리를 사용하고, NextJS 13 앱 디렉토리에 리액트 바인딩을 가져오지 않음으로써 서버 문제를 방지합니다.
42. Understanding React's types
요약: 이 동영상에서는 React 엘리먼트와 노드를 포함한 React의 여러 유형 간의 계층 구조와 관계를 설명하고, 더 나은 툴링과 오류 처리를 위해 TypeScript를 사용하는 것의 중요성을 강조합니다.
1. 라이브 연사가 React 유형과 그 사용법을 설명하는 동시에 채팅 GPT 기술 통합을 고려하고 있습니다.
2. React는 강력한 커뮤니티 지원을 통해 웹 프론트엔드 개발을 위한 최고의 선택이며, 더 나은 툴링과 오류 처리를 위해서는 TypeScript가 필요합니다.
3. 이 강의에서는 React 엘리먼트와 노드를 포함한 React의 다양한 유형 간의 계층 구조와 관계를 인포그래픽 형식으로 살펴봅니다.
4. 📝 React 노드에는 React 엘리먼트, 프래그먼트, 포털, 문자열, 숫자, 부울, 정의되지 않은 등 다양한 엘리먼트가 포함될 수 있지만, 조정은 React가 처리하도록 하고 컴포넌트를 수동으로 호출하지 않도록 하는 것이 중요합니다.
5. React에서 함수형 컴포넌트를 만들 때는 중복 단어를 피하고 타입 헬퍼를 사용해야 하며, 트리에서 노드를 전달할 때 타입스크립트 구현 문제를 주의해야 합니다.
6. 👨🏫 React 컴포넌트는 JSX 및 React 포털을 포함한 특정 유형의 엘리먼트만 반환할 수 있지만 조각이나 부울은 반환할 수 없으며, JSX 엘리먼트와 React 노드에서 null, 정의되지 않음, 문자열의 할당 가능성에 대해 살펴봅니다.
7. 💡 React 컴포넌트는 문자열, 숫자, 부울이 아닌 JSX 엘리먼트나 null만 반환할 수 있으며, React 조각은 엘리먼트가 아닌 유형을 래핑하는 데 사용할 수 있습니다.
8. 💻 JSX에서 유효한 코드 중단에는 문자열, 부울, 배열이 포함되며, 기본 Max 스크린샷 도구를 수정하고 Turtle 타입스크립트를 사용하여 리액트 타이핑을 수정하는 공동 작업을 수행할 수 있습니다
43. React Server Components with Dan Abramov, Joe Savona, and Kent C. Dodds
TLDR: React 서버 컴포넌트는 성능 최적화와 서버와 클라이언트 간의 데이터 종속성 코로케이션을 제공하지만, 더 나은 도구와 프레임워크로 해결해야 하는 장단점과 과제가 있습니다.
1. 👨💻 React 서버 컴포넌트는 번들 분할을 최적화하고 서버와 클라이언트 간의 공생 관계를 생성하여 다양한 최적화를 제공합니다.
2. 👀 React 서버 컴포넌트는 일관된 사용자 경험을 제공하고 서버와 클라이언트 간의 데이터 종속성을 공동 배치할 수 있습니다.
3. 🔍 Remix와 서버 컴포넌트의 느린 응답과 가관측성 부족은 더 나은 툴과 데이터 종속성 공동 위치 지정으로 해결할 수 있지만, N 플러스 원 문제는 여전히 상충 관계에 있습니다.
4. 👨💻 값과 인수를 전달하는 것은 런타임 특성이 동일하고, React는 페치를 패치하지 않고 자체 버전을 제공하며, Next.js와 Remix와 같은 프레임워크는 요청과 응답 객체에 대한 액세스를 다르게 처리합니다.
5. 👨💻 React의 서버 컴포넌트에는 파일 세분성 및 헤더 전달 문제 등 장단점이 있지만, Remix와 같은 프레임워크와 잠재적인 슈퍼 컴포넌트 프레임워크가 해결책을 제시합니다.
6. 💻 Remix의 서버 컴포넌트를 사용하면 상호작용과 앱 구조화가 쉬워져 리팩토링의 필요성이 줄어들고 더 많은 표현 기능을 구현할 수 있습니다.
7. 👨💻 서버 컴포넌트는 서버에서 성능 최적화 및 코로케이션을 제공하지만, 변형을 구현하기 전에 이 방향을 충분히 검토하는 것이 중요합니다.
8. Next.js13 앱 라우터는 클라이언트 전용 사용과 명확하게 분리된 가장 포괄적인 React용 서버 컴포넌트 구현입니다.
44. React's place in the frontend ecosystem
요약: React는 서버 컴포넌트와 자동 메모라이징 컴파일러로 기능을 확장하여 백엔드 서비스에 더 쉽게 액세스하고 효율적으로 업데이트할 수 있지만, 콘텐츠 지향적이거나 불러오기가 많은 애플리케이션에는 최선의 선택이 아닐 수 있습니다.
1. React 팀의 조 사보나가 JS 파티에서 서버 컴포넌트와 자동 메모라이징 컴파일러에 대해 설명합니다.
2. React는 이 분야의 혁신을 주도하고 있으며 더욱 풍부하고 복잡한 컴포넌트를 구축하기 위해 확장되고 있으며, Next.js 및 Remix와 같은 프레임워크는 통합과 효율성을 향상시킵니다.
3. 👀 React는 스파와 Mpas의 장점을 연결하기 위해 기능을 확장하고 있지만, 콘텐츠 지향적이거나 불러오기가 많은 애플리케이션에는 최선의 선택이 아닐 수 있습니다.
4. 👀 React 서버 컴포넌트를 사용하면 백엔드 서비스에 쉽게 접근할 수 있고 구조화된 애플리케이션 접근 방식을 사용할 수 있지만 개인 취향과 경험에 따라 모든 사람에게 적합하지 않을 수 있습니다.
5. 데이터 불러오기 솔루션을 위한 통합과 콘텐츠가 스트리밍되는 동안 스켈레톤 화면을 표시하는 기능을 통해 서버 측에서 컴포넌트를 쉽게 구성할 수 있습니다.
6. Next.js 13은 더 빠른 탐색과 서버 측 렌더링을 위해 서버 컴포넌트와 서스펜스 바운더리를 도입했습니다.
7. 👨💻 React의 서버 컴포넌트는 개발자가 코드 배치와 상태 관리에 대해 고려해야 하지만 다른 기술과 원활하게 통합될 수 있으며 프로덕션에서 성공적으로 사용된 기존 사례가 있습니다.
8. 🚀 React의 서버 컴포넌트는 클라이언트 컴포넌트를 통합하고 효율적인 업데이트를 허용하여 웹 앱 구축을 간소화하지만, 실제 프레임워크로 전환하려면 지원과 투자가 내장된 번들러가 필요합니다.
46. tRPC vs EVERY OTHER FRAMEWORK
TLDR: 이 동영상에서는 다양한 풀스택 프레임워크와 유형 안전 및 데이터 가져오기 등의 기능을 비교하고, 안정성과 효율성 향상을 위한 유효성 검사 및 코드 생성의 중요성에 대해 강조합니다.
1. 유형 안전성 및 데이터 불러오기 기능에 중점을 둔 풀 스택 프레임워크 비교(Remix, Trpc, Fresh, Solid Start, Svelte Kit 포함).
2. Next.js는 유형 안전성과 서버 측 렌더링을 제공하는 반면, trpc는 서버 함수에 대한 유효성 검사 및 입력된 입력을 제공합니다.
3. API에서 변이 및 쿼리를 생성하고 유효성 검사기를 사용하여 올바른 입력 유형을 보장하는 방법을 배웁니다.
4. 💻 스펠 키트는 로더를 위한 명령 클릭 기능 없이도 Remix에서 직접 함수에 대한 탐색하기 쉬운 유형을 생성합니다.
5. 💻 코드 생성은 맞춤법 오류와 데이터 불러오기를 개선하지만 개선이 필요하며, 데이터 모양 변경은 유형 안전을 위해 생성된 파일을 업데이트하지만 개발 서버가 실행 중이어야 합니다.
6. 🔍 trpc 및 다음 가져오기에서의 유효성 검사는 입력 유효성 검사를 위해 Zod 객체를 통해 유형 안전성과 안정성을 향상시킵니다.
7. 🚀 React Query 및 Apollo GraphQL과 같은 프레임워크는 클라이언트 측 데이터 업데이트를 개선하고 있으며, 일부 프레임워크는 인상적인 캐시 레이어를 가지고 있지만 여전히 개선의 여지가 있습니다.
8. 🤔 프레임워크 비교와 향후 반영을 위한 중요한 아이디어 소개.
47. React Is A Backend Framework Now
요약: React 서버 컴포넌트는 확장 가능하고 단방향 데이터 흐름과 쉽게 통합할 수 있으며 데이터를 HTML로 가져오고 전송할 수 있어 향후 컴포넌트가 처리되는 방식을 바꿀 수 있는 잠재력을 가지고 있습니다.
1. React 서버 컴포넌트는 향후 API를 대체할 수 있습니다.
2. 명시적인 세터 전달이 가능한 React의 단방향 데이터 흐름은 확장성과 손쉬운 서버 컴포넌트 통합을 가능하게 합니다.
3. 서버 컴포넌트는 이모티콘 전용 트윗 데이터를 가져와 HTML로 클라이언트에 전송할 수 있으므로 API가 필요 없고 데이터 직렬화에 대한 우려가 없습니다.
4. 4. 👉 SQL 쿼리와 데이터 유형 매핑을 사용하여 서버 컴포넌트에서 데이터를 가져오되, 상태 문제에 유의하고 클라이언트 사용을 위해 파일을 표시하세요.
5. 클라이언트 인터랙션 컴포넌트를 위한 별도의 파일을 생성하고 안전한 소품 전달을 위해 "useClient"를 사용합니다.
6. 🔮 서버 컴포넌트는 프롭을 통해 서버에서 클라이언트로 데이터를 마술처럼 전달하는 API 역할을 할 수 있습니다.
7. 이터레이터를 API 경로로 반환할 수 있어 클라이언트가 다른 것을 알 필요 없이 콘텐츠를 렌더링하고 조작할 수 있으며, 향후 컴포넌트 처리 방식을 변경할 수 있습니다.
48. Signals For Solid, Qwik And React
요약: 이 동영상에서는 반응형 상태 관리를 위해 신호를 사용하는 Solid-JS, React, Qwik 등 다양한 프레임워크와 라이브러리에 대해 설명하고 이러한 프레임워크에서 필터를 구현하고 효율성을 개선하는 방법을 설명합니다.
1. Solid-JS와 React는 반응형 상태 관리를 위해 신호를 사용하며, Qwik은 사용자 목록과 필터를 통해 이를 보여줍니다.
2. 2. 🚀 Tailwind CSS, 서버 측 렌더링 및 TypeScript로 Solid Start 애플리케이션을 만들고, 소스 디렉토리와 인덱스 경로를 정리하고, SolidJS의 createSignal을 사용하여 전역 필터 입력을 정의합니다.
3. ReqRes API의 목록 사용자 함수와 Solid Start의 경로 데이터 함수를 사용하여 useRouteData 훅과 For 루프를 사용하여 컴포넌트에 사용자 목록을 표시합니다.
4. 👀 솔리드 JS에는 데이터를 계산하기 위한 메모가 있는 반응형 상태 관리 시스템이 있는 반면, React에는 반응형 상태 관리가 내장되어 있고 Qwik에는 자체적인 경로 관리 프레임워크가 있습니다.
5. 💡 Qwik은 클라이언트 측 이벤트 처리와 작업 함수를 통한 필터링된 사용자 표시를 통해 React 하이드레이션에 대한 더 빠른 대안입니다.
6. 👨💻 효율성을 위해 반응형 상태 관리 모델을 업그레이드하고, useState 및 useRef 변형을 사용하여 Vite React 애플리케이션에서 필터를 구현합니다.
7. 7. 💡 재렌더링을 피하고 컴포넌트 업데이트를 세밀하게 제어하기 위해 useState 대신 useRef를 사용합니다.
8. 👀 Preact 시그널 React 라이브러리는 시그널과 필터 시그널을 사용하여 React를 위한 반응형 상태 관리 시스템을 제공합니다.
49. State of React Ecosystem Jan 2023
요약: 이 동영상에서는 오픈 소스 리소스, 예정된 이벤트, React 개발자를 위한 업데이트에 대해 설명하는 동시에 대체 기술과 React 및 PHP 사용의 과제와 이점에 대해 살펴봅니다.
1. Redux 업데이트 및 버전 2.0의 주요 변경 사항을 포함한 React 개발자를 위한 오픈 소스 리소스 및 예정된 이벤트.
2. 👀 Mark는 트위터에서 오픈소스 기여를 위해 팔로우할 만한 훌륭한 사람입니다.
캐슬린 맥마흔은 노스웨스턴 뮤추얼의 달 디자인 시스템을 위한 디자인 토큰을 개발하고 있습니다.
🎤 디자인 시스템에 중점을 두고 있으며 React 컨퍼런스에서 기능 플래깅과 접근성에 대한 강연을 진행했습니다.
Dom은 Solid를 사용한 애그노스틱 라이브러리의 타입 안전 라우팅과 반응성에 대한 작업과 Fun Tan 스택의 새로운 패키지와 헤드리스 라이브러리에 대한 업데이트에 대해 설명하며, 특히 다가오는 React Query의 변경 사항에 중점을 두고 있습니다.
3. 새로운 기능과 개선된 문서가 포함된 10단계 쿼리 버전 5가 진행 중입니다.
4. 🛍️ 월마트와 샘스클럽 대 💰 코스트코, 연사가 SEO와 "탠 스택"에 대해 이야기하고, 벤이 휴스턴으로 이사하고, Stitch Fix의 프론트엔드 팀이 React, Next.js, 모노레포에 대해 작업하고, 초청 연사가 3월 14일 스토리북 데이를 홍보하고 있습니다.
5. 📈 몇 가지 문제점에도 불구하고 React는 여전히 성장하고 있으며 Solid.js와 Create Signal 멘탈 모델과 같은 새로운 기술은 더 나은 사용자 경험을 위해 더 높은 기준을 제시하고 있습니다.
6. 👀 React의 미래를 주시하고 대안을 고려하되, 그 위에 구축된 좋은 패턴과 생태계를 무시해서는 안 됩니다.
7. React의 아키텍처 결정은 특정 작업을 더 어렵게 만들 수 있고 브라우저와 협업하고 DOM 프리미티브를 활용하기에 충분히 진보적이지 않을 수 있으므로 오늘날의 환경에서는 더 이상 가치가 없을 수 있습니다.
8. 💻 이러한 문제에도 불구하고 React와 PHP는 여전히 개발자들에게 널리 사용되고 있으며 관련성이 높습니다.
50. Reflections on a career managing React with Tom Occhino
요약: React는 저작자를 분리하고 빠른 반복 작업과 손쉬운 문제 해결을 가능하게 하여 웹 개발에 혁명을 일으켰으며, 그 결과 더 나은 사용자 경험을 제공하므로 올바른 기술을 선택하는 것이 성공에 매우 중요합니다.
1. React는 저작자를 분리하여 빠른 반복 작업과 손쉬운 문제 해결을 가능하게 함으로써 웹 개발에 혁명을 일으켰고, 그 결과 더 나은 사용자 경험을 제공합니다.
2. 페이스북이 웹 페이지를 처음부터 효율적으로 다시 렌더링하기 위해 개발한 React는 이전 자바스크립트 라이브러리의 한계를 극복하고 획기적인 프레임워크로 자리 잡았습니다.
3. React는 자바스크립트를 줄이는 데 유용한 도구이며 웹의 미래는 흥미진진합니다.
4. 🚀 최종 사용자 경험을 위한 최고의 도구 사용, Next.js는 서버와 클라이언트 통신에 적합, React는 팀을 확장하고 있으며, 서버 컴포넌트는 코드 크기를 줄이고, Astro는 자바스크립트를 줄이기 위한 좋은 전략입니다.
5. 제품 경험의 불일치와 오래된 기술로 인해 React로 다시 작성하기로 결정한 Facebook의 사례에서 볼 수 있듯이 올바른 기술을 선택하는 것은 매우 중요합니다.
6. Facebook은 최신 기술을 사용하여 더 나은 웹용 제품을 구축하고 있으며, 그 결과 새로운 facebook.com과 업계 표준에 더욱 부합하는 접근 방식을 선보이고 있습니다.
7. React는 라이브러리에서 프레임워크로 진화하여 번들 크기를 줄이고 성능을 향상시키는 것을 목표로 합니다.
8. 👨💻 웹 컴포넌트는 기회를 놓쳤지만 후크는 React에서 계속 유지될 것이며, 플랫폼 전반에서 기술의 일관성은 좋은 사용자 경험을 위한 핵심입니다.
이번주 준비한 것은 여기까지입니다 😄
읽어주셔서 감사합니다 😉
댓글
의견을 남겨주세요