개발자 하민아빠의 Dev & Money

React로 개발을 하다 보면 누구나 한 번쯤 겪는 고통이 있습니다.바로 '클래스명 짓기' 인데요. .wrapper, .container, .btn 같은 흔한 이름을 썼다가 다른 컴포넌트의 스타일이 망가져 버린 경험, 다들 있으시죠?저도 예전에는 클래스명 충돌을 피하려고 .main-header-nav-inner-box 같이 끝도 없이 긴 이름을 짓느라 골머리를 앓았던 기억이 납니다. 😅 과거 전통적인 웹 퍼블리싱 환경에서는 전체 CSS를 하나로 묶어 관리하는 방식이 유행했지만, 컴포넌트 단위로 개발하는 React(또는 Next.js) 생태계에서는 스타일도 컴포넌트에 종속시키는 것이 대세입니다. 오늘은 SCSS 시리즈의 마지막 편으로, React 환경에서 컴포넌트(.tsx)와 SCSS Module(.mo..

SCSS로 파일을 분리해서 작업할 때, 숨 쉬듯이 사용하던 @import... 다들 익숙하시죠?저도 프로젝트를 세팅할 때면 항상 style.scss 파일 맨 위에 @import 'variables';, @import 'mixins';를 주르륵 적어두고 시작했는데요. 그런데 충격적인 소식이 있습니다.현재 SCSS의 표준 구현체인 Dart Sass에서 @import 문법은 점진적으로 폐지(Deprecated)될 예정이라는 사실, 알고 계셨나요? 😱오늘은 실무에서 왜 @import를 버려야 하는지, 그리고 이를 완벽하게 대체할 수 있는 새로운 모듈 시스템 @use와 @forward를 어떻게 적용해야 하는지 제 실무 경험을 바탕으로 알기 쉽게 정리해 드릴게요.1. 정들었던 @import, 왜 금지되었을까?가장..

퍼블리싱이나 프론트엔드 작업을 하다 보면 .mt-10 { margin-top: 10px; }, .mt-20 { margin-top: 20px; } 같은 유틸리티 클래스를 수십 개씩 타이핑해 본 경험, 다들 있으시죠?저도 예전에는 복사/붙여넣기를 반복하면서 '이걸 자동으로 만들어주는 기능은 없을까?' 하고 답답해했던 기억이 납니다. 😅 오늘은 이런 무의미한 타이핑 노가다를 완벽하게 끝내줄 SCSS의 강력한 무기, 조건문(@if)과 반복문(@for, @each)에 대해 이야기해 보려고 해요.CSS 파일에 로직을 더해서 코드를 우아하게 찍어내는 방법, 지금 바로 시작하겠습니다!1. CSS에서 로직이 왜 필요할까요?순수 CSS는 정적인 스타일 시트이기 때문에 "만약 A라면 B 스타일을 적용해라" 혹은 "1부터..

프로젝트를 진행하다 보면 버튼(Button)이나 모달(Modal) 창 같이 디자인은 비슷하고 색상이나 크기만 조금씩 다른 UI 요소들을 정말 많이 만들게 됩니다.저도 예전에는 버튼 종류(Primary, Secondary, Danger, Outline...)가 늘어날 때마다 기존 CSS 코드를 복사해서 색상 값만 바꾸는 식으로 작업했었어요.파일은 끝없이 길어지고, 나중에 둥근 모서리(border-radius) 값을 일괄 수정해달라는 기획 변경이 들어오면 정말 아찔했죠. 😅 오늘은 이런 중복 코드를 깔끔하게 날려버릴 수 있는 SCSS의 꽃, @mixin과 @include에 대해 알아보려고 해요.마치 함수처럼 스타일을 정의해 두고 필요할 때마다 꺼내 쓰는 방법, 지금부터 함께 살펴볼까요?1. Mixin과 I..

순수 CSS로 스타일링을 하다 보면 끝없이 반복되는 컬러 코드와, 꼬리에 꼬리를 물고 길어지는 선택자(Selector) 때문에 눈이 핑핑 돈 경험 다들 한 번쯤 있으시죠? 오늘은 이런 'CSS 노가다'에서 벗어나 개발의 질을 확 높여주는 SCSS의 핵심 기초, 변수(Variables)와 중첩(Nesting)에 대해 이야기해 보려고 해요.이 두 가지만 당장 실무 코드에 적용하셔도 유지보수 시간이 절반으로 줄어드는 걸 경험하실 수 있을 겁니다!1. SCSS, 왜 써야 할까요?기본적으로 브라우저는 CSS만 읽을 수 있습니다.그럼에도 우리가 SCSS(Sass)를 사용하는 이유는, CSS를 마치 프로그래밍 언어처럼 다룰 수 있게 해주기 때문이에요. 중복되는 코드를 변수로 빼고, 함수를 만들고, 조건문을 써서 스타..