6장. 심화 사례
5장에서 실무 사례와 함정을 다뤘어요. 이번 장에서는 더 넓은 시야로 추상화를 봐요.
언어를 초월하는 추상화
JSX: 같은 What, 다른 How
JSX를 봐요.
<Button onClick={handleClick}>클릭</Button>
TypeScript
복사
이 한 줄이 어떻게 동작할까요? 언어마다 달라요.
JavaScript (React):
// JSX가 이렇게 변환됨
React.createElement(Button, { onClick: handleClick }, "클릭");
TypeScript
복사
Rust (Yew):
// 같은 JSX 문법이 Rust에서는
html! {
<button onclick={handleClick}>{ "클릭" }</button>
}
Rust
복사
Python (Dash):
# Python에서는
html.Button("클릭", id="btn", n_clicks=0)
Python
복사
뭐가 같고 뭐가 다를까요?
•
What (같음): “버튼을 만들고, 클릭하면 뭔가 한다”
•
How (다름): React의 createElement, Rust의 매크로, Python의 함수
JSX라는 What이 여러 언어의 How를 품고 있어요. 이게 언어를 초월하는 추상화예요.
왜 중요한가
이런 추상화가 있으면:
•
React 개발자가 Yew(Rust)를 배울 때 진입 장벽이 낮아요
•
같은 컴포넌트 설계 패턴을 여러 언어에 적용할 수 있어요
•
언어가 바뀌어도 사고방식은 그대로 유지돼요
핵심: 좋은 추상화는 특정 언어에 갇히지 않아요. What이 명확하면, How는 언어마다 달라도 돼요.
플랫폼이 복잡도를 흡수한다
더 큰 패턴이 있어요. 플랫폼이 진화하면서 복잡도를 흡수해요.
레이아웃의 진화
Before: Float 시절
.container::after {
content: "";
display: table;
clear: both;
}
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}
CSS
복사
개발자가 직접 레이아웃 로직(clearfix, float 정리)을 관리했어요.
After: Flexbox
.container {
display: flex;
}
.left {
flex: 3;
}
.right {
flex: 7;
}
CSS
복사
What: “왼쪽 3, 오른쪽 7 비율로 배치”
How: 브라우저가 알아서 처리
복잡도가 어디로 갔을까요? 플랫폼(브라우저)이 흡수했어요.
애니메이션의 진화
Before: jQuery
$(".box").animate(
{
left: "100px",
opacity: 0.5,
},
500
);
JavaScript
복사
JavaScript가 매 프레임 계산하고, 브라우저에 전달해요.
After: CSS Transitions
.box {
transition: all 0.5s;
}
.box:hover {
transform: translateX(100px);
opacity: 0.5;
}
CSS
복사
What: “0.5초 동안 이동하고 투명해져”
How: GPU가 처리 (JavaScript 개입 없음)
복잡도가 어디로 갔을까요? 브라우저 렌더링 엔진이 흡수했어요.
데이터 페칭의 진화
Before: XHR
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// 처리
}
}
};
xhr.send();
JavaScript
복사
Middle: fetch
const response = await fetch("/api/users");
const data = await response.json();
JavaScript
복사
After: React Query
const { data, isLoading, error } = useQuery(["users"], fetchUsers);
JavaScript
복사
What: “유저 데이터를 가져와”
How: 캐싱, 재시도, 에러 핸들링 — 라이브러리가 처리
복잡도가 어디로 갔을까요? 라이브러리가 흡수했어요.
폼 검증의 진화
Before: JavaScript
function validateEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
showError("이메일 형식이 올바르지 않습니다");
return false;
}
return true;
}
JavaScript
복사
After: HTML5
<input type="email" required/>
HTML
복사
What: “이메일 형식이어야 함”
How: 브라우저 네이티브 검증
복잡도가 어디로 갔을까요? HTML 스펙이 흡수했어요.
패턴: 좋은 추상화는 표준이 된다
시기 | 개발자가 처리 | 플랫폼이 흡수 |
2010 | Float 레이아웃 | → Flexbox/Grid |
2012 | jQuery 애니메이션 | → CSS Transitions/Animations |
2015 | XHR 상태 관리 | → fetch + React Query |
2018 | JS 폼 검증 | → HTML5 Validation |
2020 | jQuery 플러그인 | → Web Components |
패턴이 보이나요?
1.
개발자들이 반복적으로 비슷한 코드를 작성함
2.
라이브러리가 그 패턴을 추상화함
3.
플랫폼(브라우저, 언어)이 그 추상화를 표준으로 흡수함
좋은 추상화는 결국 표준이 돼요. Float 핵은 Flexbox로, jQuery 애니메이션은 CSS로, XHR 보일러플레이트는 fetch로.
실무에 적용하기
이 패턴을 알면 뭐가 좋을까요?
1. 트렌드를 읽을 수 있어요
“이 라이브러리가 하는 일이 뭐지?” → 나중에 플랫폼이 흡수할 가능성이 있어요.
•
React Server Components → 서버/클라이언트 경계 추상화
•
Tailwind → 유틸리티 클래스 패턴 → CSS에 흡수될까?
2. 미래를 대비할 수 있어요
플랫폼이 흡수할 패턴을 미리 알면, 마이그레이션이 쉬워요.
•
jQuery → 네이티브 JS로 마이그레이션 쉬웠던 이유: 같은 What을 표현했기 때문
•
Float 레이아웃 → Flexbox 마이그레이션 쉬웠던 이유: 레이아웃이라는 What이 같았기 때문
3. 추상화 수준을 선택할 수 있어요
•
플랫폼 네이티브: 의존성 없음, 하지만 기능 제한
•
라이브러리: 편의성 높음, 하지만 의존성
•
직접 구현: 완전한 제어, 하지만 복잡도
상황에 따라 적절한 수준을 선택해요.
정리
심화 주제 | 핵심 |
언어 초월 추상화 | 같은 What, 다른 How (JSX) |
플랫폼 흡수 | 복잡도가 플랫폼으로 이동 |
진화 패턴 | 반복 → 라이브러리 → 표준 |
추상화의 큰 그림:
1.
개인 수준: 함수 추출, 인터페이스 설계 (4장)
2.
팀 수준: 공통 패턴, 커스텀 훅 (5장)
3.
생태계 수준: 라이브러리, 프레임워크, 플랫폼 표준 (6장)
추상화는 코드를 정리하는 것에서 끝나지 않아요. 생태계 전체가 진화하는 방식이에요.
마치며
이 책에서 배운 것:
1.
추상 = What과 How의 분리 (1장)
2.
추상화 = 추상을 만드는 과정: 쪼개기 → 비교하기 → 양방향 번역 (2장)
3.
일상 연습 = 코드 없이도 추상/추상화 수련 (3장)
4.
코드 추상화 = 코드에서 What/How 분리, 레이어/협력/축척 (4장)
5.
사례와 함정 = 실무 패턴 + 피해야 할 것 (5장)
6.
심화 = 언어 초월, 플랫폼 흡수 (6장)
처음에는 의식적으로 해야 해요. “이게 What이고 저게 How야.” 어색해요.
반복하면 자연스러워져요. 코드를 보면 What과 How가 눈에 들어와요. “아, 이건 분리해야겠다”는 감각이 생겨요.
그게 체화예요. 추상화가 당신의 기본 사고방식이 되는 거예요.
다음 단계
이 책을 다 읽었으면:
1.
오늘 작성한 코드에서 What/How를 찾아보세요
2.
내일 작성할 코드에서 What을 먼저 정하고 시작해보세요
3.
일주일 후 코드 리뷰에서 “이 부분 What/How가 섞여있지 않나요?”라고 물어보세요
추상화는 배워서 되는 게 아니에요. 해서 되는 거예요.
시작하세요.
