FRONTEND67 Vue.js 기본 사용법 정리 Template Syntax - template 문법 Interpolation {{ }} 문자열을 출력 할 수 있습니다. 또한 간단한 JS문법을 interpolation에 사용할 수 있습니다. (if 는 안됩니다) message: {{ message }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} Directive 1. v-once 딱 한번만 출력하여 수정할 수 없게 지정할 수 있습니다. Can't modify this text : {{ message }} 2. v-html Native HTML 태그를 그대로 프린트 할 수 있습니다. Using v-html: 3. v-bind 양방향 데이터 바인딩 ** HTML attribute.. 2020. 6. 21. React - React lifecycle methods 정리 Lifecycle methods 1. type component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 ) 2. componentWillMount() component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 ) 3. render 4. componentDidMount() component 결과가 DOM에 렌더링 된 후 작동 ( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 ) 5. componentWillReceiveProps() 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 ) 6. shouldComponentUpdate(nextProps, nex.. 2020. 5. 16. SASS CSS, SASS, SCSS는 서로 완벽호환되며, Ruby와 node에서 사용 할 수 있습니다. SCSS는 { 코드블럭 }을 사용하지만, SASS는 { 코드블럭 } 대신 tab을 사용하며, 세미콜론( ; )을 사용하지 않는다 - indented syntax사용 SASS 사용 1. Variable :: $ SASS의 변수는 이미 변수에 값이 할당되었을 경우 재할당될 수 없습니다. !default를 변수와 함께 할당할 경우 해당값이 변수에 기본으로 할당됩니다. $myval1: null; $myval1: "Sass was developed" !default; p:after { content: $myval1; // content: "Sass was developed" } 2. @use /* scss */ @us.. 2020. 5. 16. LocalStorage & SessionStorage 1. LocalStorage 데이터를 서버에 저장 및 전송하지 않고, 브라우저에 저장합니다. HTML5부터 사용가능 cookie 는 4 kb 가 최고 용량이지만, localstorage는 2.5 ~ 5 mb 까지 저장 가능합니다. localStorage의 storage 이름에 제약은 없습니다. localStorage는 string만 저장할 수 있습니다. JS 객체로 저장할 필요가 있는경우, JSON.stringify() 를 이용합니다. 다시 JSON을 객체로 사용하기 위해서는 JSON.parse() 를 이용하여 변경합니다. // storage에 값을 set 합니다. localStorage.setItem("lastname", "Smith"); localStorage.test = '123'; // stora.. 2020. 5. 9. ES6 문법 (2) 더보기 7. Destructing 1) Array 2) Object 3) JSON parsing 4) Event 객체 전달 8. Template 1) Tagged Tamplate literals 9. Module 1) export 2) import 10. Proxy 7. Destructing 1) Array에서 let data = ["crong", "honux", "jk", "hinny"]; // 기존 ES5 방법 let myname = data[0]; let jisu = data[0]; // ES6 let [jisu,,jung] = data; // jisu = data[0], jung = data[2] console.log(jisu, jung); // "crong", "jk" 2) Object에서 ke.. 2020. 5. 9. Vuex 구조 및 정리 1. 상태관리자 Flux architecture Flux 는 facebook이 제작한 내부적으로 하나의 스토어로 데이터를 관리하는 모델. 상태관리자를 사용하는 것도 항상 옳은 것은 아닙니다. state가 하나(공유된상태) 이기 때문에 하나를 잘못 바꿀경우 복잡해질 수도 있습니다. 종류) React - redux, Vue - vuex 2. Vuex 기본 구조 store component script내 등록 위치 동작/변경 방법 $store 호출방식 비고 state ...mapState computed this.$store.state 저장된 상태 getters ...mapGetters computed this.$store.getters state를 화면에 바인딩 할 수 있음 actions ...mapMuta.. 2020. 5. 7. ES6 문법 (1) - 수정중 더보기 1. new String Method – ES6 전용 1) starts with, endsWith(), include() 2. Array 1) for of 2) spread operator 와 활용 3) from() 3. Obejct 1) df 2) class 3) Object.assign() - object 제작 4) Object.assign() - immutable 객체 제작 5) setPrototypeOf() 6) prototype chain 활용 4. Function 1) Arrow function 2) Arrow function – this context 3) default parameters 4) rest parameters 5. Set, WeakSet – 특별한 자료구조 1) Set .. 2020. 5. 4. 이전 1 ··· 3 4 5 6 다음
