대가는 결과를 만든다

Babel은 ES5 이상의 문법을 ES5 지원 브라우저에서 해석할 수 있도록 변환해주는 Transpiler. 하지만 ES5이상에서 새롭게 추가된 전역 객체들 Promise, Map, Set이나 String.padStart등 전역 객체에 추가된 메서드들은 트랜스파일링만으론 해결하기 어려워 core-js, regenerator-runtime과 같은 별도 polyfill 필요 Polyfill을 추가하는 방법은 두가지 : babel-polyfill을 사용하거나 babel-plugin-transform-runtime을 사용하는 방법 참고 : https://programmingsummaries.tistory.com/401 babel-polyfill 과 babel-plugin-transform-runtime 그리고 ..

Vue에는 slot이라는 개념이 있는데 무엇? Parent Component에서 Child Component의 Element Tag사이에 삽입하여 Child Component의 원하는 Element로 fallback해주고자 할때 사용하는 개념이다. 1. Basic Component를 다음과 같이 정의: Submit 그러면 이라는 Component를 사용할 때, Submit 다음과 같이 렌더링이 될 것이다. 하지만 전송 과같이 Component를 사용하면 전송 으로 렌더링이 된다. 앞서 말한 것처럼 Tag사이에 넣은 값을 Child Component의 Slot으로 fallback되는 것이다. 2. Named Slot *name을 정하지 않은 의 name은 "default" 이라는 Component를 다음과..

Vuex 란? Vue.js 의 상태관리 를 위한 패턴이자 라이브러리. 다른 상태관리 패턴이나 라이브러리와 비교했을 때 Vue 의 Reactivity 체계를 효율적으로 활용하여 화면 업데이트가 가능하다는 차이점이 있다. 상태관리 (State Management)의 필요성 컴포넌트 기반 프레임워크에서는 화면 구성을 위해 화면 단위를 컴포넌트로 구현하여 사용한다. 예를 들면, header, button, list 등의 컴포넌트들이 단위가 되어 한 화면에서 사용된다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다. 달리 말해, header -> button, button -> list , button -> footer 등의 컴포넌트 간 데이터 전달 및 이벤트 통신 등의..

1. obj load시 사용되는 변수 중 objMaterialsArray의 데이터에서 Material 변수들의 name 저장하여 관리 가능 2. raycaster.intersectObjects()[0].face에서 해당 materialIndex를 얻을 수 있음 3. mesh.children[0].material[materialIndex]를 사용하여 해당 Material의 변수명을 얻고 해당 변수명과 동일한 Material들의 Texture map을 변경하는 것이 가능하겠다. 4. 혹은 mesh.children[0].material[materialIndex]를 사용하여 해당 Material의 Map Image를 얻고, 해당 Map Image와 동일한 Map을 사용하는 Material들의 Texture ma..

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 버전을 설치해도 안..