도영스 공간

리액트 18버전에서 추가된 사항은 자동 배치, 동시성 제어 기능, 서스펜스를 지원하는 새로운 서버 사이드 렌더링 아키텍처입니다. 1️⃣ 자동배치 (Automatic Batching) 배치란, 리액트가 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링(re-render)으로 묶는 작업을 뜻합니다. // ~React 17 ReactDOM.render(, container); // React 18 const root = ReactDOM.createRoot(container); root.render(); 이 변경은 단순하게 인터페이스만 바뀌는 것이 아닙니다. 기존의 render 함수는, 컴포넌트 트리를 React 17과 그 이전의 동작과 동일한 방식으로 동작합니다. 새로운 createRoot 함..

콜백 지옥을 해결하는 방법을 설명해보세요. 콜백지옥 👀 콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다. 콜백함수를 이용해서 비동기 처리를 해주다가 코드가 깊어지는 것을 말합니다. 일반적으로 콜백 지옥을 해결하는 방법에는 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..

런타임(Runtime)과 컴파일타임(Compiletime)은 소프트웨어 프로그램개발의 서로 다른 두 계층의 차이를 설명하기 위한 용어이다. 프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정을 컴파일타임(Compiletime) 이라고 부른다. 컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때를 런타임(Runtime)이라고 부른다. 런타임 런타임(Runtime) 은 컴파일 과정을 마친 프로그램이 사용자에 의해 실행될때의 환경 또는 시간이다. 예를 들자면 자바스크립트는 Web Browser에서 작동할때, Node.js에서 작동할때, Browser와 Node...

새로운 CSS Flexbox나 Grid를 사용해본 적이 있나요? 있다면, 설명해보세요. Flexbox는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다. gird와 flex를 사용하면, 더 이상 플롯(float), 테이블 셀(table-cell) 디스플레이를 사용하지 않아도 됩니다. Flexbox Flex 컨테이너 안(태그 안)에 있는 item들의 방향을 결정하는데, 기본적으로는 row로 형성되어 있습니다. 어려운 정의 : 더보기 Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout..

타!입!스크립트! 한번쯤 써보고 싶었다. 우선 타입스크립트 설치 yarn create react-app "앱이름" --template typescript 리액트 앱을 생성할 때 같이 깔아주거나 혹은 만들어진 리액트앱에 타입스크립트를 추가할 때는 터미널에 이 명령어를 입력해주면 된다. npm install --save typescript @types/node @types/react @types/react-dom @types/jest yarn add typescript @types/node @types/react @types/react-dom @types/jest 그런 다음 이렇게 타입스크립트로 설정된 채 리액트 앱이 만들어진 것을 볼 수 있다. yarn add @types/styled-components ..

프로세스가 뭔가요? 프로세스는 운영체제로부터 자원을 할당받은 작업의 단위이다 스레드가 뭔가요? 스레드는 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위이다 프로그램 > 프로세스 > 스레드 📌 프로세스와 스레드는 어떤 차이가 있나요? 그냥 면접관이 프로세스와 스레드의 차이가 궁금해서 물어볼까? 아니다. 기본적인 이유는 본문 맨 위에서 언급했듯 지원자가 프로그램, 프로세스, 스레드에 대한 기본 개념에 대해 잘 이해하고 있는지 확인하기 위함이다. 프로세스와 스레드는 개념의 범위부터 다르다. 스레드는 프로세스 안에 포함되어 있기 때문이다. 프로세스는 프로그램을 실행하는 순간 해당 파일이 컴퓨터 메모리에 올라가게 되고, 이 동적인 상태의 프로그램을 프로세스라고 한다. 스레드는 프로세스를 구성하는 더 작은 실..

🍄 웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 🍄 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 🍄 모듈이란? 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다. // 📁 math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const PI = 3.14; export { sum, substract, PI }..

🍄 이벤트 전파 브라우저에서 요소에 대한 event가 발생하면 해당 요소에 할당된 handler가 동작하게 됩니다. handler가 동작하면서 Bubbling과 Capturing이 발생하게 됩니다. 🍄 버블링 🌱 bubbling은 특정 요소에서 event가 발생했을 때 상위 요소로 event가 전파되는 것을 의미합니다. 🌱 HTML요소는 트리 형식으로 랜딩페이지에서 가 최상위 요소가 됩니다. 🌱 그 밑으로 자식 요소들이 있게 됩니다. 🌱 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 뜻합니다. 캡처링 🌱 bubbling은 특정 요소에서 event가 발생했을 때 하위 요소로 event가 전파되는 것을 의미합니다. 🌱 즉, 이벤트가 발생한 element부터 자식들에게 순차적으로 이벤..