웹 프로그래밍13 [JavaScript] - Web Notification API와 알림 기능 1. 알림 (Notification) 기능 안드로이드나 iOS와 같은 모바일 환경에서는 notification이라는 기능을 이용하여 스마트폰 이용자에게 새로운 정보, 어떠한 작업의 완료 등과 같은 정보를 알릴 수 있다 [그림 1]. [그림 1] 안드로이드와 iOS의 알림 (notification) 기능 그동안 모바일 환경에서 매우 유용하게 이용되고 있는 notification 기능을 데스크톱 브라우저 환경에서 이용하기 위해서는 자바스크립트를 이용하여 직접 notification 기능을 구현하는 수 밖에 없었다. 그러나, 최근에 크롬, 파이어폭스, 사파리에 Web Notification API라는 것이 추가되면서 자바스크립트를 이용하여 간편하게 notification 기능을 구현할 수 있게 되었다. 2. .. 2016. 9. 13. [JavaScript] - 네임스페이스 (Namespace) 1. 네임스페이스 네임스페이스는 이름이 존재하는 공간과 같다. 우리는 이름이 C로 같은 두 사람을 구분할 때, A 지역에 거주하는 C와 B 지역에 거주하는 C로 구분하기도 한다. 이러한 구분에서 이름이 C로 같은 두 사람이 A와 B라는 서로 다른 지역 (공간)에 존재했기 때문에 우리는 두 사람을 식별할 수 있었다. 복잡한 프로그램을 개발하거나, 협업을 하다보면 전역 범위에 위의 예시와 같이 이름이 같은 변수, 함수, 객체 등을 정의하는 경우가 발생한다. 네임스페이스는 이러한 경우에 발생할 수 있는 충돌을 방지하기 위해 이름이 존재하는 공간을 정의하는 기능을 제공한다. 네임스페이스 기능을 제공하는 대표적인 언어로는 C++와 자바가 있다. C++에서는 아예 namespace라는 키워드를 이용하여 변수, 함수.. 2016. 9. 11. Java 환경에서 트위터 API를 이용한 SNS 분석 1. 트위터 어플리케이션 생성 트위터 API를 이용하기 위해서는 트위터 가입 및 트위터 어플리케이션 생성이 필요하다. 트위터 가입은 특별한 사항이 없으므로 생략하고, 트위터 어플리케이션 생성에 대해 설명한다. 1) 트위터 어플리케이션을 생성하기 위해 https://apps.twitter.com/에 접속하여 트위터 계정으로 로그인한다. 그 다음, 우측에 있는 Create New App 버튼을 클릭한다 [그릠 1]. [그림 1] 트위터 어플리케이션 생성 1 2) 페이지에 나타난 Name, Description, Website 항목을 입력한다 [그림 2]. 테스트용으로 생성할 경우에는 Website 항목에 임의의 URL을 입력해도 된다. [그림 2] 트위터 어플리케이션 생성 2 3) 어플리케이션 생성 후 나타.. 2016. 9. 9. [JavaScript] - 자바스크립트와 객체지향 프로그래밍 1. 자바스크립트와 객체지향 프로그래밍 자바스크립트(JavaScript)는 이름에서도 알 수 있듯이 스크립트 프로그래밍 언어이다. 그러나 정확히 말해서 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어라고 할 수 있다. 자바스크립트를 이용하여 웹 어플리케이션을 개발하고자 프로그래밍할 때 많이 사용하는 DOM 객체, XMLHttpRequest 객체 등 자바스크립트에는 많은 객체가 존재한다. [그림 1] 자바스크립트 대부분의 자바스크립트 코드는 브라우저 환경에서 실행된다. 불과 몇 년 전에는 브라우저에 탑재된 자바스크립트 엔진의 성능이 지금보다 매우 떨어졌었기 때문에 자바스크립트 코드가 많은 웹 페이지는 잘못 만들어진 페이지라고 말할 수 있었다. 그러나 지금은 웹 OS라는 말이 나올 정도로 브라우저가 어플.. 2016. 9. 4. [JavaScript] - 전역 변수의 문제점과 해결 방법 1. 전역 변수의 문제점 자바스크립트는 몇가지 뛰어난 강점을 갖고 있지만, 사실 프로그래밍 언어의 관점에서 보면 잘 디자인된 언어는 아니다. 언어의 잘못된 디자인으로 인해 발생하는 문제 중 대표적인 예시가 전역 변수에 대한 것이다. 자바스크립트에서는 아래의 [코드 1]과 같이 전역 변수를 선언하고, 함수 내부에서 전역 변수를 이용하거나 그와 이름이 똑같은 지역 변수를 선언할 수 있다. 12345function Person(fullName, gender, age) { this.fullName = fullName; this.gender = gender; this.age = age;}Colored by Color Scriptercs[코드 1] 전역 변수로 인한 문제가 발생하는 코드 [코드 1]의 실행 결과는 .. 2016. 9. 4. [JavaScript] - 코드 블로킹 (Code Blocking) 방지 1. 코드 블로킹 (Cdoe blocking) 코드 블로킹은 어떠한 코드가 실행됨에 따라 해당 코드의 실행 때문에 다른 코드를 실행할 수 없는 현상을 말한다. 아래와 같이 자바스크립트로 작성된 [코드 1]이 있다. 1234567891011121314151617181920212223242526272829 start function func() { document.getElementById('result').innerText = test1(); document.body.style.backgroundColor = '#008299'; } function test1() { var num = 0; for (var i = 0; i 2016. 9. 4. 벡터 그래픽(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. [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. 이전 1 2 다음
