메로그

@mixin, @include 가장 많이 사용되는 기능 중 하나로, 선언 시 @mixin, 적용 시 @include 를 사용합니다. 재사용 함으로써 자원을 줄일 수 있음. $: 변수, @mixin: 함수, @include: 함수 호출 이라고 생각하면 편할 거 같습니다. scss $marginBottom: 30px; $left: left; $solid: 1px solid; @mixin mbottom { margin-bottom: $marginBottom; } @mixin test { width: 100px; height: 100px; border: 1px solid red; } @mixin clear { &:after { content: ""; display: block; clear: both; } } ...

선택자 & 가상 선택자로써, 부모 선택자를 참조 할 수 있음. css 자식 선택자와 동일하게 사용 가능. (ul > li) css 자손 선택자와 동일하게 사용 가능. (li a) last-child 를 이용하여 마지막 요소의 속도를 가져올 수 있음. a { color: red; // &.active == a:active &.active { color: blue; } } scss $red: red; .aa { color: $red; ul { border: 1px solid $red; > li { background: pink; a { text-decoration: none; &:hover { color: $red; } &.bbb { font-size: 11px } } .bbb { color: greenye..

변수 $ 키를 이용하여 원하는 영문 / 영문 + 숫자 / 영문 + 특수문자 + 숫자 / 대소문자 등으로 사용할 수 있습니다. 동일한 컴포넌트 ui 에 동일한 스타일을 유지할 수 있고 전역, 지역 변수로도 사용할 수 있습니다. scss $white: #fff; $gray: #c9c9c9; $blue: blue; $red: red; $fs30: 30px; $s50: 50px; .btn1 { $hoverColor: #555; width: 200px; height: $s50; line-height: $s50; font-size: $fs30; color: $white; background-color: $gray; border: 1px solid $white; &:hover { background: $hoverCo..

Sass(Scss) css 전처리기 입니다. (css 가 동작하기 전에 사용하는 기능, css 확장) 웹에서는 css 만 동작하기 때문에, 전처리기로 작성한 언어를 css 로 컴파일 하여 동작시킵니다. 그러기 때문에 Sass 사용시에는 컴파일러가 필요합니다. 설치 npm install sass -g 컴파일러 여러가지 컴파일러가 있지만, 쉽게 다가갈 수 있는 vscode 에 extensions 로 제공하는 Live Sass Compiler 를 추천합니다. 설치 후, scss 코드 추가 후 Watch Sass 를 클릭하면 css 로 컴파일 해줍니다. Watching 이 돌아가고 있으면 저장시 자동 컴파일을 해줍니다. 설정 Live Sass Compiler 사용시 설정해야할 부분이 있습니다. map 파일을 사..

CSR 컴퓨터의 성능이 좋아지면서 SPA 에서 쓰이는 기법으로, 클라이언트 측에서 모든 것을 하는 거를 의미합니다. 필요한 부분만 렌더링하여 사용자가 원하는 UX 를 반영할 수 있습니다. 서버로부터 어떠한 리소스를 받아 해석하고 화면에 렌더링하는 방식입니다. (서버가 하는 일은 json 만 보내는 것입니다.) 예를 들면, 서버에서 가 들어 있는 index.html 을 보내면, 처음에 접속하면 빈 화면만 보입니다. 이제 그 후, 리액트 라던지, js 라던지 이런 어플리케이션을 구동하는 모든 소스를 가져옵니다. 용량이 크면 클수록 처음에 화면에 로딩되는데 시간이 길어지는 단점이 있고, SEO 에서 사용하기 좋지 않습니다. (SEO 가 좋지 않는 이유는 처음에 body 가 비어 있기 때문에 검색 엔진으로 가져..

원시값 원시값은 객체가 아닌 불변성을 가지고 있는 값들 입니다. 종류 string: String 전역 객체는 문자열(문자의 나열)의 생성자입니다. number: 숫자 값으로 작업할 수 있게 해주는 래퍼(wrapper) 객체입니다 bigint: Number 원시 값이 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. boolean: 불리언 값을 감싸고 있는 객체입니다. symbol: Symbol()로부터 반환되는 모든 심볼 값은 고유합니다. null: 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다. undefined: 값을 할당하지 않은 변수, 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우 종류의 대한 내용은 MDN 을 참고했..