Chart.js 이번에 신규 프로젝트를 진행하게되어 시안을 받았다. 매출이나 현황 등 주로 대시보드에서 자주 쓰이는 차트를 사용 해보려고 한다. 아! 여기에서는 함수형 컴포넌트를 사용하고 있다 : ) Install $ npm install chart.js --save Import import Chart from 'chart.js/auto'; How to Use function ??? () { const canvasDom = useRef(null); // Dependency array 에 props 추가하고 return에 chart.destory() 추가 예정 useEffect(() => { const ctx = canvasDom.current.getContext("2d"); new Chart(ctx, {..

const currentDate = new Date() console.log(currentDate) //Output: 2022-01-29T10:03:47.564Z 이제껏 봐왔던 Javascript의 형식이다! 📔Monent 📄How to Install 📝npm 또는 yarn 을 이용한 설치 명령어 $ npm install moment --save // 또는 $ yarn add moment 📄 Code Sample 코드 예제 import "./index.css" import Moment from 'moment'; import "moment/locale/ko"; // Locale Setting function App() { const formatDate = Moment().format('YYYY-MM-DD'..

Flutter 에러 Cannot run with sound null safety 이슈 Error: Cannot run with sound null safety, because the following dependencies don't support null safety: - package:http - package:http_parser For solutions, see https://dart.dev/go/unsound-null-safety FAILURE: Build failed with an exception. 와 같은 에러메세지가 발생했다. 해결 상단 메뉴에서 Run - Edit Configurations 를 선택하고! --no-sound-null-safety 를 추가하고 Ok 를 누르면 해결!!

자, Docker에 대한 글은 잘 보고 오셨나요? 혹시나 놓친 분들을 위해 링크 걸어놓겠습니다. Docker 란? 이번에는 실제로 Docker를 어떻게 사용하는지 해보도록 하겠습니다. Host VM 설치를 위한 준비 VM 저는 무료(일부 무료) VM 생성기인 VMWare Workstation 16 Player를 이용했습니다. 하기 VMWare 공식 홈페이지에서 다운로드 버튼을 눌러주세요! VMWare Workstation 16.0 Player (VMWare 공식 홈페이지) CentOS OS의 이미지 파일은 교육용으로 많이 사용되는 OS로 사용해보겠습니다. Ubuntu 사용자 분들이 많이 보이니 저는 CentOS로 해보는 걸로! CentOS 공식 홈페이지 The CentOS Project October 7..

Docker 란? Docker라는 것은 컨테이너 기반의 오픈소스 가상화 플랫폼입니다. 이게 무슨소리인가 싶은 분들도 계실겁니다. 단순하게 이야기 하자면, 특정 환경이 설정되어있는 특정 프로세스를 압축하여 하나의 '컨테이너'로 추상화하여, 인터페이스로 제공하는 것이죠. 더 쉽고 간단하게 축약하자면 공유서버에 제가 만든 설정에 맞춘 프로젝트를 올리는 겁니다. 하나의 프로젝트를 여러 곳에서 다운받아 사용하고 싶을 때 인터넷망이 연결되어있고 Docker 시스템만 다운로드 되어있다면 어디서든 다운받을 수 있다는 장점이 있죠. 실무에서는 하나의 템플릿에서 고객사에 맞게 수정을 하는 솔루션 업체에서 사용합니다. Docker 의 컨테이너 Docker에는 앞서 언급한 '컨테이너' 라는 것이 있습니다. Docker의 로고..

웹앱 커스터마이징 화면에 대한 관심도가 갈수록 높아지고 있다. 오로지 View 만을 위한 Program Language가 계속해서 출시되고 있는 것만 보아도 느껴진다. 스타트업이나, 떠오르는 기업의 프론트앤드 개발자들은 덕분에 바빠지고(?)있다. 보통 중소기업 및 중견기업은 옛날 소스를 대부분 유지보수 중이다. 이는 좋게 말하면 '안정화', 나쁘게 말하면 '필요성을 못느낌' 또는 '귀찮음' 이다. 특히 백엔드 분야에서는 추가개발 요청이 오면 옛날 소스를 분석하고, JDK 또는 SDK 등 언어의 버전을 맞추고, 해당 버전에 맞는 옛날 방식의 소스로 코딩을 진행해야하고... 이러한 불필요한 과정들이 참 많다. 그런데, 프론트엔드 분야에서는 이 과정이 조금 쉽다. 대다수가 HTML5로 개발되어 있기 때문에 태..

📔SMTP For Gmail 📄Gmail 버전 📝Batch 프로세스를 개발하던 중, 특정 알람을 받고 싶은 경우가 생겼다. Batch 시작과 완료 시점이라던지, Schedule 에 따른 데이터 확인이라던지.. 그런 순간을 위해 SMTP Library 를 사용해서 심플하게 구축해봤다. 여기에서 확장성을 염두에 두고 추가 개발을 하면 더욱 멋진 코드가 될 것이다. 아래는 따로 구현한 시나리오이다. * 수신자를 고정하도록 * 필수 참조로 나를 고정하도록 * 팀 메일을 자동 생성하도록 * 조건에 따른 메일 내용이 다르게 전송되도록 * 특정 파라미터를 통해서도 메일이 전송되도록 👨‍💻💻⌨ package smtp; import java.util.ArrayList; import java.util.List; impor..

입력받은 숫자만큼의 랜덤 비밀번호 생성 요청사항에 의해, 비밀번호 초기화 시 랜덤 값으로 비밀번호를 생성해달라고 하였다. 숫자, 영 대소문자를 섞어서 특정 자릿 수로 말이다. 일단은 요구조건에 맞게끔 빠르게 진행하였다. private static String getRandomPassword(int passwordLength) { char[] pwdcharSet = new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 'A', 'B', 'C', 'D', 'E', ..