DOM - 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체 - 이 객체를 이용해서 웹 페이지 구성요소를 제어 가능 Virtual DOM - DOM을 추상화한 가상의 객체 DOM 컴포넌트 상태 변경 -> DOM 트리 업데이트 -> 실제 DOM 업데이트 Virtual DOM 컴포넌트 상태 변경 -> 현재 가상 DOM과 이전 가상 DOM 비교 -> 어떤 가상 DOM 객체가 변경 되었는지 확인 -> 실제 DOM에서 해당 객체만 업데이트 Virtual DOM의 장점 - 상태 변경 -> Virtual DOM에 적용 (렌더링 되지 않으므로 연산 비용이 적음) -> 최종 변화를 실제 DOM에 적용 - DOM의 값들이 어떤것이 바뀌고 바뀌지 않았는지 파악하지 않아도 됨 (Virtual DOM이 자동으로 함) - DO..

Component - UI를 구성하는 개별적인 view 단위 - 전체의 앱은 각 컴포넌트를 조립해서 만들어짐. function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } ReactDOM.render( , document.getElementById('root') ); 1. App 컴퍼넌트는 여러개의 Welcome을 가짐 2. ReactDOM.render을 통해서 App 컴퍼넌트를 호출 3. App컴퍼넌트는 각 Welcome 컴퍼넌트를 호출 (재사용) 4. 전달한 props에 따른 각각의 Welcome 컴퍼넌트 내용이 호출되는걸 확인 가능

* Front end : 사용자가 해당 데이터를보고 상호 작용할 수 있도록 HTML, CSS 및 JavaScript를 사용하여 데이터를 그래픽 인터페이스로 변환하는 방법 * Framework : 전체 흐름을 자체적으로 유지하고 사용자가 필요한 코드를 입력합니다. * Library : 사용자가 전체 흐름을 만들고 라이브러리를 가져 오는 곳입니다. 인기 있는 Front end 프레임워크, 라이브러리 React를 가장 많이 선호하고 사용합니다. Svelte는 최근에 인기가 많아지고 있으며 다른 프레임워크, 라이브러리에 비해 아직 사용량이 적음 커뮤니티 & 리소스 리액트의 커뮤니티와 리소스가 가장 많으며 앵귤러는 커뮤니티와 리소스가 많지만 리소스의 많은 부분이 오래되었음 뷰는 커뮤니티는 리액트보다 작지만 많으며..

2020 KAKAO BLIND RECRUITMENT (2020 카카오 블라인드 채용 문제) 1. 입력이 빈 문자열인 경우, 빈 문자열을 반환합니다. 2. 문자열 w를 두 "균형잡힌 괄호 문자열" u, v로 분리합니다. (단, u는 "균형잡힌 괄호 문자열"로 더 이상 분리할 수 없어야 하며, v는 빈 문자열이 될 수 있습니다.) 3. 문자열 u가 "올바른 괄호 문자열" 이라면 문자열 v에 대해 1단계부터 다시 수행합니다. 3-1. 수행한 결과 문자열을 u에 이어 붙인 후 반환합니다. 4. 문자열 u가 "올바른 괄호 문자열"이 아니라면 아래 과정을 수행합니다. 4-1. 빈 문자열에 첫 번째 문자로 '('를 붙입니다. 4-2. 문자열 v에 대해 1단계부터 재귀적으로 수행한 결과 문자열을 이어 붙입니다. 4-3..

npm i axios axios를 설치합니다. // index.js import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; import useAxios from "./useAxios"; const App = () => { const { loading, data, error, refetch } = useAxios({ url: "https://cors-anywhere.herokuapp.com/https://yts.am/api/v2/list_movies.json", }); return ( {data && data.status} {loading && "Loading"} {error && "Error"..

// useNotification.js const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new Notification(title, options); } else { return; } }); } else { new Notification(title, options); } }; return fireNotif; }; ..

// useFullscreen.js import React, { useRef } from "react"; const useFullscreen = (callback) => { const element = useRef(); const runCb = (isFull) => { if (callback && typeof callback === "function") { callback(isFull); } }; const triggerFull = () => { if (element.current) { if (element.current.requestFullscreen) { element.current.requestFullscreen(); } else if (element.current.mozRequestFullScre..

// index.js import React, { useEffect, useRef, useState } from "react"; import ReactDOM from "react-dom"; import useScroll from "./useScroll"; const App = () => { const { y } = useScroll(); return ( 100 ? "red" : "blue" }}> Hello ); }; const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); // useScroll.js import React, { useEffect, useRef, useState } from "react"; c..