발생일: 2011.10.12 문제: 버튼을 클릭하면 오디오가 재생되고, 오디오 재생 상태에 따라 버튼의 모양을 변경하려고 한다. 엘리먼트의 onplay / onended 이벤트를 컨트롤 해서, 재생될 때 아이콘의 모양을 변경하면 간단히 해결될 것 같았다. 대상이 되는 audio 엘리먼트에 간단하게 아래와 같이 이벤트를 할당했다. audio.addEventListener("play", function () { // 재생 모양으로 아이콘 변경 }, false); audio.addEventListener("ended", function () { // 대기 모양으로 아이콘 변경 }, false); 음.. 헌데,.. 최초로 버튼을 클릭했을 땐 play 이벤트가 잘 호출되는데, 두 번째 클릭(또는 두 번째 재생)부..
발생일: 2011.09.24 문제: 이번에 작은 크롬 익스텐션을 만들어봤다. (네이버 영어사전 크롬 익스텐션) 현재 보고 있는 페이지에 스크립트를 추가하고, 검색을 요청하면 크롬 익스텐션에서 비동기로 데이터를 가져와 출력하는 방식이다. 이를 위해 페이지가 로드되면, 스크립트가 head 태그에 삽입되고, 결과를 보여줄 레이어 엘리먼트를 만들어서 document.body에 추가되도록 했는데,.. 특정 페이지에서 레이어가 나오지 않는다. 프레임셋으로 나뉘어진 페이지의 경우엔 body가 존재하지 않아, 엘리먼트를 추가할 수 없는 것이 원인이었다. 웁쓰. 우째해야 할까? 좋은 꼼수를 찾아내서 메모해둔다. 해결책: 익스텐션에서 content_script 를 추가할 때, top 프레임에만 추가할 것인지, 모든 프레임..
발생일: 2011.09.20 문제: 얼마 전 팀 내에서 진행했던 미니 프로젝트가 어느 날 갑자기 크롬에서 돌아가지 않는다. 제티 서버에 올라가 있고, 웹소켓을 이용해 동작하는 서비스인데, 소켓 생성이 제대로 되지 않는 것 같다. 콘솔 로그를 보니 아래와 같은 에러가 발생한다. Unexpected response code: 400 400번이면 Bad Request 인데... 뭐가 문제일까? 크롬 버전을 확인해보니 14.0.835.163 이다. 해결책: 지난 2011년 9월 16일에 크롬 안정화 버전 14.0.835.163 이 배포되었다고 한다. 이번 배포에서는 크롬의 웹소켓 프로토콜 업그레이드가 있었다고 한다. 보안 문제 때문에 진행되었고, 기존의 웹소켓 프로토콜과 하위호환성을 지원하지는 않는다고 한다. ..
발생일: 2011.09.15 문제: 아이폰으로 보고 있는 페이지의 패킷을 PC의 프록시 툴로 확인하고 싶다. 어떻게 하면 될까? 해결책: 아이폰이 PC의 프록시 툴을 통하도록 네트워크 설정을 해주면 된다. 요새는 웹디버깅 툴로 찰스(http://www.charlesproxy.com/)를 사용하고 있다. 피들러나 다른 툴을 사용하고 있다면 비슷한 방법으로 셋팅하면 되겠다. 1. PC에서 프록시 툴이 사용하고 있는 포트를 확인한다. - 찰스에서는 Proxy > Proxy Settings 에서 확인하면 된다. 2. 아이폰이 해당 프록시를 통하도록 설정한다. - 설정 > WiFi > 선택된 네트워크 > 하단의 HTTP 프록시 '수동' 선택 - 서버는 패킷을 확인할 PC의 IP를 입력한다. - 포트는 1번에서 확..
발생일: 2011.09.08 문제: 진행 중인 미니 프로젝트에서는, 캔버스에 드로잉하고 캔버스를 resize 하는 스펙이 있다. resize 할 때에는, 그려진 데이터는 (좌측 상단을 기준으로) 고정하고 캔버스만 늘리려고 한다. jquery를 이용해서 구현하고 있던 터라, 캔버스 엘리먼트를 담고 아래와 같이 크기를 변경했다. $("canvas").width(w).height(h); 캔버스 크기만 변경되길 기대했는데, 그려진 픽셀까지 함께 확대가 된다. 왜 그럴까? 해결책: 캔버스의 실질적인 크기는 canvas 태그의 속성으로 설정해야 한다. (속성을 정의하지 않을 경우 기본으로 300, 150 크기를 가진다) 만약 css 속성으로 캔버스 사이즈를 변경할 경우엔, 속성에 기재된 값과 css 속성값의 비율에..
발생일: 2011.09.07 문제: 게시판과 같은 목록을 Ajax로 가져와 출력할 때엔 간단할 것 같으면서도 주의할 것이 몇 가지 있다. 특히 여러 엘리먼트가 맞물려 있을 경우엔 코드가 꼬이는 경우가 더러 있기도 하다. 이런 경우 대체로 목록을 요청하기 위해 여러 옵션이 필요하고, 서버에서 응답을 받았을 때에도 처리해야 할 엘리먼트가 많다. 특히, 결과가 없을 경우나 에러가 발생했을 때까지 포함하여 처리할 때엔 코드가 더 복잡해지곤 한다. 목록 요청 처리 과정을 좀 깔끔하게 디자인할 순 없을까? 해결책: Ajax로 목록을 요청해 응답을 받고, 받은 데이터로 목록을 출력한다고 했을 때 고려해 볼 만한 것들은 아래와 같다. 1. 요청 시 파라미터를 어떻게 구성하는가? 2. 응답이 왔을 때엔 어떻게 되는가? ..
발생일: 2011.09.06 문제: 스크립트를 로드하기 위해 서버에서 직접 JSON 형태의 데이터를 페이지에 찍는 경우가 많다. 헌데, 종종 서버 데이터에 따옴표 등이 포함되어 있어 스크립트 오류가 나곤 한다. 또한, 전달받은 데이터가 HTML을 구성하기 위한 용도일 경우엔 모듈마다 태그 처리 방법이 달라 원하지 않는 결과가 나올 때도 있다. 이런 상황이 발생할 걸 예측하고 있지만, (헷갈리다보니) 매번 케이스 바이 케이스로 처리할 때가 많다. 애초부터 좀 일관되게 처리하면 좋지 않을까? 해결책: 예를 들어, 아래와 같은 데이터를 서버에서 출력했다고 가정해보자. var serverData = { title: "울랄라 나는 "제목"이다.", // 따옴표 때문에 오류가 발생한다. content: "본문도 중..
발생일: 2011.08.22 문제: 가벼운 팀 프로젝트로, 웹소켓과 캔버스를 이용해 동시에 그림을 그릴 수 있는 그림판 같은 걸 만들어보고 있다. 중간에 접속한 유저가 기존에 그려진 데이터를 뿅~ 받아볼 수 있는 동기화 기능이 필요했다. 이미 그려진 캔버스를 복사하려면 어떻게 하지? 해결책: 아래와 같은 순서로 처리하면 된다. 1. base64로 인코딩 된 데이터를 가져온다. 2. 이미지 객체를 만들어서, 이미지 문자열을 src에 할당한다. 3. 이미지 로드가 완료되면 로드된 이미지로 캔버스를 그린다. 이미지 로드가 완료되기 전 복사를 시도하면, 빈 이미지로 캔버스를 그리는 것과 같게 되기 때문에 아무 일도 일어나지 않으니 주의한다. 샘플 코드: // 이미지 데이터를 가져온다. var imageData ..
발생일: 2011.08.05 문제: iCloud의 귀여운 쿠키 불가 메세지를 보다가, 문득 쿠키 가능 여부를 체크하는 방법이 궁금해졌다. 자바스크립트에서 쿠키 여부를 직접적으로 확인할 수 있는 메서드가 있을까? 해결책: 쿠키 가능 여부를 직접적으로 확인할 수 있는 API는 없다고 한다. 편법으로, 테스트용 쿠키를 썼다가 읽는 방법으로 확인할 수 있다. (물론 테스트용으로 작성한 쿠키는 읽은 후에 바로 삭제한다) 서버사이드에서는 테스트를 위한 쿠키를 담은 응답을 보내고 확인해보는 방식으로 가능 여부를 알아낼 수 있다. * 참고: http://stackoverflow.com/questions/531393/how-to-detect-if-cookies-are-disabled-is-it-possible
발생일: 2011.07.04 문제: 얼마 전, 페이지 중앙 하단에 떠있는 플로팅 레이어 작업을 진행한 적이 있다. (플로팅 레이어 = 스크롤이 발생해도 같은 위치에 고정되어 있는 레이어) 작업을 진행하며 몇 가지 주의할 점이 있어 메모해둔다. 해결책: 플로팅 레이어가 페이지 하단의 가운데에 위치하기 위해 아래와 같이 마크업이 구현되어 있다고 가정한다. 1. IE6에서는 CSS의 fixed 속성이 적용되지 않는다. - IE6에서 fixed 속성을 구현하기 위한 방법. 2. IE7에서는 윈도우의 가로 사이즈가 홀수일 때, 정상적으로 위치를 찾지 못하는 버그가 있다. - 엘리먼트가 퍼센트를 이용한 상대 크기(%)를 사용하고, 래핑 엘리먼트의 크기가 퍼센트로 나뉘어 떨어지지 않는 경우(IE의 퍼센트 라운딩 알고..