본문 바로가기
728x90

Front-End37

웹브라우저 javascript 의 실행 과정(동기와 비동기) javascript는 동기적일까, 비동기적일까? 라는 궁금증이 생겼다. 또한 javascript의 동작과정을 공부하면서 Eventloop가 정확히 어디 있는 것일까 궁금증이 생겼다. javascript의 실행 과정을 간단히 정리해봤다. (출처 : What Is The Javascript Event Loop? - DEV Community) 동작 1. Heap & Stack - Heap 메모리에 동적 개체 등이 생성되고, 함수 코드들이 Stack에 쌓여 실행된다. 2. 외부 API ( Ajax, setTimeOut(), setInterval() 같은 Web API 등 ) - Stack에 요청들을 하나씩 처리하다가 외부 API 요청을 맞닥뜨린 경우 - 해당 API를 지원하는(브라우저 등) 런타임 환경에 요청하.. 2022. 3. 20.
[React Hook] 5. 자신만의 Hook 만들기 (완) 출처 공식 문서 : 자신만의 Hook 만들기 – React (reactjs.org) 1. 자신만의 Hook을 통해 컴포넌트 로직을 함수로 뽑아낼 수 있습니다. 2. 예시 코드에 앞서 부연 설명 > 채팅 어플리케이션에서 친구가 온라인 상태인지 아닌지 표시하는 2개의 컴포넌트에서 공통 Hook들을 뽑아낸다. 하지만 여기서도 마찬가지로,조건문 혹은 반복문안에 들어가지 않고 최상위에 있어야 한다. 그리고 구분하기 쉽게 use로 시작하는 함수이름을 사용한다. 예시) (1) import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEf.. 2021. 2. 23.
[React Hook] 4. Hook 규칙 출처 공식 문서 : Hook의 규칙 – React (reactjs.org) 1. 최상위 에서만 Hook을 호출해야 한다. (1) 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. (2) Hook을 일반적인 자바스크립트 함수에서 호출하지말고 React 함수 내에서 호출해야 한다. (예외 - Custom Hook 이후 설명 예정) 2. ESLint 플러그인 > 위 두 규칙을 강제하는 플러그인이다. - Create React App에 기본적으로 포함되어 있다. 3. 설명 만약에 조건부로 effect를 실행하기를 원한다면, 조건문을 Hook 내부에 넣을 수 있다. 예시) function Form() { // 1. name이라는 state 변수를 사용하세요. const [name, setNam.. 2021. 2. 23.
[React Hook] 3. Effect Hook 출처 공식 문서 : Using the Effect Hook – React (reactjs.org) 1. Effect Hook > componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 > 렌더링으로 완성된 DOM을 조작하는 것. 2. 예시 과거) class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title .. 2021. 2. 23.
728x90