본문 바로가기

Web60

[Vue] 컴포넌트 컴포넌트 화면의 영역을 쪼개서 재사용 할 수 있는 형태로 만드는 기능(웹 화면을 헤더, 푸터, 컨텐츠영역, 네비 등으로 분할해서 화면을 구성한다고 생각하자) 전역 컴포넌트 먼저 전역 컴포넌트를 등록 해보자. Vue.component('컴포넌트 이름', 컴포넌트 내용); 으로 등록 할 수 있다. js Vue.component('global-component', { // 컴포넌트 이름은 케밥 형식이 아니여도 된다. template: '전역 컨텐츠의 내용이 요기잉네' }); const app = new Vue({ el : '#app' }); html // 컴포넌트 이름과 같은 태그를 생성 전역 컴포넌트 렌더링 결과 지역 컴포넌트 지역 컴포넌트도 등록해보.. 2020. 8. 4.
[Vue] 반복 렌더링 & 조건 적용 유니크 키가 없는 배열 배열 조작을 가하기엔 적합하지 않지만, 단순 출력을 위한 용도로는 문제가 없다. {{ item }} data: { list : ['리스트1', '리스트2', '리스트3'] }리터럴에 직접 v-for 적용 {{ item }} 번째 P 문자열에 v-for 적용 {{ item }}data : { text: 'TEST' }반복 렌더링 const data = { monster : [ { id: 1, name: '슬라임', hp: 100 }, { id: 2, name: '고블린', hp: 200 }, { id: 3, name: '드래곤', hp: 500 } ], } const app = new.. 2020. 8. 4.
[Vue] 기본 기능 Vue 기본 기능 인스턴스 생성 뷰로 개발할 때 필수로 생성해야 하는 코드 new Vue(); 참고로 뷰 인스턴스는 변수에 담아서 확인해 볼 수 있다. const app = new Vue(); console.log(app); 뷰에서 제공해주는 기능들을 확인 가능 뷰는 생성자 안에 객체가 들어가는 형태(객체 리터럴)로 코드 작성하는걸 권한다. const obj = { 속성 : 값, 속성 : 값 } const app = new Vue(obj); 이러지 말고 const app = new Vue({ //요 안에 객체 표기법으로 내용이 들어간다. 속성 : 값, 속성 : 값 });이런 식으로 작성하자. 인스턴스에서 사용할 수 있는 속성과 api new Vue({ el: , // 인스턴스가 그려지는 화면의 시작점 d.. 2020. 8. 4.
[javaScript] 반응성 (Reactivity) 자바스크립트의 반응성(reactivity) 에 대해 알아보자. 기본적으로 변수의 동작은 접근과 할당으로 되어있음 var a = 1; //값 할당 a; // 접근 a = 2; //값 재할당 이 개념으로 Object.defineProperty () 를 사용해보자. Object.defineProperty () 는 객체의 속성을 재정의 (접근과 할당시 동작을 정의) 해주는 자바스크립트 내장 객체이다. Object.defineProperty(대상 객체, 객체의 속성, { //정의할 내용 }); 간단하게 콘솔창에서 테스트 해보자 var a = {}; Object.defineProperty(a, 'str', { // getter 역할을 한다. 속성에 접근했을 때 동작하는 코드를 구현 get: function(){ c.. 2020. 6. 11.
[CSS] SCSS_기본 사용법 [선택자] div { color:black; .foo { // 자손(descendant) 선택자 color: black; } > .foo { // 자식(child) combinator color: black; } + .foo { // 인접형제(adjacent sibling) 선택자 color: #000; } ~ .foo { // 일반형제(general sibling) 선택자 color: yellow; } & .foo { // Sass 부모(Parent) 참조 선택자 color: #fff; } .foo & { // Sass 부모(Parent) 참조 선택자 color: red; } &.bar { color: green; } } [import] @import 'common.css'; @import 'commo.. 2020. 6. 11.
[CSS] Reset 자주 사용하는 CSS 리셋 코드 커스텀 영역은 입맛대로 변경하자. (body의 font-family 라던가..) @charset 'UTF-8'; /* basic reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside.. 2020. 6. 11.