Inspired World

간단히 살펴보는 HTTP Status CodeHTTP Status Code는 HTTP 통신을 할때 서버에서 클라이언트한테 응답을 할때 3자리 숫자로 의미를 담아 코드로 보내주는 것입니다. 브라우저 콘솔창에 자주 보이는 3자리 숫자 에러코드 여기에도 의미가 있습니다.가장 흔히 많이 아는 코드는 404입니다. “404 페이지를 찾을 수 없습니다”, “404 Page Not Found” 기억 나시나요? 더 많은 코드를 상세하게 설명과 함께 보고 싶으시면아래 위키피디아 링크에 가셔서 보실 수 있습니다.HTTP Status Code - Wikipedia 너무 많다…크게 코드는 5가지로 나뉜다고 생각하시면 쉬워요. 100client가 넘겨준 header를 잘 받았다와 같은 처음에 요청이 잘 시작되었다. 200cli..

티스토리 블로그에 애드센스 적용하기티스토리 블로그에 애드센스 좀 더 깔끔하게 다는 방법을 알아보겠습니다.상단, 하단은 티스토리 HTML/CSS 편집에 들어가서 ['##_article_ rep_desc_##'] 를 찾아위에 광고 코드, 아래에 광고 코드를 넣어서 하는 방법이 가장 보편적인데요.광고는 보통 상단, 하단도 좋지만 본문 중간에도 하나 있으면 더 효과적이라고 합니다.매번 글 쓸때마다 수동으로 광고 코드를 본문 중간에 넣어주는 방법도 있으나 번거롭기도 하고혹시나 광고 코드가 바뀌기라도 한다면 재앙이겠죠.그래서 간단히 JavaScript를 이용해서 광고를 본문 상단, 중간, 하단에 배치 하는 방법을 소개하려합니다. 광고 유닛 만들기구글 애드센스 사이트에 로그인 상단에 있는 내 광고를 클릭 반응형 선택..

AngularJS소개AngularJS는 구글(Google)에서 만든 Single Page App (SPA) 를 만들 때 반복되는 코드와 복잡한 코드를 줄이고 테스트를 쉽게 하도록 하기위해 만든 JavaScript MVC Framework입니다. Two-Way Data Binding 이라는 특징이 처음에 눈에 많이 띄는 요소입니다. 기존 jQuery나 JavaScript DOM API를 이용해서 어떤 데이터(Model)이 변할 때 이벤트 리스너나 특정 함수를 조건에 맞춰 호출할 때 UI를 변경했던 방식과는 달리 JavaScript 객체의 값을 변경하면 그것이 바로바로 UI에 변화가 반영되게 할 수 있다는 얘기입니다! 이런 특징 말고도 Model, Controller, Service, Dependency I..

JavaScript에서 문자열 위치, 배열 위치를 알아내는 방법에는 여러가지가 있겠지만 자체 함수로는 .indexOf() 함수 가 있습니다. 위 링크를 확인해보시면 아시겠지만 사용법도 간단하고 별 문제가 없는 줄 알았는데 IE8 (인터넷 익스플로러8)에서 지원하지 않는 함수라는 문제가 있었습니다. 이유는 ECMAScript v5 부터 .indexOf() 가 포함되었는데 JScript를 사용하는 IE이기 때문에 요즘 FireFox, Chrome, Safari와 같은 브라우저는 대부분 ECMAScript v5 규격에 맞는 JavaScript 엔진이 탑재 되어 있는 반면, IE는 그렇지 않습니다. 뭐 사실 CSS도 그렇고 JavaScript도 그렇고 원래 IE는 좀 그렇습니다 ㅋ 문자열이나 배열의 .index..

요즘 보다 발전된 UI/UX를 적용하는게 추세입니다. 최근 들어 마우스 스크롤을 끝까지 내리면 알아서 일정량의 글을 밑에다 붙이는 방식으로 구현된 게시판이나 사이트를 많이 볼 수 잇습니다. 일반적으로 버튼으로 구현되어 글을 더 보고 싶을 때 "더 보기" 버튼을 클릭하여 다음 글을 AJAX요청을 해서 글을 보여주는 DIV 안에 jQuery의 append 함수 등을 이용해 뒤에 붙이는 방법이 있습니다. 사용자가 스크롤을 아래까지 내렸을 때 자동으로 글 더보기 효과를 낼 수 있다면 더욱 멋지겠지요. "문제는 사용자가 스크롤을 아래까지 내렸을 때" 이벤트를 캐치하는 것입니다. 브라우저창 끝 이벤트 $(window).scroll(function() { if ($(window).scrollTop() == $(doc..

jQuery를 사용하면서 여러가지 애니메이션이나 동작을 수행할 때 순차적으로 일을 하게 하고 싶은데 1 2 3​ $("#one").fadeOut(); $("#two").fadeOut(); $("#three").fadeOut(); 이렇게 하게 되면 이 세 DIV 가 동시에 서서히 사라지는 애니메이션이 적용됩니다. 예제보기 하지만 만약 1, 2, 3이 순차적으로 애니메이션을 적용하고 싶다면 .queue() 를 활용하면 됩니다. $("#one").fadeOut().queue(function() { $("#two").fadeOut().queue(function() { $("#three").fadeOut(); }); }); 예제보기 이렇게 queue를 활용하면 필요에 따라 반드시 선행되어야 할 액션 이후에 다른..

jQuery를 처음 사용할 때 "어 이게 왜 안돼지?" 하는 상황이 종종 생깁니다. 제가 jQuery를 1.4.2 버전 때 첨 접하고 나서 지금까지 쭉 써오고 있는데 제가 모든 API를 섭렵하고 매일매일 jQuery를 Heavy하게 쓰는 유저는 아니지만 경험을 통해 얻은 팁 몇가지가 있습니다.  DOM이 다 로드 된 이후에 처리하지 않으면 아무리 셀렉터를 이용해서 선택을 한들 DOM 객체를 인식하지 못하고 공들여 쓴 JavaScript + jQuery 소스가 제대로 작동하지 않게 되는데요. 기본적이지만 짚고 넘어가겠습니다. $(document).ready(function() { // Source Code Start }); 또는 $(function() { // ..

JavaScript 에서는 콜백 함수를 아주 쉽게 구현할 수 있고 아주 강력합니다. 특히 AJAX요청과 함께 사용하면 정말 강력한데요. 예를 들어, AJAX요청을 해서 어떤 정보를 가져와 그 가져온 정보로 무엇인가를 처리해주고 싶습니다. 하지만 AJAX특성상 서버의 응답도 영향이 있기 때문에 같은 요청도 같은 컴퓨터일지라도 네트워크 환경 등 여러가지 변수 때문에 반응 속도가 천차만별입니다. 따라서 setTimeout 을 이용한다거나 여러가지 다른 방법도 있겠지만 보다 확실한 방법은 콜백 함수를 이용하는 방법입니다. 콜백함수를 이용하게 되면 "어, 나 이 작업 다 끝났으니까 뭐 할 꺼 있으면 해" 라고 메시지를 전달함으로써 확실히 가져온 데이터를 가지고 처리를 할 수 있게 됩니다. 이제 예제 소스를 보여드..

jQuery의 문구처럼 짧은 소스로 더 풍부하게 코딩하는 것이 지향하는 목표입니다 jQuery는 John Resig라는 Mozilla JavaScript 개발자가 만든 자바스크립트 프레임워크입니다. 위 문구처럼 보다 간결한 소스로 더 많은 일을 할 수 있게 해주는데요. 그럼 왜 구지 JavaScript를 그냥 쓰지 않고 jQuery를 많은 사람들이 사용할까요? 마이크로소프트에서도 jQuery를 Visual Studio MVC Framework에 포함시켰고 국내, 외 사이트에 들어가서 소스보기를 눌러보면 심심치 않게 jQuery가 포함되어 있는 것을 확인해 볼 수 있습니다. 점점 RIA (Rich Internet Application) 이 부각 되는데 비해 Flash나 Silverlight 는 부가적으로 ..