세줄코딩

[git] 브랜치 이름 변경 / 브랜치 제거 ( 동기화 )

hello-world — Tue, 4 Jul 2023 10:44:43 +0900

브랜치이름 변경 git branch -m [브랜치명] [새로운 브랜치명]

git branch -m master mymaster

- mybranch 라는 브랜치 제거. 두번째 명령어는 삭제된 브렌치를 리모트 저장소에도 동기화

git branch -d mybranch
git push origin -d mybranch

note : git push origin -d mybranch 삭제 명령 후에 git unable to delete remote ref does not exist 라는 메세지가 나온다면 remote 된 git 서버와의 최신 동기화가 이루어 지지 않아서 발생하는 문제이다. 깃허브나 비트버킷 사이트로 들어가서 정보를 조회해 보면 삭제된 것을 볼 수 있다. 하지만 git branch -r 로 브랜치를 조회를 하면 삭제한 브랜치가 남아 있는 것을 볼 수 있을 것이다.결론은 최신 동기화를 해주면 된다. git fetch -p origin 여기서 -p 옵션은 더 이상 존재하지 않는 remote 브랜치 정보는 삭제하는 것이다.

서버와 최신 정보 동기화 시키고 삭제된 브랜치 내역 제거

git fetch -p origin

-D 옵션은 강제 삭제를 의미한다. 만약 머지 중이거나 수정 중인 상태라면 error 를 띄울텐데 그래도 상관없이 지운다면 해당 옵션으로 지우면 된다

git branch -D mybranch

[javascript] null, undefined, ’‘, 0 을 손쉽게 체크하기

hello-world — Thu, 27 Apr 2023 01:46:15 +0900

null, undefined, ’‘, 0 을 손쉽게 체크하는 법~

이래 저래 코딩을 하다보면 null, undefined 에 대한 부분을 체크하는 경우가 허다하다.

특히나 api 통신을 하다보면 해당 부분은 머 거의 달고 살 정도이다.

1. !(not) 연산자 활용

대략 다음과 같은 코딩을 주로 하게 된다. 명확해 보이기도 하다.

if( testObj === null ) { 
// 어쩌고 저쩌고
}
if( testObj === undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj === '' ) { 
// 어쩌고 저쩌고 
}

if( testObj !== null ) { 
// 어쩌고 저쩌고 
}
if( testObj !== undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj !== '' ) { 
// 어쩌고 저쩌고 
}

근데 위의 코드를 좀 더 단순하게 표시 할 수 있다.

if( testObj === null ) { 
// 어쩌고 저쩌고 
}
if( testObj === undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj === '' ) { 
// 어쩌고 저쩌고 
}

// 위의 3가지 코드들을 다음과 같이 표현 할 수 있다.
if(!testObj){ 
// 어쩌고 저쩌고 
}


///////////////////////////////////////////////////////


if( testObj !== null ) { 
// 어쩌고 저쩌고 
}
if( testObj !== undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj !== '' ) {
// 어쩌고 저쩌고 
}

// 위의 3가지 코드들을 다음과 같이 표현 할 수 있다.
if(testObj){ 
// 어쩌고 저쩌고
}

처음엔 나도 아 저거 눈으로 보기에 좀 명확하지 않은 거 같고 진짜 저게 제대로 걸러질라나 하는 의구심으로 잘 쓰질 않았다.

하지만 변수 함수 클래스 등의 코드 양이 많아지고 하다 보니 코드의 경량화는 자주 화두가 되곤 했다.

근데 저런 사소한거 고친다고 머 양이 줄겠어??? 라고 했지만 통합검색을 해보니 꽤 많이 저런 패턴의 null, undefined 를 직접 체크하는 구문이 되게 많았다. 정리하다 보니 나름 깔끔해진 if 구문과 리턴 함수가 보기도 좋았다.

2. !! (double negation operator) 연산자 활용

저거 외에도 느낌표 두개 -> !! (double negation operator) 를 사용해서 null, undefined, ''(빈문자열) 을 손쉽게 다룰 수 있다.

// 아래 코드들은 구글 개발자도구에서 바로 테스트해봐도 알 수 있다.
!!undefined  // false
!!null // false
!!""   // false
!!0    // false

만약 어떤 데이터나 결과 값을 리턴하는 함수가 있다면 위험을 무릅쓰고 null 이나 undefined 를 전달 할 필요가 없다.

특히 로그인 후 token 발급받는 경우 초기값과 로그 아웃할 시엔 token 값은 null 처리를 한다. 근데 그 token 값 확인은 주로 값이 있다면 true, 없다면 false 를 처리하는 식의 getter 함수에서 확인하다 보니 null 체크하는게 여엉 불편한게 이만 저만 아니다. 그럴때 !! 연산자로 해당 부분을 가볍게 처리 할 수 있다. 해당하지 않는 부분은 그냥 !! 연사자를 통해 false 를 전달해 주면 되는 것이다.

3. || ( OR ) 연산자

이것 외에도 급 생각이 난게 하나 있다. 바로 ‘OR’ 연산자 이다. 좌변 || 우변 이라고 할 시 좌변값이 있다면 true 이기에 우변을 실행하지 않는다. 만약 좌변값이 없거나 존재하지 않으면 false 이기에 true 가 나올때까지 우변에 있는 것을 실행한다. 그래서 a || b || c 형태의 여러개를 나열해서 평가할 수 도 있다.

// 0 은 false 로 판단된다. 
let a = 0 || 'text'  
console.log( a ) // 'text'

let b = undefined || 'text'  
console.log( b ) // 'text'

let c = null || 'text'  
console.log( c ) // 'text'


// 함수의 매개변수 지정시 
function test( a, b=2, c=false){ 
  const speed = 0.2;
  let resetType = a || speed;
  return resetType;
}
console.log( test(0, 1) ) // 0.2
console.log( test(null, 1) // 0.2
console.log( test(undefined, 10, true) )  // 0.2


// 글로별 변수 선언시
const Utils = Utils || {};

이것은 주로 매개변수값 지정시 보통 사용하였다. 매개변수의 디폴트값을 다 정해주면 좋겠지만 그렇지 못할 상황이 생기기도 한다.

그럴때 나름 편하게 쓸 수 있다.

그것 외에도 글로벌 변수 선언시 체크도 할 겸 선언할 수 도 있다. ( 겸사겸사 undefined 체크도 하는 것이다 )

anagram - 애너그램

hello-world — Sun, 5 Mar 2023 02:25:01 +0900

anagram - 애너그램

어떠한 단어의 문자를 재배열하여 다른 뜻을 가지는 다른 단어로 바꾸는 것을 말한다.

function validAnagram(first, second) {
  if (first.length !== second.length) {
    return false;
  }

  const lookup = {};

  for (let i = 0; i < first.length; i++) {
    let letter = first[i];
    //lookup[letter] 이미 존재하면 갯수를 +1 해준다. 즉 중복개수 체크 
    lookup[letter] ? lookup[letter] += 1 : lookup[letter] = 1;
  }
  console.log(lookup) //{ a: 3, n: 1, g: 1, r: 1, m: 1, s: 1 }

  for (let i = 0; i < second.length; i++) {
    let letter = second[i];
    if (!lookup[letter]) {
      return false;
    } else {
      lookup[letter] -= 1;
    }
  }

  return true;
}

// {a: 0, n: 0, g: 0, r: 0, m: 0,s:1}
validAnagram('anagrams', 'nagaramm')

Frequency Counter - 빈도수 체크

hello-world — Sun, 5 Mar 2023 02:19:08 +0900

두배열 간에 같은 수 (제곱근 체크)

function same(arr1, arr2){
    if(arr1.length !== arr2.length){
        return false;
    }
    let frequencyCounter1 = {}
    let frequencyCounter2 = {}
    for(let val of arr1){
        frequencyCounter1[val] = (frequencyCounter1[val] || 0) + 1
    }
    for(let val of arr2){
        frequencyCounter2[val] = (frequencyCounter2[val] || 0) + 1        
    }
    //console.log(frequencyCounter1); //{ '1': 1, '2': 2, '3': 1, '5': 1 }
    //console.log(frequencyCounter2); //{ '1': 1, '4': 2, '9': 1, '11': 1 }
    for(let key in frequencyCounter1){
        if(!(key ** 2 in frequencyCounter2)){
            return false
        }
        if(frequencyCounter2[key ** 2] !== frequencyCounter1[key]){
            return false
        }
    }
    return true
}

same([1,2,3,2,5], [9,1,4,4,11])

reduce 활용

hello-world — Sat, 4 Mar 2023 06:21:07 +0900

reduce 활용

1. 합산

const sum = [0, 1, 2, 3].reduce((acc, cur) => acc + cur);
console.log("sum=", sum);  // sum = 6

//initVal - 이 초기값에 따라 누적값에 대한 처리가 달라진다.
//initVal - 숫자대입시 숫자 누적연산이 가능하고 배열 대입시 배열 연산처리
//initVal - 초기값이 없다면 배열의 첫번째 요소 호출
//initVal - 초기값이 설정되지 않고 배열 내부에 오브젝트로 되어 있을시엔 첫번째 오브젝트를 기준으로
// 누적연산되기에 오브젝트에 관련된 메서드등은 처리가 되지만 산술연산등은 성립되지 않으니 주의.
let initVal = 0;
let objToSum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce((acc, cur, index) => {
  return acc + cur.x;
}, initVal); 
console.log("objToSum=", objToSum); // objToSum= 6

2. 배열 조작 ( 평탄화 )

//중첩 1차 배열 평탄화 
let flattened = [
  [0, 1],
  [2, 3],
  [4, 5]
].reduce((acc, cur) => acc.concat(cur), []);
console.log(flattened); //[0, 1, 2, 3, 4, 5]

3. 중복 값 수치화

let names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
let countedNames = names.reduce((allNames, name) => {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

4. 객체 분류

let people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

let groupedPeople = groupBy(people, "age");

console.log(groupedPeople);
/*{ 
  20: [{name: "Max", age: 20}, {name: "Jane", age: 20}],
  21: [{name: "Alice", age: 21}]
}*/

5. 중복 항목 제거

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((acc, cur) => {
  const length = acc.length;
  // acc 는 초기에는 [] 빈값 - acc 는 cur의 연산처리 및 콜백 반환값을 누적한값
  // console.log( acc, cur );
  if (length === 0 || acc[length - 1] !== cur) {
    // console.log(acc, cur);
    acc.push(cur);
  }
  return acc;
}, []);
// console.log(result); //[1,2,3,4,5]

[chatGPT] chatGPT 쉽게 이용 하기

hello-world — Fri, 17 Feb 2023 00:36:03 +0900

chatGPT 쉽게 이용 하기

https://openai.com/

OpenAI

OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity.

openai.com

사이트 들어가서 맨 하단에 보면 Login 클릭하면 아래처럼 로그인 화면이 뜬다.

계정을 만들어야 해서 Don't have an account? Sign up 을 클릭해서 계정 만들면 끝

전화번호 인증도 있으니 놀라지 말고 인증 받으면 된다..

검색이나 기존 URL 을 클릭해서 들어가면 죄다 ChatGPT Plus 회원 가입 유도만 한다. 첨에 나도 몰라서 그거 돈내고 해야 하나 싶었는데 아직까지 그냥 ChatGPT 웹 검색은 무료인듯하다.

가입을 했다면 좀 당황스럽긴 했는데 ChatGPT 를 그래서 어디서 실행하라는 거지?? 라는 의문이 생긴다. 로그인 후 화면 그 어디에도 ChatGPT 를 실행해 볼 수 있는 링크나 버튼이 안보였다. ( 아 내가 이상한건가...왜 못찾지???? ) 아무튼 어케어케 해서 클릭해 들어갔더니 뙁 실행 볼 수 있었다.( 저처럼 찾고 다니는 사람 있을 거 같아서 아래 링크를 남깁니다. 로그인한 상태에서 아래 링크를 클릭하면 보입니다. )

https://chat.openai.com/chat

아래 URL 은 크롬 브라우저에 익스텐션 버전이다.

https://chrome.google.com/webstore/detail/chatgpt-for-google/jgjaeacdkonaoafenlfkkkmbaopkbilf/related?hl=ko

ChatGPT for Google

ChatGPT의 응답과 검색 엔진 결과를 함께 표시합니다

chrome.google.com

얘도 머 설치하는 거는 일반 익스텐션 설치하는거랑 다를 바 없다.

어찌 되었던 ChatGPT 계정은 있어야 하기에 처음에 기술 했듯이 일단 계정 만들고 시작하자~

익스텐션 설치해서 사용해 보고 있는데 음 좋타~ 너무 좋타~~~

음 그리고 익스텐션으로 설치한 후 설정( 아래 이미지에서 톱니아이콘 ) 클릭해서 보면 어떻게 노출시킬지 설정화면으로 이동한다.

설정화면으로 이동하게 되면 아래처럼 여러 옵션들이 보인다. 먼저 Trigger Mode 에서 선택을 Manually 로 선택하였다. 매번 검색할 때 마다 챗GPT 로 보여 줄 필요는 없다는 판단을 했기 때문이다.

만약 Trigger Mode 를 Always 로 놓고 사용하면 아래 이미지에서 우측에 볼 수 있듯이 결과 내용이 많다면 챗GPT 가 타이핑 쳐서 내려가는 모습이좀 머랄까 거슬린다고 해야 하나...왠지 기다려 줘야 할 거 같기도 하는....ㅠㅠ

자세한 설명이 보기 좋기도 하고 암튼 장*단점이 있을 거 같다. 당장은 Manually 로 놓고 사용할 거 같다.

여튼 이 정도면 머 스택오버플로우는 한 동안 안볼려나??? 하긴 얘를 완전히 믿을 수는 없다. 문제는 검색을 해서 얻은 정보가 올바른 정보인지 확인 할 수 없다는 게 문제이다. 나름 대안은 해당 코드를 검증하는 코드도 요구하면 되지 않을까 싶다...

아래는 이메일 검증 자바스크립트 코드를 요구한 부분이다. 해당 코드에 대한 테스트도 같이 요구해 보았다.

대화의 형식으로 점점 깊이 있게 파고 들어서 요청하면 꽤 그럴 듯하게 활용 가능해 보인다. 그런 생각을 해보았다. 3년 후면 웹 노가다 일은 없어지겠구나...하는 생각이 머 분야별로 상황별로 상이한 부분과 어려움들은 있겠지만 확실히 ChatGPT 는 영향력이 있어보인다.

아 x댔네.....머해 먹고 살지....ㅠㅠ

[키크론]K3 무선 기계식 키보드 구입기 및 언박싱

hello-world — Thu, 16 Feb 2023 12:43:35 +0900

[키크론]K3 무선 기계식 키보드

애플 키보드1>매직키보드2 로 넘어오면서 거의 8년 넘게 맥으로만 사용했던 거 같다. 그런데 회사를 옮기게 되면서 윈도우 컴터로 개발을 하게 되어 급하게 윈도우 겸용 블루투스 키보드를 찾아보게 되었다.

찾아봤는데 머 종류가 너무 많아서리 ㅎㅎ 머가 좋다 머가 나쁘고 어쩌고 대체 고를 수 가 없는 지경이 되어서 한동안 넋놓고 지내다 우연히 키크론 이란 회사 제품을 보게 되었는데...오호 이거 괜춘한가??? 이곳저곳을 살펴보게 되었고 결론은 오케 이거로 결정 근데 키크론 제품 처음 접해보신 분들은 아시겠지만 이것또한 종류를 고르기 만만치 않다. 그나마 키보드 높이 좀 낮은 거를 찾은게 바로 k3~

블루투스 기계식 키보드들 중에서 높이가 가장 낮다고 한다. 나처럼 손목에 무리 가는 사람한테 딱인듯!!!!!!!!
애플 매직키보드도 오랫동안 사용할 수 있었던 이유도 높이가 낮아서였다. 그리고 머 아이패드, 아이폰 연결도 끝내주고 ㅎㅎ 아 정신차리자 애플꺼 찬양하다보니 또 산으로 ~ ㅎㅎ 다시 본론으로 들어와서 키크론 k3 를 고름과 동시에 또 고민에 빠졌다. 옵티컬 스위치를 종류를 또 선택해야 한다.....아오 머가 이리 많은지...그냥 글자 그대로 나는 오피스 근로자니까 ㅋㅋ 옵티컬 레드로 급 정했다. 머 나중에 알았지만 내가 노땅이긴 한가 보다 유툽에서 검색해보니 키크론 제품에 대한 리뷰 영상이 엄청 많다는....( 아씨 진작에 영상으로 보고 고를 껄 하는 후회가....웹개발자인데 이렇게 검색능력이 떨어져서야 원~ 시대에 뒤떨어진건가.... ㅠㅠ )

머 암튼 드디어 고르고 골라 구매 확정....
가격은 머~ 매직키보드2 보단 살짝 더 비싸다.머 다른 유명 기계식 키보드보단 싸다....ㅠㅠ (싼거야 그치!!!)

이제부터 언박싱 고고~
아래 이미지처럼 비닐에 쌓여져 있다.

바로바로 정품 등록해줬다. QR 코드로 되어 있어 등록하기 편했다.

ㅎㅎ 이게 생각보다 비닐이 잘 안뜯겨서 좀 고생~

박스를 뙁 하고 열어보면 ~ 걍 머 글타 ㅋㅋ( 머랄까 애플같은 감동은 없음 )

머 윈도우 사용자를 위한 키캡이 몇개 들어 있다.( 윈도우아이콘, esc, 한/영, alt, ctrl, 현광등아이콘)
그리고 충전용 c 타입 케이블, 키캡 리무버, 사용자 메뉴얼, 퀵가이드설명서가 빠짐없이 있다.

아래처럼 플래스틱으로 된 커버가 씌워져 있는데.....흠 머 보관할 때 괜찮을 거 같기도 하고...

밑에가 걍 뻥 뚫려 있어서 청소하기 아주 좋타~~~ 걍 입김으로 후~ 후~ 불면 그냥 먼지 다 날아감~ 청소 심플!!!!
그래서 이 제품을 고르기도 했다.

이게 마지막 이미지.... 잘 보면 키보드 높이를 조절하는게 1~2단으로 조절 할 수 있다.
높이가 6도 9도 였던가??? 머 이 정도 각도???? 모르겠다.

이걸로 구입기 및 언박싱 끝!!!!!!!!!!!!!!!!!!!

[vite/vue3] vue3 설치하기.

hello-world — Mon, 13 Feb 2023 19:14:43 +0900

command line 으로 설정하기는 크게 2가지 정도인데.... 결론은 내가 알기론 차이가 없다.

1번째 방법( npm, yarn 각자 기호에 맞게 사용하면 된다 )

# npm 으로 설치시 
npm create vite@latest

# yarn 으로 설치시 
yarn create vite

- 위 명령어를 치면 아래와 같이 선택할 수 있는 옵션이 나오는데 그 중에 Customize with create-vue 옵션을 선택하면 vue-router, pinia 등 좀 더 다양한 옵션을 선택 할 수 있다. ( 두번째 설치 방법과 똑같은 선택 옵션 사항들이 나온다. )

2번째 방법

npm init vue@latest

- 두번째 방법은 위 명령어를 치면 바로 처음부터 typescript, vue-router, pinia 등 다양한 옵션을 선택할 수 있게 제공된다.

아무생각 없이 그냥 1번째 방법으로 설치 했을 때 (Customize with create-vue 선택 안한 상태에서 ) 음?? 이거 typescript 는 지원이 되는데 다른 것들은 별도로 다 설치해야 하네? 라고 생각했지만 Customize with create-vue 옵션을 선택하고 설치해보니 아래 이미지처럼 2번째 설치 방법과 똑같다는 결론에 이르렀다.

사실 위의 2가지 방법을 비교하게 된 계기는 내가 마지막으로 알던 기존 vue 설치 버전이 낮았던 탓?(그냥 버전이 낮았던 탓으로 책임을 돌리고 싶다 ㅠㅠ)에 그냥 vue 로 설치할 때는 vite 가 지원이 안되어서 vite 를 통한 vue3 를 설치 하였다.

-> npm init @vitejs/app 설치 명령어는 더이상 지원하지 않는다. ( 헌데 더 예전 버전인 npm init vite-app 명령어는 된다 ㅎㅎ )

하지만 현재 vue3 버전에서 기본으로 vite 가 지원되기에 머 위의 비교는 무의미하다. vite 쪽에서 빠르게 버전 업뎃을 하고 vue 에서 적용을 늦게 하거나 하면 머 설치 방법이 또 달라질 수는 있겠다.

[vite] 지원하는 기능들

hello-world — Mon, 13 Feb 2023 16:16:55 +0900

지원하는 기능들

Hot Module Replacement

vite는 기본적으로 ESM를 통해 HMR API를 제공합니다. HMR 기능이 있는 프레임워크는 API를 활용하여 페이지를 다시 로드하거나 애플리케이션 상태를 날려버리지 않고 즉각적이고 정확한 업데이트를 제공할 수 있습니다. vite는 Vue Single File Components, React Fast Refresh 또는 @prefresh/vite과 같은 First-party HMR* 모듈을 제공하고 있습니다. (* Vite에서 직접 제공하는 HMR 모듈)

물론, create-vite에서 제공하는 템플릿 안에는 HMR 모듈이 포함되어 있기 때문에 굳이 위와 같은 방법을 따르지 않아도 됩니다.

TypeScript

vite는 .ts 파일에 대한 컴파일링 및 Import 역시 지원합니다.

단, 타입 체킹은 오로지 IDE 또는 빌드 프로세스에만 의존하며, Vite 자체에서는 .ts 파일에 대한 타입 체킹 작업을 진행하지 않습니다. 타입 체킹이 필요하다면 tsc --noEmit*을 빌드 스크립트에 넣어주세요. 만약 *.vue 소스 코드를 작성중이라면, vue-tsc를 설치해 vue-tsc --noEmit을 빌드 스크립트에 넣어서 타입 체킹을 하도록 설정할 수 있습니다. (* --noEmit: 컴파일링 없이 타입 체킹만을 수행하는 옵션)

Vite의 TypeScript 컴파일링은 Esbuild를 이용하며, TypeScript 소스 코드를 JavaScript 소스 코드로 변환하는 작업에 대해 tsc 대비 약 20~30배 정도 빠른 퍼포먼스를 보이고 있습니다. (HMR은 50ms 미만)

참고로 타입만을 가져오는 경우 잘못 번들링이 될 수 있으며, 이는 타입 전용 Imports와 Exports를 사용하여 이 문제를 우회할 수 있습니다:

import type { T } from 'only/types'
export type { T }

타입스크립트 컴파일러 옵션

tsconfig.json 파일 내 compilerOptions 설정들의 값을 조작할 때는 특별한 주의가 필요합니다.

isolatedModules: true로 설정해주세요.

esbuild는 타입에 대한 정보 없이 변환(Transpilation)만을 수행하기에, const enum 또는 암시적으로 타입만을 가져오는 것과 같은 특정 기능을 지원하지 않습니다. 이를 감지하기 위해 tsconfig.json 내 compilerOptions 설정을 "isolatedModules": true와 같이 설정해줘야만 하며, 이 설정으로 TS가 위와 같은 상황에서 작동하지 않는 기능들에 대해 경고할 수 있게 됩니다.

그러나 vue와 같은 일부 라이브러리는 "isolatedModules": true로 설정할 경우 타입 체크가 정상적으로 동작하지 않습니다. 이러한 경우에는 해당 모듈이 이슈를 수정할 때 까지 "skipLibCheck": true를 사용해 오류가 발생되지 않도록 해주세요.

useDefineForClassFields

Vite 2.5.0 부터는 TypeScript의 변환 대상이 ESNext 또는 ES2022 이상인 경우, 기본 값을 true로 설정합니다. 이는 tsc 버전 4.3.2 이상 및 ECMAScript 표준을 따르도록 하는 설정입니다.

그러나 다른 프로그래밍 언어나 이전 버전의 TypeScript를 사용하던 사람들에게는 직관적이지 않은 내용일 수 있습니다. 이에 대한 자세한 정보는 TypeScript 3.7 릴리스 노트를 참고할 수 있습니다.

또한, MobX나 Vue 클래스 컴포넌트 8.X와 같은 대부분의 라이브러리는 "useDefineForClassFields": true인 것으로 가정하고 동작합니다. 따라서 만약 클래스의 필드에 크게 의존하는 라이브러리를 사용하는 경우라면, 이러한 라이브러리를 사용하는 것에 대해 옵션을 수정하는 경우 상당한 주의를 기울어야 합니다.

다만 lit-element를 포함해 일부 라이브러리는 아직 이 새로운 기본값이 적용되지 않았습니다. 이러한 경우에는 useDefineForClassFields의 값을 false로 설정해주세요.

빌드 결과에 영향을 미치는 또 다른 컴파일러 옵션들

다만 "isolatedModules": true로 마이그레이션 할 수 없다면, rollup-plugin-friendly-type-imports와 같은 써드 파티 플러그인을 사용하는 방법도 있습니다. 그러나 이러한 접근 방식은 Vite에서 공식적으로 지원하는 방법은 아닙니다.

Client Types

vite는 기본적으로 Node.js API 기반의 타입 시스템을 차용하고 있습니다. 따라서 Client-side의 환경을 위해 Shim을 구성하고자 한다면, d.ts 선언 파일을 추가해주세요.

/// <reference types="vite/client" />

또는, tsconfig 내 compilerOptions.types 옵션에 vite/client를 명시해 줄 수도 있습니다.

이를 통해 다음에 대한 Shim이 제공됩니다.

.svg와 같은 에셋
Vite를 통해 주입되는 import.meta.env에 명시된 환경 변수 타입들
import.meta.hot에 명시된 HMR API 타입들

TIP

타입을 재정의하고자 한다면 트리플-슬래시 지시자(Triple-slash Reference) 앞에 선언해주세요. 가령, *.svg의 default import를 React 컴포넌트로 만들고자 한다면 아래와 같이 타입을 재정의할 수 있습니다:

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}

/// <reference types="vite/client" />

Vue

vite는 기본적으로 Vue를 지원하고 있습니다.

CSS

.css 파일을 Import 할 때, 기본적으로 HMR을 위해 <style> 태그로 변환되어 불러와지게 됩니다. 물론 String 타입의 모듈로 가져올 수도 있구요.

import style from './style.css'

console.log(style) // 정의한 CSS를 문자열로 가져옵니다.

CSS @import 그리고 URL 재정의(Rebasing)

vite는 postcss-import를 이용해 CSS의 @import를 처리합니다. 또한, CSS url()로 참조되는 모든 리소스들(다른 디렉터리에 존재한다 해도)에 대해 별다른 설정 없이 자동으로 Base를 맞추어주는 재정의(Rebasing) 작업 역시 진행해주고 말이죠.

별칭을 이용한 @import도 지원하며, URL 재정의나 별칭은 CSS 말고도 Sass와 Less에서도 사용이 가능합니다.

PostCSS

만약 프로젝트에 PostCSS 설정 파일이 존재한다면, vite는 이를 이용해 모든 CSS 파일에 해당 설정을 적용합니다.

참고로 CSS의 최소화는 PostCSS 이후에 진행되며, build.cssTarget 옵션을 이용해 설정할 수 있습니다.

CSS Modules

.module.css 확장자로 끝나는 모든 CSS 파일들은 CSS 모듈 파일로 취급되며, 일반적인 JavaScript 모듈처럼 사용이 가능합니다.

/* example.module.css */
.red {
  color: red;
}

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

참고로, CSS 모듈에 대한 동작 방식을 입맛대로 수정할 수 있습니다. css.modules 옵션 옵션을 참고해주세요.

가령 css.modules.localsConvention 옵션을 camelCase로 설정하게 되면(localsConvention: 'camelCaseOnly'), 아래와 같이 가져올 수 있게 됩니다.

// .apply-color -> applyColor
import { applyColor } from './example.module.css'
document.getElementById('foo').className = applyColor

CSS Pre-processors

vite는 모던 브라우저만을 타깃으로 하기에, 표준을 준수하도록 postcss-nesting과 같은 CSSWG 초안을 구현한 PostCSS 플러그인과 함께 네이티브 CSS 변수를 사용하도록 권고하고 있습니다.

다시 말해, vite는 기본적으로 .scss, .sass, .less, .styl, .stylus와 CSS 전처리기가 필요한 파일을 지원하지 않습니다. 다만 필요한 경우 어렵지 않게 설치해 바로 사용할 수 있습니다.

# .scss 그리고 .sass
npm add -D sass

# .less
npm add -D less

# .styl 그리고 .stylus
npm add -D stylus

Vue 싱글 파일 컴포넌트를 사용하는 경우, 설치 후 별 다른 설정 없이도 <style lang="sass">와 같은 CSS 전처리기를 바로 사용할 수 있습니다. Sass나 Less에서의 @import 별칭 또한 Vite에서 사용이 가능합니다. url()로 참조되는 파일들 역시 자동으로 올바른 URL을 갖도록 재정의되고 말이죠.

다만 Stylus의 경우 API 충돌로 인해 Vite의 @import 별칭과 URL 재정의 기능이 제공되지 않습니다.

물론 전처리된 CSS 역시 style.module.scss와 같이 CSS 모듈처럼 사용이 가능합니다. 똑같이 파일 확장자에 .module만 붙여주세요.

페이지 내 CSS 주입 비활성화하기

CSS 콘텐츠의 자동 주입은 ?inline 쿼리 매개변수를 통해 비활성화 할 수 있습니다. 이 경우 처리된 CSS 문자열은 평소와 같이 모듈의 default export로 반환되나, 스타일은 페이지에 주입되지 않습니다.

import styles from './foo.css' // 페이지에 스타일이 추가됨
import otherStyles from './bar.css?inline' // 페이지에 스타일이 추가되지 않음

정적 에셋

정적 에셋을 Import 하는 경우, 이에 대한 Public URL이 반환됩니다.

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

URL 쿼리를 이용해 에셋을 가져올 때 어떻게 이를 가져올 것인지 명시할 수도 있습니다.

// URL로 에셋 가져오기
import assetAsURL from './asset.js?url'

// String 타입으로 에셋 가져오기
import assetAsString from './shader.glsl?raw'

// 웹 워커 가져오기
import Worker from './worker.js?worker'

// Base64 포맷의 문자열 형태로 웹 워커 가져오기
import InlineWorker from './worker.js?worker&inline'

좀 더 자세히 알고 싶다면, 정적 에셋 핸들링하기 섹션을 참고해주세요.

JSON

JSON 파일은 바로 Import가 가능합니다. 물론, 가져올 필드를 지정할 수도 있습니다.

// 객체 형태로 가져오기
import json from './example.json'
// 필드를 지정해 가져오기 (트리-쉐이킹 됩니다.)
import { field } from './example.json'

동적 Import

Glob Import와 마찬가지로 Vite는 변수를 사용한 동적인 Import도 지원합니다.

const module = await import(`./dir/${file}.js`)

변수 file은 깊이가 1인 파일에 대해서만 나타낼 수 있습니다. 가령 file이 foo/bar인 경우에는 Import가 실패하게 됩니다. 좀 더 다양한 기능이 필요한 경우에는 Glob Import 기능을 사용해주세요.

Web Workers

생성자를 통해 가져오기

웹 워커 스크립트는 new Worker() 및 new SharedWorker()를 통해서도 가져올 수 있습니다. 접미사를 사용하는 방식에 비해 이는 표준에 좀 더 가까우며, 일반적으로 워커를 사용할 때 권장되는 방식입니다.

const url = new URL('./worker.js', import.meta.url)
const worker = new Worker(url)

"모듈" 타입의 워커를 생성할 수 있도록 생성자에 옵션을 전달할 수도 있습니다:

const url = new URL('./worker.js', import.meta.url)
const worker = new Worker(url, {
  type: 'module'
})

쿼리 접미사를 통해 가져오기

웹 워커 스크립트는 ?worker 또는 ?sharedworker 접미사를 붙여 가져올 수 있습니다. 모듈의 export default 로는 워커의 생성자가 들어가게 됩니다.

import MyWorker from './worker?worker'

const worker = new MyWorker()

물론, import 대신 importScripts() 함수*를 이용할 수도 있습니다. 다만 이 경우 개발 환경에서는 브라우저의 네이티브 API에만 의존하여 크롬에서만 동작한다는 것을 유의해주세요. 물론 프로덕션 빌드 시 다양한 브라우저를 지원하도록 컴파일됩니다. (* importScripts() MDN doc)

마지막으로, 기본적으로 워커의 경우 프로덕션 빌드 분리된 청크로 컴파일됩니다. 만약 분리된 청크가 아니라 Base64 포맷의 문자열로 이를 사용하고자 한다면, inline 쿼리를 이용해주세요:

import MyWorker from './worker?worker&inline'

만약 워커를 URL로 검색하고자 한다면, url 쿼리를 추가해주세요:

import MyWorker from './worker?worker&url'

모든 워커에 대한 번들링 설정은 워커 옵션을 참고해주세요.

필요한 부분만 발췌해서 옮겼다. 아래 링크를 통해 더 자세히 살펴 볼 수 있다.

https://vitejs-kr.github.io/guide/features.html#build-optimizations

Vite

Vite, 차세대 프런트엔드 개발 툴

vitejs-kr.github.io

[vite] vite 로 vue3 번들링시 .env 환경변수 설정

hello-world — Fri, 27 Jan 2023 00:20:52 +0900

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능하다.

import.meta.env.MODE: {string} 현재 앱이 동작하고 있는 모드
import.meta.env.BASE_URL: {string} 앱이 제공되는 베이스 URL이며, 이 값은 base 설정에 의해 결정.
import.meta.env.PROD: {boolean} 앱이 프로덕션에서 실행 중인지 여부.
import.meta.env.DEV: {boolean} 앱이 개발 환경에서 실행 중인지 여부이며, 항상 import.meta.env.PROD와 반대되는 값
import.meta.env.SSR: {boolean} 앱이 서버에서 실행 중인지 여부.

혹은 .env 파일에 변수를 선언해서 가져와도 된다.

물론 접근 방식은 import.meta.env.변수이름 으로 가져와야 한다.

아래는 .env 파일 네이밍 설정 부분이다.

.env                # 모든 상황에서 사용될 환경 변수
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

보안 권고 사항

.env.*.local 파일은 오로지 로컬에서만 접근이 가능한 파일이며, 데이터베이스 비밀번호와 같은 민감한 정보를 이 곳에 저장하도록 한다. 또한 .gitignore 파일에 *.local 파일을 명시해 Git에 체크인되는 것을 방지하도록 한다.
Vite 소스 코드에 노출되는 모든 환경 변수는 번들링 시 포함되게 되기에 VITE_* 환경 변수에는 민감한 정보들이 포함되어서는 안된다.

참고로, Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여 나타낸다.

ex)

VITE_SOME_KEY=123
DB_PASSWORD=foobar

VITE_SOME_KEY 변수만이 import.meta.env.VITE_SOME_KEY로 접근이 가능. (VITE_ 라는 접두사가 누락되었기 때문에 DB_PASSWORD는 노출되지 않는다.)

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD) // undefined

또한 Vite는 dotenv-expand 를 사용해 기본적으로 환경 변수를 확장한다. 문법에 대해 더 알아보고 싶다면 이 문서를 참고하세요.

참고로 만약 환경 변수의 값에 $를 사용하고 싶다면 \를 사용해야 합니다.

KEY=123
NEW_KEY1=test$foo   # test
NEW_KEY2=test\$foo  # test$foo
NEW_KEY3=test$KEY   # test123

참고:

https://vitejs-kr.github.io/guide/env-and-mode.html

Vite

Vite, 차세대 프런트엔드 개발 툴

vitejs-kr.github.io

세줄코딩

[git] 브랜치 이름 변경 / 브랜치 제거 ( 동기화 )

[javascript] null, undefined, ’‘, 0 을 손쉽게 체크하기

null, undefined, ’‘, 0 을 손쉽게 체크하는 법~

1. !(not) 연산자 활용

2. !! (double negation operator) 연산자 활용

3. || ( OR ) 연산자

anagram - 애너그램

anagram - 애너그램

Frequency Counter - 빈도수 체크

reduce 활용

reduce 활용

[chatGPT] chatGPT 쉽게 이용 하기

[키크론]K3 무선 기계식 키보드 구입기 및 언박싱

[키크론]K3 무선 기계식 키보드

[vite/vue3] vue3 설치하기.

[vite] 지원하는 기능들

지원하는 기능들

Hot Module Replacement

TypeScript

타입스크립트 컴파일러 옵션

isolatedModules: true로 설정해주세요.

useDefineForClassFields

빌드 결과에 영향을 미치는 또 다른 컴파일러 옵션들#

Client Types

Vue

CSS

CSS @import 그리고 URL 재정의(Rebasing)

PostCSS

CSS Modules

CSS Pre-processors

페이지 내 CSS 주입 비활성화하기

정적 에셋

JSON

동적 Import

Web Workers

생성자를 통해 가져오기

쿼리 접미사를 통해 가져오기

[vite] vite 로 vue3 번들링시 .env 환경변수 설정

빌드 결과에 영향을 미치는 또 다른 컴파일러 옵션들