Study/개발
-
Vue 입문 - todolist 만들어보기 5 - 편집 / 삭제Study/개발 2021. 10. 10. 18:21
todo 삭제 및 편집 todoItem 템플릿 {{todo.message}} 편집 X 템플릿은 간단하다. 체크박스가 있고, 메시지가 보인다. 뒤에는 편집과 삭제 버튼이 있다. 이 버튼들을 누를 때 기능들을 추가해볼 것이다. @click.stop 편집/삭제 버튼을 만들면서 v-on:click.stop을 사용했다. .stop을 붙이면 이벤트의 propagation이 중지된다. 즉, 편집버튼을 클릭한다고 해보자. 따로 캡쳐링 단계에서 이벤트를 리스닝하는 리스너는 없으므로, 버블링 단계에서 가장 먼저 이벤트 핸들러 onClickEdit이 호출된다. .stop이 없다면 그 후 버블링이 진행되어 상위 컴포넌트인 li에서 onClickItem이 호출된다. 하지만 .stop을 통해 이벤트 propagation을 중지 ..
-
Vue 입문 - todolist 만들어보기 4 - TodoItemStudy/개발 2021. 9. 12. 16:56
이전 글에서 todoInput을 만들어서 이벤트를 Emit 시키고 todoList에서 받아서 출력해보았다. 이번에는 그 이벤트를 받아서 새로운 투두를 만들어본다. TodoManager.ts 투두를 생성하기위해 투두 데이터들을 관리하는 매니저 클래스를 만들어 본다. 사실 이름을 매니저라고 하는 것이 적절한 것인지는 의문이다. 그리 좋은 이름은 아닌 것 같지만 직관적인 것 같아서 그렇게 해봤다. Store와 비슷한 역할을 한다. Todo 클래스 우선 Todo 클래스를 만들었다. Todo의 데이터에는 투두에 담길 message, 각 투두의 id, 그리고 완료여부를 나타내는 isDone이 있다. 메서드로는 message를 변경할 수 있는 setMessage와 완료여부를 toggle할 수 있도록 하는 toggle..
-
Vue 입문 - todolist 만들어보기 3 - 컴포넌트Study/개발 2021. 9. 5. 20:57
포스트를 작성하던 중, 리액트 개발 업무가 많아져서 뷰 쪽을 잘 못보는 바람에 3번째 포스트를 작성하는데 오래 걸렸다. 아무튼 시작해보면! Vue Class Component 뷰는 기존의 옵션 객체를 넘겨줘서 컴포넌트를 만들기도 하지만, 클래스 기반 프로그래밍에 익숙하다면 클래스로 해볼 수 있다. 나는 클래스 기반 컴포넌트를 사용하게 됐기 때문에 이 사용법을 위주로 적어볼 예정이다. 안써본 사람들은 한번 이런게 있구나 보면 좋을 것 같다. 클래스 기반 컴포넌트를 사용할 때 vue-property-decorator와 타입스크립트를 사용하는데, 우선 몇가지 관련 설정이 필요하다. 아래는 설정하면서 만났던 에러들을 메모해둔 부분인데, 굳이 안봐도 된다. 같은 에러가 발생한 사람이 있을까봐 혹시 도움이 될까 싶..
-
Vue 입문 - todolist 만들어보기 2 - npm/ webpackStudy/개발 2021. 7. 11. 20:13
npm으로 시작하기 공부할겸 올려보는 포스팅 2번째 앞선 내용: Vue가 기본적으로 어떤 형태이고, 어떤식으로 작동하는지 알아봤다. npm https://docs.npmjs.com/about-npm node package manager로 노드 프로젝트를 시작할 때 필요한 패키지를 관리하고, 실행할 수 있도록 해준다. 이전까지는 html의 script 태그를 이용하여 cdn을 통해 Vue를 가져왔다. 이번에는 실제로 더 많이 사용하게될 (아마도) 방법인 npm을 통해 Vue를 설치해보고 todolist를 만들어보기로 했다. Vue 설치 npm init -y npm install vue vue를 설치해서 사용하는데, vue를 이전과 같이 js, css 따로 만들어서 사용해도되지만, sfc(single fil..
-
Vue 입문 - todolist 만들어보기 1 - 시작하기Study/개발 2021. 6. 7. 00:32
들어가며 이번에 회사에서 맡은 프로젝트가 Vue를 사용하기 때문에 Vue를 시작하게 되었다. Vue는 js 프레임워크 중 하나로, 쉽게 FE 개발을 할 수 있다. 리액트를 해봤다면 더 쉬울 것이다. Vue 학습을 위해 todolist를 만들며 연습해본 과정을 정리해봤다. Vue 시작하기 Hello World! 가장 간단한 형태의 Vue app은 다음과 같이 만들 수 있다. // index.js var app = new Vue({ el: '#app', data: { message: 'Hello World!' } }) index.js를 보면 app이라는 새로운 Vue인스턴스를 생성한다. Vue 생성자함수는 옵션 객체를 인자로 호출되고 있다. 옵션 객체의 내부에는 el과 data가 있다. el은 css sel..
-
자바스크립트 객체 지향 프로그래밍Study/개발 2021. 4. 14. 16:29
이미지 출처 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 6장 요약 객체 지향 프로그래밍 ECMA 에는 클래스 개념이 없다. 객체란 그저 특별한 순서가 없는 값의 배열이다. 객체: `프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시값이나 객체, 함수를 포함한다. 6.1 객체의 이해와 생성 같은 인터페이스의 객체를 여러개 만들 때, 중복을 줄이기 위해 팩토리패턴을 사용하기 시작했다. 팩토리 패턴 특정 객체를 생성하는 과정을 추상화. function createPerson(name) { var o = new Object(); o.name = name; o.sayName = function(){ console.log(this.name); } return o; } var person1 = createPer..