1. SOP 먼저 Cors에 대해 알아보기 전에 알아야 하는 개념인 SOP에 대해 먼저 설명해보자면 SOP는 Same-Origin Policy의 약자로 우리나라 말로하면 동일 출처 정책 이라는 뜻이다 즉 동일 출처 정책 이라는말 그대로 다른 출처의 리소스를 사용하는 것에 대해 제한하는 보안방식 이다 1.1 출처(origin) 그렇다면 출처 라는건 웹에서 어떤걸 말하는 걸까? 😕 위 그림에서 보다시피 출처란 프로토콜, 호스트이름, 포트를 합친 것을 출처라고 한다 이 출처를 통해서 같은 출처인지 다른 출처인지를 판단한다! 그렇다면 http://localhost와 동일 출처인 url은 어떤것일까? 1. https://localhost 2. http://localhost:80 3. http://127.0.0.1..
🧐 React Virtual DOM 이란?! React같은 SPA 라이브러리에서는 효율적인 렌더링을 하기 위해 실제 DOM오브젝트의 복사본 혹은 추상화를 하여 diffing 알고리즘이나 reconciliation 프로세스를 통해 실제 DOM과 동기화해서 실제 DOM에서 변경된 부분만 감지해서 렌더링을 수행하기 위해서 리액트가 생성하는 가상 DOM 오브젝트를 Virtual DOM 이라고 한다. reconciliation 이 어떤식으로 동작하는지는 별도의 글을 써서 알아보기로 하고 지금은 Virtual DOM 에 집중해보자 1. 왜 React는 Virtual DOM을 쓰지? 🤔 왜 리액트는 Virtual DOM 을 쓰는지 이해하기 위해선 브라우저가 실제 그림을 그리는 렌더링 과정을 이해할 필요가 있다. 1...
자바스크립트를 잘 사용하기 위해서 알아야 하는 핵심 개념들이 있는데 싱글 스레드 언어인 자바스크립트의 동작 과정을 이해하기 위해 알아야 하는 개념인 Event Loop 에 대해서 알아보자! 😁 1. Event Loop 가 뭐지? 🤔 이벤트 루프? 처음 들었을때 이게 뭐지? 라는 생각부터 먼저 들었다 😵 생소한 단어라 가장 먼저 떠올린 단어는 Event Horizon 우리말로 사건의 지평선이 제일 먼저 떠올라 무슨 과학 용어 인줄 알았다. Event Loop 란 딱 뭐라고 정의된 표현은 찾지 못했지만 내가 이해한 바로는 자바스크립트 엔진 내에 실행되어있는 프로그램 내지는 프로세스? 라고 정의 할 수 있다. Event Loop 는 싱글 스레드 언어인 자바스크립트가 효율적인 동작을 할 수 있도록 자바스크립트 ..
Closure 1. 클로저의 의미 및 원리 이해 클로저를 이해하기 위해 한문장으로 요약한 부분들을 모아보면 자신을 내포하는 함수의 컨텍스트에 접근 할 수 있는 함수 함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 것 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수 자유변수가 있는 함수와 자유변수를 알 수 있는 환경의 결합 로컬 변수를 참조하고 있는 함수 내의 함수 자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될 때 사용할 변수들만을 기억하여 유지시키는 함수 위와 같이 요약 및 정의 할 수 있는데 각 정의에서 중요한 부분만 뽑아 합쳐서 이해 한다면 클로저를 이해하는데 좀..
데이터 타입 원시형 데이터 타입(primitive type) Number, String, Boolean, null, undefined, Symbol 참조형 데이터 타입(reference type) Object --> Array, function, Date, RegEXP, Map, WeakMap, Set, WeakSet 원시형 데이터 타입 =>> 값이 담긴 주소값 할당 참조형 데이터 타입 =>> 값이 담긴 묶음의 주소값 할당 원시형 데이터는 불변성을 유지한다 참조형 데이터는 기본적으로 가변값이지만 변경 불가 시키거나 불변값으로 활용 할 수 있다. Map, Set es6 에서 새로 도입한 자료구조 Set,Map의 특징 object는 문자열/심볼 만 key 값으로 들어간다. (map,set은 1와 '1'도 구..
useMemo react의 기본 동작원리는 상태(state)가 변경될때마다 re렌더링을 하는것이다 그렇다보니 현재 상태가 변경 될때 컴포넌트안에 포함된 기능, 함수들과 무관한 상태(state)의 변경 일때도 re렌더링이 일어나 함수의 불필요한 재실행이 일어나게 된다 ※ 예를 들어 const getDiaryAnalysis = () => { if (data.length === 0) { return { goodcount: 0, badCount: 0, goodRatio: 0 }; } console.log("일기 분석 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount;..
