Hangun's World – Blog

블로그

  • Nuxt + Swiper 페이지 이동 시 화면 깨짐

    Nuxt + Swiper에서 페이지 이동 시에 첫번째 슬라이드의 내용이 잠시 노출 되었다가 화면이 전환되는 문제가 발생합니다. 페이지를 벗어날 때 Swiper.destroy()가 자동으로 실행되어 생기는 문제입니다.
    직접 destroy() 함수를 호출할 때는 파라메터로 제어가 가능하지만, 자동으로 실행이 되어 이 방법을 사용할 수는 없네요.

    그럴 때 아래와 같이 delete-instance-on-destroy, cleanup-styles-on-destroy 속성을 추가하면 문제를 해결할 수 있습니다.

    
  ...

  • 문자열을 Date 객체 변환하기

    날자가 “20220630” 또는 “2022.07.09”와 같은 문자열로 되어 있을 때, 이를 Date객체로 변환하면 아래와 같이 유효하지 않은 날자로 인식됩니다.

    new Date("2022.06.05")
new Date("20220605")
// Invalid Date

    그러므로 문자열을 YYYY-MM-DD 형식에 맞게 바꿔줘야 합니다.
    https://tc39.es/ecma262/#sec-date-time-string-format 참조

    아래와 같이 정규식으로 문자열을 문제없이 변환할 수 있습니다.

    new Date("20220605".replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3'))
new Date("2022.06.05".replace(/(\d{4}).(\d{2}).(\d{2})/g, '$1-$2-$3'))
// Date Sun Jun 05 2022 09:00:00 GMT+0900 (대한민국 표준시)

  • SCSS MAP.SET() 에러

    아~~~ 별거 아닌 거 가지고 시간 낭비했네요.
    API 문서에도 제대로 설명이 안되어 있어서… ㅠㅠ

    @use "sass:map";
$fonts:(
    font-size: 1.3rem,
    line-height: 1.8rem
);
map.set($fonts, color, #ccc);

    위와 같이 map.set()을 사용하면 이런 에러가 발생합니다.

    Error: expected "{".

    map.set()은 새로운 맵을 리턴하기 때문에 할당을 해주지 않아서 문법오류가 발생하는 것입니다.
    아래와 같이 변수에 재 할당을 해주면 오류가 해결됩니다.

    @use "sass:map";
$fonts:(
    font-size: 1.3rem,
    line-height: 1.8rem
);
$fonts: map.set($fonts, color, #ccc);

    뭐 어려운 것도 아니고, 이런 걸 만들라고 한건데…

    @use "sass:meta";
@use "sass:map";

$font-style:(
  10 : (font-size:1.0rem, line-height:1.6rem),
  12 : (font-size:1.2rem, line-height:1.8rem),
  14 : (font-size:1.4rem, line-height:2.2rem)
);
@mixin fontStyle($size, $args...){
  $map : map.get($font-style, $size);

  @each $k, $v in meta.keywords($args){
    $map : map.set($map, $k, $v);
  }

  @each $k, $v in $map{
      #{$k} : #{$v};
  }
}

.test10{
    @include fontStyle(10);
}
.test12{
    @include fontStyle(12);
}
.test12-2{
    @include fontStyle(12, $line-height: 2rem);
}
.test14{
    @include fontStyle(14, $line-height: 3rem, $color:#ccc, $font-weight: 700);
}
    .test10 {
  font-size: 1rem;
  line-height: 1.6rem;
}

.test12 {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.test12-2 {
  font-size: 1.2rem;
  line-height: 2rem;
}

.test14 {
  font-size: 1.4rem;
  line-height: 3rem;
  color: #ccc;
  font-weight: 700;
}

  • SCSS 아이콘 스프라이트

    아이콘 등을 이미지 스프라이트로 작업할 때 일일이 좌표를 지정하는 것이 불편하여 일괄로 CSS를 생성하는 코드 입니다.
    아이콘의 클래스 명을 리스트로 등록하고 아이콘의 크기와 한 행에 들어가는 아이콘의 개수를 설정하면 됩니다.
    나중에 아이콘이 추가 또는 삭제되어도 리스트에서 순서만 재조정하면 좌표를 일일이 다시 수정할 필요가 없습니다.

    @use "sass:meta";
@use "sass:list";
@use "sass:math";

$icon-list:(
    'home',     'login', 'logout', 'profile', 'menu',
    'category', 'brand', 'search', 'more',    'empty',
    'left',     'right', 'up',     'down',    'cross',
    'prev',     'next',  'close'
);
$size: 25px;
$col: 5;

.my-icon{
    display: inline-block;
    width: $size;
    height: $size;
    background:url(my-icon.svg) no-repeat 0 0;
    background-size:$size * $col auto;
    @each $icon in $icon-list{
        $i: index($icon-list, $icon) -  1;
        $x: ($i % $col) * -$size;
        $y: math.floor($i / $col) * -$size;
        &.#{$icon}{background-position:#{$x $y};}
    }
}

    .my-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(my-icon.svg) no-repeat 0 0;
  background-size: 125px auto;
}
.my-icon.home {
  background-position: 0px 0px;
}
.my-icon.login {
  background-position: -25px 0px;
}
.my-icon.logout {
  background-position: -50px 0px;
}
.my-icon.profile {
  background-position: -75px 0px;
}
.my-icon.menu {
  background-position: -100px 0px;
}
.my-icon.category {
  background-position: 0px -25px;
}
.my-icon.brand {
  background-position: -25px -25px;
}
.my-icon.search {
  background-position: -50px -25px;
}
.my-icon.more {
  background-position: -75px -25px;
}
.my-icon.empty {
  background-position: -100px -25px;
}
.my-icon.left {
  background-position: 0px -50px;
}
.my-icon.right {
  background-position: -25px -50px;
}
.my-icon.up {
  background-position: -50px -50px;
}
.my-icon.down {
  background-position: -75px -50px;
}
.my-icon.cross {
  background-position: -100px -50px;
}
.my-icon.prev {
  background-position: 0px -75px;
}
.my-icon.next {
  background-position: -25px -75px;
}
.my-icon.close {
  background-position: -50px -75px;
}

  • Sass에서 다크모드 적용하기 3

    미디어 쿼리나 변수를 사용할 수 없어서 클래스로 구분을 해야 하는 경우에 사용할 수 있는 코드입니다.

    @use "sass:meta";
@use "sass:list";

$color-theme: (
    bg-color: (#fff, #333),
    txt-color: #000 #efefef,
    brd-color: #666
);
 
@mixin getColor($flag, $p, $n){
    @each $k, $v in $color-theme{
        @if($k == $n){
            @if(meta.type-of($v) == "list"){
                @if($flag == dark){
                    #{$p}: #{list.nth($v, 2)};
                }@else{
                    #{$p}: #{list.nth($v, 1)};
                }
            }@else{
                #{$p}: #{$v};
            }
        }
    }
}

@mixin parseList($flag, $pp...){
    $p: nth($pp, 1);
    @for $i from 1 through length($p){
        @if($i % 2 == 1){
            @include getColor($flag, #{nth($p, $i)}, #{nth($p, $i + 1)});
        }
    }
}

@mixin darkmode($path, $p...){
    @include parseList(light, $p);
    @at-root .darkmode #{$path}{
        @include parseList(dark, $p);
    }
}

.test .test2{
    margin:0 10px;
    border:1px solid;
    @include darkmode(&, color, txt-color, background-color, bg-color, border-color, brd-color);
}
    .test .test2 {
  margin: 0 10px;
  border: 1px solid;
  color: #000;
  background-color: #fff;
  border-color: #666;
}
.darkmode .test .test2 {
  color: #efefef;
  background-color: #333;
  border-color: #666;
}