비올 때 걸을까? 뛸까?

장마철이라 비가 오락가락한다. 어렸을 때부터 헷갈리던 것 중 하나는 비올 때 우산이 없는 경우 걸어야 비를 덜 맞는지 뛰어야 덜 맞는지 하는 것이었다. 뛰면 앞에 있는 비를 미리 가서 더 맞는 거 같기 때문이다. 내 경우 이 궁금증이 해결된 것은 대학 때이다. 벡터를 가지고 유량이 유입되는 양에 대한 계산을 하고서야 정확히 어떤 게 유리한지 알 수 있었다.

그런데 이것을 수치 계산이 아니라 21세기의 컴퓨터 기술을 활용해 시각적으로 보이면 좋지 않을까 생각이 들었다. 그래서 한번 만들어봤다. 비 맞기 시뮬레이션!
계속 읽기…

MongoDB University 강의 2강 – CRUD 1

지난 1강에 이어 두 번째 강의를 정리해본다. 이번 주제는 관계형 데이터베이스에서 흔한 작업들, 즉 CRUD라고 하는 작업을 MongoDB에서는 어떻게 처리하는가에 대한 내용이다. 내용이 길어 1, 2로 나눈다.

CRUD

MongoDB에서는 CRUD를 다음과 같이 말한다. 이러한 기능은 관계형 DB의 SQL 같은 별도 언어가 아니라 자바스크립트나 자바와 같은 개발 언어의 구문 형태로 API가 제공된다.
계속 읽기…

이미지의 가로세로비를 유지하면서 틀 안에 맞추려면

웹사이트 중에는 종종 이미지가 가로세로비(종횡비)를 못 맞추고 짜부라진 모양으로 나오는 곳들이 있다. 크기가 큰 사진들은 괜찮은데 좁은 자리에 가로 세로 크기를 한정시켜 맞춰넣는 얼굴 사진이나 광고 같은 것들에 그런 게 종종 보인다. 얼굴이 너무 넓적하다든지 몸매가 완전 날씬한 형태로 나오는 사진들이 그런 것들이다.

계속 읽기…

자바스크립트와 자바에서 공백 문자란?

웹 프로그램을 개발할 때 인터넷 익스플로러(IE)는 참 개발자를 괴롭게 한다. IE만의 예외 상황을 고려해야 하는 번거로운 경우가 얼마나 많은지… 특히 IE 8 이하는 발표된지 몇 년이 지났는데도 우리나라에서는 아직 사용자가 많다! 수년 전까지도 윈도 XP에서 IE 6을 사용하는 사용자가 가장 많았던 우리나라에서 개발자는 이래 저래 힘들다.

여기 그 문제 중 또 하나를 얘기해보려고 한다. 공백(whitespace) 문자의 범위에 대한 문제다.
계속 읽기…

PhantomJS를 활용한 웹 스크레이핑

웹에서 뭔가 필요한 자료를 찾을 때가 종종 있다. 한 번만 찾고 마는 경우라면 간단한데 정기 간행되는 기사나 웹툰(Webcomics) 같은 연재되는 컨텐트를 보려고 하면 일일이 눌러서 봐야 하기 때문에 흐름이 끊기는 게 싫기도 하고 광고가 페이지마다 뜨는 것도 마음에 안든다. 그래서 웹 스크레이핑(Web scraping)으로 필요한 컨텐트만 콕 집어서 한번에 가져온 다음 여유있게 보는 것이 편리할 것이다.

그래서 작성해봤다. 웹페이지의 컨텐트를 이미지로 저장하거나 텍스트 파일로 저장할 수 있는 자바스크립트 프로그램!

계속 읽기…

다양한 경우의 HTTP 요청 여부 정리

웹페이지를 개발하다 보면 이러저러한 개체에 대해 브라우저가 서버에 HTTP 요청을 정말 할까하고 궁금한 경우가 있다. 예를 들어 display: none; 스타일을 줘서 보이지 않는 이미지도 서버에서 받아올까 하는 궁금증이다.

일전에 이러한 궁금증에 대한 다양한 사례를 퀴즈로 풀어보는 외국 사이트가 떠서 나도 좀 풀어봤다(이 사이트는 프로그램적으로도 참신하게 잘 만든 사이트다. 꼭 크롬에서 보기 바란다). 무지 어려웠다. W3C의 HTML이나 CSS 명세서에 없는 사항인 경우도 있고 브라우저마다 실제 구현도 다른데 그걸 어떻게 많이 맞추겠나.

계속 읽기…

자바스크립트 배열을 다시 알아보자

자바스크립트(JavaScript) 배열에 대해 전체적으로 알고 싶어하는 사람들이 많길래 다시 정리해보기로 했다. 배열, 즉 Array 객체는 자바스크립트에서 가장 많이 사용하는 객체고 아주 쉽게 사용하지만 그러면서도 웬만한 개발자들이 잘 모르는 사실들도 많이 숨어 있는 커다란 창고 같은 객체다. 지난 번 글 자바스크립트 배열 길이는 좀더 자세하게 들여다본 내용이었는데 이번엔 개요라고 할 수 있겠다.

계속 읽기…

Verlet 시뮬레이션 예시

지난 번에 Verlet 적산법 개념 설명에 이어 시뮬레이션 예시를 만들어봤다. 중력가속도만 적용되는 단순한 상황인 경우만 놓고 보니 아주 자연스러운 애니메이션이 만들어졌다. 또한 혼자서만 움직이는 게 아니라 입자를 마우스로 잡아 움직일 수 있게, 즉 인터랙티브하게 만들어봤다. 아래 예시는 IE9 이상 및 기타 최신 브라우저에서 볼 수 있다.
계속 읽기…