WEB개발이야기/Vue.js 2019. 1. 11.
Vue.js의 기본 디렉티브 정리
Vue.js를 공부하면서 기억해야 할 것에 대해 요약정보를 정리해 보려고 합니다. 이번에는 Vue.js에 기본으로 포함되어 있는 기본 디렉티브에 대한 정리 입니다. 디렉티브 디렉티브를 우리나라 말로 하면 지시문이라고 할 수 있습니다. 어떻게 어떻게 해라~ 라고 지시하는 것이죠. Vue.js의 View영역에서 태그의 속성을 지정하는 방식으로 구현이 됩니다. 태그 속성에 간단히 v-text="message" 라고 작성을 하면 javascript단에서 message변수에 할당된 값을 보여주는 식으로 약속된 명령어를 구현합니다. Vue.js에서 기본으로 제공하고 있는 디렉티브를 기본 디렉티브라고 하고 사용자가 스스로 만들어서 사용하는 것을 사용자 지정 디렉티브 또는 커스텀 디렉티브라고 합니다. 이번에는 몇개 되..
WEB개발이야기/Git 2018. 7. 10.
git사용법과 명령어
git은 개발자에게는 없어서는 안될 버전관리시스템입니다. SVN이 중앙집중식 버전관리 시스템이라면 git은 분산 버전관리 시스템이라 할 수 있습니다. 경우에 따라 다르겠지만 예전에는 SVN을 많이 사용하던것을 현재는 분산 버전관리 시스템이 git으로 많이 넘어온 상태입니다. 로컬컴퓨터에서만 사용할 경우에는 git만 설치하여 사용하면 되지만 원격저장소를 통해서 여러사람과 사용하기 위해서는 git서버가 있어야 합니다. git서버로 대표적인 사이트는 우리가 흔히 알고 있는 github가 있고 gitlab, Bitbucket 등이 있습니다. 물론 네트워크내의 컴퓨터 한대를 이용하여 서버를 구축하여 사용할 수도 있습니다. 서비스명 설명 URL GITHUB 무료로 사용 가능하나 소스가 공개됨 https://www...
WEB개발이야기 2018. 7. 10.
일렉트론(Electron) 소개 및 사용법
일렉트론(Electron)은 Node.js를 기반으로 javascript, html, css를 사용하여 데스크탑 애플리케이션을 만드는 플랫폼입니다. 이것은 GitHub에서 모던 에디터인 Atom 에디터를 만들면서 공개한 오픈소스입니다. 웹개발자의 입장에서 보면 데스크탑 APP을 개발하는데 있어서 진입장벽이 낮을 뿐만아니라 크로스플렛폼까지 지원하여 윈도우즈, Mac OS X, 리눅스 등 다양한 OS에서 동일하게 사용할수 있는 장점이 있어서 인기가 많습니다. 일렉트론(Electron)은 간단하게 생각하면 웹브라우저 안에 Node.js를 포함시킨 것이라고 보시면 됩니다. 그래서 웹브라우저로 화면을 표시하고 Node.js로 OS의 파일시스템 등에 접근하여 작업을 수행 할 수 있게 되는 것입니다. Atom 에디터..
WEB개발이야기 2018. 7. 10.
PhantomJS와 CasperJS 사용법
프론트앤드 개발을 하거나 웹자동화에 관심이 있는 분이라면 PhantomJS와 CasperJS를 많이 들어봤을 것입니다. 저도 이번에 크롤링 공부를 하면서 알게되어 잊어버리지 않기위해 간단하게 정리를 하려고 합니다. PhantomJS (팬텀JS) 팬텀JS는 화면이 없는 브라우저라고 보면 됩니다. 화면이 없는 브라우저를 어따가 써먹지? 라고 생각할 수도 있겠지만 웹프로그램으로 웹자동화를 개발하기에는 더없이 편리한 기능을 제공하고 있습니다. 입력상자에 값을 입력한다던가 마우스로 버튼을 클릭한다던가 특정 값을 확인한다던가 하는 일련의 작업(이벤트)들을 커맨드라인의 명령어나 javascript코드로 처리를 할 수가 있습니다. 예를들면 학교홈페이지에 로그인을 하여 공지사항 페이지로 이동하고 학생들에게만 공지한 공지..
WEB개발이야기 2018. 7. 10.
Grunt 소개와 설치방법
Node.js의 탄생으로 인해 javascript진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs라고 하며 인터넷을 검색하면 Task기반 빌드 툴이라고 나옵니다. 풀어서 설명을 하면… Node.js를 기반으로 하고있는 무수한 패키지들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool이라고 보면 됩니다. 마치 Desktop컴퓨터의 `.bat ` 배치파일과..
WEB개발이야기 2018. 7. 10.
Gruntfile의 주요 플러그인들
앞선 포스팅에서 Grunt 소개와 설치방법를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js에서 말하는 플러그인과 Node.js에서 말하는 패키지는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 **다운로드 수가 많은 것** 이나..
WEB개발이야기 2018. 7. 10.
Gruntfile의 구조와 사용법
Gruntjs를 사용한다고 하는것은 gruntfile.js를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성, 2. 사용한 플러그인 로딩, 3. 실행 명령어의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니..
WEB개발이야기/Node.js 2018. 7. 10.
node.js로 Youtube 다루기
Youtube가 무엇인지는 따로 설명하지 않아도 대부분의 사람들이 알것이라고 생각합니다. 이 youtube도 구글에서 OpenAPI를 제공하고 있어서 Node.js에서 활용을 할 수 가 있습니다. 동영상을 업로드하거나 업데이트하거나 또는 검색어를 통해 리스트를 받아볼 수도 있습니다. 이런기능을 잘 활용하면 유의미한 APP을 개발할 수 있습니다. 이번 포스팅에서는 간단하게 Youtube Data API를 활용하여 원하는 검색어로 검색을 하는 일련의 과정을 작성하도록 하겠습니다. 0.1. Youtube API 키 발급받기 Youtube API를 사용하기 위해서는 먼저 구글에 해당 API를 사용하겠다고 등록을 하고 Youtube API 키를 발급받아야 합니다. Youtube API뿐만아니라 OpenAPI를 사..
WEB개발이야기/Node.js 2018. 7. 10.
문자코드와 인코딩 변환 방법
문자코드란? 문자코드란 컴퓨터가 사람이 알아볼 수 있는 문자로 표시하기 위해 각 문자에 할당한 고유번호를 말합니다. 초창기 문자를 나타내기 위한 아스키(ASCII)코드는 알파벳, 숫자, 특수 문자 등.. 각 문자에 해당하는 고유번호를 2진수 8비트로 지정하여 표시하였습니다. 2진수 8비트란 2진수인 0과 1을 나타내는 스위치 8개로 고유번호를 할당한 것을 말합니다. 예를 들면 01101100은 A, 01101101은 B… 이런식으로 2의 8제곱( 256 )가지의 문자를 표시 할 수 있습니다. 하지만 아스키코드로 영문 알파벳, 숫자, 특수 문자 등 256가지 이내의 문자는 커버가 가능했지만 다양한 국가의 다양한 언어를 처리하기에는 256가지로는 부족하기 때문에 더 발전된 문자코드의 개발이 필요했습니다. 게..
WEB개발이야기/Node.js 2018. 7. 10.
Node.js의 유용한 모듈 소개
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에 포..
