개발지식10 콜백 지옥을 해결하는 방법 콜백 지옥을 해결하는 방법을 설명해보세요. 콜백지옥 👀 콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다. 콜백함수를 이용해서 비동기 처리를 해주다가 코드가 깊어지는 것을 말합니다. 일반적으로 콜백 지옥을 해결하는 방법에는 Promise 나 Async를 사용하는 방법이 있습니다. function taskA(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 2000); } function taskB(a, cb) { setTimeout(() => { const res = a * 2; cb(res); }, 2000); } function taskC(a, cb) { setTimeout(() => { const r.. 2022. 6. 23. 런타임 vs 컴파일 타임 런타임(Runtime)과 컴파일타임(Compiletime)은 소프트웨어 프로그램개발의 서로 다른 두 계층의 차이를 설명하기 위한 용어이다. 프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정을 컴파일타임(Compiletime) 이라고 부른다. 컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때를 런타임(Runtime)이라고 부른다. 런타임 런타임(Runtime) 은 컴파일 과정을 마친 프로그램이 사용자에 의해 실행될때의 환경 또는 시간이다. 예를 들자면 자바스크립트는 Web Browser에서 작동할때, Node.js에서 작동할때, Browser와 Node... 2022. 6. 22. 새로운 CSS Flexbox나 Grid를 사용해본 적이 있나요? 있다면, 설명해보세요. 새로운 CSS Flexbox나 Grid를 사용해본 적이 있나요? 있다면, 설명해보세요. Flexbox는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다. gird와 flex를 사용하면, 더 이상 플롯(float), 테이블 셀(table-cell) 디스플레이를 사용하지 않아도 됩니다. Flexbox Flex 컨테이너 안(태그 안)에 있는 item들의 방향을 결정하는데, 기본적으로는 row로 형성되어 있습니다. 어려운 정의 : 더보기 Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout.. 2022. 6. 21. 부모에서 자식으로 이벤트상속방법 🤩 부모에서 자식으로 이벤트상속방법❓ 🌱 이벤트 캡처링으로 부모에서 자식으로 이벤트를 상속할 수 있습니다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식입니다. (부모 -> 자식) 🍄 event delegation(이벤트 위임)에 대해 설명하세요. -👩💻 특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 합니다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 이벤트 핸들러를 더 적게 등록해 주기 때문에 메모리도 절약할 수 있습니다. 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식입니다. 면접을 위해 계속 무한 반.. 2022. 6. 8. 이벤트 버블링이란 / 이벤트버블링을 막는 방법 /이벤트버블링 활용 방법 🤩 이벤트 버블링이란❓ 🌱 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. HTML요소는 트리 형식으로 랜딩페이지에서 가 최상위 요소가 됩니다. 그 밑으로 자식 요소들이 있게 됩니다. 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 뜻합니다. 이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말합니다. 🤩 이벤트버블링을 막는 방법❓ 🌱 event.stopPropagation() 이벤트의 전파를 원하지 않을 경우 이벤트 객체의 메서드인 event.stopPropa.. 2022. 6. 8. 메모이제이션이란? 🤩 메모이제이션이란?❓ 🌱 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 동적 계획법의 핵심이 되는 기술입니다. 🍄 리액트에서 제공하는 메모이제이션 기법은 아래 메소드들을 통해서 사용할 수 있습니다. -👩💻 React.memo(컴포넌트), useCallback(() => { 함수 그 자체... }, []), useMemo(() => 함수의 리턴 값, []) 🍄 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까요? -👩💻 React.memo()는 props의 값으로 변경을 확인합니다. -👩💻 useCallback()과 useMemo()는 depende.. 2022. 6. 8. 이전 1 2 다음
