도영스 공간

🍄 브라우저가 렌더링 되는 과정 1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다. 2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다. 3. 브라우저 JS 엔진은 받아온 JS를 파싱해 AST를 생성하고, 바이트코드로 변환해 실행한다. 4. 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기)을 계산한다. 5. 화면에 HTML요소를 페인팅한다. STEP 1. 요청과 응답 👉 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다. 브라우저에 있는 주소창이 그 역할을 한다. 주소창에 URL을 입력하고 엔터..

🍄 프로토타입의 이해 자바스크립트는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냅니다. 생성된 객체 역시 또 다른 객체의 원형이 될 수 있습니다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 해줍니다. 프로토타입은 객체를 참조하는 prototype 속성과 객체 멤버인 proto속성이 참조하는 숨은 링크가 있습니다. 🍄 상속, 프로토타입 prototype 👩‍💻 콘솔창에 있는👉__proto__ 이것을 프로토타입이라고 한다. 👩‍💻 proto 는 생성된 객체(new) 또는 json 객체에 존재한다. 👩‍💻 즉, 상위 객체를 나타내는 속성이다..

오눌은 항해 99를 수료하는날이다 ~! 3월초에는 이날이 올까싶었지만, 놀랍게도 엄청 금방와버렸다 ! 🍄 항해를 통해 얻은 것들.. 96일동안 많은 것을 배웠다. 항해99를 통해 어떻게 구글링하는지 ..를 나 스스로 깨닫고, 강의에 의존한 공부법이 아닌 자기주도적인 공부방법을 익힐 수 있었던 시간인 것 같다 !!! 무엇보다도 좋은 동료들을 얻은 것 같다 !!!!!! 🥹 짜짠..나의 누적시간..ㅎㅎ 밤을 샌적은 ,,두 세번 정도지만 그 당시엔 밤을 샐 정도로 몰입했고, 그만큼 프로젝트를 완성하고 싶었다. 항해99를 통해 많은 프로젝트를 했었는데, 포기하지 않고 매번 제출을 잘했었다. ㅎ_ㅎ 내가 이렇게 몰두해서 공부를 할 수 있는 사람이었다는 사실을 알게 해줬다. 월화수목금토 아침9시부터 저녁9시 ㅎㅎ 맨..

오늘은 모의 면접 데이다 !! 8시에 있는 모의 면접을 위해..1분 자기소개를 준비해야겠다 ~! 리액트 쿼리 ? 리덕스 ? 상태관리 ? 머릿속에서 아직 제대로 정리가 되지 않았다 !!! 🍄 Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요. 🌱 전역상태관리툴 리액트 쿼리 - 👩‍💻 React Query의 기능을 간단하게 요약하여 정리해보면 다음과 같습니다. 클라이언트에서 서버 데이터의 캐시를 관리합니다. loading, error state를 관리합니다. pagination, infinite scroll도 쉽게 처리할 수 있도록 지원합니다. prefetching을 쉽게 처리할 수 있도록 지원합니다. error가 발생할 경우 자동으로 재시도합니다. request가 성공하거나 실패했을 ..

리액트를 왜 사용하는지에 대한.. 답들을 정리해보겠다 ! 🤩 리액트 왜 사용하시나요❓ 🌱 Virtual DOM의 존재합니다. 리액트의 가장 큰 특징 중 하나이기도 합니다. 기존의 DOM은 페이지가 바뀔 때마다, 새 HTML를 로드하면서 DOM 전체를 바꾸게 됩니다. Virtual Dom은 React 컴포넌트가 리턴하는 값에 의해 만들어져서 실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 됩니다. 이러한 Virtual DOM 때문에 React에서 컴포넌트 단위의 개발이 가능하게 됩니다. React Native의 앱 개발 가능합니다. 개발을 하다보면 막히는 부분, 오류가 있는 부분이 생깁니다. Vue에 비해 사용자가 많고, facebook에서 만들어 계속되는 업데이트와 자료가 굉장히 방대합..

🤩 부모에서 자식으로 이벤트상속방법❓ 🌱 이벤트 캡처링으로 부모에서 자식으로 이벤트를 상속할 수 있습니다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식입니다. (부모 -> 자식) 🍄 event delegation(이벤트 위임)에 대해 설명하세요. -👩‍💻 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 합니다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 이벤트 핸들러를 더 적게 등록해 주기 때문에 메모리도 절약할 수 있습니다. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식입니다. 면접을 위해 계속 무한 반..

🤩 이벤트 버블링이란❓ 🌱 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. HTML요소는 트리 형식으로 랜딩페이지에서 가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있게 됩니다. 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 뜻합니다. 이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말합니다. 🤩 이벤트버블링을 막는 방법❓ 🌱 event.stopPropagation() 이벤트의 전파를 원하지 않을 경우 이벤트 객체의 메서드인 event.stopPropa..

🤩 메모이제이션이란?❓ 🌱 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 동적 계획법의 핵심이 되는 기술입니다. 🍄 리액트에서 제공하는 메모이제이션 기법은 아래 메소드들을 통해서 사용할 수 있습니다. -👩‍💻 React.memo(컴포넌트), useCallback(() => { 함수 그 자체... }, []), useMemo(() => 함수의 리턴 값, []) 🍄 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까요? -👩‍💻 React.memo()는 props의 값으로 변경을 확인합니다. -👩‍💻 useCallback()과 useMemo()는 depende..