이것저것 | Feed

webpack에서 dart-sass사용하기

Sun, 25 Oct 2020 00:00:00 GMT

개요

sass-loader에서 추후 버전에서 node-sass를 deprecated를 하고 dart-sass만을 지원할 것이라는 소식을 들었다. 또한, sass의 @use, @forward같은 문법을 사용하기 위해 적용해보았다.

적용하기

현재, webpack4에 node-sass기반의 sass-loader를 사용하고 있다는 것을 가정하고 진행한다.

sass 설치

fibers의 경우 render()사용 시 비동기 로딩(renderSync())의 성능만큼 향상시키기 위해서 사용한다.
```
npm i -D sass fibers
```

webpack config 수정

아래 코드의 경우 webpack 공식 홈페이지에 존재한다.(공식 사이트)

module.exports = {
module: {
    rules: [
    {
        test: /\.s[ac]ss$/i,
        use: [
        'style-loader',
        'css-loader',
        {
            loader: 'sass-loader',
            options: {
                implementation: require('sass'), //dart-sass 적용
                sassOptions: {
                    fiber: require('fibers'), //fibers 적용
                },
            },
        },
        ],
    },
    ],
},
};

결론

dart-sass의 경우 간단하게 sass를 설치하고 webpack의 설정에서 sass-loader의 옵션에 추가해주기만 하면 심플하게 사용 가능하다.
이렇게 적용을 하였다면, 기존에 sass의 @import만 사용하던 시절에서 벗어나 @use, @forward를 사용할 수 있을 것이다.
마지막으로 @use나 @forward같은 dart-sass를 사용하는*.scss파일을 배포하게 된다면 사용하는 측에서 dart-sass를 사용하지 않는다면 에러가 발생한다.

Scss변수 → css변수로 build하기

Tue, 20 Oct 2020 00:00:00 GMT

Scss변수 → css변수로 build하기

개요

사내 프로젝트에서 style의 경우 scss를 사용하여 개발을 진행하고 있었는데, style만을 사용자에게 제공해야하는 경우가 생겼다. 기존의 방식은 *.umd.js파일로 통합되어 배포되고 있는 부분에 추가적으로 style을 배포해야하는데, scss변수를 css변수로 전환하는 부분에서 삽질을 많이하여, 도움이 되고자 기록을 남긴다.

해결 과정

우선, 프로젝트에서는 webpack을 사용해 bundle을 하고 있기 때문에 loader에서 변수를 convert해주는 부분이 존재하는지 찾아보았다.

~~webpack loader 유/무~~
- scss-loader를 사용하고 있는데, 옵션으로 제공되는 부분을 서칭 → 미제공
- 추가적인 loader를 검색. sass-resources-loader를 찾았으나, css변수로 변환 X
~~수동으로 parsing 후 file 생성~~
- loader가 없을 시 수동으로 parsing을 해야겠다고 생각하였고, 특정 *.scss를 node에서 읽어와서 parsing하여 *.css file을 생성하도록 구현하였다.
- 이렇게 적용하던 중, 다른 프로젝트를 염탐하다가 build로 css 변수로 전환하는 프로젝트를 발견해서 이를 분석하기 시작했다.(material-design)
*.scss에 css문법으로 정의한 파일추가
- *.scss파일에서 아래와 같이 css문법으로 정의하여 build에 포함
```
@import "color.scss"; //sass 변수가 정의된 file

:root {
  --primary100: #{$primary100};
};
```
- 위와 같이 css문법으로 정의한 file을 생성 후, webpack config파일의 entry에 포함 후 build를 하였더니 수동 parsing보다 깔끔하게 해결되었다!

결론

*.scss에 css문법으로 정의한 파일추가 할 것

*.scss파일을 생성 후 import한 scss변수를 정의한 css변수에 할당(관련 sass공식사이트)

@import "color.scss"; //scss 변수가 정의된 file

:root {
  --primary100: #{$primary100};
};

webpack config파일의 entry에 포함

module.exports = {
  entry: {
    foo: ["src/index.ts", "styles/variable.scss"],
  },
  ...
}

기타 팁

Webpack bundle시 css file 생성하는 법

MiniCssExtractPlugin 플러그인을 사용 (설정방법)

webpack에 아래와 같이 가장 최상위에 플러그인을 위치

module: {
rules: [
  {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  },
],
}

Webpack dart-sass설정

sass에서 @use, @forward, ... 등 여러 문법 등을 사용하기 위해서는 node-sass가 아닌 dart-sass를 사용해야하며, 추후 sass-loader의 경우 dart-sass만 지원을 하기로 예정되어있으므로 dart-sass사용은 필수가 되었다.

dart-sass 설치
```
npm i -D sass
```

webpack config 설정(공식사이트)

module.exports = {
module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'), // <- 이 부분을 추가하면 된다.
          },
        },
      ],
    },
  ],
},
};

dart-sass를 통해 작성된 *.scss파일의 경우 사용하는 측에서도 dart-sass를 지원해야 사용 가능하다.

sass map을 사용하여 css변수 정의를 편하게 하기

css변수로 변경 시 변수를 일일이 입력하는 하드코딩이 필요하다.

이러한 부분을 간결화하고 추후 입력을 안해도 되도록 sass map을 사용하여, 구현하자

//variable.scss
$colors: () !default;
$colors: map-merge (
  (
    "yellow100": (
      "light": yellow,
      "dark": yellow,
    ),
    "yellow200": (
      "light": yellow,
      "dark": yellow,
    ),
    ...
  ),
  $colors
);

//css-variable.scss
@use "variable";

:root {
  @each $name, $map in variable.$colors {
    @each $mode, $color in $map {
      --#{$mode}-#{$name}: #{$color};
    }
  }
};

위와 같이 구현 시의 장점은 css변수로 변환하는 부분에 대해서 더 이상 신경쓰지 않아도 된다는 점이다. 또한, scss변수를 map으로 관리함으로써 가독성 또한, 명확해 진다.

두 개 뽑아서 더하기(javascript)

Fri, 02 Oct 2020 00:00:00 GMT

[월간 코드 챌린지 시즌1] 두 개 뽑아서 더하기

javascript

조건

정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.

제한사항

numbers의 길이는 2 이상 100 이하입니다.

numbers의 모든 수는 0 이상 100 이하입니다.

입출력 예

numbers return

[2,1,3,4,1] [2,3,4,5,6,7]

[5,0,2,7] [2,5,7,9,12]

numbers	return
[2,1,3,4,1]	[2,3,4,5,6,7]
[5,0,2,7]	[2,5,7,9,12]

코드

function solution(numbers) {
  const answer = [];
  const len = numbers.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = i + 1; j < len; j++) {
      const sum = numbers[i] + numbers[j];
      if (!answer.some(value => value === sum)) {
        answer.push(sum);
      }
    }
  }
  return answer.sort((a, b) => a - b);
}

출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges

GitHub Action에서 API Key값 설정하기

Mon, 03 Aug 2020 00:00:00 GMT

GitHub Action에서 API Key값 설정하기

문제

프로젝트 개발 시 .env파일에 Server 주소, API key를 설정하여 사용하고 있었다. 해당 값들의 경우 Github 저장소에 공개되면 안되므로 해당 부분을 GitHub저장소에 올릴 수가 없었으며, 이에 대책으로 GitHub Secrets에 저장하여 변수로 사용하고자 하였다.

방안

Secrets에 저장한 프로젝트의 경우 GitHub Action을 사용하고 있었으며, 해당 프로세스의 경우 리눅스 기반환경으로 shell이 수행되고 있었다. GitHub에 저장된 Key-Value를 secrets.[Key이름]문법으로 제공해주고 있었으며, 이러한 값을 사용하여 .env파일에 Server주소, API key값을 동적으로 설정하고자 하였다.

환경변수의 값 비공개화
- GitHub의 Secrets를 사용
.env파일에 동적으로 환경변수의 값을 설정
- 리눅스 명령어 sed를 사용

해결

아래와 같이 GitHub Action에서 저장소에 저장된 Secrets 값을 가져온다.

SERVER: ${{ secrets.REACT_APP_SERVER }}

이렇게 가져온 값의 경우 GitHub Action이 수행되는 동안 전역변수와 같이 사용되게 된다. 이렇게 가져온 값에 대하여 sed명령어를 사용하여 특정 줄에서 정규식을 통해 찾은 단어 뒤에 Secrets에서 가져온 값을 삽입한다.

💡리눅스(mac)에서는 /가 정상적으로 동작하나, GitHub Action에서의 ubuntu 환경에서는 /가 인식이 되지않아 #으로 대체하여 사용해야 했다. (#과 /는 리눅스에서 동일한 의미를 가진다.)

- name: set .env.* file
    run: |
        sed -i "1s#=#&$SERVER#" .env.production
        sed -i "2s#=#&$NAVER_MAP_KEY#" .env.production
        sed -i "1s#=#&$SERVER#" .env.development
        sed -i "2s#=#&$NAVER_MAP_KEY#" .env.development

위와 같이 수행 시 숫자에 해당하는 줄에서 =을 찾아서 해당 단어 뒤에 Secrets에서 가져온 값을 Insert하라는 의미이다.

결론

.env환경변수의 값에 대해서는 비공개를 해야하므로, 사용하는 CI/CD환경에 해당 값들을 비공개로 저장한다.
동적으로 넣을 시 리눅스 환경에서는 sed를 사용하여 값을 파일에 설정 할 수 있다.

Beautiful Triplets(javascript)

Tue, 09 Jun 2020 00:00:00 GMT

Beautiful Triplets

javascript

Input Format

변수	값
d	3원소의 각 차이 값
arr	1차원 number 배열

입출력 예

d s return

3 [1, 2, 4, 5, 7, 8, 10] 3

d	s	return
3	[1, 2, 4, 5, 7, 8, 10]	3

코드

function beautifulTriplets(d, arr) {
  let ret = 0;
  for (let i = 0; i < arr.length - 2; i++) {
    const num = arr[i];
    if (arr.some(value => value === num + d) && arr.some(value => value === num + d * 2)) {
      ret++;
    }
  }
  return ret;
}

출처: hackerrank Algorithms, https://www.hackerrank.com/

Minimum Distances(javascript)

Mon, 08 Jun 2020 00:00:00 GMT

Minimum Distances

javascript

Input Format

변수	값
a	1차원 number 배열

입출력 예

a return

[7, 1, 3, 4, 1, 7] 3

a	return
[7, 1, 3, 4, 1, 7]	3

코드

function minimumDistances(a) {
  const len = a.length;
  let stack = [];

  for (let i = 0; i < len; i++) {
    const f = a[i];
    const s = a.indexOf(f, i + 1);
    if (s !== -1) {
      stack.push(Math.abs(i - s));
    }
  }

  return stack.length ? Math.min(...stack) : -1;
}

출처: hackerrank Algorithms, https://www.hackerrank.com/

종이접기(javascript)

Sun, 07 Jun 2020 00:00:00 GMT

[Summer/Winter Coding(2019)] 종이접기

javascript

조건

직사각형 종이를 n번 접으려고 합니다. 이때, 항상 오른쪽 절반을 왼쪽으로 접어 나갑니다.

제한사항

종이를 접는 횟수 n은 1 이상 20 이하의 자연수입니다.

종이를 접었다 편 후 생긴 굴곡이 ∨ 모양이면 0, ∧ 모양이면 1로 나타냅니다.

가장 왼쪽의 굴곡 모양부터 순서대로 배열에 담아 return 해주세요.

입출력 예

n result

1 [0]

2 [0, 0, 1]

3 [0, 0, 1, 0, 0, 1, 1]

n	result
1	[0]
2	[0, 0, 1]
3	[0, 0, 1, 0, 0, 1, 1]

코드

function solution(n) {
  let answer = [0];

  for (let i = 1; i < n; i++) {
    const reverse = answer.map(value => value ^ 1).reverse();
    answer.push(0);
    for (let num of reverse) {
      answer.push(num);
    }
  }
  return answer;
}

출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges

Equalize the Array(javascript)

Sat, 06 Jun 2020 00:00:00 GMT

Equalize the Array

javascript

Input Format

변수	값
arr	number array

입출력 예

arr return

[3, 3, 2, 1, 3] 2

arr	return
[3, 3, 2, 1, 3]	2

코드

function equalizeArray(arr) {
  const len = arr.length;
  const stack = {};
  let ret = len;
  ƒ;

  for (let i = 0; i < len; i++) {
    const num = arr[i];
    if (!stack[num]) stack[num] = 1;
    else stack[num] += 1;
  }

  for (let [key, value] of Object.entries(stack)) {
    if (len - value < ret) ret = len - value;
  }

  return ret;
}

출처: hackerrank Algorithms, https://www.hackerrank.com/

n진수 게임(javascript)

Thu, 04 Jun 2020 00:00:00 GMT

[3차] n진수 게임

javascript

조건

튜브가 말해야 하는 숫자 t개를 공백 없이 차례대로 나타낸 문자열. 단, 10~15는 각각 대문자 A~F로 출력한다.

제한사항

유사도 값은 0에서 1 사이의 실수이므로, 이를 다루기 쉽도록 65536을 곱한 후에 소수점 아래를 버리고 정수부만 출력한다.

입출력 예

n t m p result

2 4 2 1 "0111"

16 16 2 1 "02468ACE11111111"

16 16 2 2 "13579BDF01234567"

n	t	m	p	result
2	4	2	1	"0111"
16	16	2	1	"02468ACE11111111"
16	16	2	2	"13579BDF01234567"

코드

function solution(n, t, m, p) {
  let answer = '';
  let stack = '';

  let num = 0;
  while (stack.length < t * m) {
    stack += Number(num)
      .toString(n)
      .toUpperCase();
    num++;
  }

  //p, p+m, p+m+m... => (p-1)+(i*m) 스택에서 꺼내는 index
  for (let i = 0; i < t; i++) {
    answer += stack.charAt(p - 1 + i * m);
  }

  return answer;
}

출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges

뉴스 클러스터링(javascript)

Wed, 03 Jun 2020 00:00:00 GMT

javascript

조건

입력으로는 str1과 str2의 두 문자열이 들어온다. 각 문자열의 길이는 2 이상, 1,000 이하이다.

입력으로 들어온 문자열은 두 글자씩 끊어서 다중집합의 원소로 만든다. 이때 영문자로 된 글자 쌍만 유효하고, 기타 공백이나 숫자, 특수 문자가 들어있는 경우는 그 글자 쌍을 버린다. 예를 들어 ab+가 입력으로 들어오면, ab만 다중집합의 원소로 삼고, b+는 버린다.

다중집합 원소 사이를 비교할 때, 대문자와 소문자의 차이는 무시한다. AB와 Ab, ab는 같은 원소로 취급한다.

제한사항

유사도 값은 0에서 1 사이의 실수이므로, 이를 다루기 쉽도록 65536을 곱한 후에 소수점 아래를 버리고 정수부만 출력한다.

입출력 예

str1 str2 answer

FRANCE french 16384

handshake shake hands 65536

aa1+aa2 AAAA12 43690

E=M*C^2 e=m*c^2 65536

str1	str2	answer
FRANCE	french	16384
handshake	shake hands	65536
aa1+aa2	AAAA12	43690
E=M*C^2	e=m*c^2	65536

코드

function solution(str1, str2) {
  const regex = /^[a-z]*$/;
  const lower_str1 = str1.toLowerCase();
  const lower_str2 = str2.toLowerCase();
  let map1 = new Map();
  let map2 = new Map();
  let answer = 65536;

  if (lower_str1 === lower_str2) {
    return answer;
  }

  let len = lower_str1.length - 1;
  for (let i = 0; i < len; i++) {
    const word = lower_str1.slice(i, i + 2);
    if (regex.test(word)) {
      if (map1.has(word)) {
        map1.set(word, map1.get(word) + 1);
      } else {
        map1.set(word, 1);
      }
    }
  }

  len = lower_str2.length - 1;
  for (let i = 0; i < len; i++) {
    const word = lower_str2.slice(i, i + 2);
    if (regex.test(word)) {
      if (map2.has(word)) {
        map2.set(word, map2.get(word) + 1);
      } else {
        map2.set(word, 1);
      }
    }
  }

  let intersection = 0;
  let union = 0;
  map1.forEach((value, key) => {
    if (map2.has(key)) {
      const value2 = map2.get(key);
      if (value > value2) {
        intersection += value2;
        union += value;
      } else {
        intersection += value;
        union += value2;
      }
    } else {
      union += value;
    }
  });
  map2.forEach((value, key) => {
    if (!map1.has(key)) {
      union += value;
    }
  });

  return Math.floor((intersection / union) * answer);
}

출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges

이것저것 | Feed

webpack에서 dart-sass사용하기

개요

적용하기

결론

Scss변수 → css변수로 build하기

Scss변수 → css변수로 build하기

개요

해결 과정

결론

기타 팁

두 개 뽑아서 더하기(javascript)

[월간 코드 챌린지 시즌1] 두 개 뽑아서 더하기

조건

제한사항

입출력 예

코드

GitHub Action에서 API Key값 설정하기

GitHub Action에서 API Key값 설정하기

문제

방안

해결

결론

Beautiful Triplets(javascript)

Beautiful Triplets

Input Format

입출력 예

코드

Minimum Distances(javascript)

Minimum Distances

Input Format

입출력 예

코드

종이접기(javascript)

[Summer/Winter Coding(2019)] 종이접기

조건

제한사항

입출력 예

코드

Equalize the Array(javascript)

Equalize the Array

Input Format

입출력 예

코드

n진수 게임(javascript)

[3차] n진수 게임

조건

제한사항

입출력 예

코드

뉴스 클러스터링(javascript)

[2018 KAKAO BLIND RECRUITMENT] 뉴스 클러스터링

조건

제한사항

입출력 예

코드