본문 바로가기

전체 글

 (274)
vue에서 chart.js로 차트 그린 후기 chart.js는 canvas를 사용하여 그림을 그리는 것이다. 따라서 mounted에 차트를 그리는 메서드를 넣었는데 문제는 차트에 들어가는 데이터를 서버의 api를 통해 props로 전달 받는 형식으로 개발되어서 처음에 페이지를 로드하면 props에 아직 데이터가 할당이 되지 않아 null로 넘어오는 문제가 있었다. 그래서 해결 방법으로 props에 들어갈 데이터가 아직 없다면이라는 v-if조건으로 chart컴포넌트에 걸어주어 props데이터가 생성되면 차트를 그리도록 만들었다. 이번 프로젝트에서는 chart.js에서 도넛모양 차트를 사용했는데, 지난번에 사용했던 amchart(유료 버전이 따로 있어서 무료버전은 워터마크가 생긴다ㅡ)에 비하면 상당히 복잡했다. 다음 포스트에서는 chart.js 사용법..
인텔리제이 헤더에 자동으로 글쓴이 표시하기 settings > Editor > File and Code Templates > Includes /** * Project : ${PROJECT_NAME} * Author : NAME * Created : ${DATE} * Description : * ======================================================================================== * DATE AUTHOR NOTE * ${DATE} NAME 최초 생성 */
Vue2-datepicker 한글 커스텀하기 https://www.npmjs.com/package/vue2-datepicker vue2-datepicker A Datepicker Component For Vue2 www.npmjs.com 깃레포지토리에 가면 언어 설정하는 법에 관해 더 자세하게 나와있다. 스타일링은 vue2-datepicker/scss/index.scss 파일 안의 클래스 이름 확인 후 오버라이딩시켜주면 된다. 다만, 지역scope가 아닌 전역으로 스타일을 적용해줘야 한다. ~ 당일 1개월 1년 조회 // 스크립트 작성 // 스타일 커스텀
.gitignore 적용 안될 때 git rm -r --cached . git add . git commit -m "commit 내용" git의 캐시를 지워주고 다시 깃 저장 후 푸쉬해 주면 적용 된다. git add . 후 커밋안하고 지우고 싶을때 git reset .
[JS] yyyy-mm-dd형태로 만들기 (Date객체 활용하기) Date객체를 파라미터로 받아 yyyy-mm-dd꼴로 반환해주는 함수를 만들기 1 2 3 4 5 6 7 8 9 const dateFormatter = date => { const year = date.getFullYear(); const month = 1 + date.getMonth() >= 10 ? 1 + date.getMonth() : '0' + (date.getMonth() + 1); const day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate(); return `${year}-${month}-${day}`; }; 응용편 dateFormatter함수를 이용하여 기간 산정 함수를 만들어보자 1 2 3 4 5 6 7 8 9 10 11 c..
스크롤 이벤트 사용하기 created() { window.addEventListener('scroll', this.handleScroll); } destroyed() { window.removeEventListener('scroll', this.handleScroll); },
스크롤 현재 위치 구하기 (스크롤 이동) const el = document.getElementById(아이디명); const target = window.pageYOffset + el.getBoundingClientRect().top; // 타겟 위치로 스크롤 이동해준다 window.scrollTo({ top: target, behavior: 'smooth', });
eslint autofix설정 "eslint.validate": [ { "language": "vue", "autoFix": true }, { "language": "javascript", "autoFix": true }, { "language": "javascriptreact", "autoFix": true }, { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true }, ] 설정에서 eslint검색 후 json으로 편집 "eslint.validate": [ "vue", "javascript", "javascriptreact", "typescript", "typescriptreact" ], eslint@5.16.0을 ..

티스토리툴바