🎄 성장일지 3.2

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0)<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 경험 위주로 (2.0)<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ 정해진 템플릿에 맞춰서 (3.0)<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1) 230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2) 230313부터 좀더 경험, 감정 위주의 내용도 담기!

🔑 오늘의 키워드

CSS 전처리기(CSS Preprocessor)

• 전처리기만의 문법을 더한 CSS 머듈 정도로 생각하면 된다.
• CSS가 갖는 불리한 점들을 보완하기 위함이며 대부분 CSS를 프로그래밍 언어처럼 사용할 수 있게 해준다.(변수, 함수, 조건문 등)
• 결국 CSS에 대한 슈퍼셋(확장셋)이기 떄문에 CSS로 컴파일되어야만 한다.

Sass/Scss

• Sass의 버전 3부터 CSS와 좀더 가까운 문법인 Scss가 등장

Scss 변수 선언 방법

$jayden-color: #111111;

.button {
	background-color: $jayden-color;
}

// CSS
.container {
  margin-top: 10px;
}

.container .item {
  padding: 10px;
}

// Sass
.container {
  margin-top: 10px;

  .item {
    padding: 10px;
  }
}

@mixin

• css에서의 함수라고 생각하면 된다. 변수도 $로 만들어서 전달할 수 있다.

@mixin jayden-styles($flexDirection: row, $backgroundColor: #000000) {
	display: flex;
	flex-direction: $flexDirection;
	justify-content: space-between;
	align-items: center;
	background-color: $backgroundColor;
} 

.jayden-box {
	@include jayden-styles(column, #ffffff);
}

@extend

• 타입스크립트의 클래스 상속과 같은 기능. 그러나 css media-query 내에서 실행되지 않으며 Sass 가이드라인에서도 사용을 권장하지 않는다.

.a {
	padding: 1rem;
}

.b {
	@extend .a;
	background-color: tomato;
}

@import

• 외부에 모듈화해서 분리해 놓은 Sass 파일을 불러와 병합하여 사용가능하다.(js의 모듈처럼)

CSS @import는 사용할 때마다 매번 http 호출을 하기 때문에 속도 저하를 가져온다. 그러나 Sass @import는 CSS로 컴파일하여 바로 처리하기 때문에 http 호출이 필요하지 않아 속도 저하 문제를 발생시키지 않는다.

@import 사용 팁

1. 보통 변수와 @mixin은 따로 Sass 모듈 파일로 만들고 @import하여 사용한다.

• 이 때, 파일명 앞에 _를 붙이면 CSS로 컴파일 되지 않는다.
• 예를 들어 _mixin.scss, _header.scss 파일명을 만들고, 주 파일에서 @import 하면 2개(_mixin.scss, _header.scss)의 파일 내용은 주 파일에 적용되지만 _mixin.scss, _header.scss 파일은 css로 컴파일 되지 않기 때문에 관리하기가 편리해진다.

2. 하나의 @import로 여러 파일을 불러올 수 있다.

• 이 때, 파일명으로만 @import해도 알아서 확장자는 .scss인 것을 알기 때문에 안붙여도 된다.(주의: css 파일은 @import 시 .css를 붙여줘야 한다.)

@import '_aaa', '_bbb';

참고

• Sass, Scss

📝 요약 및 하루 간단 회고

오늘은 Sass와 웹 애니메이션에 대한 개념 공부 ,기존 진행 중이던 미션 TS / Vanilla Extrack으로 전환하기 그리고 새로 시작한 알고리즘 스터디 문제 풀기를 완료했다! Sass는 내가 생각한 것보다 훨씬 더 다양한 기능들이 있어서 놀랐다. 한편 애니메이션 파트는 transition을 잘 이해하고 있느냐가 중요한 핵심 같다. 또한 애니메이션 관련하여 실질직으로 브라우저가 우리의 코드를 어떻게 화면으로 그리는지 깊게 아는 게 중요하다고 생각한다!

오늘 새로 시작한 알고리즘 스터디..! 정말 몸이 2개였으면 싶을 정도로 바쁘게 지내고 있다..! 그래도 이런 바쁜 삶 속에서 잠깐의 여유를 찾고 가끔은 바쁘게 지내는 것의 묘미를 느끼면서 살아가자!

오늘의 잘한 점

• 알고리즘 스터디 시작한 점
• 아침에 파워 냅하고 출근한 점
• 이번주 학습 계획을 알차게 짠 점

오늘의 아쉬운 점

• 원래 마무리하고자 했던 강의를 못들은 점
• 점심시간에 책 안읽고 딴짓한 것..?

undefined