본문 바로가기

분류 전체보기156

벡터 그래픽(Vector Graphic)과 SVG(Scalable Vector Graphics) 1. 비트맵 그래픽과 벡터 그래픽 1) 비트맵 그래픽비트맵 그래픽은 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식이다. 대표적인 비트맵 그래픽인 jpeg, gif, png 형식의 이미지 파일을 확대하다보면 아래의 그림 좌측과 같이 이미지가 손상되는 현상이 발생한다. 비트맵 그래픽은 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 때문에 원본 크기보다 이미지를 확대하면 이미지가 손상되는 결과가 발생한다. 그러나 비트맵 그래픽은 단순히 데이터의 배열로써 이미지를 표현하기 때문에 컴퓨터가 연산하기 용이하다. 따라서, 비트맵 그래픽은 하드웨어의 자원을 적게 소모하는 장점이 있다. 2) 벡터 그래픽벡터 그래픽은 픽셀의 배열로 이미지를 표현하는 것이 아니라 실제로 이미지에 표현.. 2016. 4. 12.
XMLHttpRequest 객체와 Ajax 1. Ajax Ajax(Asynchronous JavaScript and XML, 에이젝스)는 이용자 반응형 웹 어플리케이션 제작을 위해 HTML, DOM, JavaScript, XMLHttpRequest 등으로 구성된 웹 개발 기법이다. 기존의 웹 어플리케이션은 웹 페이지가 로드될 때 웹 서버에 요청을 전달하고, 웹 서버는 요청된 내용에 따라 데이터를 가공하여 클라이언트에게 전달하는 방식으로 동작했다. 그러나 이러한 방식의 데이터 전송은 HTML 코드를 다시 한번 더 전송해야하기 때문에 대역폭 낭비가 발생하게 된다. 또한 서버로부터 데이터를 가져올 때마다 새로고침(F5)를 누른 것처럼 페이지가 다시 로드되어야 하기 때문에 이용자 반응형 어플리케이션을 구현하기도 어렵다. 반면에 Ajax 방식을 이용한 웹.. 2016. 4. 9.
[머신러닝] - LVQ(Learning Vector Quantization) 1. 개요 LVQ는 입력 벡터를 가장 유사한 참조 벡터로 군집화하는 인공신경망이다. 비슷한 종류의 군집화 인공신경망인 자기조직화지도 (Self-organizing Map, SOM)와 비슷하게 경쟁학습을 통해 학습을 수행한다. 자기조직화지도와 비슷하게 LVQ 또한 초기 가중치에 의해 군집화 결과가 많은 영향을 받기 때문에 신경망이 불안정하다는 단점을 가지고 있다. 이 글에서는 LVQ, LVQ1 및 LVQ2에 대해 소개한다. 2. 용어 정의 군집화(clustering): 유사한 특성을 갖는 입력 벡터들을 하나의 집단으로 조성하는 방법론으로써 머신러닝 분야의 한 갈래이다.참조 벡터(reference vector): 경쟁학습을 통해 형성되는 입력 벡터의 그룹으로써, 다른 군집화 인공신경망의 출력층 노드와 같다... 2016. 4. 8.
[JavaScript] - 자바스크립트의 this 포인터 1. this 포인터 C++, Java 등과 같은 객체지향 언어를 이용하여 프로그래밍할 때, this 포인터는 매우 유용하게 사용된다. C++에서 this 포인터에는 해당 클래스의 주소가 저장되어 있으며, 컴파일 과정에서 컴파일러가 자동으로 선언하기 때문에 프로그래머가 명시적으로 선언할 수 없다. 브라우저 환경에서 실행되는 웹 어플리케이션은 대부분 유저인터페이스(user interface, UI)를 통해 이용자의 입력에 따라 코드가 실행되는 이벤트 기반 응용 프로그램이다. 이러한 웹 어플리케이션의 특징 때문에 웹 어플리케이션을 개발하고자 자바스크립트를 이용할 때는 이벤트 반응형 프로그래밍(event-driven programming) 형식을 많이 이용하게 된다. 이벤트 반응형 프로그래밍에서 this 포인.. 2016. 4. 8.
[JavaScript] - 객체 정렬 1. Sort 메소드 자바스크립트에서는 별도의 정렬 메소드를 구현하지 않아도 배열 객체에서 정렬 메소드를 제공한다. 자바스크립트의 sort 메소드는 아래의 [코드 1]의 3번째 줄과 같이 "배열명.sort()"의 형태로 사용할 수 있다. 1234567var arr = [0, 10, 5, -5, 1]; arr.sort(function(a, b) { return a - b; }); for(var i = 0; i 2016. 4. 8.
웹 스토리지 (Web Storage)의 특성과 사용법 1. 웹 스토리지와 쿠키 웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다. 웹 스토리지의 최신 스펙은 https://www.w3.org/TR/webstorage/에서 확인할 수 있다. 웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용된다. 다음 항목에서는 로컬 스토리지와 세션 스토리지에 대한.. 2016. 4. 8.
리페인트 (Repaint) 및 리플로우 (Reflow) 최소화 1. 문서 구조 해석 및 렌더링 Chrome, Firefox, Safari 등의 브라우저는 성능 향상을 위해 각각의 고유한 성능 최적화 단계나 렌더링 (rendering) 프로세스를 브라우저 엔진에 갖추고 있다. 아래의 [그림 1]은 대부분의 브라우저에서 HTML 문서 해석 시 발생하는 공통적인 과정을 도식화한 것이다. [그림 1] 브라우저의 HTML 문서 해석 과정 DOM tree는 태그라고 불리는 HTML 문서의 구성 요소와 각 구성 요소간의 관계를 트리 구조로 나타낸 자료구조이다. Styles struct는 브라우저에 기본으로 설정된 스타일이나 스타일시트에 정의된 코드를 바탕으로 스타일 구조체를 형성한 것이다. 브라우저 엔진은 DOM tree와 styles struct를 결합하여 HTML 문서를 구.. 2016. 4. 5.
DocumentFragment를 이용한 JavaScript 성능 최적화 자바스크립트의 DOM 객체는 연산을 수행할 때마다 DOM tree라는 자료구조에 접근해야 하기 때문에 자바스크립트의 성능을 저하시키는 주된 요인 중 하나이다. 따라서, 자바스크립트의 성능을 최적화하기 위해서는 DOM 객체 접근을 최소화하도록 코드를 작성해야 한다. [그림 1] DOM tree의 구조 직관적으로, id가 list인 DOM 객체 내의 한 요소에 접근하여 해당 객체에 div 태그를 추가하는 코드를 작성하면 아래의 [코드 1]과 같이 작성할 것이다. 12345678910function addElements() { var target = document.getElementById('list'); for (var i = 0; i 2016. 4. 4.
ChartJS Content: chart libraryLanguage: JavascriptOfficial home page: http://www.chartjs.org/Download link: https://github.com/nnnick/Chart.jsDownload file: none 2016. 3. 13.
2016년 1~2월 프로그래밍 언어 순위 및 순위표별 특징 TIOBETIOBE Programming Language Ranking은 전 세계의 프로그래머, 프로그래밍 강좌, 프로그래밍 그룹 수와 Google, Bing, Yahoo, Wikipedia, Amazon, YouTube와 같은 검색 엔진을 통해 검색되는 프로그래밍 언어의 종류를 분석하여 프로그래밍 언어 순위를 결정한다. 프로그래머, 프로그래밍 강좌, 프로그래밍 그룹 수를 순위에 반영하기 때문에 현재 주류를 이루고 있고, 프로그래밍 입문자가 가장 먼저 접하는 C/C++, Java와 같은 전통적인 프로그래밍 언어의 순위가 높게 랭크되는 경향이 있다. [2016년 2월 TIOBE 프로그래밍 언어 순위, 출처 : TIOBE] RedMonkRedMonk Programming Language Ranking은 Gi.. 2016. 2. 23.
[golang] - 함수 선언과 함수의 기본적인 특징 C/C++, Java 등의 언어처럼 Go 언어에서도 함수 선언 및 호출이 가능하다. 그러나 Go 언어에서는 C/C++, Java 처럼 매개변수의 존재 유무로 함수와 변수를 구별하는 것이 아니라, func 키워드를 이용하여 함수 선언을 나타낸다. 또한, 함수의 리턴 타입은 매개변수 뒤에 명시한다. 따라서, Go 언어에서는 'func' '함수명' '(매개변수)' '리턴 타입'의 형태로 함수를 선언한다. 아래의 소스 코드는 add라는 함수를 정의하여 main에서 호출하는 예제이다. package main import "fmt" func add(x int, y int) int { return x + y } func main() { fmt.Println(add(55, 11)) } 함수의 리턴 타입을 매개 변수 뒤.. 2016. 2. 22.
[golang] - import 키워드 Go 언어에서는 개발에 필요한 수학 연산, 입출력 등의 기능과 각종 라이브러리를 패키지의 형태로 제공한다. 이러한 패키지를 프로그램 개발에 이용하기 위해서는 C/C++ 에서와 같이 import 키워드를 이용한다. import 키워드는 import "패키지 이름" 형태로 이용한다. 아래의 소스 코드는 입출력 패키지인 fmt를 이용하여 "Hello World!"를 출력하는 Go 언어 소스 코드이다. package main import "fmt" func main() { fmt.Println("Hello World!") } Go 언어에서는 fmt 패키지 이외에도 math, zip, json 등의 다양한 패키지를 제공하고 있으며, Go 언어에서 제공하는 패키지 목록과 구현 사항은 이 문서에 정리되어 있다. 아래.. 2016. 2. 22.

티스토리툴바