분류 전체보기

03. Vue.js 초간단 Event Handling

이벤트 핸들링 이번 포스팅에서는 v-on 디렉티브를 이용하여 간단한 키보드 이벤트 핸들링과 마우스 이벤트 핸들링을 다뤄볼게요. javascript를 해보셨던 분은 아시겠지만 이벤트가 엄청 많아서 이벤트와 관련된 자세한 부분은 구글링을 해보시고 저는 어떤 식으로 vue에서 event handling을 구현하는가에 초점을 둘게요. v-on 디렉티브 피깎기 피회복시키기 남은 피 : {{ hp }} 공격과 힐을 통해서 hp를 올리고 줄이는 아주 허접한 예제에요. 0인 경우에는 더 이상 피를 깎을 수 없게 예외처리 해주었구요. 기본적으로는 Angular에서 사용하는 (click)="메소드" 가 Vue에서는 v-on:click="메소드"로 바뀌었네요. 사용하는 방법 자체는 매우 간단해요. v-on:click="메소..

02. Vue.js Vue 인스턴스 옵션 and Life Cycle

Vue 인스턴스 var a = new Vue({}) 와 같이 만든 객체를 Vue 인스턴스라고 하는데 처음에 배웠던 ViewModel을 의미하기도 하죠. 이 Vue 인스턴스를 생성할 때 여러 옵션을 설정할 수 있는데 이 옵션들에 대해 알아보도록 할게요. data 옵션 var model = { number = 2 } var test = new Vue({ el: '#test', data : model });data 옵션에 주어진 모든 속성들은 Vue인스턴스 내부에서 직접 사용되는 것이 아니라 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시(대리인?)를 두어 처리해요. 그리고 data 옵션은 Vue 인스턴스가 관찰하는 데이터 객체를 의미하므로 변경 사항을 즉시 감지해요. 데이터에 접근..

01. Vue.js 기본기: 각종 디렉티브

기본기 전 포스팅에서 말씀드렸듯이 단일 html페이지에서부터 vuejs를 연습해볼 생각이에요. 그리고 저는 Atom을 기본편집기로 사용하였고, 테스트용 브라우져는 Chrome을 사용하였어요. 아직 단일 html페이지 연습단계이기 때문에 를 이용해서 cdn으로 구성하셔도 Vue문법 및 빌드는 아주 잘됩니다. Hello, Vue js 01.html {{ message }} 가장 기본적이 예제 에요. model 객체는 변수명 그대로 model 객체에요. 데이터를 가지고있지요. 그 밑에 있는 app이라는 이름을 가지는 녀석도 객체인데 Vue객체(이하 뷰객체)이자 ViewModel 객체에요. 뷰객체에 있는 el이라는 속성은 HTML 요소(element의 약자)를 나타네요. html 파일에서 id값을 부여하는것을 ..

00. Vue.js 설치와 시작

Vue.js 시작하기 먼저 vue.js가 무엇인지 부터 알아봐야 겠죠? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 공식문서에 나와있는 Vue.js의 정의이다. 다른프레임워크에 대한 비교는 숙련된 프론트엔드 개발자라면 확인하라고 적혀있었다... 대충 한번 훑어보았습니다. React와 비교 렌더링성능이 더 우수..

01. Tensorflow 기본 및 예제1

Tensorflow란? 이제 설치는 끝났고 tensorflow에 대해서 조금 알아보자 tensorflow는 일단 기본적으로 오픈소스 라이브러리이다. 머신러닝과 딥러닝에 대한 함수들이 내장되있다고 보면된다. 머신러닝? 딥러닝 무슨 차이? 사실 구글에 검색을 해봤는데도 여러가지 입장과 측면이 있는 것 같다. 내가 보기에는 머신러닝은 말그대로 기계가 학습을하도록 하는 알고리즘을 짜는 것이다. 그 목적은 입력데이터의 특정부분을 추출 해서 그 부분을 학습하고 원하는 출력데이터를 얻는데 있다. 딥러닝은 위에서 얘기한 추출 마저 스스로하게 만드는 것이다. 그래서 딥러닝을 end to end machine learning이라고 부르기도 한다. 결국 가장 큰 차이점은 추출하는 알고리즘의 유무 정도라고 해야될까...? 잘..

00. MacOS에 Tensorflow 설치하기

Tensorflow 설치 1. CPU / GPU 선택 Tensorflow는 기본적으로 cpu를 사용하지만 NVIDIA 그래픽카드를 사용하면 gpu를 이용해서 연산을 할 수 있다. 나는 그런 그래픽카드를 안쓰므로 cpu만 이용하는 걸로 선택했다. 만약에 gpu를 사용할 수 있으면 쓰는게 좋다. cpu보다 훨씬 빠르다고한다... 2. Tensorflow 실행환경 결정하기 기본적으로는 설치방법이라고도 생각할 수 있다. 크게 봤을 때는 가상환경 에서 돌리느냐 그냥 현재환경 에서 돌리느냐로 결정할 수 있다. 일반적으로는 가상환경 에서 돌리는 것을 추천을 많이하는 것 같다. 왜냐하면 다른 Python 개발과 분리시켜 동일한 기기에 있는 기존의 Python프로그램들과의 간섭이나 상호간 영향을 불가능하게 만들기 때문이..