개발을 하던 도중에 CORB라는 에러를 발견했다. CORS에러는 많이 들어봤지만 CORB에러는 처음 들어봐서 이참에 공부 해보기로 한다. CORB란 ? Cross-Origin Read Blocking(CORB)의 약자로, 악의적은 의도의 웹 사이트로부터 막기위해 도움이 되는 새로운 웹 플랫폼 보안 기능이다. 민감한 정보가 포함되어 있을 수 있고, 기존 웹 기능에 필요하지 않은 경우 브라우저가 웹 페이지에 특정 교차 출처 네트워크 응답을 제공하지 못하도록 설계되었다. 예를 들어 또는 태그에서 요청한 원본 간 text/html 응답을 차단하고 대신 빈 응답으로 바꾼다. 이는 사이트 격리에 포함된 보호 기능의 중요한 부분이다. CORB가 발생 했을 때 대처 대부분의 경우 차단된 응답은 웹 페이지의 동작에 영향..

reduce 메서드 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); reduce 인자 누적 값(acc) 현재 값(cur) 현재 인덱스 (curIndex) 원본 배열(arr) 누적값이기 때문에 다양하게 활용할 수 있다. const oneTwoThree = [1, 2, 3]; result = oneTwoThree.reduce((acc, cur, i) => { console.log(acc, cur, i); return acc + cur; }, 0); // 0 1 0 // 1 2 1 // 3 3 2 result; // 6 누적된값 + 현재값을 더하면 된다! acc(누적값)이 초깃값인 0부터 시작해서 return하는대로 누적되는 것을 볼 수 있다. 초깃값을 적어주지..

자바스크립트 코드의 동작 원리 console.log(1+1) setTimeout(function() { console.log(2+2) }, 1000) console.log(3+3) 이 코드를 실행하면 2 6 4 이러식으로 출력 결과가 나온다. 이 원리는 웹브라우저는 자바스크립트 코드를 실행시켜주는 엔진이다. 이때 해석할 때 단계는, 스택이라는 공간에 코드를 집어넣고 한줄한줄 실행을 해준다. (변수를 만났을 때는 힙이라는 공간에 넣고 가져다 쓴다.) 스택은 하나밖에 없기 때문에 한번에 코드 한줄 밖에 실행을 못한다. 이를 single threaded 라고 한다. setTimeout같은 코드는 바로 실행을 할 수 없는 코드이기 때문에, 잠깐 대기실에 놔두고 실행하다. 이 대기실에 보내는 코드들은 Ajax요청..

객체지향 Class 문법 만약에 {object} 자료형으로 정보를 가져올 때 그 수가 어마어마하게 많다면 일일히 치기 비 효율적이다. 이때 쉽게 할 수 있는 문법이 클래스 문법이다! 클래스 문법으로 비슷한 object형을 많이 만들어 쓸 수 있다. function 기계(스킬1,스킬2) { this.q = 스킬1; this.w = 스킬2; } this란? 간단하게 말해서 기계로부터 생성되는 object 이다. 이를 instance라고한다. this가 존재하면 클래스 역할이 가능하다. const nunu = new 기계('strike','courage') 클래스를 이용해 간단하게 오브젝트를 생성할 수 있다. new는 기계로 부터 자식을 뽑아주는 문법! ES6 class 문법 class Hero { const..

sort() 함수? 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 리턴하는 값이 -1인경우, a가 b보다 앞에 오도록 정렬하고, 리턴하는 값이 1인 경우, b가 a보다 앞에 오도록 정렬합니다. 만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다. 배열의 숫자들을 유니코드 순서가 아닌, 숫자 크기 순서대로 정렬하기 위해서 sort() 함수의 파라미터로 함수를 정의해야한다. 두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여 두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달 숫자를 오름차순으로 정렬하는 예제를 위와 같이 단순화 배열의 오름 차순 방법 1) arr.sort(function(a, b) { if..

리액트 코딩 강의를 듣다가 리액트는 Deep copy를 사용해야 한다는 말을 듣고 Deep copy의 개념과 또다른 용어 Shallow copy를 정리하고자 한다. https://replit.com/ 사이트에서 간단하게 코딩을 해보겠다. 이때 사용할 것은 각각 영어를 번역하면 Deep copy 는 깊은 복사, Shallow copy 얕은 복사이다. 이것의 뜻은 뭘까? 우리가 프로그래밍 언어를 만드는 관점에서 보자 let num1 = 1; let num2 = num1; num2 = 2; console.log(num1,num2) // num1 : 1, num2 : 2 위와 같은 결과를 깊게 생각해보면, 1번째는 num1 :1 num : 2 의 값이고 2번째는 num1 :2 num : 2 가 된다. 2번째는 ..