Ellen's Web Note

모듈 시스템(export/import)이 가능해짐. 모듈이 없을 때 // src/app.js console.log(sum(1, 2)); // src/math.js function sum(a, b) { return a + b; } * 위와 같이 사용하게 되면, - math.js와 app.js가 전역으로 선언되어 있음. - sum을 다른 변수로 사용할수 없음. - 이렇게 사용하는 경우전역 scope가 오염됨. IIFE방식의 모듈 math 전역변수 생성 - 전역 변수인 math 객체를 선언하고, math를 통해서만 sum에 접근할 수 있게 함. // src/math.js // 전역 name space 할당 var math = math || {}; (function () { //이 안의 scope는 외부로부터 ..

> mkdir sample > cd sample > npm init //package.json { "name": "sample", "version": "1.0.0", "description": "", "main": "index.js", //프로젝트 자동화 shell script 입력 부분 "scripts": { // "test" : 'Error: no test specified\'문자열을 echo 명령으로 입력하고 1을 반환 "test": "echo \"Error: no test specified\" && exit 1" , "build": "echo \"여기에 빌드 스크립트를 추가합니다." }, "author": "", "license": "ISC" } library install npm install ..

import { createElement } from "react"; function Container({ children }: { children: JSX.Element | JSX.Element[] }) { const childArray = Array.isArray(children) ? children : [children]; return ( {childArray.map((child, idx) => { return createElement(child.type, { ...{ ...child.props, idx: idx, value: `value${idx}` } }); })} ); } 예시 : 의 자식으로 여러개의 노드를 사용하는 경우 JSX.Element[] 배열을 통해 선언되어 있는 모든 자식 노드를 ..

yarn add redux react-redux 리덕스 프로젝트 패턴 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하여 사용. - 코드의 재사용성이 높아지고 - UI 또는 이벤트에 따라 특정 컴포넌트에 집중할 수 있다. ● 컨테이너 컴포넌트 (container/CounterContainer.jsx) 리덕스에서 값을 받아오거나 액션을 처리하는 컴포넌트 import React, { useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import Counter from "../compoents/counter/Counter"; import { decrease, increase, setText } from "....

리덕스 개념 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 여러 컴포넌트에서 동일한 상태를 참조할 수 있도록 하는 라이브러리. 기존의 데이터 처리는 부모 컴포넌트에서 업데이트하면서 상태를 관리하고 자식 컴포넌트는 부모 컴포넌트의 데이터를 참조(props)하기 때문에 자식 컴포넌트의 노드가 깊어지면 데이터를 끌고 가야하는 불편함이 있다. 또, 부모 컴포넌트끼리 값을 참조해야 하는 경우 그 위에 또다른 상위 컴포넌트를 생성하여 같은 데이터를 참조할 수 있도록 유도해야 한다. 리덕스를 사용하면, 데이터를 가진 파일을 분리하고 import해서 사용하기 때문에 어느 위치의 컴포넌트라도 동일한 상태의 데이터를 참조할 수 있게 된다. 리덕스 키워드 개념 액션(Action) 데이터에 업데이트가 필요한 경..

axios 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트. Http요청을 Promise 기반으로 처리 yarn add axios axios GET 파라미터로 전달된 주소에 GET요청. .then을 사용하거나 async/await를 통해 리턴받은 데이터 확인 const getData = () => { axios.get(url) .then(response =>{ return response; }) } const getData = async () => { return await axios.get(url) } axios POST 첫번째 파라미터에 URL 주소, 두번쨰 파라미터에 request data를 넣고 api 호출 const postData = async (postParam) => { retur..

react에서 List 무한스크롤을 처리하는데, reacvt-virtualized를 사용하면 리스트에 사용되는 컴포넌트의 렌더링 관리가 가능하다. 기능 설명은 아래에. https://ellen92.tistory.com/56 [React] 컴포넌트 성능 최적화 2500개의 리스트를 출력한다고 가정할 때 기본적인 코드는 아래와 같이 작성하게 된다. import { useState } from "react"; function setArray() { const array = []; for (let i = 1; i { console.log(clientHeight); console.log(clientWidth); return( )}} ) 특정 이벤트에 스크롤을 적용하려면, 스크롤이 움직이는 동안 scrollHeig..

SPA (Single Page Application) 한 개의 페이지로 이루어진 애플리케이션으로 이벤트에 따라 동적으로 화면을 바꿔가며 최소한의 요소만 변경이 일어난다. 기존의 웹 브라우저는 화면 전환이 일어날 때마다 HTML을 서버에 새로 요청하면서 불필요한 로딩이 있었던 반면에 SPA는 애플리케이션을 브라우저에 불러와 필요한 부분의 렌더링을 브라우저가 담당하여 서버에 부하를 줄여준다. 라우팅 - 다른 주소에 다른 화면을 보여주는 것. - 서버에서 사용자에게 제공하는 페이지는 한종류이지만, 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. yarn add react-router-dom 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // src/index.js /..