Front

https://joshua1988.github.io/ts/ 타입스크립트 핸드북 joshua1988.github.io

VSCode 플러그인 목록 색 테마 : Night Owl 파일 아이콘 테마 : Material Icon Theme 문법 검사 : ESLint, TSLint 실습 환경 보조 : Live Server 기타 Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등 ctrl+shift+P 누르고 file icon theme 한 후 Meterial Icon Theme 선택하면 폴더들이 의미에맞게 컬러 변경됨

https://github.com/joshua1988/learn-typescript GitHub - joshua1988/learn-typescript: Best way to learn TypeScript Best way to learn TypeScript. Contribute to joshua1988/learn-typescript development by creating an account on GitHub. github.com https://github.com/joshua1988/vue-til-server#nvm-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD-%EB%B0%A9%EB%B2%95 GitHub - joshua1988/..

Quasar로 Table을 만들고 Quasar Scrollbar를 적용하려고 Scroll Area를 적용했더니 Table Header 까지 Scroll 되는 문제가 발생했다 해결방법은 Scroll Area를 사용하지 않고 app.scss에 직접 Scroll CSS 를 추가해주면 된다. /* 스크롤바의 폭 너비 */ ::-webkit-scrollbar { /* ← 이게 있어야 Scrollbar CSS가 먹는다 */ width: 10px; /* 세로 스크롤바의 크기 */ height : 10px; /* 가로 스크롤바의 크기 */ } ::-webkit-scrollbar-thumb { background: rgba(220, 20, 60); /* 스크롤바 색상 */ border-radius: 10px; /* 스크..

http://fabricjs.com/ Fabric.js Javascript Canvas Library Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes or complex shapes consisting of hundreds or thousands of simple paths or good old images You can add text and dynamically manipulate its size, alignment, fabricjs.com 프로젝트에서 이렇게 사용자가 직접 영역설정을 해야하는 코드를 구현해야해서 처음 Farbric.js 를 알게됐다 다른점은 이미지를..

https://echarts.apache.org/en/index.html Apache ECharts ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, echarts.apache.org

1. 사용자 관점의 테스트 코드 작성방법 테스트 코드는 항상 사용자 관점에서 처리되어야 하는 코드를 검증하는 코드가 들어가야한다. 버튼 클릭했을시 어떻게 되는지, 이메일 양식으로 ID를 입력 안했을시 어떻게 되는지 등 import loginFrom from './LoginForm.vue'; // import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; describe('loginFrom.vue', () => { test('ID는 email 형식이 아니면 경고 메시지가 출력된다', () => { const wrapper = shallowMount(loginFrom, { data() { return { username: 'test', };..

1. isUsernameValid 함수 이메일 유효성 검사 기능 테스트 코드로 확인 - MainFrom.vue id: Please enter an email address pw: 로그인 {{ logMessage }} - MainFrom.spec.js import loginFrom from './LoginForm.vue'; // import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; describe('loginFrom.vue', () => { test('ID는 email 형식이어야 한다', () => { const wrapper = shallowMount(loginFrom, { data() { return { username: 'tes..

1. LoginFrom.spec.js - idinput.html() import loginFrom from './LoginForm.vue'; // import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; describe('loginFrom.vue', () => { test('컴포넌트가 마운팅되면 username이 존재하고 초기 값으로 설정되어 있어야한다.', () => { const wrapper = shallowMount(loginFrom); // vm = 인스턴스 expect(wrapper.vm.username).toBe(''); }); test('ID는 email 형식이어야 한다', () => { const wrapper = sh..

https://v1.test-utils.vuejs.org/guides/ Guides | Vue Test Utils Guides Getting Started What is Vue Test Utils? Vue Test Utils (VTU) is a set of utility functions aimed to simplify testing Vue.js components. It provides some methods to mount and interact with Vue components in an isolated manner. Let's see an example: M v1.test-utils.vuejs.org 1. LoginFrom.spec.js import loginFrom from './LoginFo..