기술 면접 스터디 (4)

position 을 어떻게 사용하는지 알려주세요.

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있습니다.

static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다.

position의 속성

static

• 요소를 문서 흐름에 맞추어 배치.
• static은 position 속성의 기본값입니다. 요소를 나열한 순서대로 배치하며 top, right, bottom, left와 같은 속성을 사용할 수 없습니다.

relative

• 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.
• static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 속성값입니다.

absolute

• 원하는 위치를 지정해 배치.
• absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다.

fixed

• 지정한 위치에 고정하여 배치.
• fixed 속성값은 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다. 하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다. 따라서 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.

sticky

• 위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에 는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작.
• sticky 속성은 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed 속성과 같이 동작하게 됩니다. 그러다 스크롤이 scroll 박스 밖으로 벗어나게 될 경우에는 그 위치에서 정지하게 됩니다.

this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• this는 코드 어디서든 참조할 수 있다.
• this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

바인딩이란?

• 식별자와 값을 연결하는 과정을 말한다.
• 변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
• this 바인딩은 this(키워드로 분류되지만 식별자의 역할을 한다.)와 this가 가리킬 객체를 바인딩하는 것이다.

this를 전역에서 사용 한 경우

• 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 window라는 전역 객체를 참조한다.
• 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. (Node.js에서 전역 객체는 global 이다.)
• 브라우저라는 자바스크립트 런타임에서 모든 변수, 함수는 window라는 객체의 프로퍼티와 메소드이다.

this를 함수 내부에서 사용 한 경우

• 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
• 객체안에 선언된 함수를 전역에 선언된 함수와 구분하기 위해 메소드라고 한다.
• 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
• 모든 함수는 객체 내부에 있다.
• 이때 this는 현재 함수를 실행하고 있는 그 객체를 참조한다.
• 정리하면 함수 내부에서 this의 값은 함수를 호출하는 방법에 의해 바뀐다.
• 그리고 또한 엄격모드 여부에 따라 참조 값이 달라진다.
• 엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다.