관성을 이기는 데이터

DOM(Document Object Model) DOM은 브라우저가 제공하는 객체(BOM-Browser Object Model) 중 하나로 BOM의 가장 상위 객체인 Window의 하위 객체라고 볼 수 있다. 넓은 의미로 DOM은 웹브라우저가 HTML 문서를 인식하는 방식을 말하며 객체 참조를 통해 이루어진다. DOM이 제공하는 기능은 C(create), R(read), U(update), D(delete) 4가지다. DOM을 사용해보자. javaScript로 Html을 조작하기 위해 DOM을 사용해서 접근할 수 있다. let elmts = document.getElementsByTagName('div'); 이렇게 getElements라는 복수 형태를 사용하면 변수 elements는 배열 형태로 div를..

ES5까지 자바스크립트에서 변수를 참조할 수 있는 유효 범위의 단위는 함수였다. 예를 들어 코드에 함수가 하나 존재한다면 함수 밖의 변수는 Global Scope, 함수 안의 변수는 Local Scope 내에서만 호출할 수 있다. 변수를 선언할 수 있는 유일한 방법은 var를 키워드를 사용하는 것인데, var는 변수의 중복과 키워드 생략을 허용한다는 점에서 의도하지 않은 결과를 나타낼 수 있다. 그리고 유효범위, 즉 스코프의 단위가 함수라는 점에서 함수 내의 for문 또는 if문에서만 필요한 변수가 함수 전역에 머물러 있기 때문에 변수 사용이 끝난 시점에도 불필요한 메모리를 낭비하게 된다. 변수를 선언할 때 'var' 키워드를 사용한다면 이때의 변수는 항상 포함된 함수 scope 혹은 Global Sco..

자바스크립트의 문법은 크게 '식'과 '문'으로 나뉜다. 식(expression)은 곧 값을 의미하며 문(statement)은 식을 이루는 방식을 지시, 제어한다. 예를 들어 if(조건문)나 while(반복문)과 같은 문법이 '문'이라면 1+1, 2>1, [a,b,c], function(x,y) 등은 '식'이다. 단, 값의 이동은 '문'이다. var a = 1과 같은 대입 연산을 말한다. 여기서 또 하나의 특징은 값이라고 정의된 모든 데이터는 변수에 넣을 수 있다는 것이다. 이러한 특징 때문에 함수와 배열 역시 특정 변수에 담을 수 있다. 그리고 함수는 '식'이기 때문에 항상 '값'을 반환하는데 이때 우리는 'return'을 사용해서 함수를 통해 호출하고자 하는 값을 지정해줄 수 있다. 반대로 if, wh..

HyperText Markup Language HTML은 프로그래밍 언어가 아닌 '마크업 언어' 라고 불린다. 즉, 제목과 단락을 구분하고, 문서의 전체적인 틀을 표시하는 다양한 '태그'들로 이루어진 '약속된 표기 방식' 정도로 이해할 수 있다. 그러한 이유로 마크업 언어인 HTML은 시간의 흐름과 제어에 따라 한 줄씩 읽어나가며 실행시키는 JavaScript와 같은 프로그래밍 언어라고 보기 어렵다. 참고로 현재 가장 진보된 HTML인 HTML5에서는 '시맨틱 태그(Semantics)'가 추가되면서 코드를 볼 때 글의 각 구성 요소에 대해 명확한 구분이 가능하게 되었다. 이제 HTML 코드가 어떻게 생겼는지 살펴보자. 다음은 투두리스트 화면을 만드는 예시코드다. 문서를 시작한다. 몸통을 그린다. 문서를 ..

Pm2는 NodeJS의 Package Manager인 'NPM'을 통해 설치할 수 있는 Package 중 하나로 단순 반복 작업을 도와주면서 에러를 실시간으로 감시하게 해주는 고마운 모듈이다. 생활코딩으로 유명하신 '이고잉'님의 말을 빌리면 NPM은 NodeJS계의 앱스토어다. 주 기능은 NodeJS를 사용하는 서버 측 관리자에게 편의를 제공하는 것이다. NodeJS로 구동하는 서버가 무너지지 않게 유지해주고, 코드를 리로드 하고 잘 동작하는지 확인하는 과정을 전체를 편리하게 해주면서 전체 프로세스 과정에서 매번 발생하는 로그를 실시간으로 보여준다. 왼쪽은 현재 구동하고 있는 스크립트, 오른쪽은 전역에서 발생하는 로그를 보여준다. 강제로, 혹은 실수로 서버가 다운된다면 오른쪽에서 그러한 내용을 보여주면서..