🎆 오늘 한 것
- 백준 1문제 풀이
- deep dive 정규표현식 읽기
- sass 공부
- 리액트 강의 정말 조금ㅎㅎ;
🙄 오늘 하려고 했는데 못한 것
- 알고리즘 강의 분할과 정복 패턴
- 리액트 강의 최대한
✨ Sass(Dart Sass)
🎇 설치
npm install -g sass
yarn add sass-g는 붙여도 되고 안 붙여도 되는데 웬만하면 프로젝트 빌드 때 개별적으로만 설치해주는 걸 권장
📌 package.json 세팅
{
"dependencies": {},
"devDependencies": {
"sass": "^1.57.1",
"yarn-run-all": "^3.1.1"
},
"scripts": {
"start": "run-p serve watch",
"serve": "live-server --host=localhost --port=5000 --no-browser",
"compile": "sass scss:assets/css",
"watch": "npm run compile -- --watch"
}
}yarn으로 인스톨했기 때문에 yarn으로 다 통일 시키고 싶었는데, watch 부분의 "npm run compile -- --watch"은 어떻게 수정해야 되는지 모르겠다ㅠ
여튼 이렇게 세팅하고 터미널에 yarn start를 치면 라이브 서버가 켜짐
🎇 변수
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
line-height: 1.5;
background-color: #333;
}$를 붙이고 변수명을 짓고, 그에 해당하는 값을 넣고 사용.
🎇 중첩
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
.button {
svg {
pointer-events: none;
}
&:disabled {
cursor: not-allowed;
}
}🎇 모듈
Sass는 css를 조각조각내서 작은 단위로 쓸 수 있게 하는데에 매우 효과적임. 컴포넌트화라고 해야되나? 아무튼 리액트에서 컴포넌트 잘게 나눠놓고 조립하는 거랑 비슷함.
참고로 파일명 앞에 _를 붙이면 css로 변환하지 않는다.
src/sass/
├── modules/
│ ├── _config.sass
│ ├── _functions.scss
│ └── _mixins.sass
├── pages/
│ ├── home.scss
│ └── products.scss
└── common.scss❓ 변환하지 않으면 어케 컴파일함?
위의 디렉토리 예시로
// modules/_config.sass
$spacing-1: 4px
$spacing-2: 8px
$primary-400: hsl(250, 75%, 60%)
$primary-500: hsl(250, 75%, 50%)언더스코어를 붙인 모듈에 해당되는 scss파일을
// home.scss
@use 'modules/config';
.container {
margin-top: config.$spacing-2;
color: config.$primary-500;
}써먹어야 되는 scss 파일에 @use 'modules/config'로 임포트 해온다.
객체처럼 .을 쓰면 그 모듈 안의 변수를 쓸 수 있음
as를 쓰면 다른 이름으로도 사용 가능(css 모듈 불러올 때 import {이름} from '경로' 쓰는 것처럼)
as에 *을 쓰면 점 문법 안 쓰고도 변수를 불러올 수 있음
@use 'modules/config' as *;
.container {
margin-top: $spacing-2;
color: $primary-500;
}🎇 모듈 내보내기(forward)
앱 규모가 커지고 복잡해질 때 관심사 별 엔트리 파일을 만들어 관리하는 방법
// sass/modules/_index.scss
@forward 'config';
@forward 'base';
@forward 'colors';
@forward 'layout';
@forward 'typography';
@forward 'spacing';
// forward 인식을 못하넹// common.scss
@use 'modules' as *;
.container {
margin-top: $spacing-2;
color: $primary-500;
}모듈을 각각 작성 후 그것을 하나로 묶는 파일을 만들고, @forward로 불러옴. 그리고 그 묶음 파일을 common.scss에 @use를 사용해 불러옴
🎇 믹스인(mixins)
코드 재사용을 용이하게 해주는 기능
modules/_mixins.scss
@mixin resetList() {
margin: 0;
padding: 0;
list-style: none;
}
@mixin resetTable() {
border-collapse: collapse;
border-spacing: 0;
caption {
@include a11yHidden();
}
}
@mixin a11yHidden() {
overflow: hidden;
position: absolute;
clip: rect(0,0,0,0);
clip-path: circle(0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
}js 함수랑 오브젝트가 섞인 것 같은 모양...
@mixin으로 만들고 적용 시킬 파일에서
// public/css/common.css
@use 'modules' as *;
.nav {
ul {
@include resetList();
}
}
.content {
.headline {
@include a11yHidden();
}
}
.table {
@include resetTable();
}@include 를 사용해 불러오면 된다.
📌 매개변수를 활용해 믹스인 재사용성 높이기
// modules/_mixins.scss
@mixin makeA11yHidden($selector) {
#{$selector} {
@include a11yHidden();
}
}
// #{} 텍스트를 합치는데 사용하는 문법@use 'modules' as *;
@include makeA11yHidden('.table caption');
@include makeA11yHidden('.content .headline');.table caption선택자에 a11yHidden()이 적용된 것을 볼 수 있음
🎆 내일 할 것
- 리액트 강의 최대한
- 알고리즘 강의 분할과 정복 패턴
- deepdive 32장
- 백준 1문제 풀이
📌 언젠가 해야되는 todo
- preload / modulepreload / prefetch 공부... 언제하지?
- deep dive 19장 프로토 타입
- deep dive 25장 클래스
- 테일윈드 다크모드 공부
- 사이트 하나 잡고 리액트(Sass나 tailwind)로 클론 코딩(+다크모드까지)
- Sass 공부...
📚 이번 주 개인 목표
- 리액트 SPA 섹션 보기
- 알고리즘 강의 문제 해결, 시간 남으면 선택 어쩌고 문제 풀어보기
- 매일 백준이나 프로그래머스 알고리즘 풀이 1개
- deep dive 27장 배열 ✅
- deep dive 28장 number ✅
- deep dive 29장 Math ✅
- 포폴 페이지나 포폴에 넣을 개인 프로젝트에 대한 고민... ✅
📝 오늘의 일기
할 거 점점 늘어나는데 어쩌냐...? 그래도 해야지...
