UX/UI 디자이너

todolist 프로젝트 구조화/모듈화하기! 2022/09/15 1.vuex로 리팩토링 -git으로 브랜치 체크아웃할 때, 터미널에서 checkout vue/helpers -f로 변경한 이력이 있더라도 강제로 넘어갈 수 있음 2.프로젝트 구조화랑 모듈화 -store.js에서 코드 줄 수가 늘어날때, state와 mutations의 연결을 모를수도 있음 -store.js의 구조를 모듈화 할 수 있음 =>이제껏 만든 store.js 구조를 살펴보면 sotre.js 에서 vuex에서 import하고, state, getters, mutations, actions로 정리하여 호출함 3.ES6의 import/export 이용하여 속성별 모듈화하기 import Vue from 'vue' import Vuex fro..

1.helper함수: 각 속성들을 사용하기 용이하게 만듦 -콤포넌트가 많은 복잡한 app에서 사용할 수 있게 모듈화하기 -store.js에 한번에 몰아두는게 아닌 비슷한 기능끼리 모듈화 하기 -vuex에 내장되어 있음! state - mapState getters - mapGetters mutations - mapMutations actions - mapActions -헬퍼는 유연한 문법으로 사용 가능하다! ===>vuex에 선언한 속성을 그대로 콤포넌트로 연결 ===>ES6를 사용하기 떄문에 'multipleNum' : multipleNum으로 적어야할인자를 'multipleNum'으로 축약사용가능! ===>인자를 따로 선언하지 않아도 필요한 인자를 그대로 받아서 사용 예) ...mapMutations..

으악, 한번 포스팅을 날려버렸다. 하필이면 제일 길게 쓴 포스팅을...T.T 하지만 기본 골자는, 복잡하고 각 파일에 흝어져있는 메소드와, data props와 v-bind: 형식을 깔끔하게 store.js에 넣고, 출력할 페이지에서 간편하게 this.$store. ~ 으로 꺼내 쓸수 있다는점! Vuex로 todolist를 mutation과 action으로 리팩토링하기! 2022/09/12 1.Vuex로 mutation사용하기, =>state값을 변경할 수 있는 방법! (꼭 mutation으로 변경해야함!) =>첫번쨰 인자로 state를 가져오기 떄문! =>commit() 으로 사용! =>왜 사용해야하냐면, js코드들을 store.js에서 한눈에 모아볼 수 있고! 각각의 파일들이 깔끔하게 리팩토링 ===..

0. Vuex를 설치하는 방법 -npm방식으로 설치 ( ES5와 ES6가 있는데 ES6로 해보쟈구): 터미널에 입력! -공식 홈페이지 https://vuex.vuejs.org/installation.html Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vuex@4.0.0/dist/vuex. vuex...

const, let 리팩토링하고, 화살표 함수, Enhanced object literals, modules, export dafault 2022/09/10 지난시간에 babel을 사용하여 변수를 const와 let으로 지정하는 방법을 공부했다. 그렇다면 지난 작업인 투두리스트의 변수들을 어떻게 const와 let으로 깔끔하게 작업가능할까? 1.const와 let을 리팩토링하기! 기존 작업했던 파일에서 var 변수 확인하기! -App.vue파일에서 var를 찾아 let이나 const(오버라이딩이 안됨~)로 바꿔주기 methods:{ addOneItem:function(todoItem){ var obj = {completed: false, item: todoItem}; localStorage.setItem..

Vue.js에서 ES6사용하기! - babel, const와let 2022/09/08 1.ES6! (ECMA script 2015/메이저 업데이트) =>자바스크립트를 사용하기 편하게 (간결하게! 시간효율적으로! 빠른 재개발!) 도와주는 문법 => 프론트엔드 프레임워크인 리액트, 앵귤러, 뷰에서 사용 =>2009년에 2015 ES5 메이저 업데이트 진행, 2.BABEL =>모든 브라우저에서 ES6를 지원하지 않아서, (구 브라우저는 ES5를 사용할 수 있음) 바벨을 사용해서 브라우저 변환이 필요함 =transpiling https://babeljs.io/docs/en/learn/ Babel · The compiler for next generation JavaScript The compiler for ne..

이전까지는 각 콤포넌트 간의 데이터 통신을 설정해주지 않아서 사용자가 페이지에서 동작을해도 화면에 바로 반영이 되지 않았다. 이번 회차부터는 data를 app.vue 파일에 한군데 묶어 동장하도록 리팩토링한다! 이전에 배웠던 props와 event를 사용하게 된다! 리팩토링 정리 하위 콤포넌트의 펑션은 그대로 가져와도 되지만, 인자가 제대로 들어갔는지 확인해주면 된다! Vue.js 투두리스트 - props와 event로 리팩토링하기 2022/06/06 0.과정 요약! 입력 > 저장 > 배열 > 화면에 푸쉬 1.Todolist에 있는 기능을 Props로 만들기위해 App.vue로 옮기기 -todoList에서 입력하면 리스트 생기는 created 코드 script로 가져오기 -todoitems는 모든 파일에..

잠깐 스톱했던 이유가 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..

Vue.js 투두리스트 - Input를 위한 로컬스토리지 + 스타일 2022/04/18 1. TodoHeader파일에 vue style scoped :현재 콤포넌트에만 스타일 적용 :넣고 싶은 스타일 넣어주기 -Header에만 적용됨 -로컬서버에서 확인 2.App.vue파일에도 스타일 정의해주기 -body등의 요소 스타일 정의 body{ text-align: center; background-color: bisque; } -그외의 요소들도 미리 스타일 정의: 인풋 / 버튼 / 그림자 (*간단하게 디자인 해둘걸..) input{ border-style:dotted; width: 200px } button{ border-style: groove; color: aquamarine; } .shadow{ box-..