CSS preprocessor는 필요 없습니다
I’m happy to translate the article for you, but I don’t have access to the full text of the linked page. Could you please paste the content you’d like translated (excluding any code blocks or URLs you want to keep unchanged)? Once you provide the text, I’ll translate it into Korean while preserving the original formatting and markdown.
CSS 전처리기: 아직도 가치가 있을까?
예전에는 CSS 전처리기가 모든 CSS 문제에 대한 마법 같은 영약처럼 보였습니다. 새로운 문법을 배우고, 환경을 설정하고, 프로젝트에 몇 가지 의존성을 추가하기만 하면 되었죠. 하지만 시간이 흐르고 웹 기술이 발전하면서 전처리기는 자체적인 고립된 세계에 머물게 되었습니다. 그래서 현재는 개발에서 이러한 도구를 사용할 이유가 보이지 않습니다.
이제 전처리기가 우리에게 제공하는 것이 무엇인지, 그리고 현재 그 기능들이 얼마나 가치 있는지 살펴보겠습니다.
변수, 중첩, 연산 및 범위
현대 CSS는 원래 버전에 비해 크게 성숙했습니다. 이제 다음을 할 수 있습니다:
@property를 사용하여 변수를 생성하기@scope를 사용하여 선택자의 범위를 제한하기calc를 사용하여 복잡한 연산을 기술하기- 중첩된 CSS 규칙 사용하기
따라서 이러한 기능은 더 이상 전처리기의 독점적인 장점이 아닙니다.
믹스인, 맵 및 함수
믹스인, 맵, 함수와 같은 복잡한 데이터 구조는 전처리기의 큰 장점처럼 보입니다. 하지만 웹 개발에서 이미 오랫동안 이 모든 것을 할 수 있는 프로그래밍 언어가 존재하지 않나요?
CSS‑in‑JS라는 개념 자체가 중요한 메시지를 담고 있습니다 – 새로운 프로그래밍 언어를 만들지 말고 JavaScript를 사용하라. 이제 브라우저는 CSS로 구성된 StyleSheet 클래스를 지원합니다:
CSSStyleSheet– 생성 가능한 스타일시트document.adoptedStyleSheets– HTML 문서에 추가할 수 있음shadowRoot.adoptedStyleSheets– ShadowRoot에 추가할 수 있음
이로 인해 스타일을 재사용하고 동적으로 변경하는 것이 쉬워지며, 권력의 균형이 급격히 바뀝니다.
믹스인 예제 (Sass)
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info { @include theme; }
.alert { @include theme($theme: DarkRed); }
.success{ @include theme($theme: DarkGreen); }JS 대체
const DarkGray = '169, 169, 169';
const DarkRed = '139, 0, 0';
const DarkGreen= '0, 100, 0';
function theme(value = DarkGray) {
return `
background: ${value};
box-shadow: 0 0 1px rgba(${value}, .25);
color: #fff;
`;
}
const sheet = new CSSStyleSheet();
sheet.replaceSync(
`.info {${theme()}}` +
`.alert {${theme(DarkRed)}}` +
`.success{${theme(DarkGreen)}}`
);맵 예제 (Less)
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}JS 대체
const COLORS = {
primary: 'blue',
secondary: 'green'
};
const sheet = new CSSStyleSheet();
sheet.replaceSync(
`.button {
color: ${COLORS.primary};
border: 1px solid ${COLORS.secondary};
}`
);함수 예제 (Stylus)
add(a, b)
a + b
sub(a, b)
a - b
invoke(a, b, fn)
fn(a, b)
body
padding invoke(5, 10, add)
padding invoke(5, 10, sub)JS 대체
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const invoke= (a, b, fn) => fn(a, b);
const sheet = new CSSStyleSheet();
sheet.replaceSync(
`body {
padding: ${invoke(5, 10, add)};
padding: ${invoke(5, 10, sub)};
}`
);CSS 전처리기의 모든 기능은 순수 JavaScript만으로 구현할 수 있습니다—추가 의존성 없이, 특정 프레임워크에 묶이지 않고. 그렇다면 전처리기를 사용할 때 감수해야 할 비용은 무엇일까요?
Source:
비용은 얼마인가?
CSS 전처리기를 사용하는 일반적인 워크플로를 살펴보겠습니다.
1. 전처리기 설치
아래는 세 가지 주요 전처리기에 대한 Package Phobia 보고서입니다:
| Preprocessor | Report |
|---|---|
| Sass |  |
| Less |  |
| Stylus |  |
이 라이브러리들은 특별히 가볍지는 않지만, 많은 개발자들이 “새로운 경험”이라는 요소 때문에 여전히 설치합니다.
2. 문법 학습
새로운 문법을 마스터하는 데는 시간과 정신적 노력이 필요합니다. 빠르다고 하더라도 편해지기까지 최소 며칠은 걸릴 가능성이 높습니다.
3. 빌드 파이프라인에 통합
전처리기를 번들러(Webpack, Vite 등)에 추가하고, 소스맵을 설정하며, CI/CD 파이프라인과 정상 작동하는지 확인해야 합니다. 이는 또 다른 유지 관리 레이어를 추가합니다.
4. 코드베이스 유지
전처리기에서 파괴적인 변경이 발표될 때마다 의존성을 업데이트하고 스타일을 리팩터링해야 할 수도 있습니다.
결론
- 현대 CSS는 이미 변수, 중첩, 계산 및 범위가 지정된 규칙을 제공합니다.
- 모든 “고급” 기능(믹스인, 맵, 함수)은 순수 JavaScript와 기본
CSSStyleSheetAPI로 재현할 수 있습니다. - 전처리기를 사용하면 추가 의존성, 학습 부담 및 빌드 시간 복잡성이 발생합니다.
이미 JavaScript 중심의 스타일링 솔루션(CSS‑in‑JS, 디자인‑토큰 등)에 의존하고 있다면 별도의 전처리기가 필요하지 않을 수 있습니다. 반대로 팀이 순수 CSS 워크플로를 선호하고 Sass/Less/Stylus의 사용성을 중시한다면 그 타협이 여전히 받아들여질 수 있습니다.
프로젝트의 아키텍처와 성능 목표에 맞는 도구를 선택하세요—현대 CSS가 이제 해결한 격차를 메우기 위해 전처리기를 도입하지 마세요.
빌드 도구 설정
꽤 쉽습니다 (Vite에 감사드립니다!). 하지만 문제를 인식하게 됩니다.
우리는 CSS를 떠났다 다시 돌아왔습니다. 흥미진진한 모험이었지만, 출력물에는 여전히 정적인 CSS가 나왔습니다. 비용이 정당한가요?
누군가가 “순수 CSS를 작성하는 것에 비해 엄청난 시간을 절약했어요.” 라고 말할 것이라 확신합니다.
하지만 저는 순수 JS를 작성하는 것보다 훨씬 더 많은 노력을 들였습니다.
게다가 새로운 문법은 항상 자체적인 제한을 부과합니다. 가장 중요한 제한은 적용 범위입니다. CSS 전처리기는 이제 전혀 필요 없이도 쉽게 해결할 수 있는 한 가지 문제만을 해결합니다.
최종 생각
제 의견으로는 CSS 전처리기를 사용하는 것은 열기구를 타고 비행하는 것과 같습니다. 목적지는 도달할 수 있지만 비행기보다 편안함은 떨어집니다.
구성된 스타일시트가 균형을 완전히 바꾸어 놓았습니다: 이제 CSS에 구현되지 않은 모든 것이 JS를 직접 사용해서 할 수 있게 되었습니다. CSS‑in‑JS 솔루션은 구성된 스타일시트 위에서만 만드는 것이 의미가 있습니다. 제가 이를 사용하기 시작했을 때는 TypeScript 지원, 서버‑사이드 렌더링, 그리고 셀렉터 최소화가 부족했으며, 그래서 **EffCSS**라는 아이디어가 탄생했습니다.
CSS 전처리기에 대해 아는 것은 유용합니다—이력서에 멋지게 보일 것입니다. 하지만 실제로 사용할 가치는 거의 없습니다.
프론트엔드 개발을 즐기세요!