프로그래밍/Js 58

vite vue3 오프라인에서 작업시 OS 플랫폼 별로 build 되는 현상

오프라인 PC 에서는 npm install 안된다. node_modules 압축해서 사용해야 한다. 그런데 OS 플랫폼에 따라 node_modules/@esbuild 실행파일이 달라진다. 실행파일은 플랫폼마다 다르다. 윈도우 : @esbuild/win32-x64/esbuild.exe 리눅스 : @esbuild/linux-x64/bin/ mac : @esbuild/darwin-arm64/bin/esbuild 그래서 플랫폼별로 npm install 한후 전체를 압축해 둔후 오프라인 PC 에 복사하여 사용한다. 윈도우용은 개발PC 에서 사용하고 리눅스는 gitlab 으로 배포하면 CI/CD 에 의해서 자동 배포에 사용한다.

프로그래밍/Js 2023.07.13

vite 와 vue3 빌드후 dist/assets/*.js 많이 나오는것을 필요한 js 만 나오게

Vite에서 dist/assets/ 폴더의 모든 .js 파일을 한 개의 파일로 묶기 위해 다른 접근 방법을 시도해 보겠습니다. 아래의 방법을 따라해 보세요: npm install concat-cli 명령을 사용하여 concat-cli 패키지를 설치합니다. package.json 파일을 열고, "scripts" 섹션에 다음을 추가합니다: jsonCopy code "scripts": { "build": "vite build && concat-cli -f ./dist/assets/*.js -o ./dist/assets/all.js" } 터미널에서 npm run build 명령을 실행합니다. 이 명령은 vite build를 실행하고, 그 후에 concat-cli를 사용하여 dist/assets/ 폴더의 모든 ...

프로그래밍/Js 2023.07.10

[vite] 번들러 vite 사용시 터미널에서 build 방법

vscode 에서 vite 번들러 사용시 아래와 같이 사용하고 있다. "scripts": { "dev": "vite --host", "build": "vite build ", "preview": "vite preview" 당연히 vscode 에서 build 또는 dev 시작 버튼만 클릭하면 되는데 CI/CD 할때 터미널에서 build 를 해야 된다. 터미널에서는 아래와 같이 사용한다. $ npm run build 그런데 도커에서 실행시 bash: npm: 명령어를 찾을 수 없음 메세지가 나온다. 도커에서 npm 설치하는 방법을 알아본다. 1. 우분투 node.js 설치 # curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - # sudo a..

프로그래밍/Js 2023.07.07

[javascript] 변수에 변수값 넣고 싶을때 (동적변수, 가변변수)

javascript 에서 동적변수/가변변수를 사용할때 eval() 을 많이 사용한다. eval()은 주어진 문자열을 JavaScript 코드로 해석하고 실행하는 기능을 제공한다. 그러나 eval() 함수는 보안 취약점을 가지고 있으므로 주의해야 한다. 사용자로부터 입력된 값 등을 eval()에 직접 전달하는 것은 보안 위험을 초래할 수 있습니다. 그래서 eval() 사용하지 않는 방법을 소개하도록 한다. import base from '../../tr/header/base.js'; import realTime from '../../tr/header/realTime.js'; import realTimeId from '../../tr/header/realTimeId.js'; import realTimeRes..

프로그래밍/Js 2023.07.06

js 배열의 index 값을 객체의 키로 변경하는 방법 [] -> {}

아래와 같은 배열이 있습니다. 0: {id: 'prdctCd', value: 'USKRW'} 1: {id: 'realCode', value: 'USDKRW300'} length: 2 배열의 키가 0 , 1 숫자로 되어 있는것을 객체로 변경해야 할때가 있습니다. prdctCd: {id:'prdctCd', value:'USKRW'}, realCode: {id:'realCode', value:'USDKRW300'} 이렇게 변경하는 이유는 배열의 0 으로 접근하는 것보다는 키로 접근하는게 가독성이 좋습니다. 1차원 배열 변경 방법 const tmp = [ {id:'prdctCd', value:'USKRW'}, {id:'realCode', value:'USDKRW300'} ]; const object = tmp...

프로그래밍/Js 2023.06.20

vue3 composition api 에서 다른 컴포넌트 함수 호출

composition api 의 send.vue (자식 컴포넌트) 주의) defineExpose 없으면 작동하지 않습니다. 참고 : https://stackoverflow.com/questions/72223441/call-a-function-from-another-component-using-composition-api Call a function from another component using composition API Below is a code for a header and a body (different components). How do you call the continue function of the component 2 and pass a parameter when you are in..

프로그래밍/Js 2023.06.13

vue3 갑자기 Error: Cannot find module 'vue/compiler-sfc' 발생시

vue3 에서 어제까지 잘되던 부분이 오늘 갑자기 아래 오류를 발생한다. (macos) Error: Cannot find module 'vue/compiler-sfc' 해결방법 package.json 에 "@vue/compiler-sfc": "^3.2.13" { "name": "vue03", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^0.27.2", "core-js": "^3.8.3", "iconv-lite": "^0.6.3",..

프로그래밍/Js 2023.05.19