프론트엔드16 이벤트 루프 (Event Loop) JavaScript가 코드를 한 번에 한 줄씩, 순차적으로 실행한다는 의미입니다. 모든 JavaScript 코드는 메인 스레드에서 (싱글 스레드란 여러 작업을 병렬로 처리하지 않고, 순차적으로 처리하는 구조를 의미합니다) 실행되며, 한 번에 하나의 작업만 수행할 수 있습니다. 따라서 이 스레드에서는 여러 코드를 병렬로 동시에 실행할 수 있는 방법이 없습니다. 함수 실행 스택이 비워질 때마다 대기열(큐)에서 작업을 꺼내어 실행 스택에 배치하는 역할을 합니다. 이벤트 루프 작동 방식 :호출 스택(Call Stack):JavaScript는 현재 실행 중인 함수(프로그램이 실행되는 위치)를 추적하기 위해 호출 스택을 사용합니다. 각 함수 호출은 호출 스택에 추가되고, 완료되면 스택에서 제거됩니다.콜백 큐(Cal.. 2024. 10. 30. 콜 스택 (Call Stack)과 힙 (Heap) 할당(Allocation): 변수를 선언할 때 메모리가 할당됩니다. JavaScript에서는 이 과정이 자동으로 처리됩니다.사용(Using): 할당된 메모리를 사용하여 데이터를 저장하거나 읽어옵니다.해제(Releasing): 더 이상 사용하지 않는 메모리는 해제됩니다. JavaScript에서는 이 과정도 가비지 컬렉션(Garbage Collection)으로 자동 관리됩니다.여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터를 위한 메커니즘입니다. 현제 어떤 함수가 실행중인지, 그 함수 내에서 어떤 함수가 호출되어야 하는지, 등을 제어합니다. JavaScript 엔진은 단일 호출 스택만 가지고 있으므로 한 번에 하나의 작업만 수행할 수 있습니다. 스크립트를 실행하면 Ja.. 2024. 10. 30. React Hooks에 대해 React Hooks는 react 버전 16.8에 도입 되었습니다. Hooks는 함수 컴포넌트에게 상태 (state) 기능에 접근할 수 있도록 해 주면서, 클래스 컴포넌트의 의존도가 많이 없어젔습니다. Hooks를 사용하면서 React 애플리케이션에서 상태 관리와 부수 효과를 보다 깔끔하고 간결하게 처리할 수 있습니다. 함수 컴포넌트에서만 Hooks 사용이 가능합니다Hooks 사용하려면 React에서 가져와야 (import) 합니다.Hook은 항상 컴포넌트의 최상위에서 호출해야 합니다.Hook은 조건문 안에서 호출해서는 안 됩니다.상태 훅 (State Hooks)컨텍스트 훅 (Context Hooks)레퍼언스 훅 (Ref Hooks)이펙트 훅 (Effect Hooks)성능 훅 (Performance H.. 2024. 10. 27. 스코프 (Scope) 이해 스코프는 프로그램에서 변수가 접근 가능한 영역을 나타냅니다. 이는 코드 내에서 변수, 함수, 객체의 가시성과 생명주기를 결정합니다. JavaScript에는 3가지 스코프 종류가 있습니다 :- 전역 범위 : 함수나 블록 외부에 선언된 변수나 함수가 해당되며, 프로그램 어디서든 접근할 수 있습니다.- 블록 범위 : 'let'이나 'const'를 사용하여 블록(중괄호 내)에서 선언된 변수는 블록 스코프를 가집니다. { } 에 있는 변수는 외부에서 접근이 불가합니다.- 함수 범위 : 각 함수는 새로운 스코프를 생성합니다. 이 변수는 그 함수 내에서만 접근할 수 있습니다. 전역 범위 : 함수 범위 : ** 함수 스코프 내에 선언된 'let', 'var', 'const'는 비슷한 역할을 합니다. 블록 범위 : .. 2024. 9. 18. Document Object Model (DOM)에 대해 알아보기 문서 객체 모델 (DOM)은 HTML, XML 문서의 프로그래밍 인터페이스 (interface) 입니다. DOM은 웹 페이지의 요소를 노드(Node) 와 objects라는 객체로 표현하며, 이 노드들은 트리 (tree) 구조로 배열됩니다. 하단 사진들을 확인하면서 트리 구조가 뭔지 간단하게 보겠습니다. 각 노드는 HTML 요소, 속성, 텍스트 등을 나타냅니다. DOM을 사용하면 HTML의 특정 색션을 더 쉽게 변경하고 조작할 수 있습니다. JavaScript와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 결론적으로 DOM은 JavaScript와 HTML이 같이 호환할 수 있도록 도와주는 통역/번역사입니다. DOM은 웹 페이지와의 상호작용을 가능하게 하는 중요한 기술입니다. JavaScri.. 2024. 9. 3. jQuery은 무엇이며 간단하게 사용 방법 알아보기 jQuery는 빠르고 작으면서도 강력한 JavaScript 라이브러리입니다. HTML 문서의 탐색과 조작, 이벤트 처리, 애니메이션, 그리고 Ajax 작업을 훨씬 쉽게 할 수 있게 도와줍니다. 다양한 브라우저에서 잘 작동하고 간단한 API 덕분에 많은 jQuery 선호하는 개발들도 있습니다. jQuery 장점 중 하나는 일반 JavaScript 보다 사용하기 더 쉽고 편리하다는 것입니다. 어떤 경우 더 짧은 코드로 동일한 효과나 동일한 이벤트를 구현할 수 있습니다. jQuery는 다양하고 수많은 라이버러리가 있어 많은 이벤트들을 구현할 수 있고, 오픈소스 (open Source) 커뮤니티가 있어 다양한 플러그인 (plugins)를 빠르고 쉽게 다운로드하여 사용할 수 있습니다. 마지막으로 다양한 브라우저.. 2024. 8. 29. 이전 1 2 3 다음
