발생일: 2011.07.05 문제: 사내 메일에 팀 독서 발표 모임에 대한 사례를 공유한 메일이 왔다. 각자 책을 읽고 워크샵을 통해 발표한 후, 긍정적 피드백과 개선 피드백을 받는 형식이었고, 여러 시행착오를 통해 성공적으로 모임을 정착시킬 수 있었다는 이야기였다. 피드백 과정을 도입할 때에는 김창준님의 컬럼을 참고했다고 하는데, 이 컬럼 내용이 특히 인상 깊어 메모해둔다. 해결책: 저자 워크숍 https://www.ibm.com/developerworks/mydeveloperworks/blogs/9e635b49-09e9-4c23-8999-a4d461aeace2/entry/273?lang=en 플랍(PLOP, Patter Language of Programs)이라는 컨퍼런스 행사 중에 저자 워크숍이라는..
발생일: 2011.07.04 문제: 얼마 전, 페이지 중앙 하단에 떠있는 플로팅 레이어 작업을 진행한 적이 있다. (플로팅 레이어 = 스크롤이 발생해도 같은 위치에 고정되어 있는 레이어) 작업을 진행하며 몇 가지 주의할 점이 있어 메모해둔다. 해결책: 플로팅 레이어가 페이지 하단의 가운데에 위치하기 위해 아래와 같이 마크업이 구현되어 있다고 가정한다. 1. IE6에서는 CSS의 fixed 속성이 적용되지 않는다. - IE6에서 fixed 속성을 구현하기 위한 방법. 2. IE7에서는 윈도우의 가로 사이즈가 홀수일 때, 정상적으로 위치를 찾지 못하는 버그가 있다. - 엘리먼트가 퍼센트를 이용한 상대 크기(%)를 사용하고, 래핑 엘리먼트의 크기가 퍼센트로 나뉘어 떨어지지 않는 경우(IE의 퍼센트 라운딩 알고..
발생일: 2011.06.14 문제: 얼마 전 수정 작업 이후, 스크립트에서 구현한 모듈의 네임스페이스를 찾지 못하는 오류가 발생했다. IE7 이하에서 아래와 같은 오류가 발생했다. 식별자나 문자열 또는 숫자가 필요합니다. 'abc.namespace'은(는) null 이거나 개체가 아닙니다. 코드가 압축되어 있는 데다 IE 하위 버전에서만 발생하다보니 디버깅이 녹녹치 않더라. 알고 보니, JSON 리터럴에서 마지막 컴마를 삭제하지 않은 것이 문제였다. 아아... 원인에 대해서는 이미 알고 있었지만, 이렇게 나타나니 좀 당황스러웠다. 해결책: 최근 브라우저에서는 JSON 형태의 객체 리터럴에서 마지막 컴마를 올바르게 종료하지 않아도 오류 없이 정상적으로 표시된다. 하지만 IE7 이하에서는 아래와 같은 오류를..
발생일: 2011.06.02 문제: 얼마 전 캐릭터셋이 다른 서비스로 폼 서브밋을 보낼 때 한글이 깨지는 문제가 발생한 적이 있었다. 현재 서비스의 캐릭터셋은 utf-8 이었고, 서브밋을 보낼 대상 서비스의 캐릭터셋은 euc-kr 이었다. 서브밋을 보내기 전에 문서의 캐릭터셋을 바꿔주는 방식으로 해결했었는데, 몇 가지 주의할 점이 있어 메모해둔다. 해결책: 결론 먼저: 1. 폼 엘리먼트에 accept-charset 속성을 추가하고 대상 서비스의 캐릭터셋 값을 준다. 예) accept-charset="euc-kr" 2. 스크립트에서 폼 서브밋을 보내기 전, document.charset = "euc-kr"; 구문을 추가한다. 3. 폼 서브밋 후에 document.charset의 값을 원래 값으로 되돌린다...
발생일: 2011.06.01 문제: 처음 디자인 패턴을 공부할 당시 프록시 패턴과 데코레이터 패턴을 꽤 헷갈려했던 기억이 난다. 얼마 전에 책을 읽다가 이 차이점을 명확하게 설명해놓은 부분이 있어 메모해둔다. 프록시 패턴, 데코레이터 패턴에서 사용하고 있는, 전반적인 '프록시'에 대한 개념부터 설명을 시작해 쏙쏙~ 이해된다.^^ 해결책: 프록시: 자신이 클라이언트가 사용하려고 하는 실제 대상인 것처럼 위장해서 클라이언트의 요청을 받아준다. 대리자, 대리인과 같은 역할을 한다고 해서 프록시(proxy)라고 부른다. 프록시를 통해 최종적으로 요청을 위임받아 처리하는 실제 오브젝트를 타깃(target) 또는 실체(real subject)라고 한다. 프록시의 특징은 타깃과 같은 인터페이스를 구현했다는 것과, 프..
발생일: 2011.05.17 문제: 현재 진행하고 있는 프로젝트에서 자바스크립트 작업 시 객체를 나누는 기준은 작은 UI 기능 단위이다. UI 기능 단위로 구분되어 있어 객체의 역할을 쉽게 파악할 수 있고, 기능 단위로 쪼개져 코드가 간결하고 쉽게 이해할 수 있는 장점이 있다. 하지만 로직과 UI와 관련된 코드가 함께 있어 테스트하기 번거로울 수 있으며, 기능 단위가 많아질 경우 모듈 간의 관계를 설정해주는 작업이 복잡해지는 등의 단점도 있다. 여튼, 프로젝트 기간 동안 기능 단위로 객체를 나누어 구현해보면서 기본적으로 객체 생성 시 고려해야 할 사항이 있어 메모해둔다. 해결책: UI 객체의 상황에 따라 적절하게 아래 체크리스트를 확인해보면 도움이 될 수 있다. 1. 초기화 1.1. 초기화 시 관련 DO..
발생일: 2011.05.13 문제: 1) 팝업에서 오프너(opener)의 객체로 배열 데이터를 전달해주고, 2) 팝업을 닫은 후에 3) 오프너에서 전달된 배열 데이터에 접근했을 때 IE에서 아래와 같은 오류가 발생한다. 호출자(서버 응용 프로그램이 아닌 서버)가 사용될 수 없어서 사라졌습니다. 모든 연결이 올바르지 않습니다. 호출이 실행되지 않았습니다. 아무래도 팝업이 닫기면서 참조를 잃은 것 같다. 정확한 원인이 뭘까? 해결책: IE의 경우 오프너와 팝업 간 데이터을 전달할 때, 원시 타입을 제외하고는 '참조'로 전달한다. (다른 브라우저의 경우 '값'으로 전달한다.) 따라서 팝업이 닫길 경우, 참조 데이터는 사라지게 된다. 이를 우회하기 위해 데이터를 원시 타입으로 변경해 전달하면 된다. * 같은 내..
발생일: 2011.04.22 문제: 잘 작동하던 스크립트가 작은 수정 이후에 제대로 작동을 안한다. IE에서만, '알 수 없는 오류'란다. 템플릿으로 태그를 만들어 P 엘리먼트에 innerHTML로 설정하는 부분이었는데, 확인해보니 innerHTML로 추가하려는 태그 문자열 부분에 태그가 포함되어 있던 게 원인이었다. pElement.innerHTML = "insert paragraph tag"; 유독 IE에서만 태그에 innerHTML로 태그를 넣으면 IE에서 '알 수 없는 오류'가 발생한다. 왜 그런걸까? 해결책: W3C 스펙에 의하면 패러그래프(P) 엘리먼트에는 Block Element를 추가할 수 없다. http://www.w3.org/TR/html401/struct/text.html#h-9.3...
발생일: 2011.04.25 문제: 얼마 전에 친구가 운영하는 쇼핑몰에 작은 돋보기 모듈을 만들어줬다. 구글 애드센스나 페이스북의 '좋아요' 버튼 같이 스크립트로 엘리먼트를 만들고 작동시키는 방식이었는데, 작업해주고 난 후 몇 가지 배운 점이 있어 메모해둔다. 해결책: 1. 배포되는 사이트마다 인코딩이 다를 수 있기 때문에 문자열은 유니코드로 작성한다. 스크립트 내에 한글 메세지를 출력하는 부분이 있었는데 쇼핑몰에서 돌려보니 제대로 출력되지 않았다. 작업 환경의 캐릭터셋은 utf-8 이었지만, 친구네 쇼핑몰은 euc-kr 이었기 때문. 태그의 charset 을 utf-8 로 설정해주는 방법도 있었지만, 여기서는 문자열을 유니코드로 작성하는 방법을 택했다. (친구가 붙여넣기 더 간단했기 때문이다.) 2. ..