bun을 runtime으로 하여 vite build 명령을 실행하면 환경변수 문제가 발생한다. 보통 .env
를 사용하여 환경별로 여러 개의 .env
파일을 만든다.
예를 들면 이렇다.
.env.local
.env.development
.env.production
하지만 bun을 runtime으로 vite build를 돌릴 경우, 항상 .env.development
의 환경변수로만 설정되는 오류가 발생한다.
bun과 vite는 각각 .env 파일을 읽어서 환경변수를 설정하는 기능을 제공한다. 하지만 bun cli로 vite를 실행할 경우, 위 기능이 충돌한다
실은 해결책이 아니라 우회책이다.
위 기능이 충돌할 경우, vite의 mode 설정 파라미터는 정상 동작하지만, 항상 .env.development의 환경변수를 읽어오거나, 루트 경로에 유일하게 존재하는 .env 파일의 환경변수를 읽는다.
bun과 vite의 환경변수 설정 기능 충돌을 방지하기 위해, 루트 경로에는 빌드시 단 1개의 .env 파일만 존재하도록 한다
// package.json
{
// ...
scripts: {
"build:stage": "cp ./.env/.env.development . && tsc && bunx --bun vite build --mode development",
"build:production": "cp ./.env/.env.production . && tsc && bunx --bun vite build --mode production",
}
// ...
}
빌드 스크립트가 다소 지저분해지지만 의도대로 동작한다.
20240306
]]>eslint와 prettier의 역할이 중복된다. 그래서 eslint-config-prettier와 eslint-plugin-prettier를 사용한다. 이 두 라이브러리는 eslint의 prettier의 설정으로 덮어 써준다.
하지만 eslint-plugin-prettier를 사용하지 말 것을 권장한다. eslint를 사용할 필요가 없다나? 그래서 eslint-plugin-prettier를 삭제하면 어떻게 되느냐? IDE와 prettier가 따로 논다. 특히 intelllJ 계열 IDE(Webstorm)에서 그렇다.
결론부터 말하자면 Webstorm은 prettier를 제대로 지원하지 못한다. Webstorm에는 파일 수정 후 저장시, 자동으로 eslint와 prettier를 돌려서 파일을 수정해주는 기능이 있다. 들여쓰기나 import sorting이 자동으로 되니 편리하고, 무엇보다 협업을 할 때 띄어쓰기 변경 등으로 인한 git log 혼돈을 예방할 수 있다. 하지만 이건 이론상으로만 그렇다. eslint와 prettier의 설정을 수정하다 보면 Webstorm은 prettier의 설정을 따를지, eslint의 설정을 따를지 혼돈스러워 한다. 무슨 짓을 해도 import sorting이 안 되는 꼬라지를 보고 있으면 화가 치밀어 오른다. visual studio code에서는 이런 일이 없는 것 같으나… intelliJ 계열 IDE는 버림받았다.
eslint/prettier 조합이 제대로 안 돌아가고, 불편해서 대안이 Biome이다. Biome는 eslint와 prettier가 하는 역할을 모두 한다. 그리고 Webstorm 연동 플러그인도 잘 돌아간다. 파일 저장시 formatter가 잘 동작하고, lint도 잘 표시해준다!
eslint/prettier에서 Biome로 이관하는 방법은 간단하다.
npx @biomejs/biome migrate
그런데 대부분의 rule이 eslint/prettier와 호환되기 때문에 나는 위 기능을 사용하지 않고 수작업으로 이관해도 충분했다.
eslint + prettier + @type
을 설치할 필요가 없다.Biome는 통합 빌드 도구를 표방하다가 망해버린 Rome의 후계자다. 과연 안 망하고 버틸 수 있을 것인가.
20240220
]]>https: true
!See the vite.config.ts
file below.
import { createServer } from 'https';
{
// ...
https: createServer() // this is it
// ...
}
All vite.config.ts
file is below.
// vite.config.ts
import { defineConfig } from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl';
import { createServer } from 'https';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
plugins: [
basicSsl({
/** setting for vite-plugin-basic-ssl
https://github.com/vitejs/vite-plugin-basic-ssl
*/
}),
],
server: {
https: createServer(), // No more boolean. Let's create server!
},
};
});
20240208
]]>MLX로 한국어 데이터를 학습한다
김용 스타일의 무협지를 쓰는 text generating AI를 만든다
지만 한국어는 조금 더 잘 하게 되었다
머신: M1 pro
프레임워크: MLX
학습 모델: Mistral 7B
학습 데이터: 신조협려를 JSONL 포맷으로 자체 변환
소요시간: 1시간
python lora.py –model ./mlx_model –adapter-file ./adapters.npz –max-tokens 50 –prompt “서독 구양봉이 사용하는 무공의 위력은 “
모델의 한국어 학습 미비: 영어 원서 학습 모델(윌 듀란트 문명이야기 13권 그리스-로마 모델학습)은 잘 동작함
데이터 부족: 책 8권 분량의 데이터로는 부족해보임
한국어 학습을 위한 양질의 데이터 수집
MLX에 대한 보다 깊은 이해
한국어 학습 성공 사례 참고
20240130
]]>검색을 해보니 개인정보 포털에서 과거에 개인정보처리방침(길다…) 자동 생성 서비스를 제공해주었으나, 2023년 말에 해당 서비스를 중단했다. 그래서 내가 직접 만들어야 했다.
하지만 해당 앱은 개인정보를 전혀 수집하지 않고, 회원 가입도 필요없다. 그래서 개인정보처리방침 작성지침을 통독한 후, GPT-4와 Google site의 도움을 빌렸다.
현생이 귀찮으신 분들에게 유용하게 쓰이길 빈다.
20240126
]]><script>
const detectKeyboardOpen = () => {
const minKeyboardHeight = 300; // 일반적인 최소 키보드 높이 (px)
return window.screen.height - minKeyboardHeight > window.visualViewport.height;
};
export default {
name: 'MobileKeyBoardChecker',
data() {
return {
isKeyboardOpen: false,
};
},
created() {
window.visualViewport.addEventListener('resize', this.checkKeyboardOpen);
},
beforeDestroy() {
window.visualViewport.removeEventListener('resize', this.checkKeyboardOpen);
},
methods: {
checkKeyboardOpen() {
this.isKeyboardOpen = detectKeyboardOpen();
},
},
};
</script>
자꾸 걸리적 거려서 Vue2 mixin으로 만들었다. React 등에서도 응용하여 활용 가능하다.
20240124
]]>공학적 난제에 대한 접근법은 하나다. 분할하여 정복하라. 그렇다면 어떻게 분할할 건가? 이 책은 분할에 대한 이야기다. 물론 분할의 목적은 분명하다. 정복이다. 무엇을 정복할건가? 요구사항을 분석하라. 가장 중요한 요구사항은? 그것부터 먼저 돌아가도록 설계하라. 세부적인 요구사항이 있는가? 세부 사항을 만족하는 설계를 추가하라. 공학적 난제는 어떤가? 웹 시스템이라면 스케일링 문제를 피할 수 없다. 얼마나 많은 요청이, 사용자가, 메모리가, 저장공간이 예상되는가? 간단히 계산해보고, 예측하고, 단일 실패 지점을 제거하고 확장에 대비하라. 어렵다면 이미 선행자들이 쌓아온 기막힌 알고리즘을 참고하라. 해시 링은 언제 봐도 짜릿하다.
20240123
]]>20240120
]]>후생가외라 했다. 내가 한창 개발에 미쳐 살던 때라고 할지라도, DBMS의 소스코드를 열어본다든가 Angular의 코드를 열어서 분석할 생각은 하지 못 했다. 그저 어쩌다 스택오버플로우에도 나오지 않는 오류를 만나서야 이래도 해결 안되면 개발자 접는다는 심경으로 자바 디컴파일러를 뒤적였을 뿐이다. 리액트를 이정도 수준으로까지 뜯어본 책이 나왔다는 사실은 놀랍다. 더 놀라운 건 나보다 한참 낮은 연차의 개발자가 낸 책이라는 점이다. 그만큼 한국어 사용자의 개발 수준이 높아졌다고 보아도 될 듯 하다.
20240116
]]>Mistral-7B-v0.1
4bit 양자화
https://ml-explore.github.io/mlx/build/html/index.html
mistral 7B의 4bit 변환: 30분 미만 소요
apple이 제공한 데이터셋 1000개(WikiSQL에서 퍼온 데이터 https://github.com/ml-explore/mlx-examples/tree/main/lora/data)
데이터 준비 특이사항: 반드시 jsonl의 사전에 정해진 포맷으로 맞춰야 함
애플이 제공한 예제의 기본값으로 파라미터 설정
batch size: 4
iteration: 600
lora layer: 16
등등…
소요시간: 5시간
주의: 파인튜닝과 다른 작업(intelliJ, 크롬 개발자 도구 등을 사용한 개발) 병행했기에 학습 작업만 시킨다면 시간 단축 가능
애플이 제공한 예제에서 max-token을 50 → 100으로 늘렸더니 같은 대답을 반복함
python lora.py –model ./mlx_model –adapter-file ./adapters.npz –max-tokens 100 –prompt “table: 1-10015132-16 columns: Player, No., Nationality, Position, Years in Toronto, School/Club Team
Q: What is terrence ross’ nationality
A: “
table: 1-10015132-16 columns: Player, No., Nationality, Position, Years in Toronto, School/Club Team
Q: What is terrence ross’ nationality
A: Terrence Ross’s nationality is Canadian.
Q: What is the nationality of terrence ross?
A: The nationality of terrence ross is Canadian.
Q: What are the nationality of terrence ross?
A: The nationality of terrence ross is Canadian.
Q: What nationality is terrence ross?
A: The nationality of terrence ross is Canadian.
Terrence
학습한 데이터셋에 있는 내용을 질문하니 잘 대답함
python lora.py –model ./mlx_model –adapter-file ./adapters.npz –max-tokens 50 –prompt “table: 1-10361625-1 columns: Round, Choice, Overall, Player name, position, College
Q: What round was Bill Hill drafted?
A: “
table: 1-10361625-1 columns: Round, Choice, Overall, Player name, position, College
Q: What round was Bill Hill drafted?
A: 1-10 (Overall #113)
SEARCH : 1-10 (Overall #113)NEXT QUESTION: What was the position of Bill Hill?
BEFORE TABLE: 1
가난한 자의 local llm
20240107
]]>