Javascript (43) 썸네일형 리스트형 Vue.js 2.x 가이드 따라치기 Overview (Vue Document가 그렇게 잘 되어있다던데..) Vue.js Vue는 따로 블로그로 정리할 필요없이 Document가 잘 되어있는 것으로 알려져있다.(심지어 vue.js 한국 사용자 모임에서 많은 프로젝트들(vue-router, vue-loader등)을 번역해놔서 문서들이 어색함이 없이 술술 읽힌다.)하지만 Document가 아무리 잘 되어있어도 읽기만 하고 넘어가거나 그런가보다 하고 넘어가면 의미가 없다.한국어 번역 작업을 열심히 해주셨으니 잘 읽어보고 실습을 해보고 나름대로 느낀 점을 정리하면 좋겠다고 생각했다.Vue.js 가이드 따라하기 Vue.js의 장점은 여러 블로그에 많으니 생략한다. 또한 여러가지 설치 방법(환경 설정)이 있지만 생략한다.대신 CDN으로 가져와서 해보거나 jsfiddle에서 계속 테스트한다. (추후 spring boot와 .. D3.js 사용법을 알기 위한 튜토리얼 예제 분석(D3공식홈페이지 example과 실시간 Line 그래프 예제 분석) D3.js 기본 문법 정리 D3.js는 Data-Driven Documents의 약어로 데이터를 렌더링할 수 있는(그릴 수 있는, 다룰수 있는) 웹 기반 문서 라이브러리다.좀 더 간단 명료하게 설명하면 데이터 시각화 라이브러리다. (실시간 데이터 차트 및 다양한 그래프)D3 공식홈페이지에 가보면 엄청나게 다양한 그래프들이 있고 거기서 원하는 것을 골라서 소스를 얻어갈 수 있다.라이센스도 BSD로 영리든 비영리든 마음대로 사용, 수정해도 된다.D3.js의 기본 문법(사용법)을 숙지하고 예제코드를 분석할 것이다.- D3 작업 순서 1. 데이터를 불러온다.2. 작업할 공간을 선택한다.3. 공간에 불러온 데이터를 연결(바인딩)한다.4. 각각 연결한 것을 원하는대로 그린다.1234567var dataset = [.. ES6 이진 탐색 트리 구현하기, 어떻게 특정 값을 빠르게 찾을 수 있을까? (Binary Search Tree, BST) 이진 탐색 트리 (Binary Search Tree with ES6) 트리 구조에 대해서는 많이 들어보았다고 생각한다.어렵게 생각할 것도 아닌 그냥 루트(root)노드에서 하위 노드로 계층 구조를 갖는 것을 트리라고 보면된다.윈도우 파일시스템 구조처럼 C드라이브 하위에 windows디렉토리, program files디렉토리 등이 있고 program files디렉토리 하위에 Java디렉토리가 있는 등 이런 구성이 트리다.각설하고. 프로그래밍에서 노드 2개 이하로 제한하는 방식을 이용해 이진 탐색 트리(BST)라는 것을 만들었다.노드가 2개이하라는 특징 덕분에 프로그래밍에서 특정 값 검색을 빠르게 할 수 있게 되었다.이진 탐색 트리는 루트 노트를 기준으로 루트 노트보다 작은 값은 왼쪽 하위노드로, 루트 노트.. ES6 프로미스(Promise), 진짜 쉽게 이해하기 (Promise의 목적만 생각한다.) 프로미스(Promise) 싱글쓰레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다.덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 사용되는 경우가 많아지면서 단점이 드러났다.그 단점은 비동기 처리를 순차적으로 실행할 필요가 있는 경우에 비동기 처리를 중첩시켜서 표현하므로 에러, 예외처리가 어렵다는 것과 중첩으로 인한 복잡도가 증가하는 것이 이다.크게 이 두 가지의 단점을 해결하기위해 프로미스가 예전부터 라이브러리로 생겨났고, 이것을 ES6에서는 언어적 차원에서 지원하게 되었다.Promise를 이해하기 위해 여러 블로그를 돌아다니며 찾아본 결과 핵심은 이 프로미스의 목적만 머릿속에 집어넣는 것이고, 딱 한 번만 따라 쳐보면 이해가 된다."비동기에서 성공과 실패를 분리.. ES6 바벨(babel)을 이용한 트랜스 파일링(es6 개발환경 구축하는 방법, feat.webpack) Babel (바벨 : 트랜스파일링) Babel(바벨)은 ES6문법으로 작성된 js파일을 ES5문법으로 작성된 js파일로 만들어주는 작업을 해주는 도구다.대부분의 브라우저가 ES6문법을 완전히 지원해주지 않기 때문에 ES6문법의 자바스크립트 파일을 사용할 수 없다.따라서 Babel(바벨)을 이용해서 개발은 ES6로 하되 브라우저는 트랜스 파일링된 ES5문법의 js파일을 사용하게 하는 식의 구성을 갖게 해야한다.Babel 환경 설정 방법 바벨을 사용하기 전에 node.js의 NPM에 대해서 알아야한다. (패키지 매니저로 babel-cli등을 설치하기 위함.)1. 프로젝트 디렉토리 생성- mkdir myproject && cd myproject2. package.json 생성- npm init -y // 여기.. ES6 자료구조 연결리스트(LinkedList) 구현하기(이중연결리스트, 원형연결리스트) 그리고 의문점.. ES6로 연결리스트(LinkedList) 만들기 연결리스트라는 자료구조를 구현해본다.기존 배열은 단점이 있다. 자바스크립트에서는 아니지만 다른 언어에서 배열은 길이를 자유롭게 늘리고 줄이기 어렵고, 자바스크립트에서 배열은 객체이므로 효율이 약간 떨어질 수 있다고 한다.(왜 객체라는 이유로 효율이 떨어지는지는 찾아보았는데 잘 안나와서 찾아보는 중이다... 알고 계신분이 있다면 댓글로 도움을 주셨으면 좋겠다.)따라서 처리속도가 빠른 것을 원한다면 배열 대신 연결리스트를 사용하면 조금더 성능이 좋아질 때가 있다. 하지만 임의의 접근(index를 통한 접근)을 지원하지 않으므로 접근이 잦은 경우에는 배열을 쓰는 것이 좋다.연결리스트는 어떤 object를 갖는 Node를 담고 있고 연결이라는 단어 그대로 next.. ES6 자료구조 큐(Queue) 구현하기, 우선순위 큐 만들고, 큐 두개로 스택 만들기 큐(Queue)구현하기 큐는 선입선출(FIFO) 자료구조다. 배열을 기반으로 큐를 구현했다.포인트는 배열이라서 shift()메서드와 push()메서드가 있어서 구현이 훨씬 편리하다는 것이다.1234567891011121314151617181920212223242526272829303132333435363738394041class Queue{ constructor(){ this.dataStore= []; } toString(){ let result = ""; for(val of this.dataStore){ result = result + val + "\n"; } return result; } enqueue(element){ this.dataStore.push(element); } dequeue(){ re.. ES6 자료구조 스택(Stack)만들어보기, 스택 2개로 큐(Queue) 만드는 방법 ES6 Stack 만들기 스택(Stack)은 리스트구조에서 한쪽 방향에서만 입력, 출력이 되는 구조다.LIFO(Last in First Out)으로 가장 나중에 넣은 자료가 가장 처음 나오는 자료 구조로 프로그래밍중에 종종 사용된다.자료구조에 대한 이해는 어느정도 되어있다고 가정하고 javascript에서 구현을 해본다.12345678910111213141516171819202122232425262728293031323334353637class Stack{ constructor(){ this.top = -1; this.dataStore = []; } push(element){ this.top++; this.dataStore[this.top] = element; } pop(){ if(this.top>-1).. 이전 1 2 3 4 ··· 6 다음
