본문 바로가기

Frontend68

[Webpack] webpack option 정리 웹팩을 사용하면서 설정해논 옵션이 어떤 옵션인지 알기 위해서 낱낱히 파해치는 작업을 했었는데, 보기 힘들어서 그냥 따로 정리하기로 했다! 2021.06.25 - [Frontend/Webpack] - [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자. [Webpack] 이미 올라가있는 웹팩 설정을 뜯어보자. 지금 유지보수하고 있는 모니터링 시스템은 운영중인 사이트와 다르게 vue.js (+webpack) 설정으로 구성되어 있다. 다른 사람이 설정해놓은 웹팩을 가져다 쓰기 보다는 이해하고 사용하고 싶어서, vvh-avv.tistory.com 공식홈페이지를 많이 참고해서 정리하였으나, 지나가시는 분 중 제 설명에 틀린 점이 있다면 편하게 지적 부탁드립니다 :) context 복잡한 상대경로를 쉽게 사용하.. 2021. 6. 25.
[Node.js] 실행 파라미터 넘기기 (passing parameter) package.json 파일로 정의한 실행 명령어에서 내가 원하는 파일에게 내가 원하는 파라미터를 넘기고 싶으면 아래처럼 사용하면 된다. // package.json { "scripts" { "my-command": "node myFile.js one two three" } }} // myFile.js const args = process.argv.slice(2); console.log(args[0]); // one console.log(args[1]); // two console.log(args[2]); // three 핵심은 process.argv.slice(2) 이고 반환타입은 array 라는 점 :) 2021. 6. 25.
[Webpack] 누군가 해둔 웹팩 설정을 뜯어보자. 지금 유지보수하고 있는 모니터링 시스템은 운영중인 사이트와 다르게 vue.js (+webpack) 설정으로 구성되어 있다. 다른 사람이 설정해놓은 웹팩을 가져다 쓰기 보다는 이해하고 사용하고 싶어서, 하나씩 분석해보기로 했다. (참고: webpack 은 3.x 버전이다) 우선, 각 환경별로 설정되어 있는 webpack config 에서 공통으로 사용하는 webpack.base.conf.js 'use strict'; const webpack = require('webpack'); const path = require('path'); const utils = require('./utils'); const config = require('../config'); const vueLoaderConfig = req.. 2021. 6. 25.
[Vue.js] Chart.js 로 그린 Doughnut Chart 에서 없는 데이터의 label 숨기기 (empty data label hide) Vue-Chart.js 로 도넛차트를 그렸는데, 아니 멜론만 9개인데 위에 label 이 줄줄이 나올 필요가 있나? 싶어서 숨기는 방법에 대해서 찾아보다가 성공했다 ! 핵심은 data 세팅할 때 값이 없으면 (나같은 경우는 0이면) undefined 로 세팅하는 것 !!! (null 세팅은 안된다 😅) axios .post(...) .then(res => { let chartData = res.data; this.renderChart( { labels: [ "바나나", "사과", "포도", "체리", "멜론", "수박", "참외" ], datasets: [ { backgroundColor: [ this.randomColors(), // 따로 정의한 method this.randomColors(), thi.. 2021. 6. 10.
[jQuery] .data() vs .attr() jQuery 공식 홈페이지에서 정의하는 .data() 와 .attr() 스펙 .data() : https://api.jquery.com/jQuery.data/#jQuery-data-element-key-value .attr() : https://api.jquery.com/attr/#attr-attributeName 공식 홈페이지에서 정의한 내용에 덧붙여 실무하면서 알게 된 사실을 적어보고자 한다 :) .data() .attr() 리턴 객체 데이터 타입 Object String DOM 변경 여부 X O 서로 다른 데이터 접근 X X 1. 리턴 객체 데이터 타입 .data() : Object 금액 계산을 하려면 typepf 로 현재 데이터 타입을 판단하고 parseInt 를 해야 한다. .attr() : S.. 2021. 6. 7.
[Vue.js] vue-router 로 component 에 props data 전달하는 방법 Vue.js 를 배워보겠다고 책도 읽고 강의도 보았지만 역시 개발자는 코딩을 해봐야되나보다.. 백문이 불여일타 🙏 # 하게 된 계기 (tmi) - Vue.js 프로젝트를 진행하면서 모니터링 페이지를 만들고 있는데, 각 컴포넌트의 title 이 여러 군데에서 하드코딩 되어 있는 것을 보고.... 상수처럼 한 번만 정의해보자! 하게 됨 # 검색 1. vue-router props data 2. vue-router passing data 3. vue-router access app vue data 4. component props data ..... 등등 수많은 키워드로 검색했지만 거의 다 공식홈페이지에 있는 내용이라서 도움이 되지 못했다 😥 나는 App.vue 에서 data 로 각 컴포넌트의 title 을 .. 2021. 6. 4.

티스토리툴바