A story only I don't know

앞선 포스팅에서 Grunt 소개와 설치방법 를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개 하고 간략한 설명을 포스팅 하겠습니다. 플러그인 Grunt.js 에서 말하는 플러그인과 Node.js 에서 말하는 패키지 는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다. 플러그인 찾기 대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴 에서 확인할 수 있습니다. 먼저 Grunt웹사이트의 플러그인 메뉴 로 이동합니다. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다. 찾는 플러그인이 명확하지 않다면 검색결과 중 다운로드 수가 많은 것 이나 플러그인 명 앞에 별표( ★ )가 붙은 것을 선택해서 설치하세요. 별표( ★ )가 붙은 것은 Grunt팀 에서 만들었다는 의미이기 때문에 어느정도 공신력이 있다고 볼 수 있습니다. 플러그인 설치하기 검색된 플러그인의 제목을 클릭하면 상세페이지로 넘어 갑니다. Grunt의 플러그인은 Node.js 의 패키지이기때문에 NPM 페이지로 넘어 갑니다. 상세페이지를 보면 영어로 되어있긴 하지만 설치하는 방법과 옵션 설정 방법 등이 자세히 설명되어 있습니다. npm install grunt-contrib-copy --save-dev ▲ 설치는 위와 같이 NPM 을 통해 설치를 하면 됩니다. 설치를 하면 프로젝트 폴더에 node_modules 폴더가 생기고 그안에 플러그인들이 설치가 됩니다. --save-dev 설치옵션에 따라 package.json 의 devDependencies 항목에 해당 플러그인명이 기록 됩니다. 가장 뒤에 -dev 옵션은 개발 시에만 사용하는 플러그인이라는 것을 명시하는 것이고 실제서비스에 사용되는 플러그인이라면 -dev 옵션을 제거 한 --save 옵션만 적용합니다. 그러면 package.jso...

Gruntjs 를 사용한다고 하는것은 gruntfile.js 를 다룰 줄 안다고 하는 것과 마찬가지로 gruntfile.js 는 중요합니다. 중요하다고 해서 배우기가 어렵다는 말은 아닙니다. 개인의 차이는 있겠지만 보통 1~2일이면 개념을 이해 할 수 있고 1주일 정도면 구글링을 하면서 Gruntjs 를 사용할 수 있을 정도로 어렵지 않습니다. 이전 포스팅에서 Gruntjs의 소개와 설치법 을 작성했으니 완전 초보자이시면 이전 포스팅을 먼저 보는 것이 도움이 될것 같습니다. gruntfile.js의 구조와 사용법 gruntfile.js 의 가장 기본적인 구조는 아래와 같습니다. 1. 프로젝트의 구성 , 2. 사용한 플러그인 로딩 , 3. 실행 명령어 의 3개의 분류로 구성되어 있으며 각각 영역별로 설명을 하도록 하겠습니다. module.exports = function(grunt) { // 1. 프로젝트의 구성 grunt.initConfig({ // package.json의 정보를 불러옴 pkg: grunt.file.readJSON('package.json'), // uglify 플러그인(패키지)의 옵션을 정의 함 uglify: { build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // 2. 사용한 플러그인 로딩(먼저 npm으로 설치를 해야 함) grunt.loadNpmTasks('grunt-contrib-uglify'); // 3. 실행 명령어 (명령창에서 grunt 명령으로 실행됨) grunt.registerTask('default', ['uglify']); }; gruntjs사이트에서 발췌 1. 프로젝트의 구성 프...

Node js 의 탄생으로 인해 javascript 진영이 비약적인 발전을 이루고 있으며 그러한 발전에 견인차 역활을 한 Grunt 라는 것이 있습니다. 이러한 프레임워크를 javascript Task기반 빌드 Tools 이라고 하는데 과연 이것이 무엇인지, 그리고 어떻게 설치하고 사용하는지에 대해 포스팅을 하려고 합니다. Gruntjs란 무엇인가. Grunt 또는 Gruntjs 라고 하며 인터넷을 검색하면 Task기반 빌드 툴 이라고 나옵니다. 풀어서 설명을 하면... Node js 를 기반으로 하고있는 무수한 패키지 들 중에 프로젝트에서 필요한 패키지들을 설치하고 그 패키지들을 미리 설정한 순서와 옵션에 맞게 자동으로 명령어를 실행시켜주는 Tool 이라고 보면 됩니다. 마치 Desktop컴퓨터의 .bat 배치파일과 동일한 역활을 합니다. Gruntjs 를 사용하기 위해서는 먼저 Node js 가 설치되어 있어야 하고 프로젝트가 지정되어 있어야 합니다. Node js 가 설치되면 npm(node package manager) 도 자동으로 설치가 되는데 이 npm 으로 gruntjs 를 설치하면 됩니다. 프로젝트 지정이란 그냥 프로젝트명의 폴더 생성 이라고 보면됩니다. Grunt 설치 Node js 설치 당연한 이야기겠지만 Node js 를 먼저 설치해야 합니다. Nodejs 는 한글버전도 있기 때문에 설치가 어렵지는 않습니다. Nodejs 는 Windows , macOS , Linux 등 대부분의 OS를 지원하며 설치방법은 해당 홈페이지를 참조하셔서 설치하시면 되고 여기서는 생략하도록 하겠습니다. Windows 사용자라면 그냥 홈페이지에서 설치파일을 다운로드 받아서 설치하면 됩니다. Node js Grunt-cli 설치 Nodejs 가 설치가 되었다면 그 다음으로 grunt-cli 를 설치해야 합니다. grunt-cli 는 grunt Command Line Interface 의 약자로 명령어 창...

예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다. 그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다. 레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 넓이에 대해 값을 지정해 주게 됩니다. HTML 전체 div를 multiColumn으로 감싸 줍니다. 물론 class이름은 바꿀 수 있습니다. 1단, 2단, 4단은 css에서 또는 inline으로 넓이를 지정해 주면 됩니다. 여기에 작성된 샘플은 CSS 파일에서 넓이를 지정해 주었습니다. <div class='multiColumn'> <div>1단</div> <div>2단</div> <div class='pct'>3단</div> <div>4단</div> </div> JAVASCRIPT jquery를 활요해서 HTML문서가 처음 로딩될때와 브라우저 창의 크기를 변경할떄 체크를 해서 .pct의 넓으를 재지정해 줍니다. $(function () { contentLayAutoWidth(); }); $(window).resize(function () { contentLayAutoWidth(); }); /* 레이아웃의 다단 단수를 100%로 채움 */ function content...

SublimeText나 Atom에디터등 텍스트기반 에디터가 유행을 하자 MS에서도 Visual Studio를 기반으로 한 텍스트에디터를 출시하였고 다른 에디터들과 마찬가지로 무료로 서비스를 제공하고 있습니다. 저는 Notepadd++, SublimeText, Atom, Brackets, VisualStudioCode 에디터등을 두루두루 써보다가 VisualStudioCode 에 정착을 했습니다. 원래는 Notepadd++를 요긴하게 잘 사용해 왔으나 플러그인 등이 부족하고 현재의 유행하는 편리한 기능의 에디터와는 다르기 때문에 좀더 편리한 에디터를 찾고자 했습니다. 그래서 여러가지 에디터들을 사용해 봤는데 SublimeText는 여러가지면에서 뛰어난 에디터이나 무료로 사용하려면 돈내라는 팝업을 견뎌내야하고 Atom, Brackets등은 아무래도 최적화에서 아직은 부족한지 코딩을 하다보면 가끔씩 딜레이 현상이 존재하여 짜증을 유발시킵니다. 그에 반해 Visual Studio Code 는 딜레이도 심하지 않고 플러그인도 다양하고 업데이트도 자주 하는 등 제가 쓰기에 가장 적당한것 같아 VisualStudioCode 에 일단 정착을 했습니다. 설치하기 VisualStudioCode 줄여서 보통 VSCode 라고 하며 Windows, MacOS, Linux를 지원합니다. Windows의 경우는 늘상 설치하는 것처럼 설치파일을 클릭하여 진행하면 됩니다. 홈페이지 : code.visualstudio 라이선스 : MIT 주요 단축키 Ctrl + Shift + P 또는 F1 : 모든 명령 찾기 및 실행 Ctrl + : 콘솔창 호출 단축키 다운로드(PDF) : keyboard-shortcuts-windows.pdf 주요 확장프로그램(플러그인) Settings Sync Settings Sync 는 여러 장소에서 같은 환경의 VS Code 를 사용할 수 있게 해주는 확장프로그램입니다. 집에 있는 컴퓨터에 설치한 확장프로...

홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. 홈페이지 : https://github.com/pederan/Parallax-ImageScroll DEMO : http://codepen.io/pederan/full/Hheuy 라이선스 : MIT Install bower로 설치할 경우 bower install Parallax-ImageScroll npm으로 설치할 경우 npm install parallax-imagescroll 일반 사용법 HTML <div class="img-holder" data-image="anImage.jpg"></div> <section><p>Content that "slides" on top of the images</p></section> <div class="img-holder" data-image="anotherImage.jpg">[optional content to be displayed on top of the images]</div> javascript jQuery와 jquery.imageScroll.js를 먼저 임포트한 후 설정값을 지정해 줍니다. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> <script> ...

웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. s 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다. 더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다. 더미 이미지 제공 placeimg.com placeimg 는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다. 웹사이트 : placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. <img src="https://placeimg.com/가로크기/세로크기0/카테고리" /> 디폴트 카테고리는 any 이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다. 아래의 카테고리와 필터 지정에 따라서 해당 이미지를 랜덤하게 뿌려줍니다. 카테고리종류 : animals, arch, nature, people, tech 필터 종류 : grayscale, sepia <img src="https://placeimg.com/200/100/any" /> <img src="https://placeimg.com/200/100/any/grayscale" /> <img src="https://placeimg.com/200/100/animals/sepia" /> 텍스트 이미지영역 제공 Placehold.it Placehold.it 은 매우 간단하게 이미지영역을 잡아주고 글자를 보여줍니다. 웹사이트 : Placehold.it 기본 사용법은 아래와 같습니다. <img src="http://placehold.it/320x100" /> <img src="http://place...