position 사용법, this 동작 원리와 용법 그리고 차이점

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

"position"은 HTML과 CSS를 사용하여 요소(element)를 웹 페이지 상에서 어떤 위치에 표시할지를 결정하는 속성입니다. 요소를 상대적으로(relative), 절대적으로(absolute), 고정(fixed)하거나, 그리드(grid)나 플렉스(flex) 레이아웃과 같은 다른 레이아웃 기능을 사용하여 배치할 때도 사용됩니다.

• relative : 요소의 원래 위치를 기준으로 위치를 조정할 때 사용됩니다. 이 때 top, bottom, left, right 속성을 사용하여 상대적으로 이동할 위치를 지정합니다.
• absolute : 요소를 가장 가까운 부모 요소나, 부모 요소가 없을 경우 body 요소를 기준으로 위치를 조정할 때 사용됩니다. 이 때 top, bottom, left, right 속성을 사용하여 절대적으로 이동할 위치를 지정합니다.
• fixed : 요소를 뷰포트(viewport) 상단이나 좌측에 고정하여 스크롤을 내려도 항상 그 위치에 머무르도록 할 때 사용됩니다. 이 때 top, bottom, left, right 속성을 사용하여 고정할 위치를 지정합니다.

또한 "position" 속성은 요소를 겹쳐서 표시할 때 사용됩니다. 예를 들어, z-index 속성과 함께 사용하여 요소의 겹침 순서를 지정할 수 있습니다. z-index 속성은 요소의 스택 순서를 결정하며, 숫자가 큰 요소가 상위에 나타납니다.

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

"this"는 자바스크립트에서 가장 중요한 키워드 중 하나로, 현재 실행되고 있는 함수가 속한 객체를 참조하는 데 사용됩니다. "this" 키워드를 사용하면 실행 컨텍스트에서 현재 객체를 참조할 수 있으며, 함수가 호출되는 방법에 따라 다르게 동작할 수 있습니다.

보통 "this"는 객체 내부의 메소드를 호출할 때 사용됩니다. 이때, "this"는 해당 메소드를 호출한 객체 자체를 참조합니다. 다른 용법으로는 생성자 함수를 사용하여 객체를 생성할 때, "this"를 사용하여 생성된 객체를 참조할 수 있습니다.

const myObject = {
  myProperty: 'Hello',
  myMethod: function() {
    console.log(this.myProperty);
  }
};

myObject.myMethod(); // 'Hello' 출력

위 코드에서 "this"는 "myMethod" 메소드가 속한 "myObject" 객체를 참조합니다. 따라서 "myMethod"가 호출될 때 "this.myProperty"는 "myObject.myProperty"와 같은 값이 됩니다.

그러나 함수가 일반적인 방식으로 호출될 때, "this"의 동작 방식은 다소 복잡해집니다. 이때, "this"는 전역 객체(window 객체 또는 global 객체)를 참조하거나, "strict mode"를 사용할 경우 "undefined"를 반환할 수 있습니다. 이러한 경우를 방지하기 위해 함수 내에서 "this"를 사용하기 전에 "bind", "call", "apply" 메소드를 사용하여 "this" 값을 지정할 수 있습니다.

함수의 일반적인 호출과 "this"의 참조 객체가 다르게 동작하는 경우가 있으므로, 이는 평소의 코드와 가장 큰 차이 중 하나입니다. 예를 들어, 다음과 같은 코드에서:

const myFunction = function() {
  console.log(this);
};

myFunction(); // 전역 객체(window 또는 global) 출력

"myFunction"이 일반적인 방식으로 호출되었으므로, "this"는 전역 객체를 참조합니다. 하지만 "this"의 값이 어떻게 동작하는지 명확하게 이해하고, "bind", "call", "apply" 메소드를 사용하여 "this" 값을 지정하는 등의 방법을 사용하면 "this"를 올바르게 사용할 수 있습니다.