대가는 결과를 만든다

vue, webpack을 이용하여 개발을 하면서 ES6 문법 공부가 불가피해짐..기본적인 module 문법과 ES6의 문법 차이점을 비교하며 정리해본다! 1. module 문법 1) named exports : 모듈 중 일부만 필요로 하는 경우가 있을 때 사용 (하나의 함수 혹은 하나의 클래스만 사용하고 싶은 경우) //------ lib.js ------ export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } 가능한 사용 형식 a) - 일부만 import하여 사용 //------ main.js ------ ..

참고 : https://www.w3schools.com/jsref/dom_obj_event.asp EventDescriptionBelongs ToabortThe event occurs when the loading of a media is abortedUiEvent, EventafterprintThe event occurs when a page has started printing, or if the print dialogue box has been closedEventanimationendThe event occurs when a CSS animation has completedAnimationEventanimationiterationThe event occurs when a CSS animation ..

Vue Instance에서 computed의 활용에 대한 예를 정리한다. 1. HTML내에서 사용하는 data값의 가공이 필요한 경우: '나쁨' 경우와 같이 '{{}}' 안에서 해결하는 것보다 computed에서 해결하면, 코드도 깔끔해지고 재사용도 가능하므로 computed 활용 권장 나쁨{{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }} 좋음 {{ normalizedFullName }} // The complex expression has been moved to a computed property computed: { normalizedFullName: funct..

Vue에서 구현하는 Class와 Style binding 기본적인 사용예제 공홈에서 가져와 정리함.v-bind:를 이용하여 Vue instance에서 정의한 데이터 값을 이용해 class와 style을 적용할 수 있다. 1. class 1-1)예시 data: { isActive: true, hasError: false } => Result Render는 다음과 같다. 1-2) 다음과 같이 object 자체 적용도 가능 data: { classObject: { active: true, 'text-danger': false } } 1-3) 배열형태로 적용도 가능 data: { activeClass: 'active', errorClass: 'text-danger' } => Result Render는 다음과 같..

Vue.js는 렌더링 된 DOM을 Vue 인스턴스의 데이터에 선언적으로 binding할 수 있는 HTML 기반 템플릿 구문을 사용한다.내부적으로 Vue는 템플릿을 Virtual DOM 렌더링 함수로 컴파일 한다.상태가 변경될 때 최소한으로 DOM을 조작하고 적용한다.템플릿 대신 렌더링 함수를 직접 작성도 가능하고, 선택사항으로 *JSX를 지원한다. *JSX란? : javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법. 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있는 형태. React에서 사용하는 문법 1. v-html : '{{}}'는 일반 텍스트로 데이터를 해석하므로, 실제 HTML 출력을 원하는 경우 v-html을 사용Using mustaches: {{ rawHtml..

Vue를 사용하기 위한 방법 두가지를 메모한다. 1. 간단한 script 참조 방법 2. vue-cli를 이용한 webpack, browserify로 프로젝트 생성 (node.js 설치를 통해 npm을 사용할 수 있다는 전제 하에 cmd 창에서 진행) npm install vue-cli -global (vue-cli 패키지 설치) vue (사용할 수 있는 명령어, 옵션 보여줌) *vue-cli 명령어 참고*템플릿 종류설명vue init webpack고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원vue init webpack-simple웹팩 최소 기능을 활용한 프로젝트 구성방식, 빠른 화면 프로토타이핑용vue init browserify고급 브라우저파리 기능을 활용한 프로젝트 ..

Bootstrap이란? 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임 워크로 HTML과 CSS 기반의 템플릿 양식, 버튼 등의 UI 페이지 구성요소를 포함한다.트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 css와 javascript로 만들어 놓은 것이다.부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 비슷한 디자인이 뚝딱 만들어진다. 출처: https://ict-nroo.tistory.com/21 [개발자의 기록습관] 시작하기 css js-use jQuery’s slim build, but the full version is also supported. 출처: https://ge..

element는 웹페이지에서 그래픽을 그릴 대 사용하는 컨테이너이다. - 선분, 사각형, 원, 문자, 이미지 추가하는 메서드 존재- 그래픽을 그리기 위해 자바스크립트를 사용해야 함 참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage 예시) 1234567891011121314151617181920212223242526272829303132const canvas = document.getElementById("number"); //id로 canvas element에 접근const ctx = canvas.getContext("2d"); //2d 그래픽을 그릴 수 있는 메서드를 지닌 HTML5 오브젝트const x = 3..