기술면접 준비하기-3

Element와 Component의 차이점은 무엇인가요?

Element

• Component instance 또는 DOM 노드 및 원하는 속성을 설명하는 일반 객체입니다.
• 실제 instance가 아닙니다. 화면에서 보고 싶은 것을 React에게 알려주는 일종의 방법입니다.
• 요소에 대한 어떤 메소드도 호출 할 수 없습니다.
• type: (string | ReactClass)과 props: Object 두 필드가 존재하며 변경 불가능한 객체입니다.

DOM Elements

아래는 React가 렌더링 할 내용입니다.

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

<button> 태그를 만들며, className과 children이 props에 들어가 있으며, children에는 <b> 태그가 들어가 있고, <b> 태그의 children으로 OK!라는 글자가 들어 있는것을 확인할 수 있습니다.
위의 객체를 HTML로 표현했을 때는 아래와 같습니다.

<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

중요한 것은 하위 요소와 상위 요소 모두 설명일 뿐 실제 인스턴스가 아니라는 점입니다.

Component Elements

위에서 사용된 요소의 type속성은 React Component에 해당하는 함수 또는 클래스일 수도 있습니다.

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

Component를 설명하는 요소도 DOM 노드를 설명하는 요소와 마찬가지인 요소입니다.
서로 중첩되어 혼합할 수 있습니다.

const DangerButton = ({ children }) => ({
  type: Button,
  props: {
    color: 'red',
    children: children
  }
});

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [{
      type: 'p',
      props: {
        children: 'Are you sure?'
      }
    }, {
      type: DangerButton,
      props: {
        children: 'Yep'
      }
    }, {
      type: Button,
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
});

JSX로 표현하면 아래와 같습니다.

const DeleteAccount = () => (
  <div>
    <p>Are you sure?</p>
    <DangerButton>Yep</DangerButton>
    <Button color='blue'>Cancel</Button>
  </div>
);

따라서, React에서 Element는 태그를 지정하는 객체이고, 불변합니다. 또, 우리가 화면에 보는 것들을 얘기합니다. Component는 props로 입력을 받을 수 있고, Element를 반환하는 함수 혹은 클래스를 얘기합니다.

---

HTTP, HTTPS의 차이점은 무엇인가요?

HTTP (Hyper Text Transfer Protocol)

인터넷에서 웹 서버와 사용자 컴퓨터에 설치 된 웹 브라우저 사이에 문서를 전송하기 위한 통신 규약(Protocol)입니다. 즉, 인터넷에서 하이퍼텍스트(HyperText)를 전송(Transfer)하기 위해 사용되는 통신 규약(protocol)입니다.
기본 포트는 80이며, 클라이언트가 80포트를 사용해 연결하면 서버는 요청에 응답하면서 자료(정보)를 전송합니다. HTTP는 정보를 단순 텍스트를 주고 받기 때문에 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있습니다. 이러한 취약점을 해결하기 위한 통신 규약(protocol)이 HTTPS입니다.

HTTPS (HTTP + Secure Socket)

기본 골격이나 사용 목적 등은 HTTP와 거의 동일하지만, 데이터를 주고 받는 과정에서 보안요소가 추가된 점이 가장 큰 차이점입니다. 기본 포트는 443이며, 서버와 클라이언트 사이의 모든 정보가 암호화 되어 통신됩니다.

이 암호화는 웹 서버에 접속하는 사용자 모두에게 동일한 암호를 제공하는 것이 아니라 사용자마다 다른 암호를 제공해야하므로, 공개 키와 개인 키를 이용해 정보를 암호화합니다. 이러한 암호방식을 비대칭 암호라고 합니다.

비대칭 암호

공개 키와 개인 키가 서로 암호화, 복호화 된다는 점에서 나온 암호화 방식입니다. 공개 키로 암호화를 하느냐, 개인 키로 암호화를 하느냐에 따라 사용분야가 달라집니다.

• 공개 키로 암호화를 하는 경우
  • 데이터 보안에 중점을 둔 방법입니다.
  • 상대방의 공개 키로 데이터를 암호화하여 데이터를 전달하면, 데이터를 받은 사람(공개 키 주인)은 자신의 개인키로 데이터를 복호화합니다.
• 개인 키로 암호화를 하는 경우
  • 인증 과정에 중점을 둔 방법입니다.
  • 개인 키의 소유자가 데이터를 개인 키로 암호화하고, 공개 키와 함께 전달합니다. 공개 키와 데이터를 받은 송신자는 공개 키로 데이터를 복호화 할 수 있습니다.
  • 공개 키와 쌍을 이루는 개인 키에 의해 암호화가 되었다는 의미로 데이터를 제공자의 신원확인이 보장됩니다.

참고 > https://post.naver.com/viewer/postView.nhn?volumeNo=16561296&memberNo=1834

---

화살표 함수가 무엇인가요?

es6로 바뀌면서 function 키워드 대신 화살표(=>)를 사용해 보다 간략한 방법으로 함수를 선언할 수 있습니다.

const foo = function(x){
  return x*x;
}
console.log(foo(10)); // 100

---

const foo = (x) => return x*x;
console.log(foo(10)); // 100

일반적인 함수 표현식보다 표현이 간결합니다.

this

일반적인 함수 표현식과 가장 큰 차이는 this입니다.

일반적인 함수의 this

JavaScript의 경우 함수 호출할때 함수가 어떻게 호출되었는지에 따라 this에 바인딩 할 어떤 객체가 동적으로 결정됩니다.
기본적으로는 this는 전역객체에 바인딩되며, 내부함수의 this 또한 전역객체에 바인딩 됩니다. 즉, window 객체에 바인딩 됩니다.

const foo = { a : 'c'};
function b() {
  console.log(this);
}
b(); //window
b.bind(foo).call(); // foo
b.call(foo); // foo
b.apply(foo); // foo

위의 예시처럼 명시적으로 this를 바꾸는 함수 호출 메소드 bind, call, apply를 사용하면 this가 해당 객체를 가르킵니다.

화살표 함수의 this

함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됩니다. 동적으로 결정되는 일반 함수와 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킵니다. 이를 Lexical this라고 합니다. 화살표 함수는 call, apply, bind 메소드를 사용해서 this를 변경할 수 없습니다.

또한, 화살표 함수를 사용했을 때 혼란을 가져오는 경우가 있습니다.

메소드

화살표 함수로 객체의 메소드를 정의하는 것은 피해야합니다.

const person = {
  name : 'Heum',
  sayHello : () => console.log(`Hello ${this.name}`)
};

person.sayHello(); // Hello undefinded

위 예제의 경우 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가르킵니다.
이러한 경우에는 es6의 축약 메소드 표현을 사용하는 것이 좋습니다.

const person = {
  name : 'Heum',
  sayHello() {
    console.log(`Hello ${this.name}`);
  }
};

person.sayHello(); // Hello Heum

prototype

화살표 함수로 정의된 메소드를 prototype에 할당하는 경우도 동일한 문제가 발생합니다.

const person = {
  name: 'Heum'
};

Object.prototype.sayHello = () => console.log(`Hello ${this.name}`);

person.sayHello(); // Hello undefinded

위와 같이 문제가 발생합니다. 따라서 prototype에 메소드를 할당하는 경우, 일반 함수를 할당합니다.

const person = {
  name: 'Heum'
};

Object.prototype.sayHello = function() {
  console.log(`Hello ${this.name}`);
};

person.sayHello(); // Hello Heum

생성자 함수

생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가르키는 protytype 객체의 constructor를 사용합니다.
하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않아 생성자 함수로 사용할 수 없습니다.

const Foo = () => {};

console.log(Foo.hasOwnProperty('prototype'));// false

const foo = new Foo(); // TypeError: Foo is not a constructor

addEventListener 함수의 콜백 함수

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가르킨다.

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // true
  this.innerHTML = 'clicked button';
});

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우, 일반 함수를 사용해야합니다.
일반 함수로 정의된 addEventListener 함수의 this는 이벤트 리스너에 바인딩 된 currentTarget을 가르킵니다.

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  console.log(this === button); // true
  this.innerHTML = 'Clicked button';
});

참고 > https://poiemaweb.com/es6-arrow-function

---