Espania

탐색 알고리즘 탐색 알고리즘 어떤 데이터 구조 안에 저장되어 있는 정보를 구하는 알고리즘 배열에서 가장 큰 값 찾기 데이터 베이스에서 레코드 하나 읽어오기 배낭 문제 등 대표적인 탐색 알고리즘 선형(linear) 탐색 알고리즘 모든 데이터에 사용 가능 모든 index를 처음부터 하나씩 검색하면서 찾는 방법 시간복잡도: O(N) N 만큼의 용량이 필요 해시 맵을 이용한 탐색 모든 데이터에 사용 가능 입력값의 나머지연산의 결과값을 index 로 사용하여 검색하는 방식 시간복잡도: O(1) N 보다 큰 용량이 필요 이진 탐색 이진 탐색 알고리즘 데이터가 정렬되어 있는 배열에서 특정한 값을 찾는 알고리즘 이진 탐색 수행과정 정렬된 데이터의 중간값을 선택 중간값과 찾고자 하는 목표값을 비교 목표값 < 중간값 이면..

React 최적화 React 최적화 1. UseMemo Memoization 이미 계산 해본 연산 결과를 기억 해 두었다가 동일한 연산을 시키면, 다시 연산하지 않고, 기억해 두었던 데이터를 반환 시키게 하는 방법 useMemo React 에서 컴포넌트가 rendering 될 때 마다 함수가 실행되면 불필요한 연산이 매번 발생하게 된다. 예를 들어 다음과 같은 코드가 있다고 할때, export default function App() { const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const getAnalysis = () => { console.log("분석 시작"); const highCount = data.filter((it) => it >= 7).length; ..

React 기본React 기본React 사용자 입력 처리한 줄 입력 처리React 에서 state 를 활용하여 input 태그의 value 값을 초기화 해주거나 변경해 줄 수 있다.import { useState } from "react"; const ReportEditor = () => { const [author, setAuthor] = useState("espania");//author state 초기화 return ( 오늘의 보고 작성자 { setAuthor(e.target.value);//setAuthor를 활용하여 author의 값을 변경 }} /> ); }; export default ReportEditor; input 태그의 value 값을 state(author) 로 설정 하게 되면 se..

React 입문 React 입문 React 가 필요한 이유 1. Component 화 하여 재사용 용이 React 는 Component 기반의 UI 라이브러리 로서 html 요소들을 컴포넌트화 하여 코드를 중복 작성하는 것 없이 재사용 할 수 있다. 2. 선언형 프로그래밍 명령형 프로그래밍코드로 원하는 결과를 어떻게(How) 달성하는지, 과정에만 관심을 두는 프로그래밍절차를 하나 하나 다 나열 한다. Ex) jQuery선언형 프로그래밍코드로 원하는 결과가 무엇(What) 인지, 필요한것이 어떤것인지 기술하는 프로그래밍목적을 바로 말함Ex) React 3. Virtual Dom Dom (Document Object Model)html 을 트리 형태로 변환한 객체 Dom 을 자주 조작하는 것은 필요 이상의 ..

Node.js Udemy 리엑트 챌린지 2주차 는 모듈 시스템과 패키지에 대한 실습을 하면서 Node.js 가 무엇인지 간단하게 알 수 있고, React 기본 개념과 함께 사용하는 이유와 장점에 대해 알 수 있었습니다. Node.js ?? React.js 의 기본 환경 Node.js 자바스크립트는 자바스크립트 엔진 위에서 동작 일반적으로 자바스크립트는 웹 브라우저 위에서 html 의 버튼 클릭 이벤트를 처리하는 등의 interaction 외의 할 수 있는 일이 없었다. 그래서 브라우저 내부에서만 사용할 수 있었던 자바스크립트를 C++ 로 이루어진 V8 엔진을 통해 외부 에서 독립하여 사용할 수 있도록 Node.js 라는 이름의 프로젝트를 시작했다. 즉, Node.js 는 자바스크립트의 실행환경이며 Jav..

Javascript 응용 Javascript 응용 Truthy & Falsy function judgement(elem) { if(elem){ console.log("Truthy"); }else{ console.log("Falsy"); } } //Truthy judgement([]); // [] judgement({}); // {} judgement(42); // 42 number judgement("0"); // "0" string judgement("false"); // "false" string judgement(Infinity); // Infinity //Falsy judgement(null); // null judgement(undefined); // undefined judgement(0); ..