홍준혁

watch는 감시자라는 뜻이다. 특정 데이터를 감시하고 있다가 그 데이터가 변경이 일어났을때 watch속성이 자동으로 실행이 된다 아래의 코드를 보고 분석해보도록 하자 {{ message }} Click {{ update }} 위 코드를 하나하나 톺아보도록 하자 message data와 update data를 만들고 Vue인스턴스에 watch속성에 message를 만든다. 그럼 이때 message는 data에 있는 message를 감시하고 있다는 의미가 된다. 이떄 message를 지켜보고 있다가 변화됨을 감지하면 watch에 있는 message가 실행된다. 이때 message는 두가지 인자값을 받게 되는데 바뀐 값과 바뀌기 전의 값을 받게 된다. 그래서 console.log를 통해 그 값을 확인할 수 ..

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..

이번에 배워볼 것은 이벤트를 배워 볼 것이다. 이벤트라는 것은 어떠한 동작이 수행되었을 때 그 동작 자체를 이벤트라고 생각하면 될 것이다. 즉 이벤트가 감지되었을 때 특정 동작을 수행해라.라고 이해하면 될 것이다. ADD SUB 현제 count의 값은 {{ count }} 간단한 이벤트를 사용한 예제이다. v-on:이라는 것을 사용했는데 기존에 HTML에서 onclick을 사용하면 JS코드가 실행이 되는 방식이었는데 Vue는 v-on:click이라는 문법을 사용해서 Vue에서 바인딩을 하는 방식을 사용한다. 그래서 ADD 위 코드를 보면 이 버튼에서 클릭이 감지되었을 시에 count += 1을 실행한다는 것이다. 이때 count의 값은 Vue에 선언되어있는 data에 count값을 의미한다. 하지만 위에..

시작하기 전에 Vue를 이해하기 정말좋은 사이트를 발견했다. joshua1988.github.io/web-development/translation/why-43percent-devs-wanna-learn-vuejs/ 왜 43%의 프론트엔드 개발자들은 Vue.js를 배우고 싶어하나? (번역) 2017년에 가장 배우고 싶은 라이브러리 Vue.js 소개 글. 학습 자료와 링크가 첨부되어 있습니다. joshua1988.github.io 이번에는 데이터 바인딩이라는것을 배울건데 데이터바인딩은 데이터를 연결해준다 라는 의미로 해석하면 편할것이다. 먼저 데이터바인딩 예제를 보면서 배워보도록 하자. 위의 코드는 HTML코드에 데이터를 바인딩해주는 코드이다. v-bind:는 Vue와 "연결하겠다"라는 것을 알려주는 코드..

※※이 글은 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..