호이스팅(hoisting)이란? 호이스팅이란 "끌어올린다"라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있습니다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환합니다. 여기서 주의할 점은 "선언문"이라는 것이며 "대입문"은 끌어올려지지 않습니다. 기술적으로 정확한 답변 : 실행 컨텍스트 생성 시, 렉시컬 스코프 내의 선언이 끌어올려 지는 것이 호이스팅입니다. 호이스팅이 발생하는 원리 (모던 자바스크립트 Deep Dive 23장 실행 컨텍스트 발췌) 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다. 소스코드 ..
개발 목표 Code Pen이라는 온라인 코딩 툴 사이트가 있다. - https://codepen.io/ 해당 사이트와 같이 코드를 입력하고 번들링하여 실시간으로 보여주는 사이트를 React로 만들고자 한다. 단, 로그인과 같은 인증 기능은 제외한다. 코드 입력 창에서 발생할 수 있는 문제점 간단하게 만들 수 있을 것 같았지만 코드를 입력하는 창을 구현하기 위해서는 아래와 같은 이슈사항들이 있었다. 코드 입력창에 오류를 발생시키는 문법 등의 잘못된 코드가 작성될 수 있다. DOM을 조작하는 코드로 인해 예상하지 못한 현상이 발생할 수 있다. ex) document.body.innerHTML = ‘’; 사용자가 악의적인 코드를 넣을 수 있다. ex) for (var i = 0; i { axios.post('..
문제 상황 .tsx에서 아래의 코드 input의 “ref”에 빨간색이 나타나며 마우스를 오버하면 에러 문구가 나타났다. import { useRef } from "react"; export default const UserSearch: React.FC = () => { const inputRef = useRef(); return ( User Search // 아래 ref에 오류 표기 ); }; 에러 문구 Type ‘MutableRefObject' is not assignable to type 'LegacyRef | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are ..
2024.01.04 - [Javascript] - [JavaScript] 클로저(Closures) - 활용편(1/2) [JavaScript] 클로저(Closures) - 활용편(1/2) 이전 포스팅에서 클로저의 개념을 살펴보았다. 이번 포스팅에서는 배웠던 개념을 바탕으로 클로저의 예시와 활용법에 대해서 알아보고자 한다. 클로저 예시 1 코드 let f; const g = function () { const a codesmoothie.tistory.com 상기 포스팅에서 연장되는 글입니다. 클로저 예시 코드 const boardPassengers = function(n, wait) { const perGroup = n / 3; setTimeout(function(){ console.log(`We are n..