본문 바로가기

IT 관련/javascript & jquery

자바스크립트 이벤트 처리 javascript 자바스크립트 애플리케이션에서 이벤트 처리는 중요합니다. 모든 자바스크립트는 이벤트를 처리해서 UI를 구현하므로 웹 개발자들은 이벤트 핸들러 코드를 작성하거나 수정하는 일이 잦은 편입니다. 그런데 안타깝게도 자바스크립트 초기부터 지금까지 개발자들은 이벤트 처리를 그리 중요하게 여기지 않습니다. 자바스크립트에 아키텍처의 전통적인 컨셉을 적용할 때도 이벤트 처리 방법은 아주 조금만 바꿨습니다. 게다가 저마다 개발자가 사용해본 방법 위주로 이벤트 처리를 해서 유지보수성이 상당히 좋지 않습니다. 1. 고전적인 방법 개발자 대부분이 이벤트 핸들러에 전달되는 이벤트 객체에 대해 잘 알고 있습니다. 이벤트 객체에는 이벤트 타입에 따른 부가 데이터가 이벤트 타겟 등 이벤트와 관련한 모든 정보가 있습니다. 아무스 이벤트는.. 더보기
[javascript] try...catch문 자바스크립트의 try...catch문을 이용하면 브라우저가 에러를 처리하기 전에 에러를 먼저 가져올 수 있습니다. 에러가 발생할만한 코드를 try 블록에 두고 에러가 발생하면 처리하는 코드는 catch 블록에 두는 것입니다. try { // do something } catch(ex) { handleError(ex); } try 블록에서 에러가 발생하면 실행이 즉시 중단되고 catch 블록으로 바로 넘어가는데 이때 catch 블록에는 에러 객체가 넘어옵니다. 따라서 발생한 에러를 어떻게 처리해야 할지는 에러 객체를 살펴보면 가장 좋은 방법을 알아낼 수 있습니다. 그리고 finally 절을 추가할 수도 있습니다. finally 절은 에러 발생 여부와 상관없이 반드시 실행되어야 할 코드를 입력합니다. fin.. 더보기
javascript NULL 비교 javascript NULL 비교 금지 변수에 필요한 값이 할당되었는지 확인할 때 null과 비교하는 방법은 흔히 잘못 사용하는 패턴입니다. var Value = { process : function(items){ if(items!= null){ items.sort(); items.forEach(function(items){ // do something }); } } 위 코드는 process() 메서드의 items 변수에 sort()와 forEach()를 사용하는 것으로 보아 items 변수가 배열이라는 전제하에 작성한 코드입니다. items 변수가 배열이 아니면 로직을 수행할 수 없습니다. 이 코드는 변수 값이 null인지 확인은 하고 있지만, 에러를 막기에는 문제가 있습니다. items 변수에는 1이.. 더보기
가독성 좋은 javascirpt 이름 규칙 컴퓨터 과학에서 가장 어려운 두 가지 문제는 캐시 무효화와 네이밍이다. 1. 이름 규칙 우리가 작성하는 코드의 대부분은 변수와 함수를 사용합니다. 그래서 변수명과 함수명에 대한 이름 규칙은 이해하기 쉬운 코드를 작성하는데 꼭 필요하고 중요합니다. 자바스크립트의 기반이 되는 ECMAScript는 낙타 표기법으로 작성되어 있습니다. 낙타 표기법은 소문자로 시작하고 새로운 단어를 사용할 때마다 첫 문자는 대문자로 입력하는 방식입니다. 예제를 살펴봅시다. var thisIsMyName; var anotherVariable; var aVeryLongVariableName; 일반적으로 자신이 사용하는 언어의 표준 라이브러리에서 따르는 이름 규칙을 사용해야 합니다. 대부분 자바스크립트 개발자들은 변수명과 함수명을 지.. 더보기
가독성이 좋은 자바스크립트[javascript] 코딩 - 스타일 가이드라인2 공백을 이용한 들여쓰기에 이어 가독성에 도움이 되는 스타일가이드라인을 이어서 작성합니다. 1. 문장 종료 C++이나 자바처럼 C와 비슷한 언어는 보통 세미콜론으로 문장을 끝냅니다. 흥미롭게도 가장 혼란스러운 것이 바로 자바스크립트 문장이 세미콜론이나 줄 바꿈으로 끝난다는 점입니다. 다음 두 예제 모두 자바스크립트에서 유효한 문장입니다. // 세미콜론으로 문장을 끝냄 : 유효함 var name = "홍길동"; function SayName() { alert(name); } // 줄 바꿈으로 문장을 끝냄 : 유효하지만 권장하지 않음 var name = "홍길동"; function SayName() alert(name) 세미콜론을 입려하지 않아도 자바스크립트에서는 ASI(Automatic Semicolon I.. 더보기
가독성이 좋은 자바스크립트[javascript] 코딩 - 스타일 가이드라인 가독성이 좋은 코드를 작성하는 것은 개발자라면 누구나 바라는 것입니다. 하지만 본인이 작성한 코드를 본인이 봐도 헷갈리는 경우가 태반이고 그나마도 본인이 하고 본인이 해결하지 못하는 경우도 가끔 봅니다. 따라서, 가독성이 좋은 코드는 본인과 유지보수를 하는 개발자에게도 중요한 요소입니다. 이번 글을 시작으로 가독성이 좋은, 읽기 좋은 자바스크립트 코딩에 대해서 포스팅을 해보려고 합니다. 1. 스타일 가이드라인은 돼 필요한가? 스타일 가이드라인을 정하는 절차는 생각보다 많은 시간이 필요합니다. 각자 의견이 다른 데다가 개발자는 보통 하루 8시간씩 코드를 작성해야 하는 터라 자신이 편한 방법으로 정하고 싶어하기 때문입니다. 그래서 팀원들이 조금씩 타협해야 하바니다. 또 팀 리더가 강하게 주도할 줄도 알아야 .. 더보기
HTML의 기초 태그1(xml과 비교) 마크(태그)는 문서의 내용이나 구조를 특정한 양식으로 꾸미기 위해서 사용하는 기호입니다. 정해진 기호들은 브라우저에 의해서 해석되고 정해진 방식으로 출력됩니다. HTML 문서에 사용하는 마크를 태그(Tag)라고 표현하고 XML에서 사용하는 마크를 넓은 의미로 요소(Element)라고 합니다. 이들은 실제 문서의 내용과 구별하기 위해서 "" 기호 사이에 띄어쓰기 없이 입력하는데, 시작하는 마크와 종료하는 마크는 다음과 같이 구별할 수 있습니다. html 태그 XML 요소 마크(태그 or 요소)는 브라우저에게 마크하는 내용에 대한 의미를 부여하는 것으로서 구조적인 것과 양식을 꾸미기 위한것 그리고 의미를 가지고 있는 것들로 이루어져 있습니다. HTML 문서와 XML 문서의 마크는 많은 차이를 가지고 있습니다.. 더보기
HTML의 역사 HTML(HyperText Markup Language)은 Web에서 사용되는 문서의 형식으로서 *.htm 혹은 *.html이라는 확장자를 가지는 Text 파일입니다. HTML 문서는 웹 브라우저에 의해 해석되고 표현되는 문서로서 일반 Text와 달리 링크 기능을 이용해서 이미지, 음성, 영상 등의 멀티미디어 정보를 문서의 일부분으로 포함할 수 있습니다. 링크를 통해서 다른 종류의 문서와 유기적으로 연결된 문서를 HyperText라고 하는데 지금의 HTML은 이미지, 음악, 동영상 등의 멀티미디어 자료를 포함할 수 있기 때문에 HyperMedia라고 표현한다. Markup Language의 역사 마크업(Markup)이란 문서의 내용 중에 뭔가 특별한 혹은 추가적인 정보를 표시하는 것을 말합니다. 예를 들.. 더보기

티스토리툴바