코딩 정리

1. 프로젝트 생성yarn create react-app 프로젝트명 --template typescript 2. babel 설치yarn add @babel/runtime-corejs3yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loaderyarn add -D @babel/plugin-transform-runtime 3. webpack 설치yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin 4. babel.config.json 설정{ "presets": [ "@babel/preset-env", [ ..

1. 라이브러리 설치> yarn add pqgrid 2. 컴포넌트 추가const Pqgrid = ({ options }) => { useEffect(() => { pq.grid('#grid', options); pq.grid('#grid').refreshDataAndView(); }, [options]); return ;}; 3. 컴포넌트 options 세팅const options = { collapsible: { on: false, toggle: false }, height: '100%', maxHeight: '100%', showTitle: false, menuIcon: false, reactive: true, resizable: true, ..

1. 마운트 / 언마운트1) 컴포넌트가 처음 나타날때 / 컴포넌트가 사라질때 2. 업데이트1) 컴포넌트 안에 특정 props가 바뀔때 3. SPA (Single-page application)1) 하나의 HTML 페이지와 애플리케이션 실행에 필요한 Javascript ,CSS 같은 모든 소스를 로드하는 애플리케이션2) 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않음 4. 번들러 (Bundler)1) 분리된 코드들을 브라우저에 최적화된 여러 개의 파일로 결합2) 주로 webpack과 browserify를 사용 5. JSX1) Javascript의 확장문법, 마크업 문법으로 작성하여 React 엘리먼트로 컴파일됨 6. DOM (문서 객체 모델)1) XML이나 HTML 문서에 접근하기..

˙  오류 내용react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다해결방법--package.json이 있는 위치에서--yarn add react-scriptsnap install -save react-scriptsyarn upgrade ˙  오류 내용Expected an assignment or function call and instead saw an expression no-unused-expressions 해결방법map 함수에서 {return (...)} 형식으로 사용하거나 (...) 형식같이 return 없이 소괄호만 사용

1. useState상태 관리 도와주는 함수import React, { useState } from 'react';...const [name, setName] = useState('');const [member, setMember] = useState({ name : '', pos : '', dept : '', phone : ''});const onChange = e => { const { value, name } = e.target; setMember({ ...member, [name] : value });}; 2. useEffect리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행 하도록 설정하는 함수import React, { useEffe..

1. map≫ 반복 함수 배열로 리턴한다const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => {number}); 2. memo≫ 컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모된 내용을 재사용한다≫ 같은 props로 자주 렌더링이 일어나는 컴포넌트에 사용한다export function List({ title, date }) { return ( title: {title} date: {date} );}export const ListMemo = React.memo(List..

1. vscode 설치https://code.visualstudio.com/ Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.code.visualstudio.com 2. node.js 설치https://nodejs.org/ko/download/ 다운로드 | Node.jsNode.js® is ..