티스토리

개발자할래요
검색하기

블로그 홈

개발자할래요

iskull-dev.tistory.com/m

iskull 님의 블로그입니다.

구독자
7
방명록 방문하기
공지 블로그 이동 모두보기
728x90

주요 글 목록

  • 서버 사이드 자바스크립트와 node.js 사실 서버 사이드 자바스크립트는 예전에 생겼다가 사라진 적이 있다. 넷스케프에서 개발했던 웹 애플리케이션 서버인 Netscape Enterprise Server를 이용하면 서버 사이드 자바스크립트로 웹 애플리케이션을 개발할 수 있었다. 하지만 넷스케이프의 쇠퇴와 함께 서버 사이드 자바스크립트 기술도 사라졌다. 그러다 JS자체의 인기가 높아짐에 따라 서버 사이드 자바스크립트도 인기를 얻었고 Node.js가 등장하게 된다. Node.js는 구글에서 발표한 JS 엔진인 V8과 비동기 네트워크 처리를 강점으로 확장성 높은 웹 애플리케이션을 만들 수 있다. CommonJS 클라이언트 사이드 자바스크립트는 DOM이라는 사실상의 표준 확장 API가 존재한다. 하지만 서버 사이드 자바스크립트는 그런 것이 존재하지 않는.. 공감수 13 댓글수 0 2022. 1. 23.
  • 웹 API API(Application Programming Interface)는 애플리케이션과 시스템 간의 경계를 가리키는 용어이다. 프로그램 개발자 입장에서 애플리케이션의 코드는 라이브러리의 함수나 클래스 라이브러리를 이용한다. 따라서 개발자의 입장에서 보면 API는 함수나 클래스의 사양이다. 웹 API가 상정하는 시스템은 웹 서비스이다. 웹 서비스를 이용하는 애플리케이션은 이 둘 사이의 작업을 HTTP를 통해 수행한다. 애플리케이션은 웹 서비스에 HTTP요청을 던지고 응답을 받는다. 이때의 통신 규약이 웹 API이다. SOAP(Simple Object Access Protocol) HTTP를 RPC로 사용하는 시도가 있다. RPC는 프로세스간 통신을 위해 사용하는 IPC(Inter Process Communi.. 공감수 0 댓글수 0 2021. 12. 20.
  • Client-side Javascript JS의 역할 JS의 역할 중 하나는 좋은 UX를 제공하는 것이다. 하지만 다음과 같은 이유로 JS만으로 모든 기능을 실현할 수 없다. 1. 많은 브라우저에서 JS를 실행하지 않게 설정할 수 있다. 2. 사용자가 직접 JS를 추가실행하는 기능을 제공하는 브라우저가 있다. 즉, 웹 사이트를 제공하는 쪽이 의도한 대로 JS를 실행할 수 없는 경우가 발생한다. HTML과 JS 웹브라우저가 웹 페이지를 표시할때는 다음과 같은 과정을 거친다. 1. HTML을 파싱 2. 외부 JS파일, CSS파일 로드 3. JS가 전달돈 시점에 실행 4. DOM트리 구축완료 5. 이미지 파일 등 외부 리소스 로드 6. 완료 JS 작성 방법과 실행 타이밍 HTML문서안에 JS를 작성할 수 있는 방식은 여러가지이며 방식마다 실행 시점이.. 공감수 0 댓글수 0 2021. 10. 25.
  • 함수와 클로저 함수를 절차를 정리할 목적으로 사용하지만 단순히 그 뿐만 아니라 함수 자체를 연산의 대상으로 삼는 것과 클로저를 이해해야 함수형 프로그래밍을 이해할 수 있다. 함수 선언문과 함수 리터럴 식 함수 선언문과 함수 리터럴 식에서 함수를 선언할 수 있다. 함수 선언문에서 선언한 함수는 함수 언선부가 나오기 전에 호출할 수도 있다(함수 선언문의 역행). 함수 호출 정리 함수 호출의 차이를 토대로 함수의 분류를 다음과 같이 나눌 수 있다. 이는 함수 자체로 분류를 한것이 아니다. 따라서 특정 함수를 메서드 또는 생성자라 부르는 것은 엄밀히 말하면 잘못된 표현이다. 정확히 말하자면 그 함수를 메서드 또는 생성자로서 호출했는지 여부이기 때문이다. 즉, 함수, 메서드, 생성자는 호출 방법의 차이에 불과하다. 명칭 설명 .. 공감수 0 댓글수 0 2021. 10. 1.
  • 1.15 Converting a NodeList or HTML Collection to a JavaScript Array NodeList와 HTML Collection은 array 메서드를 상속받고 있는 유사베열이지 실제 js 배열이 아니다. 이런 유사배열을 실제 js 배열로 변환하면 다음과 같은 이점을 얻을 수 있다. 1. DOM을 참조하고 있지 않는 리스트의 스냅샷을 만들 수 있다. 2. Array 객체에서 제공하는 메서드들을 사용할 수 있다. 유사 배열을 배열로 변환하기 위해서는 다음과 같은 코드를 사용하면 된다. 1 Array.prototype.slice.call(liveLists); cs ES6부터 Array 객체에 Array.from()이라는 메서드가 추가됬다. 이 메서드는 유사배열 객체를 new Array()로 바꾸고 이를 반환한다 출처: DOM Enlightement 공감수 0 댓글수 0 2021. 9. 25.
  • 1.14 Getting a List/Collection of all Immediate Child Nodes childNodes 프로퍼티를 사용하면 유사배열(NodeList) 형태로 자식 노드들을 가져올 수 있다. 여기서 가져올 수 있는 노드들은 childNodes를 사용할 리시버 객체의 직접적인 자식이다. 다음과 같은 노드들을 직접적인 자식이라 한다. 1 2 3 4 5 6 7 8 e r Colored by Color Scripter cs childNodes는 Element 노드들 뿐만 아니라 다른 노드들도 포함한다. 출처: DOM Elightement 공감수 0 댓글수 0 2021. 9. 7.
  • 1. 13 Grokking Node Collections(i.e. NodeList and HTMLCollection) 트리에 있는 노드 그룹을 선택하거나 접근하게 되면 그 노드들인 NodeList 또는 HTMLCollection에 위치하게 된다. 이런 유사배열 객체는 다음과 같은 성질을 가진다 1. 하나의 컬랙션은 라이브 객체 또는 스태틱 객체이다. 즉, 컬랙션에 포함된 노드들은 라이브 문서의 한 부분이거나 라이브 문서의 스냅샷이다. 2. 기본적으로, 컬랙션 내부에 있는 노드들은 트리의 노드 순서대로 정렬되 있다. 3. 컬랙션들을 length프로퍼티로 해당 리스트에 존재하는 노드들의 갯수를 반영한다. 공감수 0 댓글수 0 2021. 9. 2.
  • 1.12 Using cloneNode() to Clone Nodes cloneNode()를 사용하면 하나의 노드 또는 하나의 노드와 그의 자식 노드들을 복사할 수 있다. 하나의 노드만 복사하고 싶다면 인자를 넘기지 않으면 되고 하나의 노드와 그의 자식 노드들을 전부 복사하고 싶다면 인자고 ture를 넘기면 된다. Element 노드를 복사하게 되면 그의 속성과 값들이 전부 복사 된다. 하지만 addEventListener() 또는 node.onClick으로 추가된 이벤트들은 복사되지 않는다. 또 한 요소로 그려진 이미지도 복사되지 않는다. cloneNode()를 사용해 복제된 노드들은 appendChild()와 같은 메서드들을 사용하지 않는 한 문서에 존재하지 않는다. cloneNode(true)는 NodeList를 반환하지 않는다. cloneNode()는 요소의 id값.. 공감수 2 댓글수 0 2021. 9. 1.
  • 1.11 Using removeChild() and replaceChild() to Remove and Replace Nodes 돔에서 노드를 지울려면 여러 과정을 거쳐야 한다. 우선 지움의 대상이 되는 노드를 선택한 후 parentNode를 사용해 그의 부모를 선택하고 지움의 대상이 되는 노드를 인자로 넘겨서 노드를 지운다. 1 2 var divA = document.getElementById('A'); divA.parentNode.removeChild(divA); cs replaceChild()의 경우 리시버 객체는 부모, 첫번째 인자는 새로운 노드, 두번째 인자는 바꿈의 대상이 되는 노드를 넘기면 된다. 1 2 3 4 var divA = document.getElementById('A'); var newSpan = document.createElement('span'); newSpan.textContent = 'Howdy';.. 공감수 0 댓글수 0 2021. 8. 31.
  • 1.10 Using appendChild() and insertBefore() to Add Node Objects to the DOM appendChild()와 insertBefore() 노드 메서드는 DOM 트리에 js 노드 객체를 추가할 수있게 해준다. appendChild() 메서드는 메서드를 호출 한 노드의 맨 마지막에 자식 노드를 하나 추가 한다. 만약 위치를 선택해 자식을 추가해야할 경우 insertBefore()를 사용하면 된다. insertBefore()는 두 개의 파라미터를 필요로 한다. 하나는 추가될 노드, 하나는 추가해야될 노드의 위치에 대한 레퍼런스 노드이다. 만약 insertBefore() 메서드에 두번째 파라미터를 사용하지 않을 경우 appendChild()처럼 동작 한다. 공감수 0 댓글수 0 2021. 8. 29.
  • 1.9 Extracting Parts of the DOM Tree as JavaScript Strings innserHTML, outerHTML, textContent는 돔에 생성하고 추가할 수 있을 뿐만 아니라 돔의 일부를 js 문자열로 읽어올 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hi Dude ! console.log(document.getElementById('A').innerHTML); //logs 'Hi' console.log(document.getElementById('A').outerHTML); /* logs Hi */ /* notice that all text is returned even if it's in child element nodes (i.e., !) */ console.log(document.getElementById('B').textConte.. 공감수 0 댓글수 0 2021. 8. 28.
  • 1.8 Using JavaScript Strings to Create and Add Element and Text Nodes to the DOM innserHTML, outerHTML, textContent, insertAdjacentHTML 프로퍼티는 js 문자열을 사용해서 노드들을 돔에 생성, 추가할 수 있게 해준다. 1 2 3 4 5 6 7 8 9 10 11 //create a strong element and text node and add it to the DOM document.getElementById('A').innerHTML = 'Hi'; /* create a div element and text node to replace (notice span#B is replaced) */ document.getElementById('B').outerHTML = 'Whats Shaking' //create a text node and upd.. 공감수 1 댓글수 0 2021. 8. 27.
  • 1.7 Using JavaScript Methods to Create Element and Text Nodes 브라우저가 HTML 문저를 파싱하면, HTML 파일에 있는 내용을 토대로 노드들과 트리를 생성한다. 여기서 브라우저는 HTML 문서를 처음 로딩할때 노드들을 생성한다. 하지만 createElement(), createTextNode()를 사용하면 필요한 노드를 생성할 수 있다. createElement()는 생성하기 원하는 요소를 스트링 인자로 받는다. 이 스트링 인자는 Element 객체의 tagName 프로퍼티가 반환하는 스트링과 같다. createAttribute()는 deprecated되었다. 따라서 createAttribute()대신 getAttribute(), setAttribute(), removeAttribute()를 사용하자. 만약 코멘트 노드를 생성하고 싶다면 createComment(.. 공감수 0 댓글수 0 2021. 8. 25.
  • JavaScript에서의 객체 js의 객체를 형식적으로 정의 하면 프로퍼티의 집합이다. 프로퍼티는 name: value쌍으로 나타내어진다. 프로퍼티의 값에는 어떤 타입이라도 정의가 가능하다. 객체지향 프로그래밍의 흐름은 특징의 공통성(타입)보다는 인스턴스 간의 협조에 초점을 맞춘다. 즉, 메시지를 주고받는 객체이다. 메시지를 받는 객체는 전달된 메시지에 반응한다. 메시지를 구현 차원으로 떨어뜨리면 메서드 호출로, 메시지에 대한 반응은 메서드 안에서 처리를 나누게 된다. js에서의 객체지향에서는 객체간의 협조(메시지 전달)는 프로퍼티 접근이다. 객체간의 공통성은 같은 객체에서 성질을 계승하는 형태로 구현된다. js에서는 이를 프로토타입 기반으로 구현한다. 객체 리터럴 Js에서 객체 리터럴은 객체를 생성하는 한가지 방법이다. 객체 리터럴.. 공감수 0 댓글수 0 2021. 8. 21.
  • 1.5 Identifying the Type and Name of a Node 모든 노드들은 Node에서 상속받은 nodeType과 NodeName 프로퍼티가 존재 한다. 예를 들어 Text노드의 nodeType은 3이고 nodeName은 #text이다. 다음은 5종류의 노드에 대한 nodeType과 nodeName이다. node nodeType nodeName document 9 #document 10 html DocumentFragment 11 #document-fragment a 1 A text 3 #text 노드가 특정 타입인지를 체크하고 싶을때 가장 빠른 방법은 nodeType을 검사하는 것이다. 공감수 0 댓글수 0 2021. 8. 21.
  • 1.4 Properties and Methods from Working with Nodes 모든 노드 객체들은 Node 객체로부터 프로퍼티들과 메서드들을 상속받고 있다. 이런 프로퍼티들과 메서드들을 돔을 조작, 검사, 순회할 수 있게 해주는 기본적인 값과 함수이다. 노드 인터페이스에서 제공되는 프로퍼티들과 메서드 외에 다른 관련있는 수 많은 프로퍼티들과 메서드들은 서브노드 인터페이스에 의해 제공된다(e.g. document, HTMLElement, HTML*Element interface). 아래의 Node 프로퍼티들과 메서드들은 모든 노드 객체들이 공통적으로 상속받고 있는 것들과 서브노드 인터페이에서 상속된 것들이다. Node Properties childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, nodeValue, par.. 공감수 0 댓글수 0 2021. 8. 20.
  • 1.3 Subnode Objects Inherit From the Node Object 전형적인 돔 트리에 있는 각 노드 객체는 Node의 프로퍼티들과 메서드들을 상속한다. 문서에 있는 노드의 유형에 따라 다르지만, Node 객체를 상속하는 하위 노드 객체, 인터페이스 역시 존재 한다. 가장 일반적인 노드 인터페이스에 대해 브라우저에서 구현한 상속모델은 다음과 같다( 공감수 0 댓글수 0 2021. 8. 19.
  • 1.2 Node Object Types 자주 사용되는 노드들은 다음과 같다 DOCUMENT_NODE (e.g., window.document) ELEMENT_NODE(e.g., , ) ATTRIBUTE_NODE(e.g., class="c") TEXT_NODE(e.g, HTML문서에 존재하는 텍스트 캐릭터) DOCUMENT_FRAHMENT_NODE(e.g., document.createDocumentFragment()) DOCUMENT_TYPE_NODE(e.g, ) 위의 노드 프로퍼티들은 정적인 변수이며, 특정 노드 객체 타입에 대응되는 숫자를 저장하고 있다. ELEMENT_NODE(i.e., HTML *Element) 1 ATTRIBUTE_NODE(i.e., Attr) 2 TEXT_NODE(i.e., Text) 3 CDATA_SECTION_N.. 공감수 0 댓글수 0 2021. 8. 18.
  • 1.1 The Document Object Model Is a Hierarchy/Three of JavaScript Node Objects HTML 문서를 작성하게 되면 HTML 컨텐트가 다른 HTML 컨텐트를 감싸는 계층적인 구조가 되고 이는 트리로 표현된다. 이러한 계층적 구조는 HTML 문서에서 마크업을 들여쓰기 함으로써 시각적으로 확인이 가능하다. 브라우저는 HTML 문서를 로딩할때 이런 계층적 구조를 파싱해서 object node들로 이루어진 하나의 트리를 만들며 이 트리의 구조는 마크업이 가진 계층적 구조와 유사하다. 따라서 HTML문서는 브라우저에 의해 하나의 live document를 나타내는 object node로 구성된 트리구조로 변환 된다. DOM의 목적은 이렇게 변환된 live document를 JavaScript가 조작할 수 있도록 인터페이스를 제공하는 것이다. DOM의 시초는 XML 문서를 위한 API였고 현재는 H.. 공감수 0 댓글수 0 2021. 8. 17.
  • 0.0 intro 평소 js를 쓰면서 DOM에 대해 깊게 알고 싶다는 생각을 늘 했었다. 하지만 수 많은 블로그글을 찾아도, 책을 찾아도 늘 DOM에 대해 간략한 이론적 설명 정도만 나오고 나머지는 DOM에서 제공하는 메서드의 사용법 위주로 설명이 되어 있어서 항상 아쉬움이 존재했다. 그러던 중 DOM Enlightement: Exploring JavaScript and the Modern DOM이라는 DOM에 대해 이론적인 부분은 꽤나 상사하게 설명한 책을 알게 되었다. 내 블로그에서 DOM이라는 카테고리에 작성될 글은 모두 이 책을 읽고, 정리한 글이며, 각 챕터의 제목이 글의 제목이 될 예정이다. https://www.amazon.com/DOM-Enlightenment-Exploring-JavaScript-Moder.. 공감수 0 댓글수 0 2021. 8. 17.
  • DOM(Document Object Model) 웹 페이지의 내용을 js로 다룰때는 단순히 내용을 문자열로 다루는 것 보다 어떠한 덩어리로 조작하는 것이 더 쉽다. 이를 위한 것이 DOM이다. DOM은 HTML, XML문서를 프로그램에서 이용하기 위한 API이며 트리 구조를 사용한다. 이때 이 트리를 DOM트리라 한다. 구조 자체가 트리인 만큼 DOM트리 안에서 각 객체를 노드라 하며 어떤 노드와 다른 노드와의 관계는 트리에서 사용하는 관계와 같다(부모, 자식 등). DOM 사양은 W3C에 의해 Level1~3으로 정의되 있다. DOM Level 1 DOM Level1은 Core, HTML이 두 가지 모듈로 구성되 있다. 모듈 설명 Core HTML에 한정되지 않은 일반적인 DOM 조작에 대한 사양 getElementsByTagName - 태그명을 지.. 공감수 0 댓글수 0 2021. 8. 3.
  • JS에서 객체를 비교하는 방법 JS에서 primitive값에 대한 비교는 단순히 '==' 또는 '==='를 사용하면 된다. 하지만 객체의 경우, 객체는 여러 데이터로 구조화된 형태 이기 떄문에 객체의 비교는 방법이 다양하고 해당 방법들은 각기 다른 결과를 출력한다. Referential equality JS는 다음과 같은 3가지 방식으로 값을 비교할 수 있다. 1. === 2. == 3. Object.is() 위 3개의 연산자는 모두 비교의 대상이 되는 값이 같은 인스턴스를 참조할때 참을 반환한다. 그때문에 Referential equality는 객체 레퍼런스를 비교할때 유용하다. 하지만 통상적인 상황에서는 레퍼런스가 아닌 실제 값을 비교해야 하는 상황이 더 많다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 co.. 공감수 0 댓글수 0 2021. 7. 24.
  • temporal dead zone TDZ(Temporal Dead Zone) 다음과 같은 코드가 있다고 해보자 1 2 const a = 1; a;//1 cs 1 2 3 a//throws 'Reference error' const a = 1; a;//1 cs 첫번째 예시에서는 제대로 된 결과가 나오고 두번째 예시에서는 reference error가 뜬다. 두번째 예시에서 1줄이 TDZ이다. TDZ는 변수를 선언하기 이전에 변수를 엑세스 하는 것을 금한다. 다음과 같은 statement는 TDZ의 영향을 받는다. 1. const, let 2. class statement, construcotr() 내부에 있는 super() 3. Default function parameters 다음은 hoisting으로 인해 영향을 받지 않는 것들이다 1... 공감수 0 댓글수 0 2021. 7. 10.
  • Event propagation-bubbling, capturing event propagation 위와 같은 코드가 있다고 하자. 태그는 부모, 자식 관계를 가진다. 이때 html, body, fieldset, input태그에 각각 이벤트를 장착했다고 하자. 그 후 버튼을 클릭했을때 html은 body를 감싸고 있고, body는 filedset을, filedset은 input을 감싸고 있기 때문에 어떤 순서고 이벤트가 발생할 것인가를 event propagation이라 한다. event propagation은 두 종류가 있다. (1). bubbling-자식 이벤트 부터 부모 이벤트, (2). capturing-부모 이벤트 부터 자식 이벤트. 위 코드를 실행시키면 다음과 같은 결과가 나온다 bubbling을 실행하기 위해서는 이벤트 리스너의 3번째 인자를 false 또는.. 공감수 0 댓글수 0 2021. 6. 23.
  • Execution Context, Hoisting Execution Context lexical environment는 어디서 어떻게 코드를 작성하는 지를 판단한다. function doSomething(){ var age = 7; } 위 코드에서 age는 어휘면에서(lexically) doSomething()이라는 함수 안에 존재한다. 통상적으로 코드에는 한개 이상의 lexical environment가 존재하지만 모든 lexical environment가 한번에 실행되지 않는다. 코드가 실행되는 것을 도와주는 환경을 Execution Context라 한다. 이것은 현재 실행중인 코드와 그 코드가 실행되기 위해 도움을 주는 모든것들을 의미한다. Lexical environment는 여러개가 존재할 수 있지만 Execution Context는 오직 현재.. 공감수 0 댓글수 0 2021. 4. 29.
  • 어떤 자바스크립트를 사용하고 있는지 알아야한다. js에는 여러 표준 에디션과 일부에서는 지원하지만 일부에서는 지원하지 않는 기능들도 많이 존재한다. 예를 들어 const의 경울 여러 js엔진들이 이를 지원하지만 ECMAScript에서는 const에 대한 어떤 문법이나 동작에 대해서 정의하고 있지 않다. 이때문에 어떤 경우에는 다음과같이 동작하고 const a = 3; a = 'b'; a;//3 어떤 경우에는 var와 같이 동작한다. const a = 3; a = 'b'; a;//'b' 웹 브라우저는 개발자가 작성한 코드를 실행하기 위해 어떤 버전의 js를 사용해야 하는지 제어할 방법을 제공하지 않고 사용자의 브라우저 버전 또한 다를 수 있어 웹 프로그램은 모든 브라우저에서 지속적으로 동작 할 수 있도록 작성되어야 한다. 만약 js를 서버측 프로그램, .. 공감수 0 댓글수 0 2021. 2. 5.
    728x90
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.