lazy? lazy는 React에서 Suspense컴포넌트와 함께 사용되는 함수. lazy는 코드 스플리팅(Code splitting)을 쉽게 구현할 수 있게 도와주는 함수이다. *** 코드 스플리팅이란? 애플리케이션의 번들 크기를 줄이고 초기 로딩 시간을 최적화하기 위해 사용된다. 애플리케이션을 여러 개의 작은 청크로 분할하여 필요한 경우에만 로딩할 수 있도록 해준다. 이를 통해 사용자는 초기 로딩 시간을 줄이고 페이지를 빠르게 볼 수 있다. const OpenStage = lazy(() => import("./../pages/opening/OpenStage")); 위 OpenStage는 ./../pages/opening/OpenStage 경로에 있는 파일로부터 import해온다. 이 컴포넌트는 애플리..
{ skip(true); }} > ... 코드 중 이런 코드를 발견하게 되는데 여기서 onAnimationEnd는 무엇일까?? onAnimationEnd 이벤트 핸들러는 애니메이션이 끝났을 때 실행되는 콜백 함수이다. 해당 코드에서는 onAnimationEnd 이벤트가 발생하면 콜백 함수가 호출된다. 여기서 의문은 이 div 태그에 어떤 애니메이션이 있는가이다. 답은 바로 className 코드에서 태그는 loading 클래스가 있는 요소이다. 해당 요소에는 CSS에서 정의된 애니메이션 클래스(fadeOut)가 추가되거나 제거되는데 이게 바로 애니메이션! 애니메이션 클래스가 추가되면 loading 요소는 해당 애니메이션을 수행하고, 애니메이션이 끝나면 onAnimationEnd 이벤트 핸들러를 통해 sk..
언어는 정적언어와 동적언어 두 타입으로 나누어진다! 정적언어는 컴파일 시간에 변수의 타입이 결정되는 언어이고 대표적인 예시로 C, C++, Java 등이 있다. 동적언어는 런타임에 타입이 결정되는 언어로, 프로그램이 빌드될 때 타입을 결정하는 것이 아닌 실행될 때 상황에 맞게 타입이 결정된다. 자바스크립트가 동적언어인 이유는 느슨한 타입의 데이터 구조를 사용하기 때문이다. 다른 언어와 달리 타입 지정 없이 var, let, const 키워드로만 변수를 선언해주기 때문이다. 코드 상 따로 타입 지정이 없기 때문에 실제로 코드가 사용되어지는 런타임 때 상황에 맞게 결정된다. 따라서 아래와 같이 number타입을 할당했어도 string으로 update가 가능하다!! let example = 1; console..
이벤트루프를 설명하기 앞서 자바스크립트를 조금 설명하자면! 자바스크립트는 싱글 스레드 기반의 언어이므로 원래는 한번에 여러가지 일을 처리하지 못하는 아이이다! 타 언어와 달리 왜 자바스크립트가 싱글 스레드 기반의 언어라고 묻는다면 자바스크립트는 브렌던 아이크라는 개발자가 10일만에 만든 언어이다. 멀티쓰레드 언어는 많은 개발 시간이 필요한 반면 상대적으로 싱글 스레드 언어는 적은 시간으로 만들 수 있기 때문에 창시자는 싱글 스레드를 선택하여 자바스크립트를 만들었다! 하지만 우리는 자바스크립트 안에서 setTimeout 등과 같이 비동기적으로 실행하는 것을 봤을 것이다. 이는 바로 자바스크립트의 런타임(언어가 실행되는 환경)인 브라우저에서는 자바스크립트 엔진과 함께 Web API, 콜백큐, 이벤트루프가 함..
