원문 : The Ultimate Guide to Font Performance Optimization 폰트 성능 최적화는 웹사이트의 폰트 로딩 속도를 높이고 더 부드럽게 렌더링 되도록 하는 다양한 웹 개발 기법을 말합니다. 이러한 최적화에는 신중한 폰트 선택, 성능이 우수한 폰트 포맷 사용, 자체 호스팅, 최적화된 선언, 폰트 디스플레이 전략 등이 포함…
최근 Next 14 환경에서 신규 프로젝트를 개발하던 중 Next.js의 환경 변수 관련 문제로 애먹었던 적이 있어서 이번 기회에 환경 변수에 대해 정리해 보려고 한다. 환경 변수는 주로 노출되면 안 되는 민감 정보 및 API 엔드포인트나 API 키 등 빌드 환경별로 달라져야 하는 정보에 쓰인다. 실무에서는 대부분 실행 환경이 구분되고, 외부에 노출되면 …
작년 회고 글에서 막연하게 올해는 커리어적인 유의미한 결과를 얻고 싶다고 적었었는데, 감사하게도 정말 이직을 하게 되어 나의 커리어 두 번째 이직에 대한 회고를 해보려고 한다. 이직 직후에 회고를 작성했으면 어땠을까 하는 생각도 들지만, 여러모로 많은 변화를 겪으면서 적응하는 시기가 필요하기도 해서 거의 반년이 되어가는 시점에 회고하게 되었다. 실제로 이…
원문 : Types of React Components [2024] 2013년 리액트가 출시된 이후 다양한 유형의 컴포넌트가 등장했습니다. 그중 일부는 여전히 최신 리액트 애플리케이션에 필수적이지만, 다른 일부는 이전 세대의 프로젝트에서 주로 사용되며 현재는 더 이상 사용되지 않는(deprecated) 기술입니다. 이 가이드는 초심자를 위해 최신 컴포넌트…
나는 글또를 어떻게 알게 되었나 예전에 Github을 돌아다니다 누군가의 Github 프로필에서 글또 뱃지를 보게 되면서 글또에 대해 알게되었다. 글또는 라는 의미를 가진 모임이었고, 쉽게 말해 개발자 글쓰기 모임이었다. 당시에는 블로그도 꾸준히 쓰고 있었고, 여러 가지로 바빴기 때문에 글또에 참여하는 것에 대해서는 생각조차 하지 못했었다. (그리고 참여…
원문 : How to make your web page faster before it even loads How to make your web page faster before it even loads 개발자로서(특히 프런트엔드 개발자로서), 우리는 일반적으로 웹 성능을 논할 때 브라우저 창에서 요소들이 나타나기 시작하는 시점과 콘텐츠를 소비하거나 페이지…
원문 : Good Refactoring vs Bad Refactoring thumbnail 저는 수년간 많은 개발자를 고용해 왔습니다. 그중 상당수는 우리의 코드가 대대적인 리팩터링이 필요하다는 확고한 신념을 가지고 있었습니다. 하지만 문제는, 거의 모든 경우에서 다른 개발자들이 리팩터링된 코드를 이전보다 이해하고 유지보수하기 더 어렵다고 느꼈다는 점입니…
원문 : Inline conditionals in CSS? 지난주, CSS WG는 CSS에 인라인 를 추가하기로 결의했습니다. 그렇다면 이게 무슨 의미이며, 왜 흥미로운 걸까요? 지난주 우리는 스페인 A Coruña에서 CSS WG 대면 회의를 가졌습니다. 그 회의에서 나온 결의 중 제가 특히 흥분한 것은 CSS에 인라인 를 추가하기로 한 합의입니다. 비…
원문 : Good Code, Testable Code 테스트 용이성이란 무엇인가요? 소프트웨어 “테스트 용이성”에 대한 정의는 많은 곳에서 찾아볼 수 있습니다. 안타깝게도, 대부분의 정의는 “시스템을 테스트하는 것이 얼마나 쉬운가” 또는 “코드를 어느 정도까지 테스트할 수 있는가” 같은 표현으로 귀결됩니다. 저는 이러한 표현이 안타깝다고 생각하는데, “쉽…
원문 : Write SOLID React Hooks SOLID는 가장 일반적으로 사용되는 디자인 패턴 중 하나입니다. 여러 언어와 프레임워크에서 사용되며, 리액트에서 사용하는 방법을 소개하는 문서도 많습니다. SOLID에 대한 각 리액트 문서는 약간씩 다른 방식으로 모델을 제시하는데, 컴포넌트에 적용하거나 타입스크립트에 적용하는 경우들은 있지만 훅에 원…