http vs https / 쓰로틀링과 디바운싱 / 클래스형 vs 함수형

기술면접대비 예상질문 내용을 정리해보자

🖥️ http vs https

HTTP(Hypertext Transfer Protocol)와 HTTPS(Hypertext Transfer Protocol Secure)는 웹 브라우저와 웹 서버 간의 통신을 위한 프로토콜로, 주로 웹 페이지를 요청하고 전송하는 데 사용된다.

차이점

• 보안성 : HTTP는 암호화되지 않은 평문 통신을 하므로 데이터가 도청될 수 있지만, HTTPS는 SSL 또는 TLS 프로토콜을 사용하여 데이터를 암호화하여 보안을 강화한다.
• 인증서 필요 여부 : HTTPS는 인증서를 필요로 합니다. 인증서는 웹 서버의 신원을 확인하고 클라이언트와 서버 간의 통신을 보호하는 역할을 한다.
• 포트 번호 : HTTP는 기본 포트인 80번을 사용하고, HTTPS는 기본 포트인 443번을 사용한다.
• SEO : 구글 등의 검색 엔진은 HTTPS를 사용하는 웹사이트를 더 높은 순위로 표시하는 경향이 있다.

요약하자면! HTTP는 보안성이 낮고 HTTPS는 보안성이 높은 프로토콜로, 중요한 정보를 주고받거나 웹사이트의 보안을 강화해야 할 때 HTTPS를 사용하는 것이 좋다.

참고
블로그

---

쓰로틀링(Throttling)과 디바운싱(Debouncing)

쓰로틀링(Throttling)

• 쓰로틀링은 일정 시간 동안 특정 동작이 실행되지 않도록 제어하는 것을 말한다. 주로 이벤트 핸들러가 자주 호출되는 경우, 일정 시간 동안 한 번만 실행되도록 제한하는 용도로 사용된다.

특징과 사용하는 이유

• 일정 시간 동안 한 번만 동작을 실행하고, 그 이후에는 해당 시간이 지날 때까지 다시 동작하지 않는다.
• 주로 스크롤, 리사이즈 등의 이벤트 처리에 활용된다.
• 사용자 경험을 향상시키고 부드러운 인터랙션을 제공하며 성능을 최적화할 수 있다.
• 과도한 이벤트 핸들러 호출을 방지하여 성능 저하를 줄여준다.

디바운싱(Debouncing)

• 디바운싱은 연이어 발생하는 이벤트를 그룹화하여 마지막 이벤트만 처리하는 방식이다. 주로 입력창에서 사용자의 타이핑이 멈출 때까지 기다려서 검색이나 자동완성과 같은 동작을 실행할 때 활용된다.

특징과 사용하는 이유

• 연이어 발생하는 이벤트 중 마지막 이벤트만 처리한다.
• 사용자가 입력을 마친 후 일정 시간이 지난 후에 동작을 실행한다.
• 사용자의 의도에 맞게 입력을 처리하여 부드러운 사용자 경험을 제공한다.
• 과도한 이벤트 핸들러 호출을 방지하여 성능을 최적화할 수 있다.

---

React 클래스형 vs 함수형

클래스형 컴포넌트

• state 사용 : 클래스형 컴포넌트에서는 constructor 메서드를 사용하여 초기화 작업 및 this.state를 통해 상태(state)를 관리한다.
• 생명주기 메서드 사용 : componentDidMount, componentDidUpdate, componentWillUnmount 등의 생명주기 메서드를 사용하여 컴포넌트의 라이프사이클에 따른 작업을 수행할 수 있습니다.
• this 키워드 사용 : 메서드에서 this 키워드를 사용하여 다른 메서드나 상태에 접근한다.
• 클래스 기반 문법 : 자바스크립트 클래스 문법을 사용하여 컴포넌트를 정의한다.

예시

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    // 컴포넌트가 마운트된 후에 실행되는 코드
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

함수형 컴포넌트

• state 사용 : React 16.8 이후부터 함수형 컴포넌트에서도 useState 훅을 사용하여 상태를 관리할 수 있다.
• 생명주기 메서드 대신 훅 사용 : useEffect 훅을 사용하여 컴포넌트의 라이프사이클에 따른 작업을 수행할 수 있다.
• this 키워드 사용 안 함 : 함수형 컴포넌트 내부에서는 this 키워드를 사용하지 않는다.
• 함수 기반 문법 : 함수 문법을 사용하여 컴포넌트를 정의한다.

예시

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트된 후나 업데이트된 후에 실행되는 코드
    return () => {
      // 컴포넌트가 언마운트되기 전에 실행되는 코드
    };
  }, []); // 빈 배열은 마운트 시에만 실행

  const handleClick = () => {
    setCount(count + 1);
  };

  return <button onClick={handleClick}>Count: {count}</button>;
}

차이점

• 클래스형 컴포넌트는 복잡한 상태 관리나 라이프사이클 메서드를 다룰 때 유용하다.
• 함수형 컴포넌트는 간단한 컴포넌트나 상태 관리가 간단한 경우, 코드가 간결하고 이해하기 쉬우며 테스트하기 편리하다.
• React Hooks를 사용하면 함수형 컴포넌트에서도 상태(state)와 라이프사이클에 관련된 작업을 할 수 있어서 함수형 컴포넌트가 더욱 강력해졌다.

함수형 컴포넌트를 사용하는 이유?

• 클래스형 컴포넌트보다 선언하기 쉽고 작성해야 할 코드가 더 적다.
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
• 클래스형 컴포넌트보다 빌드 후 파일 크기가 더 작다.
• render() 함수가 필요 없어서 컴포넌트 마운트 속도가 더 빠르고, 가독성이 좋은 장점이 있다.

참고
공식문서
블로그