들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요. 로딩 페이지 (loading-page.html) 아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 ..

들어가며 처음에 javascript, jQuery, ejs를 사용을 하다보면 각 역할을 유기적으로 연결하는게 참 어려운 문제라고 생각합니다. ejs에서 선언한 값을 어떻게 가져오는지, jQuery로 가져온뒤에 javascript에서는 어떻게 처리를 해야하는지도 감이 안올때가 있습니다. 간단한 예제중에 입력창에 입력을 받고, 입력한 데이터를 가져오는 버튼을 구현하면서 ejs와 jQuery, javascript를 전체적으로 연결하는 연습을 할 수 있습니다. 아래 예제는 입력창과 버튼을 ejs로 생성을 하고, javascript에서 jQuery를 이용해 input과 button의 reference의 값을 가져온 뒤에 이벤트를 바인딩하고 결과를 가져오는 예제입니다. 소스코드 search_view.ejs 아래 소..

들어가며 JavaScript에서 웹 개발을 할때 Front의 코드를 구현할때 Ajax를 이용하면 쉽게 서버로부터 데이터를 받아오고, 전송을 할 수 있다. 아래 소스코드는 nodeJs와 같이 웹 서버 프레임워크가 설치가 되어있고, 서버가 실행이 되어 있어, 해당 요청 URL을 처리를 할 수 있는 상태가 필요하다. 전송하는 방법은 앞서 설명했던 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만. POST로도 데이터 전송이 가능하다는 점~ 서버에서 Web Front로 데이터 전송 서버로 부터 초기의 데이터를 Web Application으로 불러오는 소스코드입니다. ajax로 설정한 url을 요청을 하면..

JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제 들어가며 만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다. APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 ..

| 참을 수 없는 거부감, 자바스크립트 함수 저번 포스팅에서 이야기한 것처럼 자바스크립트의 자유분방함은 자바에 어느정도 익숙한 나에게는 상당한 거부감으로 다가오고 있다. 자바보다 유연한 언어인 파이썬을 학습하면서도 이러한 거부감은 없었다. 이 거부감의 원인은 자바스크립트를 계속 학습하면서 깨닫게 되었다. 바로 낯선 "자바스크립트의 함수 동작 과정" 때문이란 것을 알게 되었다. 자바스크립트의 함수 동작 과정을 완전히 이해하기 위해서는 Scope Chaining, Lexcial Context, 함수 선언 방법, 함수 실행 방법 등 여러 가지 개념과 경우들을 따져야하기 때문이다. 자바스크립트는 일급함수다! 따라서 변수에다가 할당할 수도 있고 반환할 수도 있다! 클로져도 됨! 이라는 단순한 개념만 잡고 들어갈 ..

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) 전체 시스템에서 하나의 인스턴스만 존재하도록 보장하는 객체패턴을 말합니다. Singleton 모듈을 생성합니다 init : 제공하고싶은 함수들을 모두 작성합니다 (print, ...) getInstance : 함수를 호출한 다음 init에서 제공하는 함수를 이용할 수 있도록 init 함수를 instance에 담아서 리턴합니다 작성코드 var Singleton = (function(){ var instance; var init = function(){ return { print : function(){ console..

자바스크립트의 연산자는 대부분 다른 언어와 비슷하기 때문에 전반적인 설명은 아래에 정리한 우선순위를 보면 충분할 듯 합니다. 다만 오해의 소지가 있는 것들만 몇 개 정리하도록 하겠습니다. 1) / 연산자자바스크립트는 숫자가 모두 64비트 double 형이기 때문에 5 / 2 의 값이 C나 Java처럼 2가 아닌 2.5가 되는 것을 주의해야 합니다. console.log(5/2); // 2.5 2) typeof null이전 글(http://zeany.net/56) 에서도 살펴봤는데, null이 할당된 변수의 typeof나 null 자체의 typeof는 null이 아닌 object 입니다. var x = null; console.log(x); // nullconsole.log(typeof x); // obj..