본문 바로가기

Knowledge Wiki

 (169)
Vue 프로젝트 Port 변경하여 실행 NPM으로 vue 프로젝트를 실행시킬 때 PORT를 변경하고 싶은 순간이 있다. 이 경우 아래와 같이 포트를 지정해서 실행시켜주면 된다. /* npm run serve -- --port {Target Port} */ npm run serve -- --port 8082
Vue 템플릿 자동완성 단축키 혹시 Vue 3 Snippet 이 안깔려 있다면 Vue의 자동완성(Emmet)을 지원해주는 Vue 3 Snippet Extension을 깔아주고.. *.Vue 파일에서 "vueinit + [Enter]" 를 하면 아래와 같이 Vue template이 뙇하고 나온다.
[ JavaScript ES 6 ] HTML 모듈화 1. HTML 모듈화 Web Component에 스타일 넣고 싶을 때 Shadow DOM 쓰면 좋음 Shadow DOM에서 작업한 스타일은 다른 컴포넌트에 영향을 주지 않음 2. innerHTML에 직접 HTML 코드를 하드코딩으로 박지 말고 HTML 임시보관함인 을 사용하시길. 이메일 입력 ㄱㄱ
[ JavaScript ES 6 ] Shadow DOM 1. Shadow DOM Shadow DOM은 Web Component의 숨겨진 독립적인 공간임
[ JavaScript ES 6 ] 커스텀 태그 1. 커스텀태그 길고 복잡한 HTML을 축약하는 법 html 중복제거, 다른 페이지에서 재활용 가능하기 때문에 커스텀 태그 사용 커스텀 태그 안에서도 파라미터 문법 구현 가능 attribute 변경 감지기능 제공, Vue.js의 props처럼 동작하게 구현할 수 있음 React, Vue가 커스텀태그 역할을 잘 지원해줌
[ JavaScript ES 6 ] Map, Set 1. key, value를 저장하는 Map 자료형 Map 자료형은 자료간의 연관성을 표현하기 위해 사용 자료얻기 -> get() var person = new Map(); person.set('name', 'Kim'); person.set('age', 20); var person2 = new Map([ ['name', 'Kim'], ['age', 20] ]); 2. 중복자료를 허용하지 않는 Array 비슷한 Set 자료형 Set의 add(), delete(), has(), size 주로 쓰임 var book = new Set(['john', 'tom', 'andy', 'tom']); var arrBook = [...book]; // 기존 배열에서 중복 제거한 버전 구할 때 유용하게 쓰임 book; // ..
[ JavaScript ES 6 ] Symbol 사용법 1. ES6에서 Symbol 자료형이 추가됨 심볼은 아래처럼 만들면 됨 var sym = Symbol('description'); 2. 심볼의 용도 Object 자료형의 비밀스런 key값 for in 문법으로 반복문 돌면 Symbol은 참조 안됨! Symbol은 enumerable하지 않기 때문! var secretWeight = Symbol('my secret weight'); var person = {name: 'oh'}; person[weight] = 100; 3. 심볼 넣는 다른 방법 var person = {name: 'kim', [height]: 170}; 4. 심볼 특징 1) 설명이 같아고 같은 Symbol이 아님. Symbol 생성할 때마다 고유한 Symbol임 var a = Symbol(..
[ JavaScript ES 6 ] for in, for of 반복문 1. for in 반복문 Object에 있던 값을 전부 하나씩 꺼내서 사용할 때 쓰는 문법 enumerable 한 것만 반복해줌 부모의 prototype도 반복해줌 class parent { } parent.prototype.name = "Park"; //var obj = {name: 'kim', age: 30}; var obj = new parent(); for (var key in obj){ if(obj.hasOwnProperty(key)){ // 부모꺼 빼고 내꺼만 출력 console.log(obj[key]); } } 2. for of 반복문 Array, 문자, arguments, NodeList, Map, Set 등에 사용 iterable한 자료형에만 사용 가능 -> Symbol.iterator가..

티스토리툴바