홍준혁

먼저 각 컴포넌트를 만들어서 App.vue에 넣어서 만들었다. 이렇게 하면 components에서 만든 Vue 컴포넌트들을 App이라는 곳에 다 넣어줬다. 이렇게 구현을 하고 F12를 눌러 개발자 모드를 들어가 보면 성공적으로 만들어진 것을 볼 수 있다. 이제 각 기능들을 정의하고 구현할 것이다. TodoHeader : 애플리케이션 이름 표시 TodoInput : 할 일 입력 및 추가 TodoList : 할 일 표시 및 특정 할 일 삭제 TodoFooter : 할 일 모두 삭제 대충 이런식으로 구현을 할 것이다. 이제 하나하나 스타일 및 기능 구현을 해보도록 해보겠다. App.vue의 style을 조금 꾸며주도록 하자 그다음 TodoHeader를 꾸며보자 여기서 style에 scoped속성은 해당 컴포넌..

공식 뷰 사이트에서는 하위에서 상위로 데이터를 전달하는 것을 권장하지는 않는다. 왜냐하면 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문이다. 그래도 배워보자 보면 상위에서 하위로 전달하는 데이터 전달 방식과는 조금 다른 모습을 볼 수 있다. 먼저 하위 컴포넌트에서 버튼이 클릭되면 v-on:click이라는 이벤트가 발생하는데 그 이벤트가 발생하면 showLog라는 함수를 실행하게 되어있다. 이때 showLog를 실행하면 emit이 실행이 되는데 그러면 div#app에서 이벤트가 발생한다. 그럼 emit 이벤트가 발생하였을때 실행하는 함수는 printText인데 그렇게 되면 received event가 출력되는 모습을 볼 수 있다. 처리되는 과정을 정리해보면 ... [show]버튼을 클릭하면 클릭이벤트 ..

Vue에서 간단히 연산을 하는 경우 {{ message.split('').reverse('').join('') }} 이렇게 {{ }}안에 많은 로직이 있으면 보기 흉하고 유지 보수하기 힘들어진다. ※ {{}}안에 내용은 자바스크립트코드가 들어갈 수 있다 그래서 나온것이 computed인데 computed를 쓰면 {{ reversedMessage }} 이렇게 함수화시켜서 간단히 표현할 수 있다. 하지만 여기서 의문점이 들것이다. methods에다가 함수를 선언하고 하면 결과는 다르지 않을 텐데 왜 굳이 computed에 정의를 했느냐 인데 이것은 computed속성의 특징때문인데. computed는 "미리 계산된"이라는 뜻이다. 처음에 한번 계산하고 또 한번 쓸 때 전에 계산된 값을 한번 더 사용하게 된다..

noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 위 사이트를 보면 입력을 하면 다른 곳에 그 내용이 표시되는 기능이 구현되어 있다. 이번 시간에 폼 입력 바인딩을 배우고 나면 저런 기능을 구현할 수 있는 능력이 생길 것이다. {{ text }} 기능 구현에 앞서, input value에 text값을 넣어주고 밑에 text값을 넣어주고 input에 값이 바뀌면 실시간으로 text값이 바뀌는 방식이다. 이전 시간에 배운 키 이벤트를 사용해보면 쉽게 기능을 구현할 수 있다. keyup이라는 이벤트는 키보드가 누르고 올라갈 때를 의미하는데 이것을 사용해보겠다. {{ text }} 이런 식으로 하면 in..

※※이 글은 joshua1988.github.io/vue-camp/vue의 참고하여 작성되었습니다※※ ※※이 글은 배운 것을 바로 써가는 형식이므로 틀린 내용이 있을 수 있습니다.※※ 학교 동아리 바인드에서 소프트웨어 나르샤 프로젝트를 진행하게 되었다. 나는 웹을 맡기로 했는데 Vue나 React를 사용해서 해보려고 한다. 하지만 React는 지금 하기에는 어려운 느낌이 있는 거 같아서 상대적으로 쉽다는 Vue를 한번 해볼려고 한다. 먼저 Vue는 자바스크립트 기반의 라이브러리이기 때문에 자바스크립트의 기초를 알아야 한다. -(출처 joshua1988.github.io/vue-camp/js/array.html#% EB% B0% B0% EC%97% B4-%EC% A1% B0% EC% 9E%91% ED%95..