Tips, Tricks/Node, Vue, Electron 검색 결과

해당 글 6건
반응형

Ubuntu 에 LTS버전의 Node.js 설치하기(Installing LTS version of Node.js on Ubuntu)

Ubuntu 운영체제를 설치하고 아래의 명령으로 Node.js를 설치하면 오래된 LTS(Long-Term Support) 버전 으로 설치됩니다. sudo apt install nodejs apt를 통해서 최신 버전을 설치하기 위해서는 다음과 같이 진행합니다. 저는 최신 모듈에서는 호환이 안되는 문제가 있어 14.x 버전을 설치합니다. Node.js 웹사이트에서 LTS 버전을 확인합니다. 2023년 03월을 기준으로 18.x 버전까지 나와 있으며 19 버전도 설치가 가능합니다. 아래의 명령어으로 apt 저장소의 경로를 업데이트합니다. 아래의 명령에서 버전숫자만 달리하면 다른 버전도 설치가 가능합니다. curl -sL https://deb.nodesource.com/setup_14.x | sudo bash ..
Tips, Tricks/Node, Vue, Electron 2023. 3. 9. 14:29

Vue.js에서 동적 컴포넌트 사용하기(Dynamic Components in Vue.js)

본 포스트에서는 Vue.js에서 동적으로 컴포넌트를 사용하는 방법에 대해서 설명합니다. 필자는 보안 프로그램을 개발하기 위하여 Vue.js의 template를 읽어서 동적으로 보안 입력기를 만들어야 했습니다. 딱히, 보안 입력기의 사용을 위해 고객사 개발자가 일일이 보안 입력기를 등록하는 번거로움을 해결하기 위한 방법을 찾아야 했습니다. 그 방법이 본 글에서 제시하는 동적 컴포넌트 사용입니다. 아래의 그림은 입력 양식의 속성을 읽어서 보안 입력기를 컴포넌트를 자동으로 등록하여 보안 입력이 가능하도록 처리한 예시입니다. 동적 컴포넌트 사용하기 동적 컴포넌트 template 아래의 코드에서는 Text 입력양식과 Password 입력 양식을 선언하고 각 입력 양식에 따라 동적 컴포넌트를 추가하는 방법을 설명합..
Tips, Tricks/Node, Vue, Electron 2020. 5. 11. 11:06

Vue.js에서 resize이벤트 처리하기

본 포스트에서는 웹브라우저 크기조절에 따른 이벤트를 처리하는 방법에 대해서 설명합니다. 필자는 화면의 폭에 따라서 사용자화면을 다르게 보여주기 위해서 리사이즈 이벤트를 처리할 필요가 생겼습니다. 화면의 폭에 따라서 특정한 div의 크기를 자동으로 조절해야 했습니다. vue에서는 자체적으로 window의 resize이벤트 처리가 안되는 관계로 웹브라우저의 window의 이벤트를 등록/제거하는 로직을 추가하고 발생하는 window이벤트를 vue에 전달하여 resize이벤트를 구현하였습니니다. 다음은 간단하게 구현된 resize 처리방법입니다. Vue의 mounted 이벤트시에 window의 resize이벤트를 등록하고 beforeDestory 이벤트 시에는 window의 resize이벤트를 등록해제하는 코드..
Tips, Tricks/Node, Vue, Electron 2020. 5. 7. 11:26

Vue.js : 입력양식 배열 사용하기(v-model array with Multiple Input)

Vuejs와 Bootstrap Vue를 사용하면서 여러 개의 text입력을 배열 처리하려고 하는데 Bootstrap Vue에서 제공되는 컴포넌트에서는 배열 처리를 지원하지 않습니다. 본 포스트에서는 여러 개의 입력 양식을 배열로 처리하는 방법에 대해서 설명합니다. 추가적으로 key, value 기반의 map 형태 처리 방법도 설명합니다. 예제는 다음과 같이 구성하였습니다. 여러 개의 입력을 배열로 처리하기 입력값 처리 변수 추가하기 export default { name: 'Form', components: { }, props : { }, data () { return { multiple_input_array: "", // 값 추가를 위한 입력양식의 값 multiple_input_array_list : ..
Tips, Tricks/Node, Vue, Electron 2020. 3. 24. 09:54

break 처리를 위한 forEach 대신 some으로 변경하기

메뉴관리를 구현하면서 forEach를 통해 하위 메뉴를 찾는 로직을 수행하려고 하였는데 원하는 결과값이 나오지 않는 문제가 발생하였습니다. 아래의 글은 이 문제를 해결하는 방법에 대한 정리 합니다. 아래와 같은 메뉴가 있을 때 [시스템] 메뉴를 수정하는 경우 상위 메뉴 선택 시 [시스템]의 하위 메뉴는 제외하는 로직을 추가하려고 메뉴 항목을 forEach 하여 [시스템] 메뉴의 하위 항목을 검색하여 상위 메뉴 선택에서 제외하는 로직을 구현하려고 하였습니다. 원하는 결과는 [시스템] 메뉴의 4개 항목만 제외되어야 하는데 [환경설정]의 하위 메뉴까지 제외되는 문제가 발생하였습니다. 인터넷을 조회한 결과 javascript 나 Node.js에서 배열에 대한 forEach를 사용하여 값을 처리하는 경우 brea..
Tips, Tricks/Node, Vue, Electron 2020. 3. 17. 18:28

Vue.js Filter : 3자리마다 쉼표찍기와 bytes 길이 자동 표시(Pretty currency & Pretty size of bytes)

이번 포스트에서는 3자리마다 쉼표 찍는 방법과 bytes 길이를 자동으로 표시하는 Vue.js의 필터에 대해서 설명합니다. 3자리마다 쉼표찍기 /main.js에 아래의 코드를 삽입합니다. Vue.filter('currency', function (num) { // jacked from: https://github.com/sindresorhus/pretty-bytes if (typeof num !== 'number' || isNaN(num)) { throw new TypeError('Expected a number'); } return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,") }); 사용방법 {{ updateTotalBytes | cur..
Tips, Tricks/Node, Vue, Electron 2020. 3. 10. 13:15
반응형