웹

원문: https://www.lorenstew.art/blog/react-won-by-default/React-by-default에는 숨겨진 비용이 있습니다. 이 글은 작업에 맞는 올바른 프레임워크를 선택하기 위해 의도적인 선택을 내려야 한다는 주장입니다.리액트는 더 이상 기술적 우위로 승리하고 있지 않습니다. 지금은 기본 선택지라는 이유만으로 승리하고 있습니다. 이 기본값이 프런트엔드 생태계 전반의 혁신을 늦추고 있습니다.팀이 새로운 프런트엔드를 만들어야 할 때, 대화는 좀처럼 "제약 조건이 무엇이고, 어떤 도구가 가장 적합한가?"로 시작하지 않습니다. 대부분 "리액트를 쓰자. 다들 리액트는 알잖아."로 시작합니다. 이 반사적인 선택은 기술적 적합성이 아닌 네트워크 효과가 아키텍처를 결정하는 자기 강화..

원문: https://blog.logrocket.com/css-in-2026/한동안 웹사이트를 만들어 왔다면, CSS에 대해 어느 정도 확고한 의견이 있을 겁니다. 디자인과 레이아웃에는 당연한 선택이지만, 기본 애니메이션을 넘어 더 인터랙티브한 기능이 필요해지면 대부분의 개발자는 본능적으로 자바스크립트에 손을 뻗습니다. 하지만 끊임없이 발전하는 플랫폼 덕분에 웹 기능을 구현할 때 "CSS는 디자인, 자바스크립트는 인터랙션"이 더 이상 기본값일 필요가 없어졌습니다.모던 CSS는 이제 커스텀 스크립트가 필요했던 복잡한 애니메이션과 사용자 인터렉션을 처리할 만큼 강력합니다. 이 글에서는 CSS에 새로 도입되는 최신 기능들을 살펴보고, 자바스크립트로 익숙하게 구현하던 수준의 인터랙티비티를 유지하면서도 개발 워크..

원문: https://www.jonoalderson.com/conjecture/its-time-for-modern-css-to-kill-the-spa/네이티브 CSS 트랜지션은 클라이언트 사이드 라우팅의 가장 강력한 근거를 조용히 무너뜨렸습니다. 그런데도 사람들은 성능 좋은 웹사이트 대신 끔찍한 앱을 계속 만들고 있습니다.앱처럼 보여야 한다는 착각"앱처럼 느껴지게 만들어 주세요."기획 단계 어딘가에서 누군가 이 말을 꺼냅니다. CMO일 수도, 디지털 리드일 수도, 브랜드 매니저일 수도 있습니다. 그리고 이 한마디로 아키텍처가 결정됩니다. SPA로 가겠다고요. 아마 리액트겠죠. 뷰일 수도 있습니다. 거의 확실히 Vercel이나 Netlify에 배포될 것이고, 헤드리스 CMS와 GraphQL API도 곁들여..

원문: https://www.jonoalderson.com/performance/http-caching/캐싱은 웹의 보이지 않는 중추입니다. 캐싱 덕분에 사이트는 빠르고 안정적이며 저렴하게 운영될 수 있습니다. 제대로 구현된 캐싱은 지연 시간을 대폭 줄이고, 서버 부하를 감소시키며, 취약한 인프라도 갑작스러운 트래픽 급증을 견딜 수 있게 합니다. 반면, 잘못 구현되거나 완전히 무시될 경우 웹사이트는 느리고 불안정하며, 유지보수 비용이 많이 들게 됩니다.근본적으로 캐싱은 불필요한 작업을 줄이는 것입니다. 브라우저, CDN 또는 프락시가 변경되지 않은 리소스를 서버에 요청해야 할 때마다 시간과 대역폭이 낭비됩니다. 서버가 동일한 콘텐츠를 다시 빌드하거나 재전송해야 할 때마다 부하와 비용이 추가됩니다. 블랙 ..

최근에 이직을 준비하며 이력서에 적어 놓은 apollo-client 관련해서 깊이 있는 질문을 다소 받았다. 익숙하게 쓰는 스택이어서 원리나 트레이드 오프 등에 대해서 생각을 많이 안 했던 것 같아서 복습해 볼 겸 클라이언트에서 graphql을 처리하는 도구들을 비교해 보는 글을 작성해 보려 한다. Apollo Client 아폴로 클라이언트는 graphql로 로컬 및 원격 데이터를 관리할 수 있는 완전하게 기능을 제공하는 포괄적인 상태 관리 graphql 클라이언트이다. graphql 프로젝트가 오픈소스화된 직후인 2016년 meteor development group이 모든 프론트엔드 웹 프레임워크에 graphql 클라이언트 라이브러리를 구축할 계획으로 출시했다. 아폴로 클라이언트 라이브러리는 다음과 ..

이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..

Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..

이번 포스팅에서는 자바스크립트의 스코프에 대해서 기본적인 개념을 알아 보려고 한다. 변수의 값은 어디에 저장되는지, 그리고 필요할 때 변수를 어떻게 찾아서 써야 하는지는 프로그래밍에서 중요한 요소이다. 따라서 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 규칙이 필요하다. 이러한 규칙을 스코프(scope)라고 한다. 자바스크립트를 일반적으로 '동적' 또는 '인터프리터' 언어로 분류하지만 자바스크립트는 사실 '컴파일러' 언어이다. 물론 자바스크립트가 전통적인 많은 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산 시스템에서 이용할 수 있는 것은 아니다. 하지만 자바스크립트 엔진은 전통적인 컴파일러 언어에서 컴파일러가 하는 일의 상당 부분을 우리가 아는 것보다 더 멋있게(?) 처리한..