Espania

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); ..

Javascript 기본 예전에 udemy 에서 한입 크기로 잘라 먹는 리엑트 라는 강의를 수강하게 되었는데, 최근 블로그 챌린지를 한다하여 복습 겸 다시 정리해보고자 합니다. 수업 스타일이 굉장히 재밌고 요약이 잘되어있어서 나중에 다시봐도 이해가 잘되도록 구성이 되어 있습니다. javascript 에 대해 처음 접하는 분이나 복습 차원에서 가볍게 들으실 분들에게 추천드리고 설명이 쉽기 때문에 react 입문자들에게도 추천 드립니다. 강의는 강의 보러 가기 여기서 보실 수 있습니다. Javascript 기본 Javascript 란 무엇인가? HTML 과 CSS 로 만들어진 웹페이지를 동적으로 변경해주는 언어 Javascript 엔진 개발자가 작성한 Javascript 코드를 해석하고 실행 시켜주는 프로그..