Medium
자바스크립트가 웹을 망가뜨렸습니다. (그리고 이를 진보라고 불렀습니다)
이 아티클은 자바스크립트 중심의 SPA(Single Page Application) 아키텍처가 웹의 본래 강점인 빠른 로딩, 접근성, 검색 엔진 최적화를 오히려 퇴보시켰다고 비판합니다. React, Angular 등의 프레임워크가 DX(개발자 경험)를 향상시키는 과정에서 번들 크기 증가, TTI(Time to Interactive) 악화, 기본 HTML 기능 대체 등 UX를 희생시켰다는 점을 지적합니다.
핵심 요약
이 아티클은 JavaScript 런타임과 언어 설계를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 이 아티클은 자바스크립트 중심의 SPA(Single Page Application) 아키텍처가 웹의 본래 강점인 빠른 로딩, 접근성, 검색 엔진 최적화를 오히려 퇴보시켰다고 비판합니다. React, Angular 등의 프레임워크가 DX(개발자 경험)를 향상시키는 과정에서 번들 크기 증가, TTI(Time to Interactive) 악화, 기본 HTML 기능 대체 등 UX를 희생시켰다는 점을 지적합니다. 결국 웹 플랫폼이 제공하는 네이티브 기능을 활용하고 JavaScript를 점진적 향상의 수단으로 사용하는 접근이 더 나음을 주장합니다.
이 아티클은 JavaScript 런타임과 언어 설계를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
JavaScript 런타임과 언어 설계를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 자바스크립트 중심 SPA는 초기 로딩 성능과 접근성을 희생하면서 DX를 개선하는 트레이드오프를 낳았다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
자바스크립트 중심 SPA는 초기 로딩 성능과 접근성
자바스크립트 중심 SPA는 초기 로딩 성능과 접근성을 희생하면서 DX를 개선하는 트레이드오프를 낳았다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
자바스크립트 중심 SPA는 초기 로딩 성능과 접근성를 개념으로만 기억하고 맥락 없이 적용하면 자바스크립트 중심 SPA는 초기 로딩 성능과 접근성을 희생하면서 DX를 개선하는 트레이드오프를 낳았다. 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
링크
링크, 폼, 브라우저 히스토리 같은 HTML 네이티브 기능을 JS로 재구현하면 버그와 접근성 문제가 생긴다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
링크를 개념으로만 기억하고 맥락 없이 적용하면 링크, 폼, 브라우저 히스토리 같은 HTML 네이티브 기능을 JS로 재구현하면 버그와 접근성 문제가 생긴다. 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
Progressive Enhancement
Progressive Enhancement(점진적 향상) 전략은 JS 없이도 기본 기능을 제공하고 JS가 있을 때 경험을 향상시킨다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Progressive Enhancement를 개념으로만 기억하고 맥락 없이 적용하면 Progressive Enhancement(점진적 향상) 전략은 JS 없이도 기본 기능을 제공하고 JS가 있을 때 경험을 향상시킨다. 추상화만 늘리고 경계를 점검하지 않으면 구조가 커질수록 변경 비용이 급격히 커집니다.
읽는 순서
- 1이론
"자바스크립트가 웹을 망가뜨렸습니다. (그리고 이를 진보라고 불렀습니다)"의 멘탈 모델과 요약을 먼저 읽고, JavaScript 런타임과 언어 설계와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
자바스크립트가 웹을 망가뜨렸습니다. (그리고 이를 진보라고 불렀습니다)에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 JavaScript 런타임과 언어 설계와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "SPA(Single Page Application)의 장점과 단점을 설명하고, 어떤 상황에서 MPA 또는 SSR 방식이 더 적합한지 말해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "자바스크립트가 웹을 망가뜨렸습니다. (그리고 이를 진보라고 불렀습니다)에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 성능(TTI, FCP), SEO, 접근성, 개발 복잡도 측면을 비교하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "자바스크립트가 웹을 망가뜨렸습니다. (그리고 이를 진보라고 불렀습니다)에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 두 전략의 출발점(기본 기능 우선 vs 고급 기능 우선)을 명확히 하고, 접근성과 SEO 관점을 포함하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "자바스크립트가 웹을 망가뜨렸습니다. (그리고 이를 진보라고 불렀습니다)에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] TTI, TBT, LCP와 JS 파싱/실행 비용의 관계를 설명하고, code splitting, tree shaking 등의 최적화 방법을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"자바스크립트 중심 SPA는 초기 로딩 성능과 접근성"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.