설치 로컬에서 설치 $ gem install mustache Gem 파일에서 선언 gem "mustache", "~> 1.0" {{ }} : http://mustache.github.io/ 자바스크립트 : https://github.com/janl/mustache.js Gem : https://github.com/mustache/mustache.github.com 사용법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Loading... Hello {{ name }}! function loadUser() { var template = $('#template').html(); Mustache.parse(template); // optional, speeds up ..
JavaScript가 프로토타입 기반의 OOP 인 줄은 사실 잘 몰랐다. 위키백과 : 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 이런 부분에서 js를 많이 배워두면 좋을 것 같다. 이제 기본 문법만 쓰다가 드디어 최신 문법을 적용하겠다면 꼭 배워두고 가야하는 것들이 있다. Class 기술문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes class를 사용할 때 function을 사용하지 않아도 된다. class Polygon { constructor(height,..
스크롤로 이동하여 이미지 화면이 다가오면 이미지를 슬라이드로 나타낸다. (https://github.com/KIMSG/javascript30/blob/master/day13/index.html) debouce 함수는 이미지를 나타내게 해주는 함수이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 function checkSlide(e) { sliderImages.forEach(sliderImage => { const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown ..
비밀키를 누르면 유니콘이 나오도록 하는 것입니다. (https://github.com/KIMSG/javascript30/blob/master/day12/index.html) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => { console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length -1, pressed.length - secretCode.length); if(pressed.join('').includes(secretCode)){ console.log('DING'..
비디오 플레이어 활용하기 (https://github.com/KIMSG/javascript30/tree/master/day11) Html, css, js 파일 총 3개가 있다. 1 2 3 4 5 /* Build out functions */ function togglePlay() { const method = video.paused ? 'play' : 'pause'; video[method](); } Colored by Color Scripter cs paused 속성은 동영상이 재생중이면 true, 정지되어 있으면 false를 반환합니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused 1 2 3 function skip..
shift키를 눌러서 checkbox 연속 선택하기 https://github.com/KIMSG/javascript30/blob/master/day10/index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); let lastChecked; function handleCheck(e) { let inBetween = false; if(e.shiftKey && this.checked){ checkboxes.forEach(checkbox => { console.log(checkbox); if(checkbox ..
콘솔창에서 console.log() 말고 다른것도 좀 찍어보기. (https://github.com/KIMSG/javascript30/blob/master/day9/index.html) Console API : https://developer.mozilla.org/ko/docs/Web/API/Console 콘솔에서 가장 많이 사용되는 기능은 데이터와 텍스트를 출력하는 것이다. console.log(), console.info(), console.warn(), console.error() 와 같은 출력 메소드를 이용하여 4종류의 출력 카테고리를 지정할 수 있다. 각각의 출력 결과물들은 로그에 다른 형식으로 스타일링되며, 브라우저에서 제공하는 필터링 기능을 이용하여 관심있는 종류의 출력만 확인할 수 있다. ..
재미있는 캔버스 사용하기. (https://github.com/KIMSG/javascript30/blob/master/day8/index.html) 하이브리드 어플을 만들때 사인을 받기 위해서 canvas를 사용할 수 있다고 배웠다. 실제로 사인도 해보고 canvas로 사인하여 그 화면 자체를 이미지로 저장하는 것도 했었다. 그런데 이분은 알록달록하게 canvas를 활용하시네... 대단하다. Canvas 기본 사용법 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage canvas는 처음에는 비어있다. 그래서 getContext(‘2d’)를 사용해서 선언을 해야 한다. 이때, 2d는 그래픽이다. 1 2 const canv..
some() : callback의 함수중에서 값이 ture인 것이 있으면 true를 return합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some 1 const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19 ); cs New Date 는 현재의 날짜와 시간을 받을 수 있는 선언자입니다. getFullYear() : 현지 시간에 따라 지정된 날짜의 연도를 리턴합니다. (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_O..
javascript를 활용해서 실시간으로 검색 정보를 받아오자. (https://github.com/KIMSG/javascript30/tree/master/day6) 소스에 기본 json데이터는 포함되어 있고 문법만 배우면 된다. 1 2 3 function numberWithCommas(x){ return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); } Colored by Color Scripter cs 숫자가 들어오면 3단위씩 나누어 , 를 표시한다. 1 2 3 fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)) cs fetch API를 이용해서 AJAX를 대체 하는..
- Total
- Today
- Yesterday
- juso.go.kr
- 터미널
- input
- 르프리크
- 소년아저씨
- 관리자설정
- LTFViewr
- globals.properties
- 맥
- 토라식당
- 위잇딜라이트
- Lalavel
- Apach
- Eclipse
- floating button
- 정규식
- 힘냉면록
- 최고심
- server.xml
- 또오류
- 오라클
- 톰캣
- textcleaver
- html
- Mac
- 성수밥
- Tomcat
- 이클립스
- 성수뚝떡
- 아파치
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |