[ 할 일 목록 저장 ] 할 일을 입력하면 v-model에 정의된 'todoInput'으로 값이 매핑되어 저장됨 엔터키를 입력하여 할일이 리스트에 저장되는데 엔터키 입력시 @keyup.enter로 'enterKeyFunction'이 호출됨. enterKeyFunction() data(){ return { todoInput :'', dynamicLists:[], completedChecked:[], isShowTodoList:false, isCompleted:false, isCompletedArr:{}, isHidden:{}, isSelected:[true], totalCount:0, } }, methods:{ enterKeyFunction(){ this.dynamicLists.push(this.todoI..

프로젝트 구현 기능 * css는 기존 블랙커피스터디9기를 참여하면서 긁어온 UI입니다. - 할일 입력시 리스트 추가됨 - 리스트에 추가 된 할 일을 체크시 할일 완료기능 구현 - 리스트에 추가 된 할 일 삭제 기능 - 리스트 추가된 항 목 '전체할일' , '해야할일', '완료한 할일' 필터기능 - 현재 노출된 리스트 개수 확인을 위한 카운팅 하여 노출 TODOS {{list}} 총 {{totalCount}} 개 전체보기 해야할 일 완료한 일 * 전체적인 프로젝트 진행방향은 블랙커피스터디9기를 참여하여 미션내용과 동일하게 진행하되 Vue.js로 구현하였습니다. NEXTSTEP edu.nextstep.camp

DOM 문서객체 모델(The Document Object Mode, DOM)은 HTML, XML 문서의 프로그래밍 interface 웹페이지는 어떻게 만들어질까? 웹브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 'Critidal Rendering Path'라고 함. 이 과정을 여러 단계로 나누어져 있지만, 대략 두 단계로 나눌수 있는데, 첫번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정하고 두 번째 단계에서 브라우저는 해당 렌더링을 수행. 첫번째 과정을 거치면 '렌더트리'가 생성되는데, 렌더 트리는 웹 페이지에 표시될 HTML요소들과 이와 관련된 스타일 요소들로 구성됨. 브라우저는 렌..

git 터미널 환경 세팅 윈도우즈 운영체제 사용자 : git for windows 설치 https://gitforwindows.org/ 접속하여 설치 git clone 완료!

화살표함수를 적용안하였을 때, Vue객체 사용을 위해서 this를 비동기함수 호출전 바인딩하여 사용해야함. 그렇지 않고 this를 비동기 함수안에서 바로 호출하면 아래와 같이 'undefined'값이 찍히는 것을 확인 가능 created(){ var vm = this; console.log('호출전: ', this); fetchNewsList() .then(function(response){ console.log('호출 후:' , this); //바로 this를 사용하면 this가 Vue객체를 가리키지 않기 때문에 콜백시에는 따로 지정해야함.. vm.users = response.data }) .catch(function(error){ console.log(error); }) }, 화살표함수를 적용하였을..

function sum(a,b){ console.log(this) return a+b; } function Vue(el) { console.log(this); this.el = el; } new Vue("#app"); //Vue {} //Vue {el: "#app"} Vue("#app"); //Window {0: global, 1: global, 2: global, 3: global, 4: global, 5: global, 6: Window, 7: Window, window: Window, self: Window, document: document, name: "", location: Location, …} ->함수 객체 생성하여 호출시 this는 객체 자신 new Vue("#app"); //Vue {}..