개발자는 언제나 맑은 뒤 흐림

Gem : https://github.com/joshuajansen/magnific-popup-rails : gem 'magnific-popup-rails', '~> 1.1.0’ Git : https://github.com/dimsemenov/Magnific-Popup Demo : http://dimsemenov.com/plugins/magnific-popup/ Codepen demo : https://codepen.io/collection/nLcqo/ closeBtnInside 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Example 1: From an element in DOM $('.open-popup-link').magnificPopup({ type:'inline', midC..

설치 로컬에서 설치 $ 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를 대체 하는..

Flex-box 활용하기. (https://github.com/KIMSG/javascript30/blob/master/day5/index.html) 1 2 3 4 5 .panels { min-height:100vh; overflow: hidden; display: flex; } cs Flexbox레이아웃을 구성할 땐 콘텐츠를 감싸는 부모요소에 이 속성을 지정한다. 지원현황 : 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 IE10+(hybrid) FF2~21(old), FF22이상(modern) SF3.1 이상(old), iOS3.2 이상(old) CH21 이상(modern), CH20 이하(old), An2.1 이상(old) O12 이상(modern) Blackberry 브라우저 10 이상은 moder..

array의 중요 함수와 기능들에 대해서 실습해 봅니다. (https://github.com/KIMSG/javascript30/blob/master/day4/index.html) 기본예제 소스 : https://github.com/wesbos/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/index-START.html 처음에 예제소스에 선언된 배열이 있기 때문에 예제 소스를 우선 다운받아서 시작합니다. 1 2 3 4 5 6 7 8 9 10 11 // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen..

Update CSS Variables with JS #css, js 변수를 업데이트 할 수 있다. (https://github.com/KIMSG/javascript30/blob/master/day3/index.html) input 태그를 이용하여 값이 변화할 때마다 style을 변화할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 const inputs = document.querySelectorAll('.controls input'); function handleUpdate(){ const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty('--${this.name}', this.value + suff..

javascript를 시작하는 (아주 기초는 알고 있는) 사람들에게 유용한 사이트 입니다. https://javascript30.com/ https://github.com/wesbos/JavaScript30 하루에 하나씩 배워가면서 javascript의 심화 단계로 발전하는 사이트 입니다. 강사님의 강의를 돈을 지불하고 배울수도 있지만, 우선은 무료 강좌 부터 하나씩 보고 단계를 밟아보려고 합니다. #시계만들기 (https://github.com/KIMSG/javascript30/tree/master/day2) 위와 같은 시계 화면을 만들기 위해 css와 javascript 코드를 적용했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2..

JetBrains Night 서울 2017JetBrains 팀이 작년에 이어 다시한번 서울에 방문합니다! 최근 출시된 2017.3 버전의 IDE 에 대해 알아보고, JetBrians 툴을 이용하여 생산성을 극대화 하실 수 있도록 다양한 모범 사례들을 공유할 예정입니다. 올해 상반기에 Google 의 공식 개발언어로 선정된 Kotlin 에 대한 세션도 강화할 예정입니다. 아울러, 스낵 및 음료를 비롯하여 무료 라이선스 및 각종 경품 추첨이 진행됩니다.본 이벤트는 소정의 참가비를 받고 있으며, 선착순 500명으로 제한되어 있기 때문에 사전 등록은 필수입니다. 일부 발표는 영어로 진행되지만, 동시통역으로 한국어로 제공됩니다. 한국총판 (주)단군소프트는 2002년부터 IT컨설팅, 소프트웨어 공급 등 다양한 IT..

웹접근성을 위해서 웹페이지의 태그에 해당 페이지의 내용을 나타내야만 한다. 예를 들어본다. 아래와 같은 페이지에서 탭의 제목이 'title을 바꾸는 스크립트'라고 표시가 된다. 이처럼 사용자가 보고 있는 페이지의 title을 항상 바꿔줘야 하는 것이다. 대부분의 사이트는 메인화면에 메뉴탭에서 원하는 메뉴를 선택하여 세부 항목으로 들어간다. 때문에 ' 대메뉴 > 중메뉴 > 소메뉴' 의 방식으로 페이지의 상단에 적어 놓는 부분이 있을 것이다. 웹페이지의 전체적인 경로 또는 현재 페이지의 설명이 될 수 있는 내용을 꼭 title에 기입해야 한다. 123$(function($){ document.title = '수정하고 싶은 제목';});cs 웹접근성을 준비 하다보니 페이지가 이동할 때, 해당 페이지의 메뉴를 ..

https://postcodify.poesis.kr/guide/example 12345678910111213검색 $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); cs 이미 jQuery를 사용하고 있는 경우에는 search.min.js 파일만 로딩하셔도 됩니다. 검색창 직접 구현 1234567891011121314151617181920212223 $(function() { $("#postcodify").postcodify({ insertPostcode5 : "#postcode", insertAddress : "#address", insertDetails : "#details", insertExtraInfo : "#extra_info..

in 'where clause' 은..... 컬럼이 없다는 오류 문구라고 하는데... 다시 컬럼이 제대로 다 나오는지 확인해 보자

123456select A.*, B.ads,(selectdafg wherea ) C.gga as test from TEST1 Aleft OUTER joinon A.abd =B. cdeleft OUTER join (select * from TEST2 where 2=3) Con A.abd =B. cde;Colored by Color Scriptercs 이렇게 JOIN하면 속도가 훨씬 빠릅니다. 12345SELECT A.*, B.* FROM tb_user_info A LEFT OUTER join(SELECT * FROM tb_attach_file WHERE 1 = 1)B ON A.USER_NO = B.USER_NOwhere 1=1 AND A.`USER_NO`='00001'Colored by Color Scri..