면접 스터디 데일리 과제
Q1. position 을 어떻게 사용하는지 알려주세요.
css에서 position 속성은 HTML 요소의 위치와 배치 방법을 지정하는데 사용하는 속성입니다.
포지션 속성에는 static, relative, absolute, fixed, sticky 다섯가지가 있습니다.
static 은 position 속성의 기본 값으로, 일반적인 문서의 흐름에 따라 배치 합니다.
relative 는 문서 흐름에 따라 배치하는 것은 동일하지만 상대적인 위치의 기준을 설정합니다.
relative 속성이 부여된 요소를 기준으로 자식 요소들의 오프셋을 설정할 수 있습니다.
absolute 는 relative 속성이 설정된 부모 요소를 기준으로 일반적인 문서의 흐름을 무시하고
top, bottom, left, right 값에 의해 상대적으로 배치됩니다.
설정된 기준이 없으면 컨테이닝 블록을 기준으로 삼습니다.
fixed 는 부모요소 조차 무시하고 뷰 포트를 기준으로 상대적으로 배치됩니다.
sticky 는 relative와 fixed 속성을 모두 가지고 있는데, 일반적으로는 relative 처럼
어떤 기준을 가지고 일반적인 문서 흐름에 따라서 배치되다가 스크롤이 일어나는 경우에만
fixed 처럼 뷰 포트를 기준으로 지정된 위치에 고정됩니다.
컨테이닝 블록
: 요소의 위치와 크기를 지정하는 데 사용하는 블록
: position : absolute === static 을 제외한 가장 가까운 부모요소
: position : fixed === viewport
Q2. this가 동작하는 원리와 용법을 아는대로 설명해주세요.
this는 자신이 속한 객체나 인스턴스를 가리키는 자기 참조 변수입니다.
this를 이용하면 자신이 속한 객체나 인스턴스의 프로퍼티, 메서드를 참조할 수 있습니다.
다른 언어와는 다르게 자바스크립트에서는 this가 가리키는 값,
this의 바인딩이 어떤 함수에서 호출되느냐에 따라서 동적으로 결정됩니다.
(자바, C++ 같은 언어에서는 언제나 클래스가 생성하는 인스턴스를 가리킨다)
this의 바인딩에는 크게 4가지의 규칙이 있습니다.
일반 함수에서는 전역객체를,
arrow function 에서는 외부 스코프의 this를,
메서드에서는 메서드를 호출한 객체를,
생성자 함수에서는 생성자 함수가 생성할 인스턴스를,
function.prototype.apply/call/bind 메서드에서는
첫번째 arguments로 전달된 객체를 바인딩 하게 됩니다.
자세한 설명
전역, 일반 함수 내부에서의 this는 전역 객체를 가리키게 됩니다.
브라우저에서는 window, Node.js 환경에서는 global 를 가리킵니다.
function printThis() {
console.log(this);
}
printThis(); // 브라우저에서는 window 객체, Node.js에서는 global 객체 출력
객체 내부의 메소드를 호출할 때에는 해당 객체를 가리킵니다.
const person = {
name: 'John',
sayName() {
console.log(this.name);
}
};
person.sayName(); // John 출력생성자 함수나 contructor 내부에서는 새로 생설될 객체를 가리킵니다.
function Person(name) {
this.name = name;
}
const person = new Person('John');
console.log(person.name); // John 출력이벤트 리스터의 콜백함수에서 this를 사용하면 이벤트를 발생시킨 요소, currentTarget에 바인딩 됩니다.
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
console.log(this); // "this" refers to the button element
});
이 바인딩 규칙에는 예외사항이 있습니다.
먼저 ES6 부터 추가된 arrow function내부에서 this를 호출할 경우입니다.
arrow function 은 자체적으로는 this를 가질 수 없습니다. (전역 객체 참조)
따라서 arrow function 내부에서 this를 사용하면 외부 스코프의 this 가 바인딩 됩니다.
이를 lexical this 라는 개념으로 부르기도 하는데,
arrow function 에서 this를 사용하면 항상 일정하게 외부 스코프의 this 가 바인딩 되므로,
this의 값을 예측할 수 있다는 점에서 일관성 있는 코드 작성이 가능합니다.
const myObj = {
name:'soo',
myMethod: function() {
console.log(this.name);
const myArrowFunc = () => {
console.log(this.name);
};
myArrowFunc();
}
};
myObj.myMethod();
위의 예시를 보면
먼저, myObj.myMethod 내부의 this는 myObj 를 바인딩 할 것이라는 것을 어렵지 않게
예측할 수 있습니다.
myMethod 메소드 내부에는 다시 myArrowFunc 라는 arrow function 이 정의되어 있습니다.
arrow function 내부에서의 this는 반드시 외부 스코프의 this를 바인딩 하게 되므로
myMethod 의 this와 동일한 myObj를 바인딩하게 됩니다.
다음으로는 apply/call/bind 메서드에 의해서 호출될 때 입니다.
이는 이 메서드들은 function 의 프로토타입 메서드로 모든 함수가 상속받아 사용할 수 있는데,
함수의 this를 명시적으로 바인딩하여, 함수를 호출할 때 this가 참조하고자 하는 대상 객체를 지정할 수 있습니다.
apply와 call 메서드는 첫번째 arguments로 전달한 객체를 호출한 함수의 this에 바인딩 할 수 있습니다.
function getThisBinding() {
console.log(arguments)
return this;
}
const thisArg = {a : 1}
console.log(getThisBinding.call(thisArg,[1,2,3]));
// Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}
console.log(getThisBinding.apply(thisArg,[1,2,3]));
//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}bind 메서드는 함수를 호출하지는 않지만 this가 바인딩된 새로운 함수를 생성할 수 있습니다.
새로운 함수를 반환하는데, 이 함수를 호출할 때, this가 특정 객체를 참조하도록 합니다.
function myFunction() {
console.log(this);
}
const myObj = {myValue: 42};
const myBoundFunction = myFunction.bind(myObj);
myBoundFunction(); //{myValue: 42}