IT.

CORS 오류 방지. npm install http-proxy-middleware //src/setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = (app) => { app.use( "/api", createProxyMiddleware({ target: "http://localhost:8080", changeOrigin: true, }) ); app.use( "/api2", createProxyMiddleware({ target: "http://localhost:8088", changeOrigin: true, }) ); }; api 로 시작하는 api는 8080 포트로 설정된 서버를..

js 환경에서 가상의 REST API 서버를 만들 수 있도록 도움을 주는 라이브러리이다. 백단은 홀딩해놓은 상태로 프론트 개발을 하는 도중 위와 같은 샘플 데이터 테스트 코드를 삭제하기 위하여 사용하였다. 설치. npm i -g json-server app/z_mock-server/testDB.json 을 생성한 후 아래 명령어를 실행하였다. json-server --watch testDB.json --port 3001 위와 같은 에러를 얻을 수 있었다. 스크립트 실행 정책 문제인 것 같아서 powershell 을 관리자 권한으로 열었다. executionpolicy set-executionpolicy unrestricted Y 예스. 실행이 잘된다. posts/list 두 단계 또는 삼 단계 인 경우 ..

이미지 출처 : https://github.com/connect-foundation/2019-12?source=post_page-----514660f93ba-------------------------------- GitHub - connect-foundation/2019-12: 🎟 급증하는 트래픽에도 안정적인 예약 서비스, Atomic Pattern을 적용 🎟 급증하는 트래픽에도 안정적인 예약 서비스, Atomic Pattern을 적용한 재사용 가능한 컴포넌트, 실용적인 Testing을 주제로 하는 이벤트 서비스 - GitHub - connect-foundation/2019-12: 🎟 급증하는 트래픽 github.com Atoms HTML의 태그 또는 최소 기능을 가진 커스텀 태그 컴포넌트 Ex ) f..

table.jsx import { useTable } from 'react-table'; const Table = ({ columns, data }) => { const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data }); return ( {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( {column.render("headerName")} ))} ))} {rows.map((row) => { prepareRow(row); return ( {row.cells.map((cell) => ( {cell...

Path.jsx export const Path = [ { id : "1", path: "/main/deviceStatus", label: "장비 현황", auth : true }, ... ]; export default Path; import Path from 'routes/Path.jsx' import { NavLink } from 'react-router-dom'; {Path.map(v => { return ( [isActive ?"active": "inactive"].join(" ")} to={v.path}> {v.label} ); })} 선택되면 색상 반영.

react v6 부터 지원 되는 기능. index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import {createBrowserRouter, RouterProvider} from 'react-router-dom'; import reportWebVitals from './reportWebVitals'; import RouterInfo from 'routes/Router.jsx'; const RouterObject = createBrowserRouter(RouterInfo); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );..

import { ... } from '../../components/Sample' 변경 전 import { ... } from 'components/Sample' 변경 후 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 다른방법 ex ) { "compilerOptions": { "baseUrl": ".", "paths": { "*": ["*", "src/*", "public/*"] } } } ***** 해당 IDE 툴 완전끄고 다시켜야함.

노란색 영역 : 필요한 라이브러리와 라이브러리의 버전이 명시되어있는 곳. 빨간색 영역 : 리액트 앱 실행, 빌드, 테스트 등의 스크립트가 명시되어있다. 자주 실행하는 명령어를 작성해놓으면 npm으로 실행이 가능하다. 하늘색 영역 : 소스코드 입력 시 문법이나 코드 포맷을 체크해주는 ESlint 설정을 명시해준다.

리액트 : Jordan Walke 라는 FaceBook S/W Dev 가 개발. 인터렉션 [ 제스처, 셀렉션, 상태 ] 이 많은 웹 앱을 만들기 위해서 사용된다. SPA : Vue.js, react, angular. Vue.js / angular : 프레임워크 React : 라이브러리 React 는 단방향 데이터 흐름을 갖고있다. 안정성 보장. Temptate, Model >> Merge >> View 리플로우와 리페인트를 최소화 함으로써 성능을 최적화 시킨다. 컴포넌트 기반. 재사용성 라우팅 Reacte-router-dom 상태관리 Redux Mobx Recoil 테스트 Jest Mocha 컴포넌트 표현 방법 2가지. 컴포넌트 생성 시 가장 첫글자는 대문자. 폴더는 소문자로 시작하는 카멜케이스로 작성...

해당 태그를 통해 페이지를 이동 시 전체 페이지를 재 랜더링 시킨다. 쉽게 말해 브라우저 주소를 이동하고 해당 주소의 페이지를 새로고침 하는 효과이다. 따라서 상태 값이 유지되지 못하고 속도가 저하된다. * 외부 프로젝트와 연결해야하는 경우 SPA의 특성에 맞게 필요한 영역만 재 렌더링 된다. 그 외에 다른영역은 그대로 유지 된다. 데이터를 필요한 부분만 불러올 수 있기에 속도향상에 도움이 된다. * 프로젝트 내에서 페이지 전환하는 경우 const afterStyle = { color: white } const beforeStyle = { color: black } function test() { return ( ({ return style ? afterStyle : beforeStyle ; })}> A..