Javascript Node.js

Node.js에서 CSS 선택자로 간편하게 웹 스크래핑(웹 크롤링)을 하는 방법

웹 스크래핑(Web Scraping) 또는 웹 크롤링(Web Crawling)은 웹 페이지로부터 원하는 정보를 추출하는 기법입니다. 어떤 서비스에서 API가 별도로 제공되고 있지 않지만 웹 페이지로는 정보가 제공되고 있을 때, 웹 스크래핑 기법을 이용하면 원하는 정보를 획득할 수 있습니다.

웹 스크래핑의 원리에 대해서는 이전 글인 웹 스크래핑(웹 크롤링)의 원리에서 다루었습니다. 이번 글에서는 Node.js에서 패키지 2가지를 조합하여 손쉽게 구현한 웹 스크래핑 함수 예제코드를 소개합니다.

(more…)

Continue reading

Javascript jQuery

하나의 웹페이지에서 여러 jQuery 버전을 동시에 사용하기

하나의 웹 페이지에서 여러 jQuery 버전을 사용해야 하는 일은 매우 드뭅니다. 그러나 레거시 코드와 신규 작성된 코드가 혼재된 경우, 서로 다른 버전의 jQuery를 기반으로 하는 컴포넌트를 활용하는 경우에는 이러한 일이 발생하기도 합니다. 이 까다로운 요구사항을 만족하기 위해서는 2가지 문제를 해결해야 합니다.

 

문제와 해결책

첫 번째 문제는 변수 덮어쓰기입니다. jQuery는 임베드하는 순간, 전역변수 $에 함수를 할당합니다. 따라서 두 번째 jQuery 버전을 임베드하면, 첫 번째로 임베드했던 jQuery의 $ 변수를 덮어쓰게 될 것입니다.

이 문제는 손쉬운 해결책이 있습니다. 바로 jQuery가 제공하는 noConflict()라는 함수입니다. 이 함수는 jQuery가 전역변수 $에 대한 제어권을 포기하고 할당을 해제하게 합니다. 따라서 한 버전의 jQuery를 이용하여 소스코드를 실행한 후, 다음 버전의 jQuery를 임베드하기 전에 noConflict() 함수를 실행하면, 또다른 버전의 jQuery로 전역변수 $가 할당되어 다음 소스코드를 실행할 수 있습니다.

두 번째 문제는 비동기 임베드입니다. jQuery를 임베드하면 이는 비동기적으로 실행되기 때문에, 해당 파일의 로딩이 끝나는 시점을 제어할 수 없습니다. 한 버전의 jQuery가 임베드 되어서 소스코드를 실행하고 있는데, 두 번째 버전의 jQuery의 임베드가 완료되면, noConflict() 함수가 사용되기도 전에 jQuery의 버전이 바뀔 수 있습니다. 따라서 비동기적으로 임베드 되는 jQuery를 순차적으로 임베드할 수 있는 방안이 필요합니다.

이를 위해서는 async와 await를 이용할 수 있습니다. aync 속성의 함수에서 await 지시자를 사용하면, 비동기 처리가 끝날 때까지 다음 행의 소스코드를 실행하지 않고 기다리게 합니다.

(more…)

Continue reading

Backends Frontends Javascript PHP

코멧(Comet) #3 – Ajax 롱폴링(Ajax Long polling) 채팅방 예제로 배우기

코멧을 구현하는 두 번째 방법은 롱폴링(Long Polling)이라고 하는 기법으로, 그 중에서도 금번 포스팅에서는 Ajax를 기초로 한 롱폴링 기법을 소개합니다. 이것은 지난 포스팅에서 소개한 Ajax 폴링 기법에서 일부분을 변형하여서, HTTP 통신이 일어나는 빈도를 줄인 것입니다. Ajax 폴링과 이 기법 사이의 결정적인 차이점은 서버측에서 특정한 상태값이 변하기 전까지는 응답을 미루는 것이라고 할 수 있습니다.

금번 포스팅에서는 지난 포스팅에서 Ajax 폴링으로 구현한 채팅방 예제를 롱폴링으로 수정하여, Ajax 폴링과 대조되는 롱폴링의 작동원리를 살펴볼 것입니다. 따라서 지난 포스팅을 읽어보지 않은 분께서는 금번 포스팅을 읽기에 앞서 일독을 권합니다.

(more…)

Continue reading

Frontends Javascript jQuery

Epiloum Slider – 간결한 HTML 마크업을 기반으로 하는 jQuery 애니메이션 슬라이더

이번 포스팅에서는 제가 작성한 jQuery 애니메이션 슬라이더(Slider) 모듈인 “Epiloum Slider”를 소개합니다.

웹 상에서 찾을 수 있는 수많은 자바스크립트 또는 jQuery 슬라이더는 필요 이상의 복잡한 HTML 태그 구조를 요구하거나, 사전에 CSS 작업 상당 부분 필요한 경우가 많습니다. 이처럼 애니메이션이라는 UX적인 부분을 위해 마크업을 희생하는 것은 의미론적 마크업의 철학에 위배되는 것이기도 합니다.

Epiloum Slider는 그와 같은 상황에 대한 안타까움으로부터 만들어졌습니다. 본 모듈의 가장 큰 특징은 1개의 <ul> 또는 <ol> 태그와, 그 아래에 나열된 <li> 태그들 만으로 적용 가능하다는 점입니다. 또한 스크립트를 이용해 CSS를 변경하는 일을 최소화하여, 실무에서 응용할 때 레이아웃에 영향을 줄 가능성을 최소화하였습니다. 간결한 마크업를 추구하는 많은 분들께 도움이 되시기를 바라겠습니다.

 

파일구성

아래 버튼을 눌러 다운로드 받은 zip 파일의 압축을 해제하면, 2개의 디렉토리를 만날 수 있습니다. 첫 번째 디렉토리인 Module 아래에는 자바스크립트 파일 epiloum_slider.js이 들어있으며, 실제로 본 슬라이더를 사용할 때에 임베디드해야 하는 파일입니다. 두 번째 디렉토리인 Example 아래에는 본 모듈의 사용예제가 들어 있습니다.

Download Button

(more…)

Continue reading

Backends Frontends Javascript PHP

코멧(Comet) #2 – Ajax 폴링(Ajax polling) 채팅방 예제로 배우기

코멧을 구현하는 첫 번째 방법은 Ajax 폴링(Ajax Polling)이라고 하는 기법입니다. 이 기법은 모든 코멧 방법론 중에서 가장 직관적이고 구현이 간단하여, 코멧 방법론에 입문할 때에 처음 만나게 되는 기법입니다. 기본적인 아이디어는 일정시간마다 Ajax 통신을 하여 서버의 상태를 가져오는 것이라고 요약할 수 있습니다.

이 포스팅에서는 자바스크립트와 더불어 PHP, MySQL로 구현한 간단한 채팅방 예제를 통해 Ajax 폴링을 구현하는 방법을 알아봅니다.

(more…)

Continue reading