코드공부방

Vue.js To Do List 만들기 #4 컴포넌트 구현(3), 문제해결 컴포넌트 생성 및 등록(3) 컴포넌트 구현 > TodoFooter 이제 마지막 TodoFooter 컴포넌트 구현만 남겨두고있다. TodoFooter컴포넌트에서는 전체 목록을 삭제하는 버튼을 넣고 버튼을 클릭하면 clearTodo메소드를 실행한다. 전체삭제 /* /src/components/TodoFooter.vue > */ export default { methods: { clearTodo(){ localStorage.clear(); } } } 전체삭제 버튼을 누르면 localStorage의 모든 목록이 삭제된다. 화면의 할 일 목록은 새로고침을 해야만 삭제가 된다. TodoInput컴포넌트 에서 할 일을 추가했을때와 TodoFo..

Vue.js To Do List 만들기 #3 컴포넌트 구현(2) 컴포넌트 생성 및 등록(2) 컴포넌트 구현 > TodoList TodoList컴포넌트는 localStorage에 저장되어있는 item 목록을 화면에 보여주는 역할을 한다. 순서가 없는 목록은 ul, li 요소를 사용한다. 먼저 localStorage에 저장되어있는 목록을 vue 데이터 todoItems에 저장한다. /* /src/components/TodoList.vue > */ export default { data(){ return { todoItems: [] } }, created(){ if(localStorage.length > 0){ for(var i = 0; i < localStorage.length; i++){ this.todo..

Vue.js To Do List 만들기 #2 컴포넌트 구현(1) 컴포넌트 생성 및 등록(1) 프로젝트 초기 구성을 완료하였으니 애플리케이션에 필요한 컴포넌트들을 생성하고 등록한다. To Do List에 필요한 컴포넌트는 TodoHeader, TodoInput, TodoList, TodoFooter 4개이다. /src/경로 아래에 components 폴더를 생성 후 TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue 파일을 생성한다. 각각의 파일을 열어 아래와 같이 컴포넌트의 기본 구조를 잡는다. 각 컴포넌트 명 생성한 컴포넌트를 등록하여 화면에 나타내기 위하여 최상위 컴포넌트인 App.vue에 등록한다. /src/App.vue에 기본적으로 들어있는 ..

Vue.js To Do List 만들기 #1 프로젝트 생성 난 이미 포스팅을 하기 전 책을 보고 한번 쭉 따라 만들어보았다. 지겨운 To Do List 이다. 구글에 "Vuejs to do list" 라고 검색하면 수많은 검색결과가 나온다. 그만큼 간단하지만 매우 중요한 것을 담고 있는 예제라는 것을 증명하는 것이라 생각된다. 실제로 한번 따라해보니 CRUD(Create, Read, Update, Delete)를 모두 경험할 수 있었다. 프로젝트를 통해 경험하는 것이 가장 학습에 도움이 되겠지만 실무에서는 사용 할일이 없다보니 제한적이다. 때문에 사이드 프로젝트를 통해 익숙해져야 하는데 아직은 문법도 익숙치 않으니 To Do List를 한번 더 만들어보려고 한다. 설치, 프로젝트 생성 이 예제에서는 웹팩..

웹퍼블리싱만을 할 줄 아는 것(html, css를 사용하여 레이아웃을 만들고 jQuery로 동적UI 구현)으로는 더이상 큰 경쟁력이 없다. 아마도 2018년부터 웹퍼블리셔 구인시장을 봤다면 누구나 공감할 것이다. 신입 웹퍼블리셔는 국비지원 교육의 활약으로 미친듯이 시장으로 쏟아져나오고 있는데 반해 웹퍼블리셔가 서있을 곳은 점점 좁아지고 있다. 기업 입장에서 정규직으로 웹퍼블리셔를 내부에 두고 있는 것이 부담스러운 것이 사실이다. 쉽게 비유하자면 있으면 좋고 없으면 아쉬운 포지션이 아닐까? - 그럼 웹퍼블리셔 입장에서 어떻게 처신해야할까? 1. 엄청 잘하면 된다. 어떤 분야든 상위 클래스는 먹고사는 것에 지장이 없다고 한다. 하지만 셀 수도 없는 수 많은 퍼블리셔들 가운데에서 상위클래스가 되는 것이 그리 ..