배워서 남 줄 건데요?

코드 #header { background: #EEE; padding: 20px 0; } .canvas_place .canvas_place__option { padding: 10px 0; text-align: right; font-size: .9em; } .canvas_place canvas { margin: auto; display: block; border: 1px solid #CCC; } .canvas_place .canvas_place__btnhome { padding-top: 20px; } .canvas_place .canvas_place__btnhome .title { padding-bottom: 10px; font-weight: bold; font-size: 1.2em; } .comment_..

포토샵 같은 그림판? 말 그대로다. 별도의 레이어로 관리 될 수 있는 캔버스 그림판을 만들어보자. 일단 포토샵은 도형을 실제로 그리거나 할 때 해당 도형이 실제로 어떻게 나올지 미리 보여주고, 마우스를 놓을 때 실제 도형이 나타나게 된다. 소스코드 실선 사각형 지우개 파란색 빨간색 분홍색 주황색 5px 10px 15px 20px 원리 원리는 간단하다. 캔버스를 누른 뒤, 마우스를 움직이게 되면 마우스가 이동한 경로를 currentRect의 coordinates 배열에 저장한다. coordinates에 저장 된 좌표 값을 바탕으로 현재 그리는 도형이 무엇인지에 따라 각기 다른 방식으로 캔버스에 그림을 그린다. 그렇게 그려진 도형은 currentRect 변수를 통해 rects 배열에 저장 되며, 추후에 캔버..

서론 어느 글에서나 그랬듯, 이것도 대회를 준비하다가 알게 된 기술이다. LocalStorage, 말 그대로 지역 저장소를 의미하는데, DB를 사용하지 않는 로컬 웹 어플리케이션에서 데이터를 저장해야 할 때 사용할 수 있는 굉장히 강력한 기술이다. 심지어 접속한 도메인에 따라 참조할 수 있는 데이터가 구분이 되기 때문에 도메인 간 저장소 충돌을 염려하지 않아도 된다. 주의사항 로컬스토리지는 반드시 보조수단으로 사용되어야 한다. 저장소이긴 하지만, 용량이 10MB밖에 되지 않아서 간단한 문자열이나 크지 않은 JSON을 저장할 때 사용된다. 사용법 데이터 삽입 localStorage.setItem(key, data); 데이터 참조 localStorage.getItem(key); 데이터 삭제 localStor..

서론 나는 학교에서 수학같은거 배워다가 평생 써먹지 않을 줄 알았다. 주변 사람들이 다들 그렇게 말했고, 나조차도 학교 시험문제를 푸는 순간만 사용하고 사용을 하질 않으니 그런 줄 알았다. 그리고 그런 나의 생각은 내가 프로그래머의 길에 들어서면서 완전히 틀렸다는 것을 알게 되었다. 내 프로그래머 인생이 기능대회에서 비롯되어서 그런진 몰라도 대부분의 기술 문서에 기능대회라는 단어가 적혀있을 것이다. 이 역시 기능대회로 인해 알게 된 알고리즘인데, 어느 날 처럼 기출문제 모음집에서 풀어볼 문제를 고르던 도중, 수족관 사이트를 만드는 과제를 풀게 되었다. 국가대표 선발전 문제였던지라 난이도도 난이도지만 처음 보는 유형의 문제가 등장했는데, 수족관 홈페이지에서는 해당 수족관에 있는 물고기를 가상으로 구입할 수..

고등학생 시절, 웹을 공부하던 필자는 PHP의 number_format 함수에 대해서 알게 되었다. number_format 함수는 다시 말해, 10000 이라는 숫자값이 있다면, 10,000 이라고 변환을 시켜주는 함수였다. 이와 같은 숫자 표시 문제가 대회 문제에 출제가 되었는데, PHP에서는 number_format 함수만 사용하면 손쉽게 끝날 일이지만 Javascript는 도무지 number_format 같은 함수를 찾아볼 수 없었다. 그래서 필자는 정규식으로 숫자를 3단위로 끊어서 콤마를 찍는 아래와 같은 방식을 채택했다. result = subject.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); 하지만 더욱 간단한 방법이 있다. var result = 1000..

초성 검색에 대한 알고리즘을 더 찾아보던 중, 초성 검색 알고리즘이 더욱 간단한게 있어서 해당 알고리즘을 토대로 새롭게 작성하였다. function cho(str) { var cho = ['ㄱ','ㄲ','ㄴ','ㄷ','ㄸ','ㄹ','ㅁ','ㅂ','ㅃ','ㅅ','ㅆ','ㅇ','ㅈ','ㅉ','ㅊ','ㅋ','ㅌ','ㅍ','ㅎ']; var result = []; for (var i in str) { var char = str.substr(i, 1); var index = (char.charCodeAt() - 44032) / 588 result.push(cho[index] || char); } return result.join(''); } function match(keyword, data) { var dataC..

때는 2016년, 고등학교 3학년 시절. 노래방에 놀러갔던 후배가 노래를 검색하다가 초성으로 검색이 되는 것을 확인하고 했던 말이 있다. "이거 기능대회 문제에 출제하죠?" 이 때부터 이 망할 초성 검색의 열풍이 불기 시작했다. 단순한 초성검색이라면 어렵지도 않은 일이었다. 하지만 이 곳은 어디인가, 전국대회 아니겠는가. 그 평범하지 않은 기능인들은 검색 기능도 평범하게 구현할 리가 없겠지. 초성검색은 기본이요, AND OR 검색, 하이라이트 추가, 초성과 완전글자의 합성 검색 등 절대 3시간 안에는 나오지 않을 법한 검색 엔진으로 무장한 문제를 출제하는데 혈안이 되어있었고, 나는 그런 문제를 해결하려고 노력했던 한명의 학생이었다. 단순한 초성검색 기능은 구현한지 옛날이요. 그러나, and or 기능을 ..