프로그래머스 프론트엔드 데브 코스 프론트엔드 과정의 기록입니다.
9월 15일 (수)
📚 TIL
SCSS 심화 학습
📮 Feelings
SCSS 심화 학습
개요
CSS 전처리기들에 대하여 알아보았고 그 중 에서 Sass(SCSS)에 대한 기본 개념과 등장 배경에 대해 학습할 수 있었다.
추가로 Webpack으로 CSS 전처리 문법들을 다루는 방법에 대하여 공부하고 싶어졌다.
주석, 중첩
SCSS에서 주석의 사용법과 중첩을 통해 CSS에서 여러 선택자의 반복에 대한 불편함을 개선할 수 있는점에 대하여 배울 수 있었고 편리함을 느낄 수 있었고 왜 사용자들이 선호하는지도 이해할 수 있게 된 것 같다.
변수, 데이터, 연산자
SCSS에서 변수와 여러 타입의 데이터 그리고 다양한 연산자들에 대한 기초 사용법에 대하여 학습할 수 있었다.
학습하면서 느낀점이 JavaScript에서 사용되는 기능들이 많았고 이 덕에 개념의 이해는 금방 할 수 있었고 다만 사용하는 문법에 대한 차이가 존재했기에 문법에 대한 암기가 필요함을 느끼게 되었다.
재활용
JavaScript에서 함수와 비슷한 재활용이 가능한 문법인 SCSS의 @mixin 문법에 대해서 학습할 수 있었다.
@mixin을 선언하고 선언된 @mixin을 각각의 선택자에서 호출하는 방식이 JavaScript에서 함수의 기능들과 굉장히 사용법이 유사하다고 느꼈습니다.
여러 규칙들을 활용한 다양한 재활용 기법에 대해서 학습하며 CSS의 고도화 작업이 가능함을 느낄 수 있었음과 동시에 편리함 역시 느낄 수 있었다.
확장
재활용에서 사용했던 @mixin과 상당히 비슷한 기능을 제공하는 @extend에 대해 학습할 수 있었다.
하지만 @mixin 보다 여러 상황에서의 부작용이 존재하여 사용을 지양해야 한다는 부분을 학습하며 이러한 문법이 존재한다는 정도의 학습을 하게 되었다.
함수
SCSS에서 @mixin이 함수의 역할을 대신하는 줄 알았는데 아니였다.
함수의 사용법에 대해 학습하며 유사한 기능의 @mixin과의 차이점을 학습할 수 있었습니다.
차이점은 @mixin은 지정한 스타일을 반환하고 함수는 연산된 특정 값을 @return을 활용하여 반환한다는 점입니다.
그리고 사용자 지정 함수의 네이밍에서 별도의 접두어를 활용하여 SCSS의 내장 함수들과의 이름 충돌이 발생하지 않도록 주의해야하는 점을 배울 수 있었습니다.
조건과 반복
이 부분 역시 JavaScript에 존재하는 다양한 조건문과 반복문에 대한 개념과 유사하여 이해하는데 어려움을 겪지 않았습니다.
다만 마찬가지로 문법의 세세함에서의 차이가 존재하기에 사용법에 익숙해질 때 까지 꾸준히 사용해보아야 한다는 필요성을 느끼게 되었습니다.
import와 모듈
JavaScript에서 import 개념과 유사한 SCSS에서의 @import, @use, @forward 문법에 대하여 학습할 수 있었습니다.
웹 브라우저에서 SCSS파일을 읽도록 하면 개발자가 의도한 기능이 이루어지지 않으므로 이에 대한 주의점에 대하여 중요하게 인지하며 공부하게 되었습니다.
js파일들과는 다른 스타일 시트의 가져오기/내보내기에 해당되는 개념이 익숙하지 않다면 충분히 오류를 범할 수 있겠다라는 생각이 들었고 @use와 @forward에 대하여 네임스페이스 지정 역시 꼼꼼히 공부한 내용에 대한 복습의 필요성을 느끼게 되었습니다.
내장 모듈
SCSS에서 기본적으로 제공해주는 다양한 내장 모듈 중에서 Color, List, Map, Meta, Meta, String 모듈에 대하여 학습하였다.
개념들에 대하여 이해하기 힘든 부분은 없었고 역시나 CSS에서 이러한 고도화 작업이 가능함에 대해서 편리함을 느낄 수 있었습니다.
마치며 🙏
오늘은 SCSS의 심화 내용에 대해서 학습을 하였습니다.
그동안 CSS에 대한 개발을 진행하면서 상당히 불편했었던 점에 대한 갈증이 한 순간에 해소되는 듯한 느낌이 들었습니다.
JavaScript에서 이미 많이 학습한 익숙한 개념들에 대한 고도화 작업이 CSS에서도 가능하다라는 점을 계속해서 생각하게 될 정도로 다양한 기능들이 존재함을 배울 수 있었습니다.
오늘은 SCSS의 CSS 컴파일 과정을 다루기에 SassMeister와 node의 sass를 통해 다루어 보았는데 웹 애플리케이션 번들러인 Webpack을 활용하여 SCSS의 CSS 컴파일 과정을 다루는 방법에 대해 학습해보고 싶어졌습니다.
📅 Future Action Plans
-
Vue.js 기초 학습하기
-
Youtube 메인 레이아웃 CSS 클론 프로젝트 진행하기
