dev_H dev_H

this, closure this this란? 자바스크립트에서의 this는 함수 호출 방식에 따라서 결정됨 함수의 호출방식 메소드로서의 호출 메소드로 호출 시(ex: obj1.addNums) 자신을 호출한 대상이 this 함수로서의 호출 함수를 독립적으로 호출 시 호출주체를 알 수 없으므로 this 지정 x -> 때문에 this는 전역 객체를 가리킴 또한 메소드의 내부라고 해도 함수로서 호출하면 this는 전역객체를 의미함 콜백함수로 호출될 때 그 함수 내부에서의 this 콜백함수도 함수이기 때문에 this는 전역객체를 참조하지만, 콜백함수를 넘겨받은 함수에서 별도로 this를 지정한 경우 예외적으로 그 대상을 참조함 생성자 함수 호출 this는 인스턴스를 가리킴 apply, call, bind 호출 a..

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 서로 다른 출처(origin) 간의 리소스를 공유할 수 있게 해주는 것 출처(origin)란? origin은 protocol + host + port를 의미함 (참고로 포트는 https는 443, http는 80번이며, 생략가능함) SOP(same origin policy, 동일 출처 정책)이란? SOP은 브라우저에서 보안을 위해 동일한 출처끼리만 리소스를 공유할 수 있게하는 정책을 뜻함 예전에는 프론트와 백엔드를 따로 구성하지 않고 한 번에 구성해서 모든 처리가 같은 도메인에서 가능했음 하지만 시간이 흐르고 웹이 커지면서 클라이언트에서 api를 직접 호출하게 됨 -> 그런데 클라이언트와 api가 다른 도메인인 경우..

useCallback, useMemo, React.memo useCallBack, useMemo, React.memo 차이점 세 개 다 메모이제이션을 통해 불필요한 렌더링이 발생하지 않게 최적화할 수 있게 만들어주는 훅임 그러면 메모이제이션은 무엇을 뜻할까? 메모이제이션 기존에 수행한 연산의 결과 값을 메모리에 저장해두었다가 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 의미함 따라서 이 훅들을 적절하게 사용하면 중복된 연산을 피할 수 있기 때문에 성능 최적화에 도움을 줄 수 있지만 너무 많이 사용하면 메모리에 부담을 줌 useCallback : 함수를 캐싱 useMemo : 값 자체를 캐싱 React.memo : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링될 때 자식컴포넌트는 리렌더링 됨 그런데 만약..

useRef, useEffect useRef useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. 공식 홈페이지의 설명에 따르면 .current 속성이 전달된 인수로(initialValue) 초기화되는 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전체 수명동안 유지된다고 함 이를 풀어서 설명하면 아래와 같음 useRef는 변경 가능한 객체를 반환함 반환 객체는 useRef 인자를 current라는 속성 안에 저..

실행 컨텍스트 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체를 말함. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜스택에 쌓아 올렸다가 가장 위에 있는 컨텍스트와 관련된 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장함 예시 var a = 1; function outer() { function inner() { console.log(a) // undefined var a = 3; } inner() console.log(a) // 1 } outer() console.log(1) 전역 컨텍스트 (Global Execution Context): 변수: a: 1 (전역 변수로 선언 및 할당) 함수: outer: 함수 선언문으로 정의된 ..

React useState useState란? const [count, setCount] = useState(0) 공홈의 정의 : 렌더링 사이에 데이터를 유지하기 위한 state 변수 + state 변수를 업데이트하고 리액트가 다시 컴포넌트를 리렌더링하게 하는 setState로 이루어진 상태관리 훅 좀 더 축약한 정의 : 데이터를 저장하고 유지할 수 있는 state를 가지고 setState를 통해 state의 상태를 관리하는 상태관리 hook setState는 기존의 state를 복사해 새롭게 state를 갱신 -> 객체의 불변성을 지킬 수 있음 -> 오류들을 미리 방지할 수 있음. setState를 통해 state에 변화가 생기면 알아서 리렌더링을 해주기 때문에 훨신 쉽게 상태관리를 할 수 있음 sta..

JavaScript - variables, hoisting Variables(var, let, const ) var 중복선언 O , 재할당 O var a = 1; var a = 10 a = 2 console.log(a) // 2 전역 변수로 선언한 경우 window 객체의 속성이 됨 var a = 'hi'; console.log(window.a) // 'hi'; 호이스팅될 때 초기화됨 console.log(x) // undefined var x = 1 console.log(x) // 1 함수 스코프를 가짐 (함수 내부에서 어디든 var로 선언한 변수에 접근할 수 있음) function example() { if (true) { var a = 1; } for (var i = 0; i < 5; i++) { ..