웹 개발 (Frontend Developer)45 이벤트 루프 (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. React Setup Visual Studio Code 사용할 경우 터미널에 들어가 하단 명령들을 기입합니다npm install -g create-react-appcreate-react-app 다른 방법은 하단과 같습니다npx create-react-app * Npx는 노드 패키지 실행을 도와주는 도구 입니다. 그래서 create-react-app 이란 npm 레지스트리에 있는 패키지를 생성한 폴더에서 실행해서 리액트를 설치 해줍니다. npm run start 로 React를 실행 -> localhost:3000에 페이지 확인할 수 있습니다 npm run test 로 코드에 문제가 있는지 확인할 수 있습니다 npm run dev를 사용하려면 package.json의 "scripts" 섹션에 "dev" 설정을 추가해야 합니다.. 2024. 10. 11. React에 State & Props 상태(State)는 컴포넌트 내부에 존재하는 변수로, 컴포넌트 외부에서는 접근하거나 수정할 수 없으며, 컴포넌트 내부에서만 사용됩니다. 상태는 this.setState를 통해 수정할 수 있으며, 비동기적으로 동작할 수 있습니다. State가 변경되면 어떻게 되나요?상태(State) 변경은 사용자 입력, 이벤트 트리거 등과 같은 상황에서 발생합니다. 상태가 변경되면 React는 이를 감지하고 가상 DOM을 업데이트한 뒤, 실제 DOM에 필요한 부분만 효율적으로 렌더링합니다. (업데이트된 상태를 가진 컴포넌트만 다시 렌더링 합니다). setState() 메서드는 변경된 부분의 재렌더링 과정을 트리거합니다. State 사용 시 주의할 점 ** State는 직접 수정하면 안 되고, 'setState()' 통해.. 2024. 10. 11. JSX (JavaScript XML)이 뭔가요 React JSX는 JavaScript XML의 약자로, JavaScript와 함께 HTML 코드를 작성하고 createElement() 및 appendChild() 메서드 없이 DOM에 배치하는 데 사용됩니다. JSX를 사용하면 템플릿 언어와 같은 방식으로 더 적은 코드 줄 수로 재사용 가능한 UI 컴포넌트를 쉽게 생성할 수 있으며, JavaScript의 강력함을 함께 활용할 수 있습니다. **JSX를 사용하는 것은 필수가 아니지만, React 프로그래밍에서는 강력히 권장됩니다. JSX를 사용하면 코드를 더 쉽게 작성하고 읽을 수 있어 개발 과정이 보다 수월해지기 때문입니다. JSX는 일반 JavaScript로 반환되는 과정에서 최적화를 수행하기 때문 더 빠릅니다JSX를 통해 템플릿을 쉽게 작성할 수 .. 2024. 10. 10. 이전 1 2 3 4 5 ··· 8 다음
