Ellen's Web Note

숫자만 입력 확인 const verifyNumber = (value: string) => { return !isNaN(Number(value)); }; 생년월일 입력 확인 const verifyBirth = (value: string) => { const regExp = /^((?:19|20)(?:[0-9]{2})(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))$/; return regExp.test(value); }; 전화번호 입력 확인 const verifyTelNumber = (value: string) => { let regExp = null; switch (value.length) { case 12: regExp = /(\d{4}).*(\d{3}).*(\d{4}..

export function removeConsole() { console.log = function no_console() { /* remove console log */ }; console.warn = function no_console() { /* remove console warn */ }; console.error = function no_console() { /* remove console error */ }; }

cra로 프로젝트 생성 > yarn create react-app cra_ts_jest --template typescript CRA 환경에서는 Test Runner로 Jest를 사용하고 있기 때문에 Jest를 따로 설치하지 않아도 yarn test를 통해 테스트코드를 실행할 수 있다. (프로젝트 생성 직후 yarn test 명령을 하면 App.test.tsx 테스트코드가 실행되는 것을 확인할 수 있다.) > yarn test PASS가 나온다면 완료. 실행 중 ' TypeError: expect(...).toBeInTheDocument is not a function '와 같은 에러가 발생한다면, 아래와 같이 설정. // src/setuptests.ts import '@testing-library/je..

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