FEDev Story

출처 : https://www.zerocho.com/category/HTML/post/59155228a22a5d001827ea5d 안녕하세요. HTML5에 도입된 자바스크립트 API 첫 시간으로 Geolocation을 선정했습니다. 요즘 핸드폰 앱들을 보면 GPS 정보를 요구하는 앱들이 많죠. GPS 정보를 맞아서 자신 주변의 맛집이나 정보들을 찾아줍니다. 이제 웹에서도 GPS 정보를 가져올 수 있습니다. 보통 위치 정보는 핸드폰 GPS, IP주소나, WIFI, 기지국 위치 등을 사용해 찾아냅니다. 웹에서는 살짝 정확성이 떨어질 때도 있지만 GPS를 사용할 수 있다는 것 자체가 행운입니다.HTML 강좌이지만 지난 강좌들과는 다르게 자바스크립트가 들어가기 때문에 자바스크립트를 어느 정도 알고 계셔야 진행할..

웹 애플리케이션 구동 과정 1. URL entered : 사용자가 웹브라우저에서 사이트 주소를 입력한다. 2. DNS Lookup : DNS를 이용하여 사이트 주소에 해당되는 Server IP를 접근한다. 3. Socket Connection :Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결. 4. HTTP Request : Client에서 HTTP Header와 데이터가 서버로 전송 5. Content Download : 해당 요청이 Server에 도달하면 사용자가 원하는 문서를 다시 웹브라우저에 전송한다. 6. Browser Rendering : 브라우저의 렌더링 엔진이 해당 문서를 다음과 같은 순서로 파싱한다. HTML을 DOM(Document Object Model)으로 변..

유명함수는 재귀를 만드는 데 편리하다. 다음은 깊이를 가진 배열을 펴 주는 flatten 함수다. 재귀, 유명 함수, 괄호없는 즉시 실행 등의 기법이 사용되었다. function flatten(arr) { return function f(arr, new_arr) { // (1) arr.forEach(function(v) { Array.isArray(v) ? f(v, new_arr) : new_arr.push(v); // (3) }); return new_arr; }(arr, []); // (2) } flatten([1, [2], [3, 4]]); // [1, 2, 3, 4] flatten([1, [2], [[3], 4]]); // [1, 2, 3, 4] flatten([1, [[2], [[3], [[4]..

HTML 요소는 속성(attribute)을 갖고 있으며, 자바스크립트로 이 속성을 액세스할 수 있다. /** * Accessing attributes */ el.setAttribute( "tabindex", "-1" ); if ( el.hasAttribute( "tabindex" ) ) {} el.getAttribute( "tabindex" ); el.removeAttribute( "tabindex" ); 요소의 속성은 HTML에서 정의되지만, 프로퍼티(property)는 DOM에서 정의된다. 이것이 약간의 차이를 만든다. 예를 들어, 속성과 프로퍼티(el.value)의 초기값이 같은 input 요소가 있다고 가정해보자. 사용자 또는 스크립트가 값을 변경하면 프로퍼티(property)는 영향을 받지만, ..

el.classList 스타일이 필요할 때 el.classList를 사용한다. www.jsfiddle.net/1m33vjcv/4/embed/ 위 예제에서 toggle 메서도는 두번째 인수로 전달되는 부울 값에 따라 지정된 클래스를 추가하거나 제거한다. 명시적 스타일 el.style 속성을 사용해 요소에 동적인 스타일 정보를 읽거나 설정할 수 있다. 또는 cssText를 사용해 스타일을 한번에 지정할 수 있다. www.jsfiddle.net/9n6Lp7b5/1/embed/ window.getComputedStyle window.getComputedStyle는 상속된(계산된) 스타일을 반환한다. /** * Getting computed styles */ var el = document.querySelecto..

동적으로 DOM 트리에 새로운 요소 삽입하기 - el.innerHTML로 HTML 생성 /** * Insert elements into DOM #2 */ var target = document.getElementById( "target" ); target.innerHTML = ""; - 노드 생성후 추가 var target = document.getElementById("target"), div = document.createElement("div"); target.appendChild(div); 문제점 el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다. 최적화 유사한 요소를..

DOM 탐색 방법 ID로 요소 검색 (document.getElementById) 태그 이름으로 검색 (document.getElementByTagName) CSS 선택자로 요소 검색 (document.querySelector) Lorem ipsum 선택자는 하나 이상의 타입(태그) 선택자와 클래스 선택자, ID 선택자, 속성 선택자 또는 의사 클래스 선택자로 매우 다양한 조합이 가능하기 때문에 자바스크립트에서 HTML 요소를 바인딩하는 것은 쉽지 않다. 따라서 data-* 속성 선택자를 사용할 것을 추천한다. Lorem ipsum 이 방법은 HTML 구조에서 자유로우며 CSS 클래스 독립적이기 때문에 안전하게 CSS를 리팩토링할 수 있다. 또한 문서마다 고유한 값을 가지는 ID에 한정되지도 않는다. q..

스크린의 크기는 모니터의 크기와 브라우저 뷰포트의 크기가 있다. 이를 알아내는 방법은 아래와 같다. (실행) window.inner*은 뷰포트의 크기를 나타내고, screen.*은 스크린의 크기, 즉, 모니터의 해상도를 나타낸다.

그럼 문서의 스크롤 값을 변경하는 것은 어떻게 하는 것일까? window.scrollTo(x, y)를 이용하면 된다. (실행) 아래 코드는 버튼을 클릭하면 문서의 스크롤을 아래로 1000px 이동시킨다. Coding

요소의 위치를 생각할 때는 사실 조금 더 복잡해진다. 문서가 브라우저의 크기보다 큰 경우는 스크롤이 만들어지는데 스크롤에 따라서 위치의 값이 달라지기 때문이다. 이를 이해하기 위해서는 우선 viewport에 대한 이해가 선행되어야 한다.viewport의 좌표위의 그림처럼 뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미한다. 이에 따라서 문서의 좌표가 있고 뷰포트의 좌표가 있다. 위에서 살펴본 getBoundingClientRect는 viewport의 좌표를 사용한다. 아래 예제를 실행해보면 1초에 한번씩 getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 출력된다. (실행) Coding 이를 통해서 알 수 있는 것은 getBoundingClientRe..

우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. (실행) Coding 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect이다. 이를 콘솔에서 실행한 결과는 아래와 같다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 된다는 것을 알 수 있다. getBoundingClientRect의 width 값을 IE는 제공하지 않는다.만약 엘리먼트가 중첩되어 있다면 어떻게 될까? 위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBou..

텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작과 관련된 API들의 목록이다.appendData() - 텍스트 노드의 끝에 파라미터로 전달된 데이타를 추가한다.deleteData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택해 삭제한다.insertData() - 텍스트 노드에서 첫번째 파라미터의 위치에 두번째 파라미터에 전달된 데이타를 삽입한다.replaceData() - 텍스트 노드에서 첫번째 파라미터에서 두번째 파라미터까지 텍스트를 선택해서 세번째 파라미터에 전달된 데이타로 교체한다.substringData() - 텍스트 노드에서 첫번째 파라미터에서 시작해서 두번째 파라미터까지 텍스트를 선택..

텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 값을 가져오는 두개의 API를 알아본다.nodeValuedata html css JavaScript

소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world 실행결과: Hello world TypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"} Hello world 주요기능값텍스트 노드의 값을 가져오는 APIdatanodeValue조작appendData()deleteData()insertData()replaceData()subStringData()생성docuemnt.createTextNode()

소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 주요 API노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.createElement()createTextNode()문서 정보 APItitleURLreferrerlastModified

innerHTMLinnerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTMLouterHTML은 선택한 엘리먼트를 포함해서 처리된다. innerText, outerTextinnerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. insertAdjacentHTML()좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다. target.insertAdjacentHTML('beforebegin', '...'); beforebegin은 target 노드의 앞에 두번째 인자인 H1 노드 객체를 삽입한다..

출처 : 생활코딩 (https://opentutorials.org/course/1375/6701) 노드 추가노드의 추가와 관련된 API들은 아래와 같다.appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다.노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다.document.createElement(tagname) 엘리먼트 노드를 추가한다.document.createTextNode(data) 텍스트 노드를 추가..

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.)nodeType노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log(name, Node[name]); } 실행결과: ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESS..

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.Node.childNodes 자식노드들을 유사배열에 담아서 리턴한다.Node.firstChild 첫번째 자식노드Node.lastChild 마지막 자식노드Node.nextSibling 다음 형제 노드Node.previousSibling 이전 형제 노드아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM

소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주로 사용하는 노드 객체는 다음과 같다. 문서 노드(Document) - 전체 문서를 가리키는 Document 객체 요소 노드(Element) - HTML 요소를 가리키는 객체 텍스트 노드(CharacterData) - 텍스트를 가리키는 객체 주요기능 Node 객체의 주요한 임무는 아래와 같다. 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.parentNode - 이 노드의 부모 노..

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.Element.getAttribute(name)Element.setAttribute(name, value)Element.hasAttribute(name);Element.removeAttribute(name); opentutorials 속성과 프로퍼티모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. Hello world setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다. 하지만 전자는 attribute 방식(속..

조회 API는 엘리먼트를 조회하는 기능이다. 지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. textContent는 엘리먼트 객체의 텍스트 컨텐츠를 담고 있는 프로퍼티다. html css JavaScript JavaScript Core DOM BOM var list = document.getElementsByClassName('marked'); consol..

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.Element.tagName해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다. document.getElementById('active').tagName Element.id문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id의 값을 읽고 변경하는 방법을 보여준다. var active = document.getElementById('active'); console.log(active.id); active.id = 'deactive'; console.log(act..

소개Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.다른 객체들과의 관계DOM의 계층구조에서 Element 객체의 위치는 아래와 같다.주요기능식별자문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 APIEle..

HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다. HTMLCollection HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자. HTML CSS JavaScript 결과

출처 : 생활코딩 (https://opentutorials.org/course/1375/6665)HTMLElementgetElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 아래 코드는 getElement*의 리턴 값을 보여준다. HTML CSS JavaScript 실행결과: HTMLLIElement HTMLCollection 이것을 통해서 알 수 있는 것은 아래와 같다. document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTM..

프로토타입 오염모든 객체는 그 prototype 객체의 프로퍼티들을 상속하고 for...in 반복문은 객체의 상속된 프로퍼티 또한 자신이 '소유한' 프로퍼티로 열거한다. 다음 코드와 같이 요소를 객체 자신의 프로퍼티로 저장하는 사용자 정의 생성자와 Array 타입을 사용하여 객체를 생성하게 되면 프로토타입을 오염시킬 수 있다. function NaiveDict() { } NaiveDict.prototype.count = function() { var i = 0; for (var name in this) { // counts every property i++; } return i; }; NaiveDict.prototype.toString = function() { return "[object NaiveDi..

출처 : http://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068예제 : http://plnkr.co/edit/35HfLWfs71dnPHzULZU8요즘에는 점점 더 많은 웹사이트들이 GIF, SVG, WebGL, 배경 비디오 등의 형태를 이용하여 애니메이션을 사용하고있습니다. 제대로 사용한다면 웹 상의 애니메이션들은 웹사이트의 활력을 불어넣고 상호작용을 이끌어낼 수 있으며 이는 별도의 피드백 요소와 경험을 사용자에게 추가로 제공하는 역할을 할 수 있을 것입니다.이 튜토리얼에서는 CSS 애니메이션을 소개할 것입니다. CSS 애니메이션은 높은 성는 기준에 맞는 방법으로브라우져 지원이 좋아지면서 ..

자바스크립트 제대로 공부하는 방법※ 이 글은 How to Become a Great JavaScript Developer의 번역판입니다.저는 커가면서 점차 관심 분야가 다양해지고, 겉으로 보기에는 무관한 영역까지 넓어져 갔습니다. 저는 수학을 역사 만큼 좋아했었죠. 저의 목표는 여러 분야에 능통한 르네상스 맨(박식가)이 되는 것이었습니다. 그것은 아주 힘든 일 이란 것을 알게 되었고, 갑자기 저는 여러 분야를 알지만 한 분야에도 능통하지 못한 사람이 되는 위험성과 마주했습니다.저는 르네상스 시대의 사람들처럼 될 순 없더라도 적어도 한 분야 만이라도 마스터한 사람이 되기 위해, 확실하게 어떤 분야를 전문적으로 해야겠다고 생각했습니다. 어떻게 하면 소프트웨어 개발에 필요한 어마어마한 양의 지식을 유지하면서 ..

vim은 그 자체로도 상당히 강력하지만, 쉘과 함께 사용함으로써 서로의 강력함을 곱할 수 있다. vim과 쉘을 연동해서 쓰는 방법들을 몇가지 소개한다.여기서 소개하는 방법들은 gvim이 아닌 터미널에서 실행하는 vim을 위한 것이다.쉘로 나갔다가 돌아오기vim 사용중에 Ctrl+z로 쉘로 나가서 명령을 실행한 뒤, 쉘에서 fg를 입력해 vim으로 돌아온다. 이건 vim과는 아무 상관도 없는 기능이지만, 사실 vim에서 쉘 명령을 써야 할 때 가장 많이 쓰는 방법이다. (쉬우니까)screen 혹은 tmuxvim은 자신 안에서 쉘을 띄우는 기능이 없다. 플러그인이 있긴 한데 그다지 쓸만하지 않다. 필요하다면 그냥 screen이나 tmux를 써서 창을 쪼개 한쪽 창에 vim을 띄우는 것이 훨씬 낫다.옛날엔 s..