On this page

2021년07월13일

수정하기

문서 생성 2021-07-13 11:50:50 최근 수정 2021-07-13 23:28:01

On this page

Note
Responsive Web
log

Note

JavaScript

this

메서드 내부함수에서의 this
- 내부함수도 함수로 호출한 것인지, 메서드로 호출했는지만 파악하면 this의 값을 맞출 수 있다.
- 내부 함수에서 this를 사용하더라도 호출 주체가 없을 때 전역 객체를 바인딩하지 않고 자연스럽게 주변 환경의 this를 상속받으면 이해가 쉬울 수 있다.
- ES5까지 this를 자연스런 방식(현재 컨텍스트에 바인딩 대상이 없으면 직전 컨텍스트에서 탐색하기)으로 우회하는 방법이 있다.
  - 바인딩 하고픈 대상을 변수에 미리 저장해놓고 사용하는 방법
```
var obj = {
  outer: function () {
      var self = this;
        var inner = function() {
          console.log(self); // { outer: f }
        }
        inner();
    }
}
obj.outer();
```
- ES6에서는 내부함수에서 this가 전역객체를 바라보는 문제를 보완하기 위해 this를 바인딩하지 않는 화살표 함수를 도입했다.
  - 화살표 함수는 실행 컨텍스트 생성시 this 바인딩 과정 자체가 빠져 상위 스코프의 this를 사용할 수 있다.
콜백 함수 호출 시 내부에서 this
- 콜백 함수: 함수 A의 제어권을 다른 함수 B에게 넘겨주는 경우 함수 A를 콜백 함수라고 한다.
- 콜백 함수도 함수이기에 this가 전역 객체를 참조하나, 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정할 수 있다.
  - 메서드에 thisArg 값을 지정하면 콜백 함수 내부에서 this 값을 원하는 대로 변경이 가능하다.
  - Array.prototype.forEach
  - Array.prototype.map
  - Array.prototype.filter
  - Array.prototype.some
  - Array.prototype.find
  - Array.prototype.every
  - Array.prototype.findIndex
  - Array.prototype.flatMap
  - Array.prototype.from
  - Set.prototype.forEach
  - Map.prototype.forEach
  - 해당 함수들을 사용할 때 끝에 this를 붙이기에 왜 그러나 싶었는데 이제서야 알게 되었다!
생성자 함수 내부에서 this
- 생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀
- 자바스크립트는 함수에 생성자로서의 역할을 부여해서 new 명령어와 함께 함수 호출 시 그 함수가 생성자로 동작하게 된다. 어떤 함수가 생성자로 호출도니 경우 내부에서 this는 새 - 자바스크립트는 함수에 생성자로서의 역할을 부여해서 new 명령어와 함께 함수 호출 시 그 함수가 생성자로 동작하게 된다. **어떤 함수가 생성자로 호출된 경우 내부에서 this는 새로 만들 인스턴스 자신이 된다.
명시적으로 this 바인딩하기
- call 메서드
  - 메서드의 호출 주체인 함수를 즉시 실행하는 명령, call 메서드의 첫 번째 인자를 this 로 바인딩
- apply 메서드
  - call과 기능적으로 동일. call은 첫 번째 인자를 제외한 나머지 모든 인자를 호출할 함수의 매개변수로 지정하고, apply는 두 번째 인자를 배열로 받는다.
- [[유사 배열 객체]]에 사용하면 유용하다.
  - 허나 본래에는 this를 원하는 값으로 지정해 호출하는 기능을 위해 만들어졌기에 코드만 봐서는 어떤 의도인지 파악하기 힘들다. ES6에서는 Array.from이 도입되어 [[유사 배열 객체]]를 배열로 전환할 수 있게 되었다.
- Math.max/Math.min 등을 사용할 때 apply를 적용하면 간편하다.
```
var numbers = [10, 2, 4, 5, 1, 9]  
var max = Math.max.apply(null, numbers); 

// ES6에는 spread operator가 도입되어 apply를 적용하는 것보다 간편해짐
let max = Math.max(...numbers);
```
- bind 메서드
  - ES5에서 추가된 기능으로 call과 비슷하지만 즉시 호출하진 않고 넘겨 받은 this와 인수들을 바탕으로 새로운 함수를 반환한다.
  - bind 메서드를 통해 만들어진 함수는 name 프로퍼티에 bound라는 접두어 붙어 call과 apply를 사용한 것보다 코드 해석에 용이하다.
- 상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달
```
var obj = {
  outer: function () {
    console.log(this);
        var inner = function() {
          console.log(this);
        }
        inner.call(this);
    }
}
obj.outer(); 

// bind 사용 
var obj = {
  outer: function () {
      console.log(this);
        var inner = function() {
          console.log(this);
        }.bind(this);
        inner();
    }
}
obj.outer();
```

Responsive Web

가변 그리드 (Fluid Grid)

Fluid Layout, Flexible Layout, Flexible Grid 등으로 불린다.
화면 크기에 상관없이 자유롭게 크기가 변경되도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술
그리드: 웹 페이지의 가로 크기, 세로 크기, 여백 단 수 등 구조 설계를 위한 의미
단순히 크기를 퍼센트로 바꾼다고 반응형 웹이 완성되는 것이 아니다
- 기기나 환경에 따라 구조는 바꾸지 못하기 때문 이때 필요한 것이 화면을 제어할 뷰포트와 화면의 크기나 환경을 감지해 구조를 바꿔줄 미디어 쿼리가 필요하다.

미디어 쿼리와 뷰포트

미디어 쿼리(Media Queries)는 컴퓨터/기기에 어떤 종류의 미더인지, 미디어의 화면 크기는 어느 정도인지 미디어에게 질문하고 감지해 웹사이트를 변경하는 기술
뷰포트(Viewport)는 화면에 보이는 영역을 제어하는 기술, 모니터나 기기의 화면을 통해 보이는 영역을 뜻하기도 한다.
- 스마트 기기는 기본 설정값이 자동으로 보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 화면의 크기를 정확하게 감지하지 못한다. 기기의 보이는 영역을 실제 화면 크기로 변경해 미디어 쿼리가 기기의 화면 크기를 정확하게 감지하도록 하는 기술

log

새벽에 잠이 깨 너무 더워서 다시 잠들지 못했다. 오늘은 부디 푹 잤으면 좋겠다.
한시간 반 정도 운동삼아 또 걸었더니 땀이 비오듯 쏟아졌다. 요즘같은 날씨에는 적당히 해야겠다는 생각이 들었다.
저번에 친구가 선물해준 베라 먹었다. 올만에 먹으니 정말 자극적이고...매우 달다. 이렇게 오랜만에 먹어야한다.

LINKS TO THIS PAGE

2021년 07월