반응형 프론트앤드8 [프론트엔드] 유용한 무료 데이터 시각화 플러그인 오늘은 쉽고 빠르게 데이터 시각화를 할 수 있는 몇 가지 툴들에 대해 포스팅 해보려 합니다. 파이썬의 내장 기능처럼 데이터를 시각화 하는 것들에 비새서는 js에서 바로 시각화 하기에는 완성도가 떨어지기에, 플러그인을 사용하겠습니다 웹사이트를 제작해주다보면 고객에게는 어떤 ui로 편하게, 기대하는 기능들에 더 쉽고 빠르게 접근을 하는 것이 관건이라면, 관리자에게는 현재 데이터들을 한 눈에 볼 수 있는 것이 중요합니다. 사용자의 수가 어떻게 늘고 있는지, 수익이 어떻게 변하고 있는지, 어느 지역의 사용자가 가장 많은 지 등에 대해서 알아봐야 하겠죠. 이러한 데이터 시각화는 마케팅에 대한 효과를 보는데에 도움이 많이 됩니다. 그리고 개발자의 기능 배포 이후 어떻게 변화하는지도 수치로 나중에 활용하기에도 정말 .. 2023. 8. 18. 자바스크립트 : 클립보드로 복사 버튼만들기 javascript clickHandler() { const el = document.createElement(`textarea`); el.value = "Junmannn"; el.setAttribute(`readonly`, ``); document.body.appendChild(el); el.select(); document.execCommand(`copy`); document.body.removeChild(el); alert('Copied coupon code ! : ' + el.value); } See the Pen Untitled by Junmannn (@Junmannn) on CodePen. 가끔 보면 버튼 하나로 링크 복사하기 혹은 어떠한 글자를 복사하기 등을 볼 수 있을 것이다. 정말 어렵게만 생각했는데, 코드.. 2022. 3. 10. Angular 앵귤러 <mat-select> 안에 체크박스 다중선택 checkbox 목록을 여러개 만들어, 여러개 (다중선택)를 선택하여 배열에 담는 것은 웹개발을 하면서 가장 빈번하게 나타나는 부분입니다. 라디오버튼을 여러개 만들어서, 선택을 하는 방법, 혹은 체크박스로 select 하는 방법이 있습니다. 일단 여러개를 입력받아 저장하는 것도 굉장히 귀찮은 일이긴 합니다. 일단은 앞으로도 계속 사용하게 될 다중 선택 기능을 확실하게 잡고 갑시다. 일단 기본적으로 다중선택 기능 구현을 확실하게 익혀두고, 두고두고 사용합니다. 기본을 익히고 나서 심화를 해봅시다. Angular 기준, 즉 typescript 기준이지만, 이 정도의 응용은 할 수 있을 것이라 생각합니다. 만일, 해당 코드를 보고 다른 언어로 변환하기가 힘들다면 댓글을 남겨주세요. 아주 기본적인 것만 적을 것.. 2021. 12. 10. vscode 프론트앤드 개꿀 플러그인 모음 비주얼스튜디오로 html, css, js 작성시 개굴인 플러그인들을 소개해보려 합니다 1. Material Icon Theme 이거 설치하면 파일을 확장자별로 정리해서 보여줍니다. js, ts, html, css 마다 다른 아이콘으로 보여줍니다. 상세한거는 프로젝트 내용 땜시 json만 2. Auto Rename Tag : ZZZZ 여기서 앞의 h1 에서 h2 로 바꾸면 클로징 태크도 같이 변경됩니다. 로 3. CSS Peek 마지막으로 , 비주얼스튜디오에서 화면 분할해서 쓰실 때에, 가끔 짜증나는 놈이 있죠.. 요놈을 없애볼랍니다. minimap 이라고 부르더군요.. Mac 기준 comand + , 하면 설정이 열리죠. 아니면 비주얼스튜디오에서 파일 - 기본설정 - 설정 가면 됩니다 여기서 minima.. 2021. 10. 20. 반응형 웹페이지 만들기의 시작 스마트폰의 대중화로 예전과는 달리 웹사이트 방문을 위해 사용하는 기기의 비중에 스마트폰이 압도적인 비중을 차지하기 시작했다. 그렇다고 데스크탑 화면을 버릴 순 없다. 그렇다면 우리는 둘 중 하나도 버릴 수 없다. 반응형 웹을 만들것이다. See the Pen by Junmannn (@Junmannn) on CodePen. 아 돌려봤는데 이게 블로그에서 바로 페이지 크기 변경하면서 볼 수가 없구나 코드를 올릴게여 HTML CSS .bgcolor { background-color:red; height:400px; } .size-xlarge{ flex:0 0 auto; width: 50%; } /* media 쿼리를 쓴 부분임 이게. 0~400px 까지는 이렇게 하라*/ @media screen and (ma.. 2021. 9. 2. 줄바꿈, 칸 크기 조절 가능한 입력창 만들기 문제 발생 일반적으로 이름, 번화번호, 이메일 정도나 적던 input 칸에는 그렇게 많은 공간이 필요하지 않죠. 그래서 우리는 그저 일반적인 태그를 쓰게 되었습니다. 하지만 주문시 요청사항 혹은 기타 메모 등과 같은 입력 공간에는 줄바꿈(enter)이나 크기 변경, 안의 내용에 따라 크기가 변하는 input이 필요하게 되었습니다. 오늘은 이 부분을 해보시죠 해결 방법 TypeScript // 여기는 input으로 memo를 넣는 부분에서 text 칸이 유동적으로 변화하게 만드는 부분 const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "heig.. 2021. 7. 7. <select> <option value =1> number (int), string 오류 해결 문제 발생 html 1학년 2학년 3학년 typescript selectGradeHandler(event: any) { this.grade = event.target.value; } 우리는 value = "1" 이라 하면 1이라는 string으로 저장이 될 터이니, value = 1 이라고 하거나 grade를 number나 int 와 같은 숫자의 형태로 선언을 했다면 하면 숫자로 저장이 될 것일고 믿었다. 그런데... 아니었다... 이렇게 한참을 개발하고 나중에 === (타입과 값을 동시에 비교하는 것) 로 비교를 했는데 숫자 타입이 아니라는 오류가 났다... 반년간 운영된 웹사이트에 이런 식으로 데이터가 쌓여오던 것이었다. 개패고싶다. 하지만 == 으로만 비교하면 되므로 일단 패스. 이 글을 읽게 되는.. 2021. 7. 6. 버림, 반올림 없이 소수점 2번째 자리까지 표현 $25 짜리 상품을 저렇게만 쓰면 없어보여서 25이지만 $25.00 이렇게 나타내고 싶은 경우 있다. 버림 싫다. 반올림 싫다. 그렇다면 어떻게 할까? 데이터베이스에서 가져올때 애초에 소수점 두자리까지 표현하도록 가져오겠다. 오늘도 짧고 간결하게 핵심만. 답은 .toFixed(2) 끝! 2021. 5. 18. 이전 1 다음 반응형
