ALL
React에서 Sass 사용하는 방법
리액트 설치 후 경로에서 node-sass 설치 $ yarn add node-sass 해당 라이브러리는 sass로 작성된 코드를 css로 변환해줍니다 src 폴더에 components 폴더 생성 Button.js 파일 생성 import React from "react"; function Button() { return ; } export default Button; 추가 임포트 import './Button.scss'; div 요소 button으로 바꾸기 return Button 내부에 children 추가하고 랜더링 function Button({ children }) { return {children}; } className 설정 {children}; components 폴더에 Button.scss ..
SASS - @if
조건문을 이용해서 각각 article 값을 바꿔보겠습니다 현재 남아 있는 코드 중 기본값만 냅두고 다 지우겠습니다 @charset "UTF-8"; @import "reset"; @import "mixin"; $bgBody: #eee; $bgItem: #fff; $colorH2: aqua; $interval: 0.2s; body { background: $bgBody; } .wrap { width: 100%; border: 2px solid #bbb; padding: 100px; display: flex; justify-content: center; perspective: 600px; .item { width: 300px; padding: 30px; background: $bgItem; margin: 50..
SASS - @each
@for문 보다 좀 더 다양하고 기능 범용성이 있는 @each에 대해 알아보겠습니다 @for문은 반복문이 간결하고 쉽지만 숫자만 반복됩니다 &:nth-of-type(1) { a { @include button($bg: pink); } } &:nth-of-type(2) { a { @include button($bg: aqua); } } &:nth-of-type(3) { a { @include button($bg: orange); } } &:nth-of-type(4) { a { @include button($bg: lightgreen); } } 여기 값을 보면 각각 컬러값이 다르고 순서값으로 활용하기 애매합니다 하지만 @each로 처리가 가능합니다 먼저 서로 리스트가 다른걸 그룹화 시킬 수 있습니다 styl..
SASS - @for 반복문 사용법
반복문을 이용해서 마우스를 올렸을 때 부드럽게 시간차가 발생하며 아래에서 위로 올라오는 모션을 만들어보겠습니다 먼저 만약에 아래 코드 괄호에 아무런 값이 들어가 있지않으면 에러가 발생합니다 &:nth-of-type(1) a { @include button(); } 그러므로 기본값으로 대체할 곳이 필요한데 이때 mixin 함수에 기본값을 적용해놓습니다 @mixin button($wid: 100px 이렇게 되면 괄호에 아무것도 적지 않더라도 기본적으로 button은 100px을 가지고 있습니다 추가적으로 $bg도 넣어줍니다 그렇다면 background도 인수 값으로 변경합니다 @mixin button($wid: 100px, $bg: gray) { display: block; width: $wid; heigh..
SASS - mixin
자주 만드는 UI 컴포넌트가 있다면 해당 기능을 빠르게 만들어 줄 수 있는 기능이 mixin입니다 외부파일에서 작성해서 import로 불러오겠습니다 SCSS 폴더 내에 _mixin.scss 파일 생성 보통 아래 코드를 보면 boder-radius, color, 위치값 등 자주 쓰는 값을 하나하나 쓰는게 꽤 비효율적입니다 a { display: block; width: 100px; height: 40px; border-radius: 20px; background: gray; font-size: 12px; color: #fff; display: flex; justify-content: center; align-items: center; } 공통적인 UI를 mixin을 통해 바꾸도록 합시다 JavaScript..
SASS - 변수
코드마다 하나하나 색상이 있는 값을 찾아서 컬러값에 지정해야했습니다 많이 바뀌는 코드값을 변수로 지정해서 편리하게 값을 변경할 수 있습니다 Scss에서 변수를 만들 땐 " $ " 표시를 합니다 $bgbody에 #eee라는 컬러값이 들어가 있는 셈입니다 $bgBody: #eee; 해당 변수를 body에 백그라운드에 넣을 수 있습니다 $bgBody: #eee; body { background: $bgBody; } css에서 확인해보면 #eee로 들어가있는걸 확인할 수 있습니다
화살표 함수
기존에는 fuction을 사용해 문법을 작성했었습니다 하지만 좀 더 편리하게 화살표 함수라는걸 사용해서 문법을 만들 수 있는데요 기본적으로 화살표 함수는 " => " 이렇게 화살표 모양으로 사용합니다 기존에 만들어봤던 a + b 함수를 만들어보겠습니다 function add (a, b) { return a + b; } const sum = add(1, 2); console.log(sum) 화살표 함수로 바꿔보겠습니다 const add = (a, b) => { return a + b; } const sum = add(1, 2); console.log(sum); 기존 template literal도 만들어보겠습니다 function hello(name) { console.log(`Hello,${name}!`)..
Template Literal
function hello(name) { console.log("Hello," + name + "!"); } hello("두비_"); 결과값 JavaScript ES6 문법에선 문자열을 조합하기 쉽게 " + " 플러스를 사용합니다 ES6 문법 중 하나인 Template Literal를 사용해보겠습니다 console.log("Hello," + name + "!"); 여기서 괄호 안에 내용만 지워줍니다 문자열을 써볼껀데 기본적으로 백틱을 사용합니다 console.log(`Hello`); 이제 파라미터로 받아온 name 값을 넣어줘야합니다 name을 넣을 땐 달러표시인 $ 이 단축키를 사용합니다 function hello(name) { console.log(`Hello ${name}!`); //파라미터 값 넣..