devOhzl

💬 구현하고자 하는 기능 전류, 전압, 온도 데이터를 라인차트로 표현하였는데, 데이터 값의 차이로 인해 y축을 3개로 사용하였다. 하지만 범례로 라인을 on/off 하여도 y축은 그대로 표현되고 있었다. 표현되어 있는 라인 데이터의 y축만 남겨서 차트 가독성을 높였다. 📌 기능 구현하기 1️⃣ yAxis , series 속성을 전류/전압/온도에 맞게 작성한다. yAxis: [ { type: 'value', name: currentName, nameTextStyle: { fontSize: 0 }, min : Math.min(...this.dataTrend.current)-1, max : Math.max(...this.dataTrend.current)+1, axisLabel: { formatter(value..

배열 안에 객체가 여러 개 들어있는 형태를 자주 사용한다. 그 배열 안의 객체의 특정 키를 선택하여 배열 안의 객체를 정렬하는 방법이다. 📌 정렬하고자 하는 배열 const arr = [ { key: 'out1', value: 0 }, { key: 'out3', value: 1 }, { key: 'out2', value: 4 } ]; 'key' 속성의 문자열을 비교하여 오름차순으로 정렬하고자 한다. 📌 sort 함수 사용 sort() 함수는 기존 배열을 정렬하지 않고, 새로운 배열을 반환한다. a,b 는 비교할 첫번째 변수, 두번째 변수를 나타낸다. const arr = [ { key: 'out1', value: 0 }, { key: 'out3', value: 1 }, { key: 'out2', valu..

1. 박스 모델 ▶️ box-sizing : 요소의 높이와 너비를 계산하는 방식을 지정 1️⃣ content-box (default) content 영역을 기준으로 계산된다. width=200px일 때, content=200px이 되며 padding, border은 별개로 계산된다. 2️⃣ border-box content, border, padding 영역을 합한 영역을 기준으로 계산된다. width=100px 이고, border과 padding 각각 양쪽의 합이 10px 이면, content 영역의 크기는 80px이 된다. 2. 여백 상쇄 (마진 상쇄) 인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상 인접한 여백 중 큰 여백으로 상쇄된다. 참고 이재성, 한정. 『기초부..

속성 선택자 : "요소 이름[속성명(연산자)]" 의 형태를 갖는다. 1️⃣ 속성명 : 해당 속성을 갖는 요소를 모두 선택 1 span[id] { color: skyblue; } 2️⃣ = : 값이 정확하게 일치할 때 선택 2 a[href="test.com"] { color: red; } 3️⃣ |= : 값이 일치하거나 값 뒤 -(하이픈)을 작성할 때 또한 선택 3 /* id중 hi 또는 hi- 형태를 갖는 span 요소 선택 */ span[id|="hi"] { color: yellow } 4️⃣ ^= : 접두사로 값을 가질 때 선택 4 /* id의 접두사가 test인 span 요소 선택 */ span[id^="test"] { color: skyblue; } 5️⃣ $= : 접미사로값을 가질 때 선택 5 ..

💬 iframe(HTML Inline Frame) 이란 해당 웹 페이지 안에 다른 페이지를 불러와서 삽입할 수 있다. 📌 프로젝트 구성 방식 지금 진행하는 프로젝트는 main-proejct / dev-project 로 서비스를 나눠서 구성했다. Main Project : 로그인, 메뉴, 사용자, 각 서비스 iframe 연결을 관리하는 프로젝트 Dev Project : 개발하는 화면을 관리하는 프로젝트 (iframe안에 들어감) 📌 프로젝트 실행 Main / Dev 프로젝트를 실행하고 (npm run serve) Main Url로 접속한 후, Dev 서비스를 iframe으로 호출한다. 📌 Main Project의 Template src에 Dev 서비스의 라우트를 넣어준다. ✅ name : iframe의 n..

💬 구현하고자 하는 기능 차트 컴포넌트의 사이즈를 고정해놓으면 라벨 갯수가 늘어날 때 Bar가 점점 작아진다. ① 처럼 라벨 갯수가 적으면 상관이 없었지만, ② 처럼 라벨 갯수가 점점 많아지면 그리드가 점점 좁아진다. 내가 그리는 차트같은 경우, 라벨 갯수가 몇 개까지 나올지 몰랐기 때문에 라벨 갯수가 많아지게 되면 Bar가 너무 작아지기 때문에 차트를 보기 힘들 것 같았다. 📌 기능 구현하기 1️⃣ div 한 개를 더 추가한다. - 수정 전 - 수정 후 2️⃣ css 추가하기 클래스 container 의 width, max-width 을 설정한다. .container { width: 1100px; max-width: 1100px; overflow-x: auto; overflow-y: hidden; he..

💬 구현하고자 하는 기능 1. 파이차트 가운데에 이미지 추가하기 2. 파이차트 클릭 시 url 이동하기 📌 파이차트 가운데 이미지 추가하기 series 속성 안의 label 을 사용하여 이미지를 추가한다. series: [ { label: { position: 'center', // 1. 변수 'a' 설정 formatter: () => { return '{a|}' }, rich: { // 'a' 변수에 들어갈 속성 설정 a: { backgroundColor: { image: require(`@common/DashBoard/Content/img/${this.chartId}.png`), }, height: 35 }, } }, } ] 📌 파이차트 클릭시 이벤트 추가하기 차트를 초기화한 후, click 이벤트를..

💬 개요 Chartjs를 이용한 Bar Chart에서 범례와 차트가 딱 붙어있는 현상 해결하기 0️⃣ 스크립트 작성 전 1️⃣ 차트 생성 후 플러그인 추가 :plugins="[legendMargin]" 2️⃣ 플러그인 객체 생성 legendMargin() { return { id: 'legendMargin', afterInit(chart,legend,options) { const fitValue = chart.legend.fit; chart.legend.fit = function fit() { fitValue.bind(chart.legend)(); return this.height += 20;// 원래 범례 높이에 20 더하기 } } } }, 3️⃣ 결과 💬 참고 https://youtu.be/87rnM..

💬 개요 현재 진행하는 프로젝트는 main / cc / dev 로 총 3개의 서비스로 구성중인데 main 프로젝트 안에 iframe 으로 cc/dev에서 만든 컴포넌트를 뿌리는 방법이다. 이 때 dev 컴포넌트 안에서 main의 url을 변경했어야 했는데, window.location.href 를 사용하니까 dev 안에서 url 변경이 이루어졌다. ( = iframe의 url 이 변경됨 ) 📌 해결 : window.parent.location.href 사용 main 프로젝트의 (=브라우저) url을 변경할 수 있었다. 새로고침 효과가 적용되었다.

💬 개요 vue 환경변수를 사용하려고 스크립트에서 호출했는데, undefined로 호출되는 오류가 발생했다. 📌 시도한 환경설정 .env.development VUE_ROUTE_TARGET=http://localhost:8081/ .env.production VUE_ROUTE_TARGET=http://xxxx.xxxx.com/ 으로 설정을 한 후 콘솔 출력을 해보았는데, undefined 에러가 나왔다. console.log(process.env.VUE_ROUTE_TARGET) // undefined 📌해결 : VUE_APP_ 을 prefix로 사용 .env.development VUE_APP_ROUTE_TARGET=http://localhost:8081/ .env.production VUE_APP_RO..