A story only I don't know

Youtube 가 무엇인지는 따로 설명하지 않아도 대부분의 사람들이 알것이라고 생각합니다. 이 youtube도 구글에서 OpenAPI 를 제공하고 있어서 Node.js에서 활용을 할 수 가 있습니다. 동영상을 업로드하거나 업데이트하거나 또는 검색어를 통해 리스트를 받아볼 수도 있습니다. 이런기능을 잘 활용하면 유의미한 APP을 개발할 수 있습니다. 이번 포스팅에서는 간단하게 Youtube Data API 를 활용하여 원하는 검색어로 검색을 하는 일련의 과정을 작성하도록 하겠습니다. 0.1. Youtube API 키 발급받기 Youtube API를 사용하기 위해서는 먼저 구글에 해당 API를 사용하겠다고 등록을 하고 Youtube API 키를 발급받아야 합니다. Youtube API뿐만아니라 OpenAPI를 사용하기 위해서는 대부분 API 키를 발급받아야 합니다. API키는 구글개발자센터(https://console.developers.google.com) 에서 신청을 할 수 있습니다. 처음 API 사용 신청하는 것이라면 구글개발자센터 에 접속하면 아래와 같은 화면을 볼 수 있습니다. 처음 접속 일 경우 바로 해당화면이 나오며 그렇지 않은경우 좌측에 있는 메뉴 중 라이브러리 메뉴 선택 Youtube Data API 항목 선택 API는 프로젝트 단위로 발급이 되기 떄문에 프로젝트가 없는 경우는 프로젝트를 먼저 생성해야 합니다. 프로젝트는 상황에 맞게 복수개를 생성할 수 있습니다. 프로젝트 만들기 버튼 선택 프로젝트는 간단하게 프로젝트 이름 만 만들면 됩니다. 프로젝트 이름 에 원하는 이름을 작성 만들기 버튼 선택 프로젝트가 생성이 되었으면 Youtube Data API 를 사용하겠다는 의사표시 를 합니다. 나중에 사용하지 않을 경우는 삭제를 하지 않고 사용중지 를 할 수도 있습니다. 사용설정 링크 선택 사용설정이 되었으면 이제 사용자 인증정보 를 만들어야 합니다. 사용자인증정보에서 설정하는 조건에 대해 API...

일렉트론(Electron) 은 Node.js를 기반으로 javascript, html, css를 사용하여 데스크탑 애플리케이션을 만드는 플랫폼입니다. 이것은 GitHub 에서 모던 에디터인 Atom 에디터 를 만들면서 공개한 오픈소스입니다. 웹개발자의 입장에서 보면 데스크탑 APP을 개발하는데 있어서 진입장벽이 낮을 뿐만아니라 크로스플렛폼까지 지원하여 윈도우즈, Mac OS X, 리눅스 등 다양한 OS에서 동일하게 사용할수 있는 장점이 있어서 인기가 많습니다. 일렉트론(Electron) 은 간단하게 생각하면 웹브라우저 안에 Node.js를 포함시킨 것이라고 보시면 됩니다. 그래서 웹브라우저로 화면을 표시하고 Node.js로 OS의 파일시스템 등에 접근하여 작업을 수행 할 수 있게 되는 것입니다. Atom 에디터 나 VS Code 를 써보면 알겠지만 상당히 완성도가 높은 것을 알 수 있습니다. 일렉트론(Electron) 으로 개발한 APP은 이것 말고도 GitHub Desktop , Slack , WordPress 등 다양한 종류가 있으며 일렉트론(Electron) 홈페이지 에서 더 확인을 할 수 있습니다. 좀 더 자세한 내용은 일렉트론(Electron) 홈페이지 에서 확인하세요.

문자코드란? 문자코드란 컴퓨터가 사람이 알아볼 수 있는 문자로 표시하기 위해 각 문자에 할당한 고유번호를 말합니다. 초창기 문자를 나타내기 위한 아스키(ASCII)코드 는 알파벳, 숫자, 특수 문자 등.. 각 문자에 해당하는 고유번호를 2진수 8비트 로 지정하여 표시하였습니다. 2진수 8비트란 2진수인 0 과 1 을 나타내는 스위치 8개 로 고유번호를 할당한 것을 말합니다. 예를 들면 01101100 은 A , 01101101 은 B ... 이런식으로 2의 8제곱( 256 )가지의 문자를 표시 할 수 있습니다. 하지만 아스키코드로 영문 알파벳, 숫자, 특수 문자 등 256가지 이내의 문자는 커버가 가능했지만 다양한 국가의 다양한 언어를 처리하기에는 256가지로는 부족하기 때문에 더 발전된 문자코드의 개발이 필요했습니다. 게다가 아시아권의 언어같은 경우는 8비트(1바이트)로는 부족해서 16비트(2바이트) 이상을 사용해야 처리가 가능했습니다. 그래서 각 나라의 언어에 맞게 CP37, ISO 8859, Windows-1250 등... 수많은 문자코드세트가 만들어 졌습니다. 한국의 경우는 EUC-KR 과 CP949 를 주로 사용했었고 현재도 많이 사용하고 있습니다. 하지만 문자코드에도 표준화가 필요했기 때문에 근래에는 대부분 유니코드(UTF-8, UTF-16) 로 사용하는 추세입니다. 유니코드 는 대부분 국가의 언어를 포함하고 있어 현재 대부분의 운영체제와 javascript, HTML, node.js등 다양한 프로그램 언어에서 기본적으로 사용되어 지고 있습니다. Node.js에서의 문자코드 Node.js에서도 기본적으로 문자코드를 유니코드인 UTF-8 을 사용합니다. 그래서 Node.js 에서 사용할 프로그램을 작성할때는 꼭 UTF-8 로 작성을 해야 합니다. 최근에 인기리에 사용되고 있는 모던 에디터인 Atom 이나 서브라임텍스트 , Visual studio Code 등에서 새로 만든 문서는 기본적으로 UTF-8로 문서를 생성해 줍니다. 하지만 Nod...

Front-end개발을 한다고 하면서 CSS3를 사용하는데.. 주로 사용하는 선택자들은 쉽게 사용하는데.. 많이 사용하지 않는 선택자에 대해서는 가끔씩 잊어버리거나 사용법을 잊어버리는 경우가 있습니다. 그래서 항상 참조할 수 있게 간단히 정리를 해 보려고 합니다. 선택자는 크게 기본 선택자 , 속성 선택자 , 상태 선택자 로 나눌수 있습니다. 기본 선택자 CSS3를 다루기 위해서는 반드시 알아야 하는 선택자 입니다. 서식 설명 CSS레벨 * 모든 요소 선택 2 E 태그명이 E인 요소 선택 1 #myIDname id 속성값이 "myIDname"인 모든 요소 선택 1 .myClassname class 속성값이 "myClassname"인 모든 요소 선택 1 E, F 모든 E 요소와 모든 F 요소 선택 1 E F E 요소의 자손 요소 중 모든 F 요소 선택 1 E > F E 요소의 자식 요소 중 F 요소 선택 2 E + F 형제 요소 중 E 요소 바로 뒤에 있는 F 요소 한개 선택 2 E ~ F 형제 요소 중 E 요소 뒤에 있는 F 요소 모두 선택 3 속성 선택자 태그의 속성에 따른 선택자 입니다. 대괄호([]) 사이에 속성을 넣어서 선택합니다. 서식 설명 CSS레벨 E[attr] E 요소 중 'attr' 속성이 포함된 요소 선택 2 E[attr="val"] E 요소 중 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 선택 2 E[attr~="val"] E 요소 중 'attr' 속성의 값에 'val'이(공백으로 구분) 포함되는 요소 선택 2 E[attr^="val"] E 요소 중 'attr' 속성의 값이 'val...

프론트앤드 개발을 하거나 웹자동화에 관심이 있는 분이라면 PhantomJS 와 CasperJS 를 많이 들어봤을 것입니다. 저도 이번에 크롤링 공부를 하면서 알게되어 잊어버리지 않기위해 간단하게 정리를 하려고 합니다. PhantomJS (팬텀JS) 팬텀JS는 화면이 없는 브라우저라고 보면 됩니다. 화면이 없는 브라우저를 어따가 써먹지? 라고 생각할 수도 있겠지만 웹프로그램으로 웹자동화를 개발하기에는 더없이 편리한 기능을 제공하고 있습니다. 입력상자에 값을 입력한다던가 마우스로 버튼을 클릭한다던가 특정 값을 확인한다던가 하는 일련의 작업(이벤트)들을 커맨드라인 의 명령어나 javascript 코드로 처리를 할 수가 있습니다. 예를들면 학교홈페이지에 로그인을 하여 공지사항 페이지로 이동하고 학생들에게만 공지한 공지사항 정보를 발췌하여 리스트에 보여주는 일련의 작업들을 PhantomJS를 통해 웹자동화 로 구현하여 처리를 할 수가 있게 됩니다. 물론 이런 기능 말고도 웹 화면을 캡쳐하거나 WebApp을 테스트 하는 등.. 다양한 용도로 사용되는것이 PhantomJS 입니다. 설치 설치는 npm으로 간단하게 설치를 할 수 있습니다. 로컬에 설치를 해도 되지만 일반적으로 Global 로 설치를 많이 합니다. $ npm install -g phantomjs 정상적으로 잘 설치가 되었는지 확인하기 위해서 설치버전을 검색해 봅니다. $ phantomjs -v 2.1.1 리눅스(CentOS)를 사용한다면 한글폰트의 사용을 위해 아래의 폰트관련 패키지를 별도로 설치해 주어야 합니다. $ sudo yum install freetype $ sudo yum install fontconfig CasperJS (캐스퍼JS) CasperJS 는 PhantomJS 나 SlimerJS 를 좀더 쉽고 편하게 사용하기 위한 기능들을 모아놓은 라이브러리라고 보시면 됩니다. 그래서 CasperJS 를 사용하기 위해서는 PhantomJS나 SlimerJS가...

윈도우즈나 리눅스(유닉스), 또는 Mac OS X 같은 시스템에는 기본적으로 정기적으로 반복작업을 처리해 주는 스케줄러 프로그램 들이 내장되어 있습니다. 윈도우즈에서 작업 스케줄러 가 있는것 처럼 리눅스나 Mac OS X에는 cron 이라는 것이 있습니다. 윈도우즈는 GUI(Graphic User Interface)로 되어 있어 화면을 보고 마우스로 쉽게 설정을 할 수 있는 반면 리눅스는 쉘에서 텍스트 형태로 작성을 해야 하기 때문에 먼저 학습이 필요합니다. 1. 리눅스의 cron(crontab) Max OS X도 유닉스 계통이기 때문에 리눅스와 마찮가지로 cron 을 스케쥴러로 사용합니다. 1.1. crontab 명령어 자주 사용하는 crontab의 명령어 입니다. 명령어 설명 crontab -e 예약작업 설징 및 수정 crontab -l 예약된 작업의 목록 보기 crontab -r 예약된 작업 삭제 1.2. 설정하기 cron 을 설정하기 위해서는 crontab -e 을 입력하면 됩니다. $ crontab -e crontab -e 명령어를 처음 실행하면 아무 내용이 없는 빈 화면이 나오고 이미 설정이 되어 있는 경우라면 내용을 편집할 수 있는 화면이 나옵니다. 빈 화면이 나왔다는 가정하에 아래와 같이 가장 기본적인 명령어를 입력을 하고 저장을 합니다. ## 매 1분마다 `ls-l` 명령어를 실행 * * * * * ls -l 앞쪽에 있는 와일드카드 5개 는 실행하는 주기를 설정하는 것이고 마지막 뒤에 있는 <실행 명령어> 는 해당 주기에 따라 실행되는 명령어 입니다. 쉘명령어 뿐만아니라 스크립트도 실행할 수 있습니다. 한 주기에 해당하는 명령어 당 한줄로 작성을 해야 합니다. 5개의 와일드카드 의 의미는 아래와 같습니다. *　　　　　　*　　　　　　*　　　　　　*　　　　　　* 분(0-59)　　시간(0-23)　　일(1-31)　　월(1-12)　　　요일(1-7) 7 이나 0 은 모...

윈도우를 사용할 경우는 전용에디터를 사용하면 되는데.. 리눅스나 유닉스 같은 경우 CLI환경 에서 간단한 수정을 할 경우는 vi 애디터 만큼 편한 것이 없습니다. 다만 vi 에디터 가 사용자 친화적이 아니여서 그것을 사용하려면 별도의 학습이 필요하고 사용법을 익혔다고 하더라도 한동안 사용하지 않다가 다시 사용하려면 여간 헷갈린 것이 아닙니다. 그래서 그런 불편한 점을 해소하기 위해서 많이 사용하는 것이 nano 에디터 입니다. nano 에디터 는 사용법도 쉬울뿐만 아니라 하단에 단축키들이 설명되어 있어서 별도의 학습이 없더라도 쉽게 사용을 할 수 있습니다. nano에디터가 기본적으로 설치가 되어 있는 경우 그냥 터미널창에서 $ nano 또는 $ nano <파일명> 명령어를 입력하고 실행시키면 프로그램이 실행됩니다. $ nano $ nano test.txt 내용을 작성하는 본문 영역입니다. 단축키를 보여주는 영역입니다. 만약 nano에디터가 설치가 되어 있지 않은 경우 아래의 명령어로 설치를 하면 됩니다. 아래의 yum 은 CentOS의 패키지 설치 명령어 입니다. $ sudo yum install nano nano에디터를 기본 편집기로 설정 nano에디터를 리눅스나 Mac OS의 기본 터미널편집기인 vi대신에 사용할 수 있습니다. .bash_profile 파일을 아래와 같이 변경하면 됩니다. nano에디터를 설치했기때문에 아래와 같이 nano에디터로 .bash_profile 파일을 오픈합니다. $ nano ~/.bash_profile 그러면 아래와 비슷한 내용이 나오는데 가장 아래쪽에 기본에디터에 대한 설정을 추가해 줍니다. PATH=$PATH:$HOME/bin export PATH ### 기본 에디터를 nano로 사용 설정 추가 export EDITOR=nano 그런 다음 .bash_profile 를 아래와 같이 재로딩하거나 로그인을 다시 하면 됩니다. $ source ~/.bash_profile 단...

Node.js에서는 475,000개에 달하는 정말 많은 모듈이 존재합니다. 그중에서 제가 사용해 봤던 몇몇 유용한 모듈을 소개할까 합니다. 1. url (표준모듈) url 모듈은 상대URL 을 절대URL 로 변경 해주는 등 url 사용에 대한 다양한 기능을 제공하고 있습니다. 간단한 기능 API 는 아래와 같습니다. url.resolve(from, to) // 상대경로를 절대경로로 변경하여 줍니다. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) // url 문자열(urlStr)을 url 객체로 변환하여 리턴합니다. url.format(urlObj) // urlObj객체를 URL문자열로 변환하여 리턴합니다. 1.1. 설치 표준모듈이라 Node.js에 포함되어 있으므로 별도의 설치는 필요없습니다. 1.2. 간단한 사용예제 var url = require('url'); // 상대 URL을 절대 URL로 변경 url.resolve('/one/two/three', 'four') // '/one/two/four' url.resolve('http://example.com/one', '/two') // 'http://example.com/two' url.resolve('http://example.com/depth1/depth2/one', '/one') // 'http://example.com/one' url.resolve('http://example.com/depth1/depth2/one', '../two') // 'http://example.com/depth1/two' url.resolve(...

이전 포스팅에서 VirtualBox 와 Vagrant 를 소개하고 설치 하는 포스팅을 했었습니다. 이번에는 가상머신 위에 간단하게 Node.js 를 설치하고 환경설정을 하는 방법을 포스팅하겠습니다. NVM (Node Version Manager) 설치하기 NVM은 Node.js를 버전별로 설치하고 관리할 수 있게 도와주는 툴입니다. 그래서 한 시스템 안에 기존버전의 Node.js를 삭제할 필요없이 여러 버전의 Node.js를 쉽게 설치하고 사용할 수 있게 해 줍니다. 주의 할 점은 NPM을 사용하지 않을 경우 Node.js의 root 폴더는 /usr/local/bin/ 의 한 곳에 설치가 되지만 NVM을 사용하여 설치한 경우 는 사용자 별로 NVM 폴더 에 버전별로 설치가 됩니다. 예를들면.. /User/junistory/.nvm/versions/node/ 에 설치가 됩니다. 설치는 ssh로 가상머신에 접속하여 아래와 같이 curl 을 이용하여 nvm 을 설치합니다. $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.3/install.sh | bash 설치가 완료되면 설치된 것을 인식을 시켜줘야 하는데 2가지 방법이 있습니다. ssh를 재시작 합니다. logout 후에 다시 ssh로 접속을 합니다. $ logout source 명령어로 .bashrc 를 새로 적용시켜 줍니다. $ source ~/.bashrc 이제 쉘에서 NVM 명령어 를 실행 시킬 수 있습니다. Node.js 설치하기 NVM을 설치했으면 이번에는 NVM을 이용하여 아래와 같이 Node.js 를 설치 하면 됩니다. 최신 버전의 Node.js를 설치합니다. $ nvm install node 특정 버전의 Node.js를 설치합니다. 여기서는 v0.12.4 버전을 설치합니다. $ nvm install v0.12.4 Node.js 설치가 잘 되었는지 버전으로 확인합니다....

프로그램의 개발환경을 구축할 때 이제는 VirtualBox 나 VMware 같은 가상머신을 사용하는 것이 보편화 되었습니다. 가상머신 위에서 개발을 할 경우 심적인 부담없이 자유롭게 개발을 할 수가 있습니다. 예를들어 여러가지 오픈소스를 설치하여 사용 하더라도 다른 프로그램과 충돌이 날 것에 대해 걱정을 하지 않아도 되고 혹시라도 시스템이 죽거나 복구가 불가능할 경우에는 가상머신을 제거하고 다시 설치하여 사용하면 되므로 안심하고 개발을 할 수 가 있습니다. 또한 Vagrant 를 활용하여 가상머신을 좀더 편하게 사용할 수 도 있습니다. 가상머신 (VirtualBox) 가상머신은 아무 OS도 설치되어 있지 않은 가상의 데스크탑 이라고 보면 됩니다. 그 가상머신에 windows 를 설치하던지 리눅스 를 설치하던지 MAC OSX 를 설치하던지는 설치하는 사람의 마음입니다. 가상머신의 종류로는 크게 VirtualBox 나 VMware 가 있으며 여기서는 VirtualBox 의 설치에 대해서만 간략히 정리하도록 하겠습니다. VirtualBox는 오라클에서 관리르 하고 있으며 프리웨어로 제공을 하고 있기 때문에 무료로 설치해서 사용할 수 있습니다. 설치 VirtualBox 는 아래의 URL에 접속하여 다운로드를 받으면 됩니다. 설치하는 호스트 머신 의 시스템에 따라 Windows hosts , OS X hosts , Linux distributions , Solaris hosts 중 하나를 선택하여 다운로드 하면 됩니다. 버츄얼박스 다운로드 Windows에 설치하는 경우 설치파일을 실행하고 순서대로 진행하여 설치하면 쉽게 설치가 가능합니다. 간단하지만 이것으로 가상머신의 설치는 끝났고 대부분의 설정은 Vagrant 에서 진행합니다. Vagrant Vagrant 는 가상머신을 편리하게 사용할 수 있도록 도와주는 프로그램입니다. 이미 누군가가 Vagrant 로 설정해 놓은 가상머신 Box 를 간단한 명령어로 손쉽게 설치 할 수 있으며 가상 머신...

정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 때에 따라서는 내가 원하는 아이콘을 폰트화 시켜서 사용해야 할 경우도 있습니다. 이번에는 나만의 아이콘 폰트를 만드는 방법 에 대해서 정리해 보려고 합니다. 아이콘 폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 나만의 아이콘 폰트 만들기 오픈소스로 제공되어 정해져 있는 아이콘 폰트를 사용하는 경우도 있지만 내가 원하는 아이콘을 아이콘 폰트 형태로 만들어서 사용할 수도 있습니다. 이럴경우 필요한 아이콘만 사용할 수 있어서 용량을 줄일 수 있는 잊점이 있습니다. 다만 아이콘 폰트로 만들어야하는 아이콘은 벡터그래픽 파일 형식인 SVG 파일 포멧이어야 합니다. 아이콘 폰트를 만들어 주는 대표적인 웹사이트가 fontello.com 와 icomoon.io 가 있습니다. 아이콘 폰트 생성하기 fontello.com 로 아이콘 폰트 생성 방법 먼저 fontello.com 에 접속을 합니다. fontello.com 는 웹사이트 페이지 전환 없이 한 페이지에서 아이콘 업로드부터 다운로드까지 완료 되도록 되어 있습니다. 사이트에 접속을 하면 기본적으로 무료로 제공되는 아이콘들이 이미 있습니다. fontello 에서 제작한 것도 있고 Font Awesome 에서 불러온 것 등 다양한 무료 아이콘 폰트도 있습니다. 라이선스가 표시되어 있으니 확인 후 사용하시면 됩니다. 제작자와 버전, 홈페이지, 라이선스 등 아이콘 폰트에 대한 정보를 확인할 수 있습니다. 보이는 아이콘 중에 원하는 아이콘을 마우스로 선택을 하시면 아이콘에 붉은색 원형이 표시 되면서 선택이 됩니다. 만들고자 하는 아이콘(SVG포멧)이 있다면 해당 영역에 드레그앤드롭을 하여 업로드를 합니다. (등록된 아이콘도 마우스로 클릭하여 선택을 해야 최종적으로 만들어집니다.) Download Webfont 버튼을 클릭하면 지금까지 선택된 아이콘들이 압축되어 다운...

아이콘 폰트인 구글 머티리얼 아이콘 (Google Material icons) 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. 구글 머티리얼 아이콘 (Google Material icons) 구글 머티리얼 아이콘 홈페이지바로가기 구글에서도 머티리얼 아이콘을 무료로 사용할 수 있게 공개를 했습니다. 구글 머티리얼 아이콘은 웹폰트 형식 뿐만이 아니라 안드로이드나 아이폰에서도 사용할 수 있게 SVG 와 PNG 형식으로도 아이콘을 제공을 하고 있습니다. 여기서는 다른사이트와 동일하게 웹폰트형식의 아이콘 폰트를 사용할 수 있는 방법에 대해서만 설명을 하도록 하겠습니다. 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. 구글 머티리얼 아이콘의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색) 소스제공자가 CDN을 전문으로 서비스하는 googleCDN 이나 BootstrapCDN , jsdelivrCDN 에 소스를 올려놓...

아이콘 폰트인 XEICON 을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기 를 먼저 읽어 보시는 것을 추천합니다. XEICON XEICON 홈페이지 바로가기 한 시대를 풍미했던 PHP 무료게시판 서비스 인 제로보드 가 네이버 의 서포트를 받으면서 Xpressengine 바뀌었습니다. XEICON 은 그 Xpressengine 에서 서비스를 제공하고 있는 아이콘 폰트 서비스 입니다. 제공하는 방법과 사용 방법이 폰트어썸 (Font Awesome) 과 거의 흡사하여 폰트어썸 (Font Awesome)을 사용해 본 사람이라면 매우 쉽게 사용을 할 수 있습니다. 반대로 영어에 좀 취약한 사람이라면 XEICON 이 한글로 되어 있기 때문에 먼저 XEICON를 사용해 보고 폰트어썸 (Font Awesome) 을 사용하면 이해가 빠를 것입니다. 다만 주의 할 점은 LGPL라이선스 를 따른다는 것입니다. LGPL라이선스는...... 설치 방법 설치는 크게 2가지로 나누어지는데.. CDN 을 통해서 설치하는 방법과 아이콘 폰트를 다운로드 받아서 설치하는 방법이 있습니다. CDN 설치 가장 간단하게 사용할 수 있는 CDN설치 는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다. XEICON의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad> 태그 영역에 styleseet 를 불러오는 것 처럼 링크를 걸어주면 됩니다. 웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다. <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/xpressengine/xeicon@2.3.1/xeicon.min.css"> CDN이란? : CDN은 C ontent D elivery N etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨...