ES5 Seminar 정리! #양재동 코드랩


1.

Javascript의 기능 (Control)

- DOM : HTML, CSS 컨트롤

- HTML5 API : File, IndexedDB

- 그래픽 : SVG, Canvas, WebGL

- 통신 : XMLHttpRequest, Socket


책 추천 - 몰입 자바스크립트!, EcmaScript6



2.

함수 형태


빌트인(Built-in) function 오브젝트 

 - 내장 함수

 - Array.isArray()

 - Array.prototype.forEach()


function 오브젝트

 - function book () {}

 - var book = function() {...}


function 인스턴스

 - new Book(), new 사용 ( 대문자 사용 )

 - Book.prototype의 프로퍼티 사용 (이걸 이해하지 못하면 ES6의 많은 부분을 포기하는 것과 같다!)



▶ 오브젝트와 인스턴스의 차이

 - function 오브젝트는 단일 수행이지만 function 인스턴스는 동일한 메소드를 가진 인스턴스를 생성하고 그 값들을 조작하여 수행할 수 있다.



3.

function 오브젝트


호출 형태

 - function sports() {...};

 - sports();


 함수가 오브젝트여야 호출이 가능하다


엔진이 function 타입 키워드를 만나면

- 빌트인 function 오브젝트의 prototype에 연결된 프로퍼티(call, bind 등)를 결합해 function 오브젝트를 알맞게 생성한다.

- 이렇게 생성한 오브젝트를 sports 변수에 할당한다.


 function 오브젝트 저장 형태

- function 명령어로 생성한 function 오브젝트를 { name : value } 형태로 저장한다. 

ex) { sports : function 오브젝트 } 


- 함수를 호출하면 함수 이름으로 저장된 오브젝트를 탐색하고 value 값을 구한 뒤 value 타입이 function 오브젝트이면 호출한다.


- javascript에선 타입을 컴파일할 때 결정하기 때문에 밑에서 얼마든지 key 값의 타입을 바꿀 수 있다. java나 c++ 같은 경우엔 타입을 프리 컴파일 과정에서 미리 결정을 해서 이런 오류가 발생할 가능성이 적지만 javascript의 자료형은 가변적이기 때문에 조심해야 한다.


▶ 함수가 호출되면 엔진은 { name : {{ name: value }, {..}} } 형태의 프로퍼티를 조합하여 실행 환경을 설정하고 함수 코드를 실행한다.

따라서 { name : value } 형태에 맞추어 생각을 전환할 필요가 있다.


▶ 어찌보면 HTML이나 CSS도 { name : value } 구조라고 볼 수 있다.

div = name

element = value

class = class

id = id 



4.

객체지향언어


javscript는 EcmaScript 스펙에 나와있듯이 객체지향언어이다. 

그래서 function 오브젝트를 객체로 인식하고 접근할 필요가 있다.

OOP의 개념을 이해해야 한다. 

ES6는 OOP의 개념을 정확히 구현할 수 있도록 환경을 조성했다. 

그렇기에 더더욱 OOP 개념에 따라 코드를 작성해야 한다.



5.

아키텍처, 메커니즘


아키텍처 : Architecture

 - 목적을 가진 구조

 - 자바스크립트 목적을 달성하기 위한 구조


메커니즘 : Mechanism

 - 목적을 달성하기 위한 방법

 - 목적에 따라 방법, 기준이 달라질 수 있음


아키텍처와 메커니즘 이해 필요



6. 

javascript 목적


javascript는 프로그래밍 언어다. 언어의 목적은 소통이다.

프로그램을 통해 javscript 엔진과 소통하자. 

문법을 지켜야 소통이 가능하다.



7.

function 오브젝트 예제



(1) function 오브젝트 생성

- 코드 : function sports(){};


(2) sports 오브젝트에 prototype 오브젝트 ㅊㅁ부

- 코드 : { 

 sports : { 

prototype : { ... } 

}


(3) prototype에 constructor 프로퍼티 첨부

- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조 

}


(4) prototype에 _proto_ 오브젝트 첨부

- ES5 스펙에 _proto_를 기술하지 않음

- ES6 스펙엔 _proto_ 기술, 엔진 사용 정의

- ES5 기준에선 표준이 아님

- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조, __p 

__proto__ : { ... } 

// 엔진이 사용하는 key이기에 개발자는 건드리지 말 것!

}


(5) 빌트인 Object 오브젝트의 prototype에 연결된 프로퍼티를 결합해 Object 인스턴스를 생성한다. 생성한 Object 인스턴스를 prototype._proto_에 상속한다. (함수를 선언할 때마다 불필요하게 상속하기 때문에 설계 미스이다.) 마지막으로 sports 오브젝트에 _proto_ 오브젝트 첨부한다.


- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조, __p 

__proto__ : { 

Object.prototype.call : { ... },

Object.prototype.apply : { ... },

Object.prototype... : { ... }   

    } 

}


(6) 빌트인 function 오브젝트의 prototype에 연결된 프로퍼티로 function 인스턴스를 생성한 후 __proto__에 첨부한다.


- 코드 : { 

 sports : { 

prototype : { ... }, 

constructor: sports 전체 참조, __p 

__proto__ : { 

function() {

Object.prototype.call : { ... },

Object.prototype.apply : { ... },

Object.prototype... : { ... }

}    

    } 

}



(7) Math, JSON, Global Object를 제외한 모든 오브젝트는 prototype이 있다.



8. 내부 프로퍼티 분류

- 공통 프로퍼티, 선택적 프로퍼티


공통 프로퍼티 : 

모든 오브젝트에 공통으로 설정되는 프로퍼티

선택적 프로퍼티 : 

오브젝트에 따라 선택적으로 설정되는 프로퍼티, 해당되는 오브젝트에 설정



9. 함수 정의


함수 정의

 - 함수가 실행될 수 있도록 javascript 문법에 맞게 작성


함수 정의 형태

 - 함수 선언문 (function declaration)

 - 함수 표현식 (function expression)

 - new function(param1, param2, body)

 --- 문자열로 작성 -> 해킹 위험


▶ 함수 선언문

 - function [function] : function 키워드

 - 식별자 [String] : 함수 이름

 - 파라미터 [Any] : 파라미터 리스트

 - 함수 블록 [Object] : 실행 가능한 코드

 - 반환 [function] : 생성한 function 오브젝트


▶ 함수 표현식

- var name = function() {};

- function 오브젝트를 생성하여 변수에 할당



10. 엔진 해석


javascript는 script 언어이다. script 언어는 작성된 코드를 위에서부터 한 줄 씩 해석(컴파일, 실행)하지만 javascript는 조금 다르다.


함수 형태에 따라 해석 순서가 다르고 중간에 있는 코드가 먼저 해석될 수 있다.


먼저 전체 함수 선언문을 차례대로 해석한다. 

 - function sports(){};


이어서 차례대로 함수 표현식을 해석한다.

 - var sports = function(){};


ex) 


window.onload = function sports() {
debugger;
var player = 11;

function soccer() {
return player;
} // debugger 줄에서 이미 함수로 해석됨


baseball(); // undefined.

//함수 표현식은 변수에 undefined로 할당되기 때문


var baseball = function() {
console.log(player)
};
// debugger 줄에서 변수로 해석됨

soccer();
}

sports();


▶ 코드 해석 단계

(1) 함수 선언문 해석 : 한번 쭉 내려가면서 함수를 탐색한다.

- function sports(){};

- function soccer(){};


(2) 변수 초기화

- var player = undefined; 

- var baseball = undefined;


(3) 

var player = 11;

var baseball = function() {};



11. 함수 선언문 오버라이딩


▶ 오버라이딩(Overriding)

- 함수 이름이 같을 때 함수 코드 대체(replace)


▶ 자바스크립트는 파라미터, 수, 데이터 타입을 체크하지 않는다. 

모두 { name : value }로 저장하기 때문이다.


▶ 대체되는 상황

(1) 초기화 단계에서 위에서부터 함수 선언문을 function 오브젝트로 생성한다.

(2) 아래에 같은 이름의 함수 선언문이 있으면 아래의 함수 선언문이 호출된다.


ex)

window.onload = function sports() {
function soccer() {
console.log('축구1');
};
soccer();

function soccer() {
console.log('축구2');
}
}



12. 함수 파라미터


파라미터(Parameter) 상호 관계

- 매개 변수

- 호출하는 함수 : 값 전송

- 호출받는 함수 : 전송된 값을 받음


파라미터 작성

- 호출하는 함수의 파라미터에 값 작성

- 호출받는 함수의 파라미터에 이름 작성


파라미터 값 처리

- 호출한 함수에서 보낸 값을 호출 받는 함수의 순서에 따라 처리

(엔진은 파라미터 순서로 값을 mapping 한다.)


파라미터 수가 유동적이라면 arguments를 사용해도 된다.

arguments[0] : 파라미터의 첫번째 값

그러나 ES6부터 rest parameter 문법이 생겼고 arguments는 거의 쓰지 않는다.


▶  arguments 값 반환

호출한 함수의 파라미터 값 타입 - 문자열, 숫자, 배열, 오브젝트 등


매커니즘

- 파라미터 순서에서 0부터 인덱스를 부여하여 key로 사용하고

  파라미터로 받은 값을 value에 설정한다

- { 0 : value, 1 : value }


* 결론 : for()문 사용

- 파라미터가 배열일 때 for~in 문으로 읽으면 length 프로퍼티를 제외시키는 코드가 필요하기 때문이다.


Array-like

- key 값이 0부터 1씩 증가

- length 프로퍼티가 있어야 함

- 객체지만 인덱스값을 가지고 증가하기에 거의 배열 같은 친구


=> 이러한 연유로 ES6에선 for~of 문법이 나오게 된다.


▶ 엔진 처리

(1) 함수 호출

(2) 파라미터에 값 할당

(3) arguments 오브젝트 생성

(4) arguments 오브젝트에 파라미터 값 설정

(5) 함수 코드 실행



12. 스코프


Scope : 함수가 실행될 때 영향을 받는 범위. 


ex) indexOf()의 스코프

(1) indexOf()는 String 오브젝트에 존재

- String 오브젝트가 indexOf()의 스코프

- indexOf()는 문자열을 처리하는 String 오브젝트의 영향을 받음


(2) Number 오브젝트에서 indexOf()를 호출하면 에러

Number 오브젝트에 indexOf()가 없기 때문이다.

Number 오브젝트가 indexOf()의 스코프가 아니기 때문이다.


▶ 사용 목적

(1) 범위 제한

- 신속한 검색 및 접근

- 스코프 안에서 우선 검색

(2) 같은 프로퍼티 이름 사용 가능

- String 오브젝트의 indexOf()

- Array 오브젝트의 indexOf()

(3) 오브젝트로 보면 오브젝트가 다르지만 함수에서 보면 스코프가 다르다. 실행될 때 함수의 스코프에서 검색하며 함수 안에서 밖으로 나가는 개념이다.


▶ 스코프 구조

- function 오브젝트를 생성할 때.

- 함수를 호출할 때 설정하는 게 아니다. 이를 정적 스코프라고 함.

- function 안의 코드에 대해서는 구조를 만들지 않는다.


*참고 : 동적 스코프란 함수를 호출할 때 설정하는 스코프를 의미한다. ES5에서 유일하게 동적 스코프를 허용하는 함수가 eval()다. 함수를 호출할 때마다 스코프를 형성하기 때문에 부담스럽다.



13. 글로벌 프로젝트


프로그램의 시작점

 - 빌트인 오브젝트


글로벌 오브젝트 특성

(1) 전체 프로그램을 통해 하나만 존재

- 전체 프로그램 : 모든 <script>에 작성한 코드

(2) 오브젝트 이름을 작성하지 않고 함수를 호출하면 글로벌 오브젝트로 간주


글로벌 오브젝트 생성

(1) 첫 번째 <script>에서 한 번만 생성

- 자바스크립트 실행 환경 설정

(2) <script>의 프로그램 실행 전에 생성


new 사용 불가

 - 인스턴스 생성 불가


▶ 글로벌 스코프

- 전체를 통해 하나만 존재하므로 스코프도 하나

- 글로벌 오브젝트와 글로벌 스코프가 같음

- 스코프가 전체이므로 모든 코드에서 사용 가능


* 최상위 스코프

- 함수에서 보면 최종 검색 스코프

- 검색한 프로퍼티가 없으면 undefined 반환


▶ 지역/글로벌 함수

- 지역함수 : 함수 안에서 var 키워드를 사용한 함수와 함수 선언문 

- strict 모드일 때 -> var 키워드를 사용하지 않고 함수를 선언하면 에러 발생


* 글로벌에서 var 키워드를 사용하지 않으면 delete가 실행된다.

* 되도록 글로벌, 지역에 관계없이 var 키워드를 사용하자.


▶ 변수 사용(접근)

- 글로벌 변수 : 어느 위치에서도 변수 사용 가능

- 지역 변수 : 함수 안으로 들어가야 변수 접근 가능. 함수 외부에서 직접 사용 불가




14. 바인딩


바인딩(binding) 

 구조적으로 결속된 상태로 만드는 것

 대상 - 오브젝트와 프로퍼티 이름


var get = {

... qty : value,

... price: value

};


바인딩 목적

- 스코프 결정

- 스코프에서 이름 식별


바인딩 시점 분류

- 정적 바인딩(Lexical, Static Binding)

- 동적 바인딩(Dynamic Binding)


스코프 체인

- 스코프가 상하구조로 연결된 개념/구조

- 스코프 체인을 사용하여 근접한 스코프에서 프로퍼티(함수, 변수) 검색

- ES3에서 채용


ES5에서 scope chain 개념이 폐지되었다.

- 렉시컬 환경(Lexical Environment) 개념 사용



▶ 바인딩 시점


* 정적 바인딩

(1) 초기화 단계에서 바인딩

(2) 함수 선언문 이름으로 바인딩

(3) 변수, 함수 표현식 이름으로 바인딩


(4) 대부분 정적 바인딩


(5) 값은 바인딩 대상이 아님


* 동적 바인딩

- 실행 단계에서 바인딩

- eval() 함수, with 문



▶ 바인딩 시점의 중요성

- 바인딩할 때 스코프가 결정되기 때문이다.


* function 오브젝트 생성 시점에 스코프가 결정된다.

      - 인식한 스코프를 [[Scope]]에 설정하고

      - 정적 바인딩은 [[Scope]]를 스코프로 사용한다.

      - 스코프는 변경되지 않는다.


* 같은 단계의 모든 함수의 스코프가 같다.


▶ 프로퍼티 검색 방법

* [[Scope]] 프로퍼티에서 검색


엔진 해석 순서

-> 변수 생성 및 함수 생성 (key 값) -> 스코프 설정 -> (value) 값 할당 -> 함수 호출 -> 파라미터 값 할당 및 arguments 생성 -> 함수 실행 



16. 렉시컬 환경

(1) 함수가 사용할 함수, 변수를 렉시컬 환경에 설정한다.

- 오브젝트, 변수, 다른 함수 참조가 가능하다.

(2) 함수가 구조적 환경에서 독립적으로 실행하기 위한 매커니즘 제공


초기화 단계에서 해석한 모든 함수와 변수를 { key : value } 형태로 저장한다.


▶ 렉시컬 환경 생성 : function, with, try ~ catch 문에서 생성됨



▶ 렉시컬 환경 구성 형태

- 렉시컬 환경(LE) = { 

... 환경 레코드(ER: Environment Record) : {

sports: "농구",

member: "5명"

} ,

...외부 렉시컬 환경 참조

(OLER: Outer Lexical Environment Reference) : {

play: function() {},

values: [12, 34, 56]

}

}


▶ 외부 렉시컬 환경 참조


장점 

- 근접한 렉시컬 환경의 논리적 연결을 통해, 현재 렉시컬 환경에 영향을 미치지 않으면서, 1단계 밖 스코프로 이동하지 않고 프로퍼티 사용


▶ 검색 메커니즘

1. 프로퍼티 검색 순서 방법


▶ 글로벌 환경

- 글로벌 오브젝트를 위한 렉시컬 환경

- 렉시컬 환경과 형태가 같음


특징

- 동적으로 함수와 변수 바인딩

- 함수에서 var 키워드를 사용하지 않고 함수/변수를 사용



17. 실행 콘텍스트


생성 시점

 - 실행할 수 있는 코드를 만났을 때


실행할 수 있는 코드 유형

 - 함수 코드(function code)

 - 글로벌 코드(global code)

 - eval 코드(eval code)


코드 유형 분리 이유

 - 실행 컨텍스트에서 처리 방법과 환경이 다르기 때문이다.

 - 함수 코드 : 렉시컬 환경

 - 글로벌 코드 : 글로벌 환경

 - eval 코드 : 동적 환경



18. 환경 컴포넌트


환경 컴포넌트 구성

 - 렉시컬 환경 컴포넌트와 변수 환경 컴포넌트 지칭



19 . this 바인딩 컴포넌트


목적

 - this로, 호출한 함수가 속한 오브젝트의 프로퍼티에 접근


접근 메커니즘

 1. 호출한 함수가 속한 오브젝트를 참조할 수 있도록 this 바인딩 컴포넌트에 호출된 함수가 속한 오브젝트 참조 설정

 2. obj.sports() 형태에서 this로 obj 참조

 3. obj의 프로퍼티가 변경되면 동적으로 참조

 4. obj를 this 바인딩 컴포넌트에서 참조할 수 있도록 설정


▶ this와 strict 모드

1. 글로벌 오브젝트에서 오브젝트를 작성하지 않고 함수를 호출하면 

- this 바인딩 컴포넌트에는 undefined가 설정된다. 

- strict 모드가 아닐 경우에는 this가 글로벌 오브젝트인 window를 참조한다.


var sports = {
value: 123,

get: function() {
var value = 456;
console.log(this === window);
console.log(this.value);
}
};

var comp = sports.get;
sports.get();
comp(); // 이 경우 this 컴포넌트는 use strict 모드가 아니기
때문에 global oject에 바인딩된다.



20. Constructor


▶ Constructor 프로퍼티

- Function 오브젝트를 생성할 때 설정되며

- 생성하는 Function 오브젝트를 참조하도록 설정

- prototype에 연결되어 있음


개인 경험

- constructor가 없더라도 인스턴스가 생성됨

- 엔진에서 이를 고려하여 생성하는 것으로 생각됨

- 하지만 필요하지 않다는 의미는 아님


- ES6에서 constructor가 중요하므로 이해가 필요하다. 


▶ property

- 목적 : 

(1) 프로퍼티 연결을 통한 프로퍼티 확장

(2) 생성한 각 인스턴스에서 prototype의 프로퍼티 공유

(3) 상속 : 다른 function 인스턴스를 연결


- 프로퍼티 확장

(1) prototype에 프로퍼티 {key : value}를 연결하여 확장


- 프로퍼티 공유

(1) prototype에 연결된 프로퍼티로 인스턴스 생성

(2) 인스턴스에서 prototype에 연결된 프로퍼티 값 공유



21. 오브젝트 반환


new 연산자로 인스턴스를 생성할 때

 - 생성자 함수에 return 문을 작성하지 않으면 인스턴스를 반환한다.

 - 생성자 함수에 return 문을 작성하면 표현식 평가 결과에 따라 인스턴스가 반환되지 않을 수도 있다.



22. call()과 this


- 예제



var get = function(value) {
return this.base * this.rate + value;
}

var result = get.call({base: 20, rate: 30}, 50)
console.log(result);

/////////////////////////////////////////////////////////////////

var obj = {value: 100};

var values = [1,2,3].map(function(el, index) {
return el + this.value;
}, obj); // 두번째 파라미터는 this가 참조되는 주소를 의미한다.

console.log(values);




var sports = {
value: 123,
soccer: {
value: 456,
get: function() {
return this.value;
}
}
}

var result = sports.soccer.get.call(sports);
console.log(result); // 123

var result = sports.soccer.get.call(sports.soccer);
console.log(result); // 456




23. bind()와 this


- 예제



var el = document.getElementById('clickID');

var sports = {
value: 123
}

el.onclick = show.bind(sports, el);
// 두번째 파라미터는 해당 함수의 첫번째 파라미터로 간다.

function show(element, event) {
console.log(element.textContent);
console.log(event.target.id);
console.log(this.value);
}



24. 캡슐화


캡슐화

- 객체의 메서드와 프로퍼티를 외부에 숨김

- 처리 방법은 숨기고 사용할 수 있는 메서드와 파라미터를 외부에 공개


자바스크립트의 캡슐화

- 함수 안의 함수를 외부에서 호출 불가하게 하기

- 지역 변수 값을 외부에서 접근 불가하게 하기

- source가 오픈되는 것과 exe 파일의 차이가 있음



25. 다형성


자바스크립트의 다형성

- 파라미터 수와 데이터 타입에 영향을 받지 않음

- 메소드 이름이 같으면 나중에 작성한 것으로 대체됨



26. 상속(유전)


상속(유전)

- 상속의 목적은 객체의 재사용에 있다.

- 목적에 맞는 객체를 내 객체에 포함시키는 것

- 다중상속


자바스크립트의 상속(유전)

- 오브젝트{}와 오브젝틀르 병합

- 함수의 prototype에 인스턴스 연결

- 다중상속 불가

- 다수의 인스턴스가 연결된 형태: Prototype Chain



27. 검색 우선순위



/**
* 반복되는 오브젝트의 전개
*/
var sports = {
soccer: {member: 11, time: 90},
basketball: {member: 5, time: 48}
};

function showValues(sports) {
var type, obj;

for (type in sports) {
obj = sports[type];
typeof obj === 'object' ?
showValues(obj) :
console.log(type + ' : ' + sports[type]);
}
}

showValues(sports)




28. 함수 즉시 실행


함수 즉시 실행이란?

- 엔진이 함수 코드를 만나면 자동으로 함수를 실행하는 행태



(function() {
console.log('스포츠');
}());
var total = (1 + 2);
var value = function() {
return 123;
}
console.log('함수호출: ' + value());

value = function() {
return 456;
}();
console.log('자동실행: ' + value);

value = (function(){
return 789;
}());
console.log(value);
(function(){
console.log('ABC');
}());



29. 클로저


클로저 개요

- 자바스크립트의 특정 기능을 지칭

- function 오브젝트를 생성할 때 [[Scope]]에 렉시컬 환경을 설정하고

함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 메커니즘

- function 오브젝트 생성 과정을 히해하면 클로저는 단지 논리적인 접근.



function sports() {
var value = 100;

function setValue(param) {
value = param;
};

var getValue = function(param) {
value = value + param;
return value;
};

return getValue;
};
var getObject = sports();

console.log(getObject(123));
console.log(getObject(77));
console.log(getObject.value);



블로그 이미지

필로그래머

,

 ReactJS: constructor()


Q. constructor() 사용 시에 super() 메서드를 사용해야 하는 이유 

- 'this' is not allowed before super() error 



A.  http://cheng.logdown.com/posts/2016/03/26/683329

블로그 이미지

필로그래머

,

✔︎ [CSS] float:left 속성의 이해


▶ float의 등장 배경


img 태그는 block 성질을 가지고 있습니다. 

그래서 이미지의 width 값이 작더라도 한 줄을 통째로 차지해버립니다.

이 경우엔 이미지 바로 옆 쪽에 문장을 배치할 수 없습니다.

이러한 문제를 해결하기 위해 등장한 것이 float 속성입니다.

float 속성은 이미지의 왼쪽/오른쪽에 문장을 배치할 수 있도록 도와줍니다.

(물론 이미지 뿐만 아니라 다른 요소도 float 속성을 가질 수 있습니다.)


(다음 그림 참고)


Example of Float in CSS


출처 : https://www.1keydata.com/css-tutorial/float.php



▶ float:left 예제


float:left는 해당 속성이 적용된 태그를 왼쪽으로 배열하도록 합니다.

다음은 Aside와 Section에 float:left 속성을 적용시킨 결과입니다.

예상했던 대로, Aside 옆에 Section이 차례대로 붙어있는 것을 알 수 있습니다.




 


but, 

<div id="wrap"></div> 안에 있는 Aside와 Section 태그는 잘 배치되었지만,

wrap 태그를 벗어난 footer 태그마저 '부유'하고 있는 것을 확인할 수 있습니다.

이러한 문제를 해결하려면 어떻게 해야 할까요?



▶ float:left 실무


float:left가 적용된 태그의 '부모 태그'에다가 overflow:hidden 속성을 주면

다음과 같이 float:left 속성이 적용되지 않은 다른 태그들이 부유하지

않고 있는 것을 확인할 수 있습니다. 이러한 방법을 One True Layout 방식이라고 부릅니다.





블로그 이미지

필로그래머

,

✔︎ [CSS] display와 visibility 

: none과 hidden의 차이


화면에서 태그를 보이지 않게 하기 위한 속성으로는 

display:none과 visibility:hidden이 있습니다.


두 스타일 모두 어떤 태그를 표시하지 않고 가릴 때 사용됩니다.

그러나 두 스타일에는 차이가 있습니다. 어떤 차이가 있을까요?


display:none


display:none 속성은 태그 자체를 html 상에서 제거시키는 힘이 있습니다.

때문에 inspect(요소 검사)를 해도 해당 태그를 검색할 수 없습니다.





visibility:hidden


visibility:hidden 속성은 태그 자체를 html 상에서 제거시키는 게 아니라

그저 사용자가 해당 태그를 볼 수 없도록 만들어줍니다. 도자기로 덮어놓은 것처럼 말이죠.

때문에 inspect(요소 검사)를 해도 해당 태그를 확인할 수 있습니다.




블로그 이미지

필로그래머

,

✔︎ [CSS] display 속성 

: inline과 inline-block의 차이 



css에서 display 속성 중 block은 'div 태그'나 'p 태그'에 

기본적으로 적용되는 속성입니다. 자체적인 block을 가져서 

해당되는 태그가 아예 한 줄을 차지해버리죠. 


그렇다면 inline과 inline-block은 무엇일까요?



▶ inline


inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다. 

width와 height 값이 적용되지 않습니다.





▶ inline-block


inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다. 

덧붙혀 width와 height 값이 적용될 수 있습니다.





블로그 이미지

필로그래머

,

✔︎ [CSS] input 태그에 placeholder 스타일 효과 주기 



예제 1.


https://codemyui.com/input-field-placeholder-to-label-transition/


예제 2.


https://jsfiddle.net/273ntk5s/2/


블로그 이미지

필로그래머

,

 Angular: 의미


AngularJS는 매우 강력한 JavaScript 프레임워크입니다.
주로 싱글 페이지 어플리케이션 프로젝트에서 사용됩니다. 
HTML DOM에서 추가적인 속성을 확장해 만들어졌으며 
사용자의 액션에 따라 페이지를 동적으로 바꿀 수 있도록 도와줍니다.


✎ ng-app 

ng-app 명령어는 AngularJS 어플리케이션을 시작하겠다는 의미입니다.
AngularJS를 HTML에 연결해주는 역할을 합니다.

✎ ng-model
 
ng-model 명령어는 AngularJS 어플리케이션 데이터의 벨류 값을 
HTML의 input 태그에 연결시켜 줍니다.
(ng-model의 벨류 값에 바인딩 된 태그에 input 데이터가 넘어갈 수 있도록 도와줍니다.)

✎ ng-bind

ng-bind 명령어는 AngularJS 어플리케이션 데이터를 HTML 태그와 연결시켜줍니다.



참고
*https://www.tutorialspoint.com/angularjs/angularjs_first_application.htm


블로그 이미지

필로그래머

,