CLIEL LAB

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

Web/JQuery 2020. 6. 30. 23:46

1. 설치 및 구동 node.js에서 express모듈은 웹서버를 만들 수 있도록 해줍니다. express모듈은 외부 모듈이므로 다음과 같이 설치합니다. 그리고 임의의 js파일을 만들어 express모듈의 서버를 구동할 수 있도록 합니다. 여기서는 작성할 파일명을 test.js로 하겠습니다. var express = require('express'); var server = express(); server.listen(8080, function() { console.log('Welcome to server!'); }); require('express')로 모듈을 추출한 다음 listen메서드로 서버 구동을 시작합니다. 예제를 위해 node.js를 설치한 서버는 윈도우서버입니다. test.js파일 내용을 ..

Server/node.js 2020. 6. 25. 01:11

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..

Server/node.js 2020. 6. 22. 01:53

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이며 파일을 ..

Server/node.js 2020. 6. 21. 04:47

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

Web/JQuery 2020. 6. 17. 01:17

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

Web/JQuery 2020. 6. 16. 01:09

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

Web/JQuery 2020. 6. 11. 01:14

jQuery는 문서 내부의 요소를 변경하는 여러가지 메서드를 사용할 수 있습니다. (1) addClass() 요소에 클래스 속성을 추가합니다. 자동차 자전거 비행기 배 오토바이 문자열 형태의 값을 지정하는것 이외에 매개변수로 함수를 지정할 수도 있습니다. 이는 이후에서 살펴보는 대부분의 메서드에 동일하게 적용됩니다. $(function () { $('div').find('span').each(function (index) { $(this).addClass(function (index){ return 'myclass'; }); }); }); (2) removeClass() 클래스 속성을 제거합니다. 자동차 자전거 비행기 배 오토바이 만약 요소에 여러 클래스가 지정되어 있는경우 특정 클래스만 제거하고자 한다..

Web/JQuery 2020. 6. 7. 02:00