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의 로고..

이제 톰캣을 연동해보자! Add Configuration 클릭! Templates가 아닌, 좌측 상단의 + 버튼을 통해서 Tomcat Server/Local 선택!! (※주의 Templates 안에서 Tomcat Server를 선택하면, 기본세팅의 값을 불러오지 않아 일일히 세팅해줘야한다. 템플릿인데 왜지..?) 이전에도 포스팅하였지만 UTF-8 설정은 이곳에서 진행하여준다. 링크 : intelliJ UTF-8 설정 / 인텔리제이 UTF-8 인코딩 VM options 에 -Dfile.encoding=UTF-8 추가! Fix 버튼을 누른 후, 아직 배포할 단계가 아니기 때문에, 프로젝트명:war exploded 선택 OK 로 마무리.

긴 말 없이 바로 설정해보자. Spring MVC Setting Spring (STS) 구조에 맞추기 좌측은 이전 글에서 완료한 프로젝트의 모습이고, 우측은 STS 구조에 맞춘 프로젝트의 모습이다. 먼저 'web' 디렉토리를 'src/main' 디렉토리 하위로 이동시키고, 이름을 변경하자. 단축키는 Shift + F6 / 파일을 Refactor 할 때 사용하는 단축키이다. 인텔리제이 기반 IDE의 장점 중 하나로, 'A' 파일을 Refactor 하면 해당 파일을 참조하는 모든 파일들의 'A' 의 명칭이 Refactor한 명칭으로 자동으로 변경된다. 경로가 이동했기에 아무래도 프로젝트의 설정 또한 변경해주어야 겠지? File / Project Structure로 들어간다. Modules를 선택하고 가운데의..

#인텔리제이 Spring 프로젝트 생성 #intellij Spring 프로젝트 생성 📔IntelliJ 와 Spring MVC 의 조합 기존에 이클립스, STS 를 사용하다 인텔리제이를 사용하고 싶어하는 친구들이 늘어나고 있다. 개발은 장비빨이지.. 본인은 프로젝트의 특성이나 올드함에 따라 두 개 모두 즐겨 사용하는데, 오늘은 인텔리제이를 사용하는 친구들에게 Spring MVC 프로젝트를 생성하는 방법을 공유하고자 이 글을 포스팅한다. 이 글은 인텔리제이가 설치되어있다는 가정하에, 그리고 빌드 도구로 Maven 을 사용한다는 가정하에 시작한다. 📄프로젝트 생성하기 📝새로운 프로젝트를 구축해보려는 아무개씨는 인텔리제이를 켜고, New Project를 실행한다. 'New Project' 팝업창의 좌측 Supp..