아티클 번역
Next.js 13에서 웹 폰트 최적화
원문 : https://www.lydiahallie.io/blog/optimizing-webfonts-in-nextjs-13 웹 폰트는 현대 웹 디자인의 필수 요소입니다. 웹상에서 아름다운 타이포그래피를 가능하게 하며 여러분의 제품에 유니크함을 더해줍니다. ✨ 그러나 웹 폰트를 사용하면 문제가 생길 수도 있습니다. 여러분이 인터넷을 자주 사용하신다면 다음과 같은 현상을 경험했을 가능성이 있습니다. 웹 폰트가 다운로드되어 설치될 때까지는 Times New Roman 및 Arial 등의 기본 폰트를 처음 표시하는 웹 사이트로 이동합니다. 그 다음 폰트를 기본값에서 웹 폰트로 빠르게 전환해서 종종 레이아웃 시프트(layout shift)를 일으킵니다. 레이아웃 시프트는 몇 픽셀 이동부터 큰 폰트나 다른 줄 바..
[번역] Ecma 인터네셔널에서 ECMAScript 2022를 승인했습니다. 새로운 기능은 무엇인가요?
원문 : https://2ality.com/2022/06/ecmascript-2022.html 2022년 6월 22일, 제123회 Ecma 총회에서 ECMAScript 2022 언어 사양을 승인했습니다. 이는 이제 공식적으로 표준이 됨을 의미합니다. 이 블로그 게시물은 새로운 기능에 대해 설명합니다. 1. ECMAScript 2022의 편집자 이 릴리스의 편집자는 다음과 같습니다. Shu-yu Guo Michael Ficarra Kevin Gibbons 2. ECMAScript 2022의 새로운 기능은 무엇입니까? 2.1 클래스의 새로운 멤버 class MyClass { instancePublicField = 1; static staticPublicField = 2; #instancePrivateFiel..
[번역] 자바스크립트 번들러 만들기
원문: https://cpojer.net/posts/building-a-javascript-bundler Jest의 패키지는 모든 종류의 JavaScript 도구를 구축하는데 유용한 전체 패키지의 생태계를 구성합니다. "전체는 부분의 합보다 크다"는 Jest에게 적용되지 않습니다. 이 글에서는 Jest의 패키지 중 일부를 활용해서 JavaScript 번들러가 동작하는 방식을 배울 것입니다. 글이 끝날 때 여러분들은 토이 번들러를 갖게 되고, 자바스크립트 번들링의 기본 개념을 이해하게 될 것입니다. 이 게시물은 JavaScript 인프라에 대한 시리즈의 일부입니다. 현재 위치는 다음과 같습니다. 의존성 관리자는 의존성을 관리하지 않습니다 자바스크립트 인프라 다시 생각하기 자바스크립트 테스팅 프레임워크 만들..
[번역] 전문가처럼 타입스크립트 infer 사용하기
원문 : https://levelup.gitconnected.com/using-typescript-infer-like-a-pro-f30ab8ab41c7 타입스크립트 마스터링 시리즈에 오신 것을 환영합니다. 이 시리즈는 애니메이션 형식으로 타입스크립트의 핵심 지식과 기술을 소개합니다. 함께 배워요! 이전 글들은 다음과 같습니다. 타입스크립트 제네릭에서 K, T 및 V는 무엇인가요? 전문가처럼 타입스크립트 매핑 타입 사용하기 전문가처럼 타입스크립트 조건부 타입 사용하기 전문가처럼 타입스크립트 추론 사용하기 전문가처럼 타입스크립트 템플릿 리터럴 타입 사용하기 타입스크립트 시각화: 가장 많이 사용되는 15가지 유틸리티 타입 T0 배열 타입의 엘리먼트 타입과 T1 함수 타입의 반환 값 타입을 가져오는 방법을 알고..
[번역] 문 vs 표현식
원문 : https://www.joshwcomeau.com/javascript/statements-vs-expressions/ 몇 년 전 지역 코딩 부트캠프에서 웹 개발을 가르치고 있던 저에게 학생이 저에게 이런 질문을 했습니다. 자바스크립트에서 "문"과 "표현식"의 차이점이 뭔가요?답을 알고 있는 것 같았지만 말로 설명할수는 없었습니다. 감은 있었지만 실제 지식은 놀라울 정도로 모호했습니다. 가르치는 것만큼 겸손한 것은 없습니다 😅. 학생들은 우리가 이해하는 "모호한 부분"을 알아내는 재주가 있습니다. 그 이후로 이 질문이 가장 중요하다는 것을 깨달았습니다. 이것은 수많은 자바스크립트 지식에 도움이 되는 지지기반입니다. 이것은 특히 React 개발자에게 해당됩니다. 기억해야 하고 항상 따라야 하는 것을..
[번역] JavaScript 패키지 매니저 비교 - npm, Yarn 또는 pnpm?
원문 : https://doppelmutzi.github.io/packageManagers/ 오늘날 패키지 매니저 분야에는 세 가지 주요 플레이어가 있습니다. npm Yarn — Yarn이 Yarn Classic (< v2) 또는 좀 더 최신 버전인 Yarn Berry(≥ v2)를 참조할 수 있단 걸 곧 알게 될 것입니다. 고성능(performant) npm (pnpm) 사실상, 모든 패키지 매니지의 기능은 거의 동일합니다. 그래서 설치 속도나 스토리지 사용량, 기존 워크플로와 결합되는 방식 등 기능 외적인 요구 사항을 기준으로 사용할 패키지 매니저를 결정하게 됩니다. 물론 각 패키지 매니저를 사용하는 방법은 다르지만 모두 중요한 컨셉은 공유합니다. 이러한 패키지 매니저로 다음을 수행할 수 있습니다. 메..
[번역] React에 SOLID 원칙 적용하기
원문 : https://medium.com/dailyjs/applying-solid-principles-in-react-14905d9c5377 소프트웨어 업계가 성장하고 실수를 저지르면서 모범 사례와 우수한 소프트웨어 설계 원칙이 떠오르며 차후에 같은 실수를 반복하지 않도록 개념화합니다. 특히 객체 지향 프로그래밍(OOP)의 세계는 이러한 모범 사례의 노다지이며 SOLID는 의심할 여지 없이 가장 영향력 있는 분야 중 하나입니다. SOLID는 각 문자가 다음과 같은 5가지 디자인 원칙 중 하나를 나타내는 약어입니다. 단일 책임 원칙 (Single responsibility principle, SRP) 개방-폐쇄 원칙 (Open-closed principle, OCP) 리스코프 치환 원칙 (Liskov s..
[번역] Reduce에 대한 10가지 필수 JavaScript 트릭 및 팁
원문 : https://javascript.plainenglish.io/10-must-know-javascript-tricks-tips-about-reduce-1368766d99da 코드를 덜 작성하고 더 많은 일을 하게 만드는 Reduce에 대한 10가지 트릭 프론트엔드 개발자로써 reduce 함수는 반드시 많이 사용해야하고, 강력하고 유용한 배열(array) API입니다. 오늘은 이에 대한 10가지 고급 트릭과 팁을 공유하고자 합니다. 1. 가산기 및 누산기 "reduce"를 사용하면 여러 숫자들을 더하거나 누적하는 기능을 쉽게 구현할 수 있습니다. // 가산기 const sum = (...nums) => { return nums.reduce((sum, num) => sum + num); }; con..
[번역] Remix: 리액트의 음에 양을
원문 : https://kentcdodds.com/blog/remix-the-yang-to-react-s-yin 저는 2015년부터 React 애플리케이션을 개발해왔습니다. 그 이후로 React 덕분에 개발 생산성이 크게 향상했습니다. 상태를 기반으로 UI를 렌더링하는 React의 선언적 모델은 웹용 UI 구축을 구축하는 방법을 크게 단순화했습니다. 또한 이전에 Angular.js와 Backbone으로 작업했던 것보다 훨씬 앞서서 상태에 대해 생각할 수 있는 좋은 방법을 제공했습니다. React의 슬로건은 다음과 같습니다. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 React는 스스로 개척한 선언형 컴포넌트 모델을 제공함으로써 이를 잘 처리합니다. 상태(콤보박스 메뉴가 열림 또는 닫힘 같은)..
[번역] Remixing React Router
원문 : https://remix.run/blog/remixing-react-router React Router의 첫 번째 버전에는 실제로 willTransitionTo라는 데이터 로드를 지원하기 위한 비동기 훅이 있었습니다. 그 당시에는 React를 어떻게 사용해야 하는지 아무도 몰랐고 우리도 예외는 아니었습니다. 당시의 React Router는 좋다고 말할 수는 없었지만 적어도 올바른 방향으로 가고 있었습니다. 좋든 안 좋든 우리는 React Router v4의 컴포넌트에 전력을 다했고 그 훅을 제거했습니다. withTransitionTo가 사라지고, 컴포넌트가 주요 도구로 사용되면서 오늘날 거의 모든 React Router 앱은 컴포넌트 내부에서 데이터를 페칭합니다. 우리는 컴포넌트 안에서 데이터를..