마이구미의 HelloWorld 마이구미의 HelloWorld

이번 글은 제이쿼리의 animate 메소드의 활용법에 대하여 알아볼 것이다.이번 주제는 지식인으로부터 팁을 얻었다. 지식인에 질문이 올라왔다.http://www.kwater.or.kr/main.do?s_mid=1#this 위의 이미지는 첫 로딩 시 기본 페이지이다.상단부분 오른쪽 돋보기 버튼이 보이는가?돋보기 버튼을 누른다면 아래 이미지처럼 통합검색이라는 영역이 노출될 것이다. 즉 돋보기 버튼을 누른다면 통합검색 영역이 상단 메뉴 영역이 노출된다.통합검색 영역의 오른쪽 닫기 버튼을 누른다면 노출된 영역이 사라진다.직접 페이지에서 해보길 바란다. 많이 볼 수 있고, 많이 활용되고 있는 기능이다.이거 또한 다른 글 transition으로 가능하다.여기서는 jquery의 animate 메소드를 사용해보겠다. ..

"앞으로 3~5년이 한국청년들에겐 절호의 기회" 의 기사를 참고하여 글을 작성했다.실리콘밸리 ‘알토스벤처스’ 김한준 대표 인터뷰의 관한 기사이다. 1. 마케팅을 중요하게 생각하지 않는다는 것.좋은 제품, 좋은 회사를 만드는 것은 끊임없는 마케팅 과정의 연속입니다. 어디에 돈을 얼마나 썼는데, 어떤 효과가 있었는지, 끊임없이 분석하고 새로운 실험을 계속 해야 합니다. 마케팅은 도대체 뭘 하는것인가? 나 또한 중요한 것이라는 건 잘 알고있다.하지만 아직 마케팅이란 걸 이론으로만 들어서 모르겠다.회사 서비스 특성상 마케팅이 힘든건지? 성과가 보이지 않아서 그런건지? 마케팅이란게 그런건지?회사는 분명 마케팅이 중요하다는 걸 분명 알 것이다.그런데 과연 마케팅에 신경을 쓰고 있는 것인가? 의문이 들 때가 많다.마..

최신 글 - http://mygumi.tistory.com/326 이번 글은 이미지 슬라이더에 대해 알아볼 것이다.다들 페이지 작업을 해봤다면 누구나 이 기능을 넣을려고 했을 것이다.많은 라이브러리가 존재하고 대중화된 기능이다. 대중화되고 쉽게 라이브러리가 존재하여도 힘든 사람들을 위해 작성해보았다. 사용할 라이브러리는 딱 필요한 기능과 적절히 확장할 수 있다.또한 자바스크립트로만 만들어진 라이브러리다.그러므로 jquery를 사용하지 않는다면 더더욱 좋은 라이브러리이다. 간단히 샘플 소스를 보자. html 소스 위의 소스만 있으면 이미지 슬라이더 기능을 사용할 수 있다. 아래 페이지를 참고하자.샘플 페이지 실질적인 라이브러리 스크립트 파일을 보면 아래와 같다. javascript 소스 var slider..

이번 글은 css를 통해 이미지 롤링을 만들어 볼 것이다. 이미지 롤링이란... 본인은 이런 명칭을 사용하고 있는지는 몰랐다. 예를 들어 어느 홈페이지에서 이미지에 마우스를 올렸을 때 다른 이미지로 바뀌는 현상이다. 샘플 페이지 페이지 소스 까서 복붙해서 실습해보면 더더욱 이해하기에 좋다. 페이지 소스보기를 통해 소스를 봤다면, 정말 소스가 간단한 걸 봤을 것이다. css의 transition를 이용하면 해결된다. 일단 html 소스를 보자. span 태그안에 img 태그가 있다. 여기서 기억할 것은, 처음 로딩될 때의 이미지는 img 태그이고, 마우스를 올렸을 때는 span의 background 이미지를 통해 보여지게 된다. 자 기억했다면, css 소스를 보자. /*처음 로딩시*/ .dissolve {..

이번글은 HTML5 에 대해서 알아볼 것이다. html 파일은 보거나 개발자 도구를 통해 확인해보면, 맨 위에 선언되어 있는 이라는 녀석을 보았을 것이다. 그냥 쓰라니까 쓰는 사람도 있을 것이고, 안 쓰는 사람도 있을 것이다. 저건 무슨 태그일까? 생각해보았는가? 이 글은 본다면 생각했기 때문에 보았으리라 생각한다. 대부분 아래와 기본 틀로 이용한다. The content of the document...... 어김없이 이라는 녀석이 맨 위에 선언 되어있다. 일단, 이 녀석은 태그 같이 생겼지만 태그는 아니다. HTML 버전에 대해 웹 브라우저에게 알려주는 지침, 명령어 같은 의미이다. 무조건 태그위에 선언되어야한다. 왜 알려줘야하는가? 존재하는 브라우저는 너무나 많다. 브라우저마다 HTML 해석하는 방..

이번 글은 백준 알고리즘 사이트 1010번 다리놓기에 대해 알아볼 것이다.재원이는 한 도시의 시장이 되었다. 이 도시에는 도시를 동쪽과 서쪽으로 나누는 큰 강이 흐르고 있다. 하지만 재원이는 다리가 없어서 시민들이 강을 건너는데 큰 불편을 겪고 있음을 알고 다리를 짓기로 결심하였다. 강 주변에서 다리를 짓기에 적합한 곳을 사이트라고 한다. 재원이는 강 주변을 면밀히 조사해 본 결과 강의 서쪽에는 N개의 사이트가 있고 동쪽에는 M개의 사이트가 있다는 것을 알았다. (N ≤ M)재원이는 서쪽의 사이트와 동쪽의 사이트를 다리로 연결하려고 한다. (이때 한 사이트에는 최대 한 개의 다리만 연결될 수 있다.) 재원이는 다리를 최대한 많이 지으려고 하기 때문에 서쪽의 사이트 개수만큼 (N개) 다리를 지으려고 한다...

이번 글에서는 모듈 패턴을 알아볼 것이다.이전 즉시실행함수에 대한 글을 살펴보고 오면 좋다.이전 글 내용에서 조금 더 들어간 내용이다. 모듈패턴이란 로직을 캡슐화하고 전역 공간의 남발을 방지하는 훌륭한 기법이다. (function() { var a = 1, b = 2;}()); 자바스크립트에서는 위와 같이 익명함수와 즉시실행함수가 있기 때문에 가능하다.익명함수 내부의 변수들은 지역변수가 되므로 외부에서 접근할 수가 없지만, 익명함수 내부에서는 전역변수를 이용할 수 있다.이런 식으로 커지다 보면, 변수에 대한 명확성이 떨어지게 된다.또한 당연히 전역변수를 사용 시에는 지역변수 접근보다 시간이 더 걸린다. 이 문제를 해결하기 위한 방법이 이전 글에서도 살짝 언급했었다. (function($) { consol..

이번 글에서는 pm2를 활용해 클러스터링을 해보자.먼저, 이전에 작성한 글을 읽어보고 오는 것이 좋다.죽지 않고 유지하는 pm2 사용법을 알아보자 일단 모듈을 설치하자. npm install clusternpm install httpnpm install os 기본적인 클러스터 예제이다. var cluster = require('cluster'); var http = require('http'); var os = require('os'); var numCPUs = os.cpus().length; if (cluster.isMaster) { // Master: // Let's fork as many workers as you have CPU cores console.log(numCPUs); for (var i..