Inspired World

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

Callback 함수를 호출 할 때 Node.js 에서는 process.nextTick을 사용하지만 참고: JavaScript 콜백 함수의 활용 클라이언트 JavaScript에서는 전통적인 setTimeout을 이용하여 Event Loop을 지연합니다. 위 그림과 같이 JavaScript 는 Event Loop ( 이벤트 루프 )을 사용하는데요. Thread 와 달리 정확하게 말해서 완전 동시에 일을 할 수 없기 때문에 다음 일을 미루어 줌으로써 block이 되지 않게 하는 것이 포인트입니다. 그냥 단순 타이머로써 setTimeout 을 활용할 수도 있지만 callback 함수를 setTimeout을 통해 호출함으로써 이벤트를 지연할 수 있고 따라서 프로그램이 block 되지 않게 할 수 있습니다. 이것..

Node.js를 production server에서 운영할때는 NODE_ENV 를 production으로 설정한 후 쉘에서 주로 forever start app.js 명령을 이용해서 node.js 어플리케이션이 예기치 못한 오류로 꺼지거나 하는 경우를 방지 할 수 있는데요. 주의! 먼저 쉘에서 npm install forever -g 로 forever 가 설치 되어 있어야 합니다 개발 과정에서는 forever 보다 node app.js 이렇게 그냥 실행하게 되면 소스를 수정할 때 마다 ctrl + c node app.js 를 반복해줘야 하는 귀찮은 일이 발생합니다. 하지만 소스가 변경될 때마다 알아서 저 ctrl + c node app.js 작업을 해주는 프로그램이 있습니다. 그 이름은 바로 Superv..

JavaScript에서 procedural programming과 object oriented programing을 모두 할 수 있습니다. 의외로 Object Oriented Programming ( 객체지향 프로그래밍 ), OOP 이 가능한지 모르시는 분들이 있어 이번 포스팅에서 소개하기로 했습니다. 먼저 객체 생성자 (Constructor)를 만들어볼까요? * 소멸자 (Destructor)는 따로 정의 안해도 됩니다. 기본적으로 JavaScript는 Garbage Collection을 하니까요. var Person = function ( info ) { this.height = info.height || '178cm'; this.weight = info.weight || '72kg'; this.nam..

보통 Node.js 를 실행할 때 NODE_ENV 값을 이용해서 production ( 배포 ) 모드 development ( 개발 ) 모드 이렇게 두 가지로 나누어서 실행하게 되는데요. Node.js 프레임워크인 Express 의 경우 production 모드 일때는 파일 캐싱, 에러 메시지 감추기 등 배포의 적합한 환경 설정을 하구요. development 모드 일 때는 파일 캐싱 방지, 디버그를 위한 상세한 에러 메시지 보이기 등 개발에 도움을 줄 수 있는 환경으로 설정을 해줍니다. 하지만 직접 이 값을 알아 내고 싶을 때가 있는데요. 이럴 때는 Express 에서 전체 앱을 총괄하는 역할을 맡고 있는 root 디렉토리의 app.js 에서 첫 줄에 process.env.NODE_ENV = ( pro..

XSS (Cross-Site Scripting 크로스 사이트 스크립팅) 은 사용자가 입력할 수 있는 폼이나 URL의 파라미터 값을 통해 악의적인 코드를 삽입하여 쿠키를 갈취하거나 악성 코드를 실행하는 것을 말합니다. 기본적으로 이는 태그, 특히 스크립트 태그를 통해 삽입되어 지는데요. 태그를 여는 를 > 로 표현함으로써 브라우저가 진짜 태그가 아닌 문자 형태의 로 인식하게 할 수 있습니다. 이 방법으로 XSS 필터링을 해줄 수 있습니다. var XSSfilter = function(content) { return content.replace(//g, ">"); }; Node.js 의 장점이 Front-end와 Back-end 언어가 같다는 점을 생각하면 이 코드는 HTML +..

클라이언트 사이드 (웹브라우저)에서 전역 객체에 접근하고 싶다면 window 객체를 통해 접근 할 수 있습니다. 예를 들어 example 이라는 변수를 전역 변수로 만들고 싶다면. window.example = null; 이렇게 하면 example 이라는 전역 변수에 null 값을 할당하게 됩니다. 서버 사이드 (Node.js)에서 전역 객체에 접근하고 싶다면 global 객체를 통해 접근 할 수 있습니다. 위와 동일하게 example 이라는 변수를 전역 변수로 만들고 싶다면. global.example = null; 이렇게 하면 example 이라는 전역 변수에 null 값을 할당하게 됩니다. 가급적이면 전역 변수를 쓰지 않는게 좋지만 전역 변수를 꼭 써야만 하는 상황이 있을 수 있으니 클라이언트 사이..

Node.js 에서 require('경로'); 를 활용하면 그 .js 파일 기준으로 상대 경로에 위치한 js 파일을 가져와 쓸 수 있습니다. 여러 함수를 라우팅 페이지와 함께 다같이 몰아 넣는게 아니라 HTTP 요청을 라우팅 할 때 함수들을 의미 별로 파일로 나누어서 관련 함수들을 모아놓고 사용하면 아주 유용하죠. 문제는 저 상대 경로 입니다. 나름 절대 경로 비슷하게 자체적으로 root directory 가 있다면 그걸 기준으로 폴더나 파일을 정리해서 require를 사용하면 참 좋을텐데요. 이럴 때는 process.cwd() 를 활용하시면 해결됩니다. 예를들어 웹 프레임워크가 app.js 로 실행된다고 할 때 node app.js 로 실행을 하게 됩니다. 이 때 이 경로가 process.cwd가 됩니..

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() { // ..