HTML콘텐츠 모델과 다양한 API

Posted on 2020-06-03 Edited on 2020-06-06 Disqus:

HTML5는 html4.01,xHTML1.0과 도입한 마크업 언어입니다. 기존 HTML과 HTML5의 차이점은 새롭게 도입된 콘텐츠 모델이라는 개념과 구조관련 요소가 추가 되었다는 점을 들을수 있습니다. 또한 기존에 사용했던 요소중에서 의미가 변한 요소도 있습니다.

콘텐츠 모델(Contents Model)

기존 HTML기반의 마크업에서 일잔적인 인라인 요소와 블록 요소로 구분하는정도의 개념만 존재하였지만 ,HTML15에서는 좀더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것들끼리 그룹화 하였는데 이를 HTML5의 콘텐츠 모델이라고 합니다.

특히 HTML5에 추가된 콘텐츠 모델이란 ,’어떤 요소에 어떤 콘텐츠를 포함해야하는지’,’어떤 요소가 어떤요소를 포함할 수있는지’를 정의한 것을 말합니다. 이 콘텐츠 모델이라는 개념을 통해 자식 요소로 포함 할 수이쓴느 카테고리에 제한을 두었으며 , 이와 반대로 자식 요소가 작성 될 수 있는 카테고리를 제한하였스빈다. 이런 HTML5의 콘텐츠 모델은 단순히 기존 HTML 에서의 문법적인 변화만을 의미하는 것으로 그치지 않고 구조와 구성을 중시하는 마크업으로 진화했다는 점을 이해할수있습니다.

HTML5의 카테고리(Category)에는 Sectioning Root, Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content, Script-supporting Elements, Transparent Content 등의 그룹이 있으며, 하나의 요소가 여러 그룹에 속해 있을 수도 있고, 그렇지 않을 수도 있습니다.

섹셔닝 루트(Sectioning Root)

1	<blockquote>, <body>, <detail>, <fieldset>, <figure>, <td>

몇몇 요소는 섹셔닝 루트라는 그룹으로 구분합니다. 섹셔닝 루트에 속하는 요소는 section이나 article 요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않습니다.

스코프란?

Posted on 2020-06-02 Edited on 2020-06-03 Disqus:

1. 스코프란?

스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이면 중요한 개념이다. 스코프의 이해가 부족하면 다른 개념을 이해하는데 어려울 수 있다. 더욱 자바스크립트의 스코프는 다른언어의 스코프와 구별되는 특징있다. 그리고 var 키워드로 선언한 변수와 let const로 선언한 변수의 스코프 또한 다르게 동작한다.

함수의 매개변수는 함수 몸체 내부에서만 참조 할숭 있고 함수 몸체 외부에서는 참조 할 수 없다고 했다 이것은 애개변수를 참조 할 수 있는유효 범위, 즉 매개 변수릐 스코프가 함수 몸체 내부로 한정되기 때문이다.

function add(x,y){
  //매개변수는 함수 몸체 내부에서만 참조 할 수 있다.
  // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부이다.
  console.log(x,y); //2 5
  return x+y
}
add(2,5);
//매개변수는 함수 몸체 내무에서만 참조 할 수 있다.
console.log(x,y) // Reference Error: x isnot defined

변수의 코드의 가장 바깥 영역 뿐 아니라 코드 블록이나 함수 몸체에서도 선언 할 수 있다. 이때 코들 블록이나 함수는 중첩될 수있다.

var var1  =1; //코드의 가자 바깥 영역에서 선언된 변수
if(true){
  var var2 = 2 //코드 블록 내에서 선언된 변수
  if(true){
    var var3 = 3; //중첩된 코드 내에서 선언된 변수
  }
}
function foo(){
  var var4 = 4//함수 내에서 선언된 변수
  function bar(){
    var var5 = 5 //중첩된 함수 내에서 선언된 함수
  }
}
console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

변수는 자신이 선언된 우치에 의해 자신이 유효한 범위, 즉 다른코드가 참조 할 수 있는 범위가 결정된다. 변수 뿐아니라 모든 식별자가 그렇다. 다시 말해 , 모든 식별자(변수이름, 함수이름,클래스 이름 등) 는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조 할 수 있는 유효범위가 결정 된다. 이를 스코프라한다. 즉 스코프는 식별자가 유효한 범위를 말한다.

var x = 'global';

function foo(){
  var x ='local';
  console.log(x) //x= 'local' -1
}
foo();
console.log(x) //'global' -2

코드의 가장 바깥 영역과 foo 함수내에는 같은 이름을 갖는 변수x를 선언했고 1,2에서 변수 x을 참조한다. 이때 자바스크립트엔진은 이름이 같은 두개의 변수중에서 어떤 변수응 참조해야 할 것인지 결정(식별자 결정)해야한다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조 해야 할 것인지 결정한다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고 할수 있다.

위의 예제에서 코드의 가장 바깥에 영역에 선언된 x변수는 어디서든 참조가 가능하다. 하지만foo함수 내부에서 선언된 x변수는 내부에서만 참조 가능하고 바깥에서 참조할 수 없다. 이때 두 식별자 이름은 동일 하지만 자신이 가진 유효한 범위 , 즉 스코프가 다른 변수이다.

Set을 사용한 교집합, 합집합, 차집합, 상위

Posted on 2020-05-23 Disqus:

1.Set의 사용한 교집합 , 합집합 , 차집합 , 상위

Set은 중복값을 제외한 유일한 값을 저장한다. 그렇기에 교집합, 합집합 , 차집합, 상위 등을 나타내는데 사용하기 에 용이하다.

1.1. 교집합

//첫번째 방법
Set.prototype.intersaction = function (set){
   const result = new Set();
  for(const value of set){
    if(this.has(value))
      result.add(value)
  }
  return result;
}
const setA = new Set([1,2,3,4]);
const setB = new Set([2,4]);

console.log(setA.intersaction(setB)) // [2,4];

//두번째 방법
Set.prototype.intersaction = function (set){
  return [...this].filter(v=> set.has(v));
}
const setA = new Set([1,2,3,4]);
const seB = new Set([2,4]);

console.log(setA.intersaction(setB)) // [2,4];

1.2. 합집합

//첫번째 방법

Set.prototype.union = function (set){
  const result = new Set(this);
  for(const value of set){
    result.add(value);
  }
  return result;
}
const setA = new Set([1,2,3,4]);
const setB = new Set([2,4]);
console.log(setA.union(setB)) //[1,2,3,4];

// 두번째 방법

Set.prototype.union = function (set){
  const result = new Set([...this,...set])
  return result;
}

const setA = new Set([1,2,3,4]);
const setB = new Set([2,4]);
console.log(setA.union(setB)) //[1,2,3,4];

1.3 차집합

//첫번째 방법
Set.prototype.differnce = function (set){
  const result = new Set(this);
  for(const value of set){
    result.delete(value);
    }
  }
return result;
}
const setA = new Set([1,2,3,4]);
const setB = new Set([2,4]);
console.log(setA.difference(setB)) //[1,3];

//두번째 방법

Set.prototype.difference = function (set){
  return [...this].filter(v=> !set.has(v));
}
const setA = new Set([1,2,3,4]);
const setB = new Set([2,4]);

consoel.log(setA.differnce(setB)) //[1,3];

1.4. 상위

//첫번째 방법
Set.prototype.isSuperset = function (set){
for(const value of subset){
  if(!this.has(value))return false;
}
  return true;
}
const setA = new Set([1,2,3,4]);
const setB = new Set([2,4]);

console.log(setA.isSuperset(setB)) // true;

//두번째 방법
Set.prototype.isSuperset = function (set){
  const superArr = [...this];
  return [...superArr].every(v => superArr.includes(v));
}

const setA =new Set([1,2,3,4]);
const setB = new Set([2,4]);

console.log(setA.isSuperset(setB)) // true;

객체 리터럴

Posted on 2020-05-21 Disqus:

1. 객체란?

자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 원시값을 제외한 나머지(힘수,배열,정규표현식 등) 은 모두 객체이다.

원시 타입은 단하나의 값만을 나타내지만 객체 타입은 다양한 타입의 값들을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시타입의 값, 즉 원시값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경이 가능한 값이다.
객체는 0 개 이상의 프로퍼티의 집합으로 프로퍼티의 키는 값으로 구성된다.

자바스크립트에서 사용할 수 있는 모든값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티의 값으로 사용 할 수 있다. 프로퍼티의 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라고 부른다.

이 처럼 객체는 프로퍼티와 메소드로 구성된 집합체 이다. 프로퍼티와 메소드의 역할은 다음과 같다.

프로퍼티 : 객체의 상태를 나타내는 값
메소드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

이와 같이 객체는 객체의 상태를 나타내는 값(프로퍼티)와 프로퍼티를 참조 하고 동작(메소드)를 모두 포함하기 때문에 상태 와 동작을 하나의 단위로 구조화할 수있어 유용하다.

객체와 함수 - 자바스크립트의 객체는 함수와 밀접한 관계를 갖는다. 함수로 객체를 생성하기도 하며 함수 자체가 객체이다. 자바스크립트에서 함수와 객체는 분리해서 생각할 수없는 개념이다. 즉 객체를 이해해야 함수를 제대로 이해할 수 있고 반대로 함수를 이해해야 객체를 정확히 이해 할 수 있다.

객체들의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 객체 지향 프로그래밍이라고한다.

타입변환과 단축평가

Posted on 2020-05-16 Edited on 2020-05-21 Disqus:

1. 타입변환이란?

자바스크립트의 모든 값은 카입이 있다. 값의 타입은 개발자의 의도에 의해 다른 타입으로 변환될 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입캐스팅이라 한다.

var x = 10;

//명시적 타입변환
//숫자를 문자열로 타입 캐스팅을 한다.
var str = x.toString();
console.log(typeif str,str) //string 10

//변수 x의 값이 변경된 것은 아니다. 
console.log(typeof x,x) //number 10;

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

var x = 10;
//암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로새로운 문자열을 생성한다.
var str = x+'';
console.log(typeof str,str) //string 10
//x의 타입이 변경되는 것은 아니다.
console.log(typeof x,x) //number 10

명시적 타입 변환이나 암묵적 타입변환이 기존 원시값을 직접 변경하는 것은 아니다. 원시값은 변경 불가능한 값이므로 변경 할 숭 없다. 타입 변환이란 기존 원시값을 사용해 다른 타입의 새로운 원시값을 생성하는 것이다.

1
2
3

//원시값 1이 '1'로 직접 변경되는것은 아니다.
//1을 사용해 타입이 다른 '1'을 새롭게 생성하여 '1'+''을 평가한다.
1+ ''// ->'1'

암묵적 타입 변화은 변수의 값을 재할당해서 변경하는 것이 아니라 자바스크립트 엔진이 표현식을 에러없이 평가하기 위해 피연산자의 값을 바탕으로 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.
위 에제의 경우, 자바스크립트의 엔진은 표현식 x+’’ 을 평가하기위해서 변수 x의 숫자 값을 바탕으로 새로운 문자열 값을 ‘10’을 생성하고 이것으로 표현식 ‘10’+’’를 평가한다. 이때 암묵적으로 생성된 문자열 ‘10’은 변수 x에 할당되지않는다. 따라서 암묵적으로 생성된 문자열 ‘10’은 표현ㅅ기의 평가가 끝나면 아무도 참조하지 ㅇ낳으므로 가비지 컬렉션에 의해 메모리에서 해제된다.

명시적 타입변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러난다. 하지만 암묵적 타입 강제 변환은 자바스크립트 엔진에 의해 암묵적으로 , 즉 드러나지 않게 타입이 자동변환 되기 때문에 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러나지 않는다.

따라서 자신이 작성한 코드에서 암묵적 타입변환이 발생하는지, 발생한다면 어떤타입의 어떤 값으로 변환되는지, 그리고 타입 변환된 값으로 표현식은 어떻게 평가될 것인지 에측 가능해야한다. 만약 타입 변환결과를 예측 못하거나 예측이 결과와 일치하지않는다면 오류를 발생할 가능성이 높아진다.

ECMAScript와 Javascript의 차이

Posted on 2020-05-15 Edited on 2020-06-06 Disqus:

ECMAScript 와 JavaScript

ECMAScript는 자바스크립트의 표준사양인 ECMA-262를 말하며 프로그래밍 언어의 타입 , 값,객체와 프로퍼티,함수,표준 빌트인 객체 등 핵심 문법을 규정한다. 각 브라우저 제조사는 ECAMScript를 준수하여 브라우저에 내장되어있는 자바스크립트 엔진을 구현한다.
자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 WEB API,즉 DOM ,BOM, Canvas ,XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker등을 아우르는 개념이다.
즉 Javascript > Ecmascript (자바스크립가 더 큰 개념이다.)
클라이언트 사이드 WEB API는 ECMAScript와는 별도로 World Wide Web Consortium(W3C)에서도 별도로 명세로 관리하고 있다.

요약하자면 ECMAScript는 ecma 인터내셔녈에 의해 정의된 ECMA -262 기술규격에 의해 정의된 범용 자바스크립트 언어를 뜻합니다. ‘ECMAScript 사양’입니다.
ECMA -262 는 표준의 이름이고, ECMAScript는 ECMA -262에서 정의된 하나의 사양을 의미합니다. ECMAScript는 스크립트언어가 준수해야하는 규칙,세부사항 및 지침을 제공합니다.

JavaScript는 ECMAScript가 사양을 준수하는 범용 스크립트팅 언어 입니다. 자바스크립트느 ECMAScript아우르는 개념입니다..

또한 JavaScripts는 1996년에 반들어 졌고 , 그 다음 해에 JavaScriptd를 표준화하기 위해서 1997년 ECMAScript가 만들어졌습니다. JavaScript는 ECMAScript 사양을 준수하는 언어이며 , JavaScript가 ECMAScript을 기반하는 동시에 ECMAScript도 JavaScript를 기반으로 한다.

제어문

Posted on 2020-05-12 Disqus:

1. 블록문

블록문는 0개이 상의 문을 중괄호로 묶은것으로 콛블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블ㄹ고문을 하나의 시랳아 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할때 상요하는 것이 일반적이다.
블록문이 사용되는 다양한 예제가 있다. 문의 끝에는 세미 콜론을 붙이는 것이 일반적이다. 하지만 블록 문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다는 것에 주의하자.

//블록문
{
  var foo = 10;
}
//제어문
var x =1;
if(x<10){
  x++
}
//함수 선언문
function sum(a,b){
  return a+b;
}

2. 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드블록의(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가 될 수있는 표현식이다. 자바스크립트는 2가지의 조건문 if …else if 문과 switch문을 제공한다.

2.1. if … else if 문

if .. else 문은 주언진 조건식(불리언 값으로 평가 될수 있는 표현식)의 평가 결과,즉 놀리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. 조건식의 평가 결과가 참일 경우,if 문 다음의 코들 블록이 실행되고 거짓일 경우 else일경우 다음의 코드 블록이 실행된다.

if(조건식){
  //조건식이  참이면 이 코드 블록이 실행된다.
}else{
  //조건식이 거짓이면 이 코드 블록리 실행된다.
}

if의 조건식은 불리언 값으로 평가 되어야한다. 만약if문의 조건식이 불리언값이 아닌 다른 값으로 평가 되면 자바스크립트 엔진에 의해서 암묵적으로 데이터 타입이 불리언 값으로 강제로 변환이 되어 실행할 코드 블록을 결정한다.
조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘리고 싶으면 else if문을 사용한다.

if(조건식){
  //조건식1이 참이면 이 코드 블록을 실행
}else if(조건식){
  //조건식2이 참이면 이 코드블록을 실행
}else{
  //조건식1과 조건식2가 모두 거짓이면 이 코들 블록을 실행
}

자바스크립트의 개발환경

Posted on 2020-05-10 Disqus:

1. 자바스크립트 실행환경

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. node.js 또한 자바스크립트엔진을 내장하고 있으며, 자바스크립트는 nodejs 와 브라우저환경에서 실행 할 수 있다.
브라우저에서 자바스크립트의 목적은 html,css,자바스크립트를 실행하여 웹에 보여주는 것이 주된 목적이고, node.js는 서버 개발 환경을 제공하는 목적을 가진다.
또한 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 ECMAScript의 추가적으로 제공하는 기능은 호환 불가능하다.
브라우저에서는 DOM API를 기본적으로 제공하지만 , node.js 에서는 DOM API를 제공하지 않는다.

2. 웹

자바스크립트가 가장 많이 사용되는 분야는 웹페이지와 웹 애플리케이션이다. 웹 애플리케이션은 웹 브라우저 에서 html과css와 자바스크립트가 함께 실행된다.

웹 브라우저 환경을 고려할 때, 보다 효율적인 자바스크립트 프로그래밍이 가능하다.
자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리를 한다,html파서는 script태그를 만나면 자바 스크립트 코드를 실행하기 위해서 DOM생성 프로세스를 중지하고 자바 스크립트 엔진으로 제어권한을 넘긴다.제어 권한을 넘겨받은 자바 스크립트엔진은 script태그의 자바스크립트 파일을 파싱한다.

자바스크립트는 명시적인 컴파일러 단계를 거치지 않지만 인터프리터 언어의 장점인 동적기능지원을 살리면서 실행속도가 느리다는 단점을 극복한다.

head 요소 내부에 script 태그를 위치시키면 HTML 요소가 파싱되어 DOM 객체로 변환되기 이전에 자바스크립트가 실행된다. 따라서 body태그 아래에 script태그를 두는것이 바람직하다.

async : 웹 페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다. 스크립트는 다운로드 완료직후 실행된다.
defer : 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다.스크립트는 웹페이지 파싱완료 직후 실행된다. 두개의 차이점은 스크립트의 실행 시점이다르다.

let과 const 블록 레벨스코프

Posted on 2020-05-09 Edited on 2020-05-10 Disqus:

1. var키워드로 선언한 변수의 문제점

1.1.변수 중복 선언이 가능

-변수의 중복 선언이 가능하고,이때문에 의도치 않은 값의 변경이 일어나는 부작용이 발생한다.

1.2, 함수레벨 스코프

var키워드로 선언한 변수는 오로지 함수의 코드블록만을 지역스코프로 인정한다. 따라서 외부에서 선언한 변수는 모두 전역변수가 된다. 함수레벨 스코프는 전역변수를 남발할 가능성이 높다. 이로인해 의도치 않은 전역변수가 중복되는 경우가 발생한다.

1.3. 변수의 호이스팅

변수ㅣ 호이스팅에 의해 선언문이 스코프를 선두로 끌어 올려진것 처럼 동작한다. 즉 변수 호이스팅에 의해 var키워드로 선언한 변수는 변수 선언문 이전에 참조할 수있다. 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다. 변수호이스팅은 가독성을 떨어뜨리고 오류를 발생시킬 수있는 여지를 만든다.

2.let키워드

let은 키워드는 var키워드와 동일하게 변수를 선언할때 사용한다. var키워드와의 차이점은

하이브리드 웹, 네이티브 웹, 웹 앱의 차이점

Posted on 2020-05-07 Disqus:

localStorage와 session storage의 가장 큰 차이점

local storage 만료기간이 없기때문에 브라우저가 종료되어도 남아있는다.
session storage 브라우저가 종료되면은 사라진다.

1. 하이브리드 앱

하이브리드 앱은 네이티브 개발과 웹 기술을 융합한 방식입니다. 기본 기능은 HTML 등의 웹 문서로 구현하고, 패키징은 아이폰, 안드로이드 등 모바일 운영 체제(OS) 별로 구현하는 것이다.
따라서 네이티브 앱과 같이 앱 스토어에서 다운로드하여 사용할 수 있고, 기기에 저장된 고유 파일이나 카메라와 같은 하드웨어적인 부분에 접근성을 가질 수도 있습니다. 또한, 근본적으로는 웹 기술을 이용한 것이기에 빠르고, 편리하게 앱을 유지보수할 수 있습니다.

하이브리드 앱의 단점은 네이티브 앱보다 UI를 구성하는 디자인 부분이 취약하며, 성능이 떨어진다는 것입니다. 또한, 웹 브라우저를 실행하여 콘텐츠를 제공하기에 인터넷 속도에 따라 구동 속도가 느려질 수도 있습니다.

1.1. 하이브리드 APP의 장점

■ 네이티브 API 와 브라우저 API 를 이용한 다양한 개발이 가능 합니다.
■ 웹개발 기술을 사용해 앱을 개발할 수 있습니다.
■ 한번의 개발로 다수의 플랫폼에 대응할 수 있습니다.

1.2.하이브리드 APP의 단점

■ 웹뷰에서 앱을 실행하는 경우이기 때문에 앱의 성능이 곧 브라우저의 성능 입니다.
■ UI 프레임워크 도구를 사용하지 않는다면 개발자가 UI를 제작해야 합니다