들어가며: 모든 사이트에 하나씩은 있는 팝업을 구현하는 방법에 대해서 설명을 하려고 합니다. 팝업을 열어주는 방법은 매우 간단하게 구현이 가능하지만, 오늘 하루 열지 않기, 하루 동안 열지 않기를 구현하기 위해서는 쿠키(cookie)를 사용해야 합니다. 쿠키는 간단하게 말하면, 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 말합니다. 사용자의 접속을 기록으로 남길 수 있고, 사용자가 방문한 시간으로부터 30초, 10분 등 다양하게 쿠키를 저장하고, 만료(expire)를 시킬 수 있습니다. 만료를 시킨다는 내용은 그 시간 이후에 이 쿠키파일을 없애겠다 라는 말입니다. ..

들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 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을 요청을 하면..

들어가며 JavaScript를 하면서 가장 많이 사용하는게 Collection이 리스트라고 생각한다. 그 다음에는 Dictionary가 아닐까 싶다. 사실 Python을 할 때도 Dictionary는 매우 유용하게 자주 사용한다. Dictionary는 key, value의 pair로 저장하게 되는데 리스트에서 인덱스로 접근하는거와 다르게 key의 값으로 접근하기 때문에 원하는 값을 찾을때 빠르게 찾을 수 있는게 장점이다. 아래 예제 정도만 알면 Dictionary 구현은 쉽게 할 수 있지 않을까 싶다. 추가적으로 필요한 내용이 생각나면 바로바로 추가를 해야겠다. 소스코드 // Dictionary 사용하는 방법 var dictObject = {} dictObject['banana'] = '바나나'; dic..

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

현재 자그마한 쇼핑몰 솔루션을 사이트 프로젝트로 시작하는 중이다. 원래는 자바 기반 백엔드 쪽을 담당하고 있지만 결국에 클라이언트에게 제공해야할 화면을 만들어야 되기 때문에 자바스크립트를 공부하고 있는 중이다. 자바를 주로 하다가 자바스크립트를 공부하면서 그 유연성과 복잡스러움(?)을 느끼고 있고 동적 타입 언어가 제공하는 특징때문에 여러가지로 학습하는 데 애로사항이 피고 있다. 자바스크립트의 자유분방함은 아직 어색하기만 하다. 특히나 자바스크립트에서 프로그램이 어떻게 인터프리터에 의해 해석되고 실행되는 지 알 수 없는 상태에서 코드를 짜려고 보니 자바와 같은 컴파일 언어에서는 이해할 수 없는 동작방식으로 돌아갈 때 심히 당황하게된다. 이 기회에 헷갈리는 것들을 아예 정리하려고 이 글을 포스팅했다. | ..

참조문서 https://developer.mozilla.org/ko/docs/Web/JavaScript http://www.ecma-international.org/ecma-262/6.0/ https://www.slideshare.net/WooyoungCho/ecmascript-6-64456124 흔히 생각하는 javascript는 2009년에 제정되고 11년에 개정된 ECMAScript 5.1 표준이다. ES6에서는 arrow functions, class, 향상된 객체리터럴, let과 const, iterator, for-of 등이 추가되었다. 좀더 나은 fp와 oop를 가능하게 해준다. 또한 기존 ES5코드와 모두 하위호환이 된다. 여기서는 ES6에 추가된 사항을 중점적으로 정리한다. 또한 몰랐던 ..

참조문서 https://www.html5rocks.com/ko/tutorials/speed/v8/ https://github.com/v8/v8/wiki 자바스크립트 엔진은 javascript로 작성된 코드를 해석하고 실행하는 인터프리터다. js엔진은 브라우저 벤더별로 다양하다. Mozilla의 Monkey시리즈, 자바의 바이트코드로 컴파일해주는 Rhino, 구글 크롬의 V8, Safari의 JavascriptCore, Explorer의 Chakra 등이 있다. 여기서 nodejs는 구글의 V8 JavaScript 엔진을 기반으로 동작한다. 우리가 자주쓰는 크롬브라우저도 V8엔진을 쓴다. 성능좋은 코드를 위해 V8을 알아보자 1. Hidden Class로 빠른 프로퍼티 접근과 정적 룩업 다른 JavaScr..

참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..