UX/UI 디자이너

잠깐 스톱했던 이유가 index 파일의 스타일이 먹히지 않아서 고민이었는데.. 개발자 친구에게 물어본 결과 public파일의 index가 아닌 다른 index파일에서 작업해서 였다!! 이것 때문에 일주일을 고민했는데 이제 완전 해결! 계속해서 학습하기.. Vue.js 투두리스트 - 완료 상태로 전환하기, 데이터 삭제하기 2022/06/05 1. Todolist 체크박스 만들고 완료시 완료상태표시 -미리 체크박스 스타일링 확인 .checkBtn{ line-height: 45px; color: aquamarine; margin-right: 5px; } .checkBtnCompleted{ color: grey; } .textCompleted{ text-decoration: line-through; color:..

[오늘의 할일] 사용자가 화면에서 입력한 내용을 로컬 스토리지에서 저장해서, 로컬 스토리지 내용을 리스트로 가져오고, 리스트의 내용을 삭제하는 기능 구현 Vue.js 투두리스트 - List 데이터 로컬스토리지에서 가져오기, 삭제하기 2022/04/21 하고싶은거:input에서 저장한 로컬스토리지 내용을 List 콤포넌트에서 출력 1.데이터 선언 -로컬 스토리지에서 가져온 내용을 데이터에 묶어주기 data:function(){ return{ todoItem:[] } } -vue.js에서의 lifecycle Hooks란? >> 더보기 *lifecycle Hook -8단계로 이루어진 콤포넌트의 라이프사이클 (생애 주기) -created: 인스턴스가 생성되자마자 호출 -자바스크립트의 로컬스토리지란>> https..

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