2024년 3월 다섯째주

1. Meta tag - CSP 알아보기

<meta
  http-equiv="Content-Security-Policy"
  content="upgrade-insecure-requests" />

요렇게 되어있는 메타태그의 역할은 뭘까?😯

http-equiv 어트리뷰트 : HTTP 와 동등을 의미하며, 웹 브라우저에게 해당 메타 태그의 Content 에 들어가는 내용이, HTTP 헤더와 동등한 Content임을 의미한다.
- 예를들어 <meta http-equiv="refresh" content="30"> 로 설정할 경우, 브라우저에게 페이지를 30초마다 새로 고침하도록 요청하는 것과 동일하다.
- 또한 Content-Type이나, Content-Language, Content-Security-Policy와 같은 HTTP 헤더와 관련된 메타정보를 지정할 수 있다.
  - 메타 정보란 ? 다른 데이터를 설명하거나 제어하는 데이터
- Content-Security-Policy (CSP) 는? 웹앱의 보안을 강화하기 위한 보언 메커니즘 중 하나로, CSP 는 웹앱에서 실행되는 스크립트, 스타일시트, 이미지 등의 리소스가 로드 되는 방식을 제어한다.
Content 어트리뷰트 : 위에서 언급했듯, http-equiv 어트리뷰트에 따라 정의된 메타 정보 내용이, content 어트리뷰트에 포함된다.
upgrade-insecure-requests : CSP 의 지시어 중 하나로, 해당 지시어를 사용하여 HTTP로 시작하는 리소스 요청을 자동으로 HTTPS로 변환하도록 브라우저에 지시한다.
- 웹페이지에는 종종 HTTPS 로 로드되지 않는 리소스가 포함 될 수 있는데, (mixed content) 이를 HTTPS 로 업그레이드 하여 보안을 강화한다.

따라서 브라우저가 위의 메타태그를 만나면, 해당 페이지 내에서 로드되는 모든 HTTP요청을 HTTPS로 변환하려고 시도한다.

cypress 는 내부적으로 chai 와 mocha 에 의존하고 있다.
chai : chai 는 테스트코드 내 assertion을 수행하기 위한 라이브러리. 즉, should, expect, assert 등의 assertion 문법 사용 시 필요
mocha : 테스트 프레임워크로서 describe, it 과 같은 함수를 사용하여 테스트 케이스를 작성하고 테스트를 실행하는데 사용된다.

따라서 타입스크립트 환경에서 cypress 구동을 위해서는 @types/chai 와 @types/mocha를 설치해야한다.

이름 그대로 ‘Decorating’ 즉, 어떤 베이스가 되는 클래스에 장식(?)을 하여, 새로운 기능을 추가하는 것.
객체의 결합을 통해서 기능을 동적으로 유연하게 확장하는 패턴
즉, 기본 기능에 추가 가능한 기능의 종류가 많을 경우, 각 추가 기능을 데코레이터 클래스로 정의한 후, 필요한 데코레이터 객체를 조합하여 추가 기능의 조합을 만든다.
즉 상속이 아닌 합성을 이용하는 방식
- 상속과 합성 : 상속은 객체가 부모의 클래스에서 행동을 전부 상속받은 후, 어떤 행위를 수행할 수 있지만, 합성에서는 한 객체가 다른 객체에 대한 참조를 갖고 일부 작업을 위임함

특정 객체에서 ‘행위’ 즉 ‘전략’을 별도로 분리하는 것
자동차 경주를 예로 들어보면.. 자동차 경주라는 클래스가 현재 요구사항으로 주어진 경주 룰에 대한 정보를 그대로 가지고 있다고 가정하자. 그러면 이 때 만약 기존 룰과 다른 룰의 자동차 경주게임이 추가되면 어떨까? 아예 새로운 자동차 경주 클래스를 만들어야하는걸까? (그러면 기존 자동차 경주 코드들은 재사용불가능하게 되는데!😱) 아니면 메서드 내부에서 분기문을 태워야하나? (룰이 한두개이면 상관없는데 10개 이상의 다른 룰이 추가된다면..?😇)
이 때, 자동차 경주 클래스에서 ‘승자를 판별하는 룰’이라는 행위를 직접 가지고 있는게 아니라 외부에서 주입하도록 하는 것이다. 요게 전략패턴이다.