너와 나의 프로그래밍

갤럭시 버즈에 이어 갤럭시 워치 액티브2 까지 구매하게 되었다. (이로서 나도 삼엽충이 되어버렸...) 평소에 시계를 차고 다니지 않던터라 굳이 인생에서 시계는 핸드폰 하나로도 충분하지 않을까? 라는 생각을 많이 했었다. 그리고 시계는 딱 '시간만 보는 물건'이라는 고정관념이 있었던 터라 삶이 질이 크게 달라지지 않을 것이라고 생각했던 찰나, 주변인들의 악마의 속삼임과 같은 꼬득임에 넘어가 결국에는 시원하게 질러버렸다... 물건 받자 마자 전원 키는 순간부터 이미 나는 스마트 워치의 매력에 녹아내렸다. 이게 '시간 만 보는 물건'이 아니였다. 왜 스마트 워치가 실생활에 필요하고 삶의 질이 올라가는지 단번에 느낄 수 있었다. 애플 워치는 사용해 본 적이 없어서 어느정도의 퍼포먼스가 나오는지는 잘 모르겠지만..

Vue.js의 '꽃'인 이벤트 핸들링의 대해서 알아보려고 한다. 기존의 Javascript의 'addEventListener' 메서드나 Jquery에서 사용하는 '.on' 메서드 같이 이벤트를 연결하여 사용하는 기능을 DOM Element의 속성안에서 사용할 수 있다. Vue.js의 이벤트 핸들링은 첫 문자가 'v-on' 디렉티브나 '@' 2가지만 사용해서 이벤트 핸들링을 한다. 딱 2가지만 기억하면 쉽게 핸들링을 할 수 있으니 기억하자! 메서드 이벤트 핸들링 메서드 이벤트 핸들링(Method Event Handling)은 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하면 된다. /* testClick이라는 Function을 실행하는 방법. 둘다 동작은 같다. */ 클릭 클릭 위 예제는..

프로그래밍에서 항상 나오는 단골이 for문이 아닐까 싶다. Vue.js에서도 우리가 생각하는 for문을 사용할 수 있다. 하지만 우리가 생각하는 for문과는 조금 다르게 Vue.js에서 사용하는 「v-for」문은 Rendering을 하거나 DOM에서 데이터를 처리할 때도 사용한다. 간단하게 반복적인 DOM을 생성할 수 있어서 Vue.js에서는 꼭 사용되는 디렉티브 중에 하나다. 그리고 v-for를 사용할 때의 중요한 부분은 배열의 대한 유니크한 「key」값을 꼭 설정해 줘야 한다. v-for문의 종류 기본적인 v-for문 Index를 활용한 v-for문(배열) 객체와 Key, Index를 활용한 v-for문(객체만 사용) 리터럴에 직접 적용하는 v-for문 참고 1 : https://kr.vuejs.or..

본론부터 말하면 v-show와 v-if의 가장 큰 차이점은 v-if는 주석 v-show는 display:none으로 처리 된다는 게 가장 큰 차이점이다. v-show와 v-if의 차이는 구현 된 결과물의 따라 '개발자 도구'를 통해 DOM Node의 Element 변화를 확인 할 수 있다. 가끔 어떨때 v-show를 사용해야 하고 어떨때 v-if를 사용하여 분기처리를 해야하는 지 헷갈릴때가 간혹 있다. 그렇다면 둘 다 '안보이게' 처리를 하고 싶은건 맞지만 어떨때 적절한 처리를 하는 것이 좋을까?? (구글에 v-show와 v-if의 코드 정리의 대해 너무 자세하게 설명 되어 있는 것들이 많아 이번에는 예제 코드를 따로 작성하지는 않았다...) v-if(v-else-if, v-else) v-if는 우리가 ..

1. 포커스 F2 다음 오류, 경고, 제안으로 점프함 Alt + 1 프로젝트 창이 열리고 포커스가 위치함 트리 탐색 및 검색에 유용 Esc를 누르면 포커스가 다시 에디터로 복귀됨 Ctrl + W / Ctrl + Shift + W 선택 영역 확장 / 축소 Ctrl + Shift + ←→ 영역 선택(단어 단위) 2. 검색 Ctrl + E 최근 실행했던 파일 목록을 보여준다. Ctrl + B 코드 안에서 다른 코드로 이동 Ctrl + left Click 과 같은 기능 Shift + Shift 프로젝트내 모든 내용 검색 3. 라인 수정 Alt + Shift + ↑↓ 라인 단위로 옮기기 Ctrl + D 라인 복제 Shift + Ctrl + Enter 구문 자동 완성 Ctrl + Delete 단어 삭제 (커서 시작..

[TypeScript] 비동기 함수의 동기식 처리 Async/Await Async/Await란?? 자바스크립트 특성 상 '싱글 스레드'에서 실행되는 환경이다 보니 비동기 함수를 사용할 때 가장 고민이 되는 것이 아마 '응답 시간 만큼의 지연 시간이 존재하는 것'이 아닐까 싶다. 그 이유로 인해 원하는 작업을 하지 못하면서 난처한 경우가 많다. 단일 스레드로만 실행해야 페이지를 로딩할 때 보다 더 빠른 속도로 실행 할 수 있을 뿐만 아니라 브라우저의 인터프리터(Interpreter)가 단일 스레드기 때문이다. 지연시간/응답시간이 각자 다른 비동기 함수를 자바스크립트의 싱글 스레드 방식의 처리인 동기화 방식으로 사용을 해주는 Async/Await가 해결책이 될 것 같다. Async/Await는 ES2015에..