JS
CSP (Content Security Policy) 란?
# CSP ? 웹 개발을 하다보면 이런 식의 오류를 마주할때가 있다 "refused to execute inline script because it violates the following content security policy directive ~ " 이런 류의 오류들의 원인은 CSP 를 위반했기 때문이다. CSP (Content Security Policy) 에 대한 MDN 의 정의 문서를 보면 아래와 같이 서술되어 있다. "Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XS..
#33 가지 Javascript 필수 개념 - 5. Equals
본 내용은 아래의 링크를 참조하여 작성되었습니다. (https://github.com/leonardomso/33-js-concepts#5--vs--vs-typeof) * 동치 관계 파악 대부분의 프로그래밍 언어에서 두 개의 변수 혹은 값이 동일한 대상인지 아닌지 판별하기 위해서 == (Double Equals) 를 사용하는 동일 연산자를 제공하는데, JS 의 경우 특이하게 2가지 동일 연산자를 제공한다. == (Double Equals) 와 === (Triple Equals) 가 바로 그것이다. 둘은 구체적으로 어떻게 다른지 알아본다. * Double Equals (==) 먼저 Double Equals 는 두 대상의 Value 만 비교하는 연산자 이다. 예를 들면 위와 같이 비교를 했을 때 결과가 전부 ..
CORS (Cross Origin Resource Sharing)
토이 프로젝트를 개발하다가 자주 이 이슈를 마주해서 이참에 개념 정리를 해볼겸 글을 작성하게 되었다. * CORS CORS 란 다른 출처(Origin) 간의 Resource 에 대한 접근, 공유 권한을 처리하는 보안 정책이다. * Origin ? 출처(Origin) 이란 것은 URL 의 구성요소에서 protocol, host, port 를 의미하는데, URL 은 보통 아래 같이 구성된다. 출처(Origin) 이 동일한지 다른지는 앞서 언급한 세가지 요소 protocol, host(위 그림에서 domain), port number 가 같은지 다른지를 판별해서 결정된다. port number 의 경우 http 는 기본 값이 80, https 는 기본 값이 443 이다. 보통의 사이트들은 포트번호를 입력하고 ..
Axios 와 Fetch
이 내용은 아래의 주소를 참조하여 작성되었습니다. (https://blog.logrocket.com/axios-or-fetch-api/) Axios 와 Fetch 둘 다, 서버와 클라이언트간 비동기 통신을 위해서 사용되는 javascript 라이브러리다. * AJAX ? AJAX 란 Asynchronous Javascript And XML 의 약자로, JS 를 이용해서 클라이언트 서버 간 XML 데이터를 비동기적으로 주고 받게 해주며, XMLHttpRequest 객체를 이용해서 전체 페이지를 reload 하는게 아니라, 필요한 데이터 일부분만 reload 하는 방식이다. Axios 와 Fetch 는 AJAX 를 구현한 JS 라이브러리로, 둘의 차이점을 살펴보면.. -1) 호환성 문제 Axios 의 경우 ..
#33가지 Javascript 필수 개념 - 4. Type Coercion
본 내용은 아래의 링크를 참조하여 작성되었습니다 (https://github.com/leonardomso/33-js-concepts#4-implicit-explicit-nominal-structuring-and-duck-typing) * Type Coercion 형 변환 (Type Coercion) 은 A 라는 예상 타입으로 변수의 타입이 결정되기를 바랬으나, 실제로는 B 라는 예상치 못한 타입이 나와서 이를 다시 A 타입의 변수로 바꾸는 작업을 말한다 예를 들면, Number 타입의 변수가 오기를 바랬으나, 실제로는 String 형태의 타입이 와서 값을 Number 타입으로 다시 변환하는 작업 같은 것을 말한다. 형 변환에는 두가지가 존재하는데, Implicit Type Coercion (암묵적 형 변..
#33가지 Javascript 필수 개념 - 3. Value Types, Reference Types
본 내용은 아래의 글을 참조하여 작성하였습니다 (https://github.com/leonardomso/33-js-concepts#3-value-types-and-reference-types) * Pass By Value 앞선 게시글 JS 필수 개념 2 - Primitive Types (https://sdy-study.tistory.com/29) 에서도 언급했듯이, JS 의 기본 데이터 타입을 Primitive Types 라 부르고 이에 대한 타입이 총 5개가 존재한다고 했다 (ES6 이후 추가된 Symbol 은 일단 제외한다) 5개의 primitive types (Number, Null, Undefined, String, Boolean) 은 데이터를 처리할 때 값(value) 에 근거하여 변수에 변화를..
#33가지 Javascript 필수 개념 - 2. Primitive Types
본 내용은 아래의 글을 참조하여 작성하였습니다. (https://github.com/leonardomso/33-js-concepts) * 데이터 타입 모든 프로그래밍 언어가 그렇듯, 어떤 언어를 배움에 있어서 초반에 항상 배우는 내용 중 하나가 "데이터 타입"이다. ECMAScript 표준에 따른 JS 의 데이터 타입은 7개로 규정되어 있다. - Number - Boolean - String - Null - Undefined - Symbol - Object 로 규정되어 있으며, 이중에서 Primitive Types (기본 자료형) 으로 규정된 것은 Object 를 제외한 나머지 자료형이다. (Symbol 은 ECMAScript 6 부터 등장했다) * 변수의 선언 JS 에서 변수를 선언 할 때는, 타입을 ..
#33가지 Javascript 필수 개념 - 1. Call Stack.
- 본 내용은 아래의 글을 참조하여 작성하였습니다. (https://github.com/leonardomso/33-js-concepts) *Call Stack Call Stack 을 논하기에 앞서서 컴퓨터의 메모리 구조에 대해서 어느정도 알고 갈 필요가 있다.. (참조 : http://tcpschool.com/c/c_memory_structure) 실행할 프로그램에 대한 메모리 관리는 OS 가 담당하며, OS 는 프로그램에게 메모리를 할당할 때, 아래와 같은 4개의 영역으로 나눠서 메모리를 할당한다. 각 영역을 살펴보면, 첫번째 코드 영역은 실행할 프로그램의 코드를 저장하는 역할을 담당한다. 두번째 데이터 영역은 프로그램의 전역(global) 변수와 정적(static) 변수가 저장되는 영역이다. 이 영역..