[기술면접] JavaScript 부분 14

<목차>

28. 코드 불변성의 중요성
29. 이벤트 위임
30. CORS 정책

28. 코드 불변성의 중요성

• 불변성 : 데이터나 객체가 한 번 생성된 후에는 그 상태가 변경되지 않는 특성
• 불변 객체는 그 내용을 변경할 수 없으며 어떠한 변경이 필요한 경우 새로운 객체를 생성해야함
• 스프레드 연산자 등 사용

중요한 이유

1. 예측 가능성
   • 코드의 동작을 예측하기 쉬워짐
   • 객체의 상태가 변하지 않기 때문에, 시스템의 다른 부분이 해당 객체를 참조할 때 어떤 값이 반환될지 명확
   • 디버깅을 쉽게하고 버그를 줄일 수 있음
2. 병렬 처리
   • 멀티스레딩 환경처럼 여러 스레드가 동시에 데이터에 접근하게 되기 때문에 불변 객체는 데이터의 무결성을 유지하기 쉬움
   • 복잡한 동기화나 락 없이 데이터를 안전하게 공유할 수 있음
3. 메모리 관리
   • 일단 생성되면 그 상태가 변경되지 않기 때문에 같은 데이터를 필요로 하는 여러 부분에서 동일한 객체를 재사용 가능
   • 메모리 사용을 최적화하고 성능 향상을 가져올 수 있음
4. 함수형 프로그래밍
   • 함수형 프로그래밍의 핵심 원리 중 하나
   • 데이터의 불변성을 유지하여 부작용을 최소화
   • 프로그램의 흐름을 더 명확히하고 코드의 재사용성과 테스트 용이성을 높임
5. 역사적 추적
   • 불변 객체는 이전 상태를 쉽게 보존할 수 있음
   • 데이터의 역사적 상태를 추적하고 시간에 따른 변화를 기록하기 쉬움
   • 어떤 객체의 상태가 시간에 따라 어떻게 변화했는지를 기록할 때 불변성은 유용
6. 참조 투명성
   • 참조 투명성을 보장
   • 동일한 임력에 대해 항상 동일한 출력을 반환하는 순수 함수를 작성
   • 프로그램의 행위를 예측 가능하게 만들고, 테스트와 재사용을 용이하게 함

Q. 코드를 작성할 때 불변성이 중요한 이유를 설명해주세요.

29. 이벤트 위임

• 특정 요소에 이벤트 리스너를 직접 부착하는 대신, 하나의 상위 요소에 이벤트 리스너를 설정하고 하위 요소들의 이벤트를 처리하는 기법
• 이벤트 버블링을 활용
• 특정 요소에서 이벤트가 발생했을 때, 이 이벤트가 상위 요소로 전파되는 특성
• 특히 많은 수의 동일한 유형의 자식 요소를 가진 부모 요소에서 유용
• 자원을 절약하고 코드의 복잡성을 줄이는데 도움
• 성능 최적화와 동적인 요소 관리에 중요한 역할

이벤트 위임의 장점
1. 메모리 사용 최소화
- 각각 하위 요소에 이벤트 리스너를 붙이는 것이 아니라 상위요소에만 리스너를 설정하기 때문에 메모리 사용량 감소
2. 관리 용이성
- 모든 이벤트 리스너를 한 곳에서 관리할 수 있어 코드의 복잡성이 감소하고 유지보수가 쉬워짐
3. 동적인 요소 처리
- 페이지 로드 후 동적으로 추가되는 요소들에 대해 별도의 이벤트 리스너를 추가하지 않아도 자동으로 이벤트 처리
- AJAX콘텐츠 로딩, 사용자 인터렉션에 의한 요소 추가 등에서 유용

예시)
li태그 대신 ul에 이벤트 리스너 추가

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

const menu = document.getElementById('menu');

menu.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        alert(`You clicked ${event.target.textContent}!`);
    }
});

30. CORS 정책

• 교차 출처 리소스 공유
• 웹 페이지가 다른 도메인의 리소스를 안전하게 요청할 수 있도록 하는 보안 메커니즘
• 웹 브라우저는 "같은 출처 정책"을 따른다.
• 웹 페이지가 다른 도메인, 프로토콜, 또는 포트에서 실행되는 스크립트로부터 리소스를 받아오는 것을 제한
• 잠재적인 악의적인 동작으로부터 사용자의 데이터를 보호하기 위한 조치
• 보안 강화

CORS 작동 원리

• HTTP 헤더를 사용하여 웹 서버가 다른 출처의 웹 페이지에 자신의 리소스에 대한 접근을 허용할 수 있도록 함

• http://example.com에서 실행중인 웹페이지가 http://api.example.org에서 데이터를 요청한다면 이 요청은 교차 출처 요청

• 단순 요청

  • "단순 메소드"(GET,POST,HEAD)중 하나를 사용,
  • HTTP 헤더가 CORS사양에서 정의한 안전한 헤더 집합에 속하는 요청
  • 브라우저는 자동으로 Origin 헤더를 요청에 포함, 서버는 이에 대한 응답으로 Access-Control-Allow-Origin 헤더를 포함시켜야 함
  • 서버가 이 헤더를 포함하여 적절한 출처를 명시하면, 브라우저는 리소스에 대한 접근 허용

  // 요청 헤더
  Origin: http://example.com
  
  // 응답 헤더
  Access-Control-Allow-Origin: http://example.com

• 사전 요청
  - "비단순 메소드"(PUT,DELETE)사용 또는 커스텀 헤더를 사용

  • 브라우저는 사전에 서버에게 요청을 보낼 수 있는 권한이 있는지 확인하기 위해 OPTIONS메소드를 사용하는 사전 요청을 보냄
  • 서버는 이 요청에 대해 허용되는 메소드, 헤더, 그리고 출처를 명시하는 응답을 반환

  // 사전 요청 헤더
  OPTIONS /resource
  Origin: http://example.com
  Access-Control-Request-Method: PUT
  Access-Control-Request-Headers: X-Custom-Header
  
  // 응답 헤더
  Access-Control-Allow-Origin: http://example.com
  Access-Control-Allow-Methods: PUT, DELETE, GET
  Access-Control-Allow-Headers: X-Custom-Header