전체 글

[javascript] 쿠키(Cookies)

쿠키는 키와 값을 가질 수 있는 데이터로서 클라이언트 즉, 사용자의 웹브라우저에 저장 가능한 데이터입니다. 대부분의 경우 클라이언트 단에서 어떤 정보를 일정 시간 동안 저장하고자 하는 경우에 많이 사용됩니다. 예를 들어 어떤 웹사이트의 로그인에서는 사용자 아이디를 기억하는 기능이 있습니다. 사이트로 로그인할 때마다 매번 동일한 아이디를 입력해야 하는 불편함을 덜어주기 위해서입니다. 사이트마다 다를 수 있겠지만 이러한 기능을 구현하기에 쿠기가 많이 활용됩니다. 1. 쿠키 생성 쿠키는 다음과 같은 방법으로 생성할 수 있습니다. var date = new Date(); date.setDate(date.getDate() + 7); var _cookie = 'tmpdata=1234;expires=' + date...

[javascript / jQuery] 크로스 도메인

웹브라우저는 보안을 위해 현재 도메인에서 다른 도메인으로의 요청을 원칙적으로 차단하고 있습니다. 따라서 다음과 같은 시도를 하게 되면 브라우저는 크로스 도메인 관련 오류를 내뿜게 됩니다. 위 문제를 해결하기 위한 방법으로는 대략 2가지 정도를 알아보고자 합니다. 1. JSONP JSONP(JSON with Padding)는 다른 도메인에 요청을 보낼 때 callback매개변수를 보내면 응답을 보낼 때 JSON형태의 결과를 callback매개변수로 보낸 함수명으로 감싸 반환받는 형태를 의미합니다. 우선 예제작성을 위해 JSONP형태의 응답을 반환하는 서버를 만듭니다. public class HomeController : Controller { // GET: Home public ActionResult In..

[Javascript / jQuery] Ajax

1. Ajax 개요 Ajax는 웹브라우저가 서버와 통신하는 방식을 말합니다. 전통적인 웹브라우저의 동작 방식은 웹브라우저가 필요한 데이터를 서버에 요청하고 서버가 그 결과를 반환하면 웹브라우저가 결과를 받아 화면에 표시합니다. 이 과정에서 웹브라우저는 서버에 요청하고 서버의 응답을 받아 표시하는 과정에서 페이지 전환이 이루어지게 되는데 이때 사용자는 화면이 제대로 표시될 때까지 매번 기다려야 합니다. 뿐만 아니라 서버에서 결과를 받아 새롭게 표시해야 할 내용이 전체 페이지 내용 중에서 일부분에 불과한 경우에는 이 일부분의 결과를 표시하기 위해 페이지 전체를 새로 받아 표시해야 하므로 대역 팽나무 비도 초래하죠. 이 문제를 해결하고자 하는 통신방식이 바로 Ajax입니다. 예를 들어 티스토리 블로그에서 덧글..

[node.js] 확장모듈

node.js에서 사용가능한 수많은 기능들은 모듈이라는 개념을 통해서 사용됩니다. 모듈은 node.js가 기본적으로 가지고 있는 내장 모듈과 외부에서 따로 설치해서 사용하는 외부 모듈로 나뉩니다. 1. 내장모듈 사용 가능한 내장 모듈은 아래 주소에서 목록을 확인할 수 있습니다. https://nodejs.org/dist/latest-v12.x/docs/api/ Index | Node.js v12.18.1 Documentation nodejs.org 해당 모듈의 기본적인 사용법은 모듈명을 클릭하면 알 수 있습니다. 예를 들어 Console에 대한 사용법은 위 페이지에서 Conole을 클릭하면 아래와 같이 확인하실 수 있습니다. https://nodejs.org/dist/latest-v12.x/docs/ap..

[node.js] 설치및 구동

node.js는 크롬 V8엔진을 기반으로 한 서버 플랫폼으로서 철저한 비동기 방식으로 동작하는 고성능 서버를 구현할 수 있습니다. node.js는 아래 주소에서 내려받을 수 있습니다. https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 사이트를 방문하면 대략 2가지 정도의 다운로드 버튼을 볼 수 있는데 이 중 LTS는 Long Time Support로 지속적인 지원을 하고 있는 안정 버전을 의미합니다. 사실 뭘 내려받아 설치해도 큰 상관은 없으나 이번 글에서는 node.js LTE버전을 설치해 보도록 하겠습니다. 설치 운영체제는 윈도우서버 2016이며 파일을 ..

[jQuery] 전역함수

jQuery에서 전역 함수는 다음과 같이 생성합니다. javascript에서 단순 함수를 만들어 사용해도 되는 부분이지만 jQuery에서는 이렇게 사용하는 것도 가능하다는 것만 참고로 하면 될 것 같습니다. $.[함수명]의 형태로 선언한 뒤에 원하는 함수를 구현하고 $.[함수명]의 형태로 호출합니다. 만약 함수를 호출하는데 선택자가 사용되어야 한다면 jQuery의 fn속성을 사용해야 합니다. $.fn.myfunc = function () { $(this).animate({ opacity: 0.2 }, 'slow', function() { alert('완료'); }); }; $(function () { $('img').myfunc(); }); 이때 this는 선택자에서 선택된 요소를 의미하며 함수를 호출할..

[jQuery] 효과

1. 기본 메서드 JQuery는 시각적인 효과를 내기 위해 기본적으로 아래의 메서드를 제공하고 있습니다. show() 화면에 표시합니다. hide() 화면에서 숨김니다. toggle() show()와 hide()가 번갈아 실행됩니다. slideDown() 슬라이드 형태로 표시합니다. slideUp() 슬라이드 형태로 숨김니다. slideToggle() slideDown()과 slideUp()을 번갈아 실행합니다. fadeIn() 페이드 형태로 표시합니다. fadeOut() 페이드 형태로 숨김니다. fadeToggle() fadeIn()과 fadeOut()을 번갈아 실행합니다. ※ 번갈아 실행된다는 의미는 예를 들어 show()일 때 hide()를 한번 수행하고 hide()일 때 show()를 한번 수행한..

[jQuery] 이벤트 다루기

1. 이벤트 이벤트는 '사건'을 의미합니다. 요소를 클릭하는 경우에는 클릭이라는 행위 자체를 하나의 이벤트라고 볼 수 있으며 ready와 같은 경우에도 문서가 준비됨을 알리는 이벤트라고 할 수 있습니다. 2. 이벤트 연결 jQuery에서 이벤트를 연결하는데 사용되는 메서드로 on이 있습니다. 이벤트를 연결하는 기본적인 메서드입니다. 아래 예제에서는 요소를 클릭했을 때 이벤트를 연결하는 과정을 보여주고 있습니다. 클릭 문자열 이외에 객체를 통한 이벤트 연결도 가능합니다. $(function () { $('span').on({ click: function() { alert($(this).text()); } }) }); 위 예제의 경우 this키워드가 사용되었는데 바로 이벤트를 발생시킨 요소를 의미합니다. t..