대가는 결과를 만든다

Grid System? - 12Point Grid System - 내용물들의 레이아웃 설정을 위해 flex-box를 사용하여 구현됨. - 특정 스크린 사이즈나 배치에 따라 5가지 유형의 미디어 BreackPoint가 포함되어 있음. (Bootstrap4의 GridSystem Options 참고) Usage 1) v-container는 fluid 속성으로 full 너비로 확장하여 중앙에 focus된 페이지로 사용할 수 있음. 2) v-layout은 v-flex를 사용하여 구별된 섹션으로 사용된다. 따라서 다음과 같은 구조로 사용됨 : v-container >> v-layout >> v-flex v-flex는 자동으로 자식들을 flex : 1 1 auto로 설정된다. 3) property를 자동으로 clas..

렌더링이란?: 요청받은 내용을 브라우저 화면에 표시하는/그리는 작업. 과정- 서버로부터 데이타를 응답받아 Parsing하여 DOM트리 생성- DOM 트리가 구축되는 동안 브라우저는 Render 트리 구축- CSS 설정 및 위치 지정- Render 트리가 그려짐 1. SSR (Server Side Rendering) - 전통적인 웹 어플리케이션 방식으로, 요청시 마다 서버에서 처리하여 새로고침으로 페이지 응답 - 웹에서 기능과 데이터가 많아지면서 SPA(Single Page Application)이 생김 , 더 향상됨 UX를 위함 1-1) MPA (Multi Page Application) - page = html 2. CSR (Client Side Rendering) - 클라이언트에서 Javascript..

Intro- JWT는 Claim 기반 토큰이다- Claim Token : Claim (사용자 정보, 데이터 속성)을 담고 있는 토큰 구성 1. HEADER : { typ : "JWT" //토큰의 타입 jwt alg : "HS256" //해싱 알고리즘 HMAC or SHA256 or RSA, SIGNATURE에서 해당 알고리즘이 사용된다. } 2. PAYLOAD : 토큰에서 사용할 정보 즉 Claim이 저장되어 있는 부분. Base64Url로 인코딩. JSON처럼 Key/Value 방식이며, 총 세가지로 나뉨. 1) Registered Claim : 토큰정보 표현 위해 이미 정해진 데이터 종류- iss : issuer 토큰 발급자- sub : subject 토큰 제목- aud : audience 토큰 대상..

vue 프로젝트도 jsdoc으로 생성해보기위해 jsdoc-vue를 설치하며 현재 프로젝트에 설정되어 있는 vue-template-compiler 버전이 업데이트 되 다음과 같은 build 에러가 갑자기 발생했다. ====================================================================== Vue packages version mismatch: - vue@2.5.22- vue-template-compiler@2.6.6 ====================================================================== 시도1. 해당 버전 vue-template-compiler를 uninstall 하고 @2.5.2 버전을 설치해도 안..

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에서 구현하는 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..