UX/UI 디자이너

Vue.js - 프로젝트 시작과 마크업 2022/01/21 1)새로운 프로젝트 생성 -확장자가 없는 빈 화면에서 새터미널로 vue cereate vue-form을 작성 vue cereate vue-form -vue2와 vue3이 있는데 vue3을 선택 (EsLint를 기존의 vue 확장 프로그램과 사용하려면 vue2를 선택해야한다) -vue cli에서 vue 3으로 기본 프로젝트를 생성하면 크롬 확장 플러그인에서 vue를 잡아내지 못한다. beta버전을 사용하면 정상적으로 작동함! Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com -cd vue form과 npm r..

Vue.js - 개발 시작하기 (w.vue-cli) 2022/01/19 1.App.vue파일 -안의 내용을 지우고 < 괄호를 타이핑하면 자동완성으로 기본 vue 파일 자동 완성 -template 태그 안에는 기본으로 하나의 엘레멘트 만 들어가야함 (*만약 두개 이상을 적었을시 lint에 하나의 엘레멘트만 가능하다고 안내) -하단의 터미널에서 로컬 호스트 8080을 클릭하면 확인가능 2.data 연결하기 -new Vue인스턴스에서는 단순히 data:{}로 객체를 연결했다면, -vue-cli에서는 data를 재사용 할 확률이 높기에, 여러 콤포넌트에서 동일한 데이터 값을 참조하지 않도록, -function으로 연결하여 return으로 새객체를 반환해야한다 (*이걸 안지키면 오류가 됨!) export defa..

vue.js - watch와 computed의 차이점과 활용법 2022/01/16 1.watch 속성 이해하기 -기존처럼 동일한 html문서, vue 스크립트, div#app, new vue 인스턴스 제작 -data는 숫자 사용 (예. 10) - methods에 클릭했을때 기능을 addNum메소드를 사용하고 숫자가 1씩 더해지도록 (*주의*data에서 주는 숫자를 사용하기 위해서 this.num을 사용) new Vue({ el : '#app' data: { num: 10 }, methods: { addNum:function(){ this.num = this.num+1; } } }) -#app에 버튼을 추가하고 click동작이 있을지 addNum메소드 실행하도록 숫자가 커져용 -이슈: btn을 눌러도 바로..

vue.js - 데이터바인딩과 디렉티브 ~ 매소드 2022/01/08 0.뷰js 공식문서 https://vuejs.org/ 모르는 것이 나왔을 때 스스로 찾아가는 능력이 매우 중요! Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 1.뷰 템플릿 -뷰 템플릿? 뷰로 화면을 조작하는 방법 -데이터 바인딩 & 디렉티브 -데이터 바인딩: 뷰 인스턴스에서 정의한 속성을 화면에 보여줌 (주로 {{data}} 머쉬타시 태그) new VEW({ data: { message:'hi' } } ) {{message}} -디렉티브: v- 를 붙여 조작 2.데이터 바인딩 -새로운 뷰인스턴스 생성 -아이디가 app이라는 요소를 사용 - data항목을 만들고 div ..

1.같은 콤포넌트 레벨간 통신 예) Root 인스턴스 a.appHeader b.appContent ab사이의 어떻게 통신을 할지 확인 -script 생성 -새로운 인스턴스 생성 new Vue({ el:'#app', data:{ str:'hi' } }) -div에도 str값이 출력 될 수 있도록 {{str}} -live server로 확인하면, Root안에 str 스트링 값이 'hi'가 제대로 출력 되는걸 볼 수 있다. 2.실습! *app-header과 app-content 콤포넌트를 만들고, 각각을 변수와 연결, div로 화면에 출력하도록 1)new Vue로 인스턴스 만들기 div중 app과 연결되고, 구성하는 콤포넌트를 각 app-header은 appHeader과, app-content는 appCont..

1.Vue 인스턴스에 app-content 콤포넌트 정의해주기 -#app 아이디에서, -app-content 콤포넌트 -가지고 있는 data는 숫자로 10 new Vue({ el: '#app', components:{ 'app-content':appContent }, data: { num: 10 } }) 2.appContent 함수 정의해주기 -props안에 propsdata라 정의 (*여기서 실수함, 프롭스의 데이터 값이니까 그대로 propsdata라고 써주고, 나중에 v-bind에서 정확히 propsdata들 중에서(여러개라면) 어떤걸 사용할지 정의해줄수 있음) -{{}}로, propsdata값 그대로 보여주기 var appContent = { template: '{{propsdata}}', prop..

디자인에서도 콤포넌트의 개념을 사용하는데 vue에서도 콤포넌트의 단위를 사용한다. 예전에 html을 배울때 여러 페이지 생성시 js로 헤더와 푸터를 붙이는 작업을 했는데 vue에서도 가능했다. Vue.js instance study- 뷰 전역 콤포넌트와 지역 콤포넌트 2021/08/08 [뷰 컴포넌트] 화면의 영역을 구분하여 개발하고, 콤포넌트 안에 콤포넌트를 넣을 수 있다. 콤포넌트를 사용하여 제작하면 재사용(코드의 반족을 최소화) 할 수 있고, 빠르게 화면을 만들 수 있음. 1.새롭게 app이라는 div 정의 2.script를 두개 생성 a.vue 스크립트 b.new Vue 스크립트 3.new Vue 스크립트 안에 엘레멘트인 el을 적고 tag가 app인 div를 선택, 4.open live serv..