TIL 7 (2021.10.13)

PROXY - CORS 문제를 해결하는 방법 중 하나.

Proxy 서버를 통해서

1. 방화벽 기능

2. 웹 필터 가능

3. 캐쉬 데이처, 공유 데이터 기능을 제공

4. 아이피를 proxy server에서 임의로 바꿔서 인터넷에서는 접근자의 ip를 모르게 할 수 있어서 더 나은 보안을 제공

 

CORS - Cross-Origin Resource Sharing  다른 origin( ex) 서버 <-> 클라이언트 )이 리소스를 공유할 때,  보안을 이유로 추가적인 설정이 없이는 request 를 보낼 수 없습니다.

 

출처 MDN

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

 

---

아래 개념을 대략적으로 이해할 수 있다.

blocking -> n이 진행 될 때, n+1의 실행은 block

 

synchronous (동기적) ->  n이 종료되는 시점과 n+1이 시작되는 시점이 같다. 

 

non-blocking -> block이 없다.

 

asynchronous (비동기적) -> n의 시점과, n+1시점이 상관이 없다.

 

callback 함수 전달 방법을 알고 있다.

 

고차 함수(higher order function)는 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수입니다. 이전 콘텐츠에서 확인했듯이, 함수는 변수에 저장할 수 있습니다. 그리고 함수는, 함수를 담은 변수를 인자로 전달받을 수 있습니다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있습니다. 그리고 함수는 이 변수를 리턴할 수 있습니다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있습니다. 어떤 고차 함수에 함수를 인자로 전달하고, 고차 함수는 함수 자체를 리턴합니다. 변수가 빠졌을 뿐, 동일하게 동작합니다.콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있습니다. caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있습니다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수도 있습니다.

 

이때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 합니다. 콜백 함수의 이름은, 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백이라는 이름이 붙여졌습니다.

---

클로져의 정의는 함수와 함수가 선언된 어휘적 환경의 조합입니다.

이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.라고 표현하고 있습니다.

쉽게 말하자면, 외부함수의 컨텍스트(실행환경)에 접근할 수 있는 '내부함수' 라고 할 수 있습니다.

 

이러한 클로져의 특징은 내부 함수가 외부 함수 안에 선언된 변수에 접근할 수 있다는 것이며, 이 때에 내부함수를 클로져 함수라고 부르기도 합니다.

 

특징

1. 데이터 보존
클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내의 변수를 계속해서 사용할 수 있다.
const adder = function(x) {
	return function(y) {
		return x + y;
	}
} // 이러한 함수는 adder(x)(y)로 사용할 수 있다.
const add5 = adder(5)
add5(7) // 12 - adder이라는 함수 밖으로 나왔음에도 외부 함수의 x 변수를 이용해 
// 5를 할당할 수 있다. 이는 어휘적 환경을 메모리에 저장하기 때문에 가능한 일이다. 

add5(10) // 15

2.정보의 접근 제한
const makeResult = () => {
	let value = 0;
	return {
		increase: () => {
			value = value + 1
		},
		decrease: () => {
			value = value - 1
		},
		getResult: () => value
	}
}
const make1 = makeResult();

1의 데이터 보존을 통해서 함수의 value = 0 을 사용할 수 있으며, make1은
increase, decrease, getResult를 가진 객체가 된다.
여기서 클로저 함수를 이용하지 않았을 경우, 함수 내부에 value를 두지 못하며,
value는 전역변수가 된다. 전역 변수는 부수 효과로 인해서 의도치 않게 변경될 수 있는데 
내부에 value 변수를 선언함으로써, 함수를 변경하지 않는 이상 쉽게 value를 바꿀 수 없다.
클로저를 이용해서 전역변수의 사용을 줄이고, 스코프를 이용해서 value의 값을 보호할 수 있다.

3. 모듈화
const make1 = makeResult();
make1.increase();
make1.increase();
make1.decrease();
make1.getResult(); // 값은 0 + 1 + 1 - 1 = 1이 된다.

const make2 = makeResult();
make2.decrease();
make2.decrease();
make2.decrease();
make2.getResult(); // 값은 0 - 1 - 1 - 1 = -3이 된다.
이처럼 make1과 make2가 함수의 value값에 영향을 미치지 않기 때문에 재사용할 수 있다.

 

 

---