UX/UI 디자이너

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.액시오스란? 액시오스는 HTTP 통신라이브러리이다. (*HTTP통신이란 브라우저랑 서버가 데이터를 송수신하는 통신 프로토콜로, 브라우저 > 서버 데이터 요청 / 서버 > 브라우저 데이터 응답) (*서버가 전송해준 데이터를 화면에 표시할때, 전체 화면을 새로고침 하지 않아도 일부분 데이터만 변경할수 있음) 2.axios 깃헙 구글에 axios를 검색하면 해당 깃헙이 나온다. -promise(자바스크립트의 비동기 패턴) 기반 (*vue.js 개발자들이 axios 사용을 권고했다) -다양한 브라우저에서 처리가 가능하다! -star 수도 많고, 6일전에 커밋한 깃헙! 관리가 잘 되어 있다. axios 깃헙>> https://github.com/axios/axios/issues GitHub - axios/ax..

한동안 하고 싶은 기획 공부를 하느라 개발 공부가 미루어졌다. 오늘 이어서 vue와 라우터에 대한 공부를 할 예정. 현재 듣고 있는 수업 1월 내에 꼭 완강을 해야지 생각이 들었다. 이번 강의에서는 뷰 라우터에 대해서 배우게 되었다. Vue router의 공식 홈페이지 >> 설치 | Vue Router 설치 직접 다운로드 / CDN https://unpkg.com/vue-router/dist/vue-router.js (opens new window) Unpkg.com (opens new window)은 NPM 기반 CDN 링크를 제공합니다. 위의 링크는 항상 NPM의 최신 릴리스를 가리킵니다. https://unpkg. router.vuejs.org Vue.js study- 라우터의 기본 공부하기 202..

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..

컴포넌트 통신 방식 -화면 안에 여러개의 콤포넌트를 만들면 콤포넌트 가느이 관계가 생김 -각각의 컴포넌트가 각각의 데이터를 갖는데, 서로 공유하기 위해선 a.props랑 b.이벤트를 사용해야함. -사용하기 위해서는 규칙을 우리가 알아야함 -규칙이 있어야 데이터의 흐름을 추측하고 버그를 잡기 쉬워진다. (만약, 규칙이 없다면 어디서 부터 데이터가 왔는지 확인하기 어려워짐) -위에서 아래로 내려가는건 props, 아래에서 위로 올라가는건 event 1.props 속성 -Vue라는 인스턴스를 만들고 el로 #app -app header이라는 콤포넌트를 만들어 준다. -여기서 teamplate만 따로 사용할것, new Vue({ el: '#app', components:{ 'app-header':{ templa..

디자인에서도 콤포넌트의 개념을 사용하는데 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..

정신없는 7월이 지나고 8월 부터 다시 공부 시작. 오늘 공부할 뷰 인스턴스는 뷰로 개발하기 위한 기본 단위! Vue.js instance study- 뷰 인스턴스 이해하기 2021/08/06 크롬 확장 프로그램에서 뷰개발자도구를 설치하면, 뷰가 적용된 창에서 검사 > Vue 항목이 생성된다. *개발자 도구 단축키 맥: option+command+i -components: vue js를 실행했을 때 기본적인 구조 확인 -vuex -events *현재 상태에서는 data: 안에 "Hello Vue.js”가 있는 걸 볼 수 있고 더블 클릭해서 데이터를 변경할 수 있다. data의 값을 변경하였고, 내가 변경한 값 그대로 적용되는걸 확인 할 수 있다. => 이것이 reactivity이다! 2.뷰 인스턴스 -뷰..

view는 브라우저에서 사용자에게 보여주는 화면이고, 화면의 인풋, 버튼과 같은 요소들이 포함되어 있다. 보통은 html이며, DOM이라는 자바스크립트로 조작이 가능하도록 한다. 사용자가 인터렉션으로 인풋에 입력하거나 클릭하는 이벤트가 발생하면 뷰모델에서 DOM listeners로 받아 자바스크립트의 모델에서 데이터를 변경하게 된다. 자비스크립트 안에서 변경된 데이터를 Data bindings를 통해 내용을 전달해준다. Vue.js reactivity study- 뷰 리액티비티 스터디 2021/07/11 1.html파일을 새로 생성해서 기본 html 파일을 생성한다. -자동으로 html 기본 태그를 생성 !+tab키 -body태그 안에 div 생성하기 div#app입력하면 id가 app인 div를 자동 ..

다시 처음부터! 강의를 들어가며 개념을 다질려고 한다. 이전에 todo list를 만들면서 대부분의 프로그램과 플러그인을 설치했는데, 추가로 설치할 내용들이 있었다. 역시 플러그인은 알면 알수록 다양하고 편리하게 활용할 수 있는 것 같다. 특히 live server는 저장할때마다 실시간으로 웹으로 띄워줘서 편리한듯 하다. [설치해야할 플러그인 요약] vetur, google amterial icon, live server, ESLint, Prettier, Auto close tag, atom keymap Vue.js 기본셋팅 - 프로그램, 확장 플러그인 설치 (vetur, google amterial icon, live server, ESLint, Prettier, Auto close tag, atom ..