웹서버에 리액트 배포시 자주 접하는 에러로 루트페이지 '/' 가 아닌 곳에서 새로고침을 하거나, url을 직접 타이핑 쳐 이동할 경우 404 에러가 나는 경우가 많다. 이는 리액트는 소스의 루트 경로에 있는 index.html 파일 하나만을 파싱하며, 내부에서 페이지를 이동할 경우 index.html의 root div에 컴포넌트를 교체하여 리렌더링하는 식으로 화면을 변환하는데, 새로고침하거나 url을 직접 타이핑 쳐 이동하려할 경우, 해당 경로에 있는 물리적인 파일을 찾으려 하기 때문에 404에러가 나는 것. 예를 들어 domin.com/login/loginPage 페이지로 이동하려 할 경우, 화면에서 a태그를 클릭하거나 useNavigate 등을 통해 이동하면, 리액트에서 우리가 미리 작성해놓은 라우팅..

fetch란 promise 기반 ES6+에 추가된 javascript 내장 함수 별도의 라이브러리를 설치할 필요는 없다 모든 브라우저에서 호환되지는 않으며, 브라우저 버전이 낮을 경우 polyfill을 적용하여 사용해야 한다 구성 fetch(url, { method: 'GET' //통신방식, GET, POST, PUT, DELETE 등 mode: 'cors', // no-cors, cors, *same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'Content-Type': ..

Axios란 Promise 기반 HTTP 비동기 통신 라이브러리 운영환경에 따라 브라우저 간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용 요청과 응답을 JSON형태로 자동 변경 라이브러리로, npm이나 기타 방법을 통한 별도 설치 필요 npm install axios bower install axios yarn add axios 구성 axios({ method: "", // 통신 방식 url: "", // 서버 headers: {} // 요청 헤더 설정 params: {}, // ?파라미터를 전달 responseType: '', }) .then(function (response) { setData(response.data); }); 구성옵션은 url이 필수값..

환경 : postgresql 에러 테이블의 fk가 null값을 허용하는 컬럼이고 분명히 아무 값도 넣지않았는데, fk가 잠조하는 부모테이블에 해당하는 값이 없다고 뜬다. SQL Error [23503]: ERROR: insert or update on table "varchar_test" violates foreign key constraint "varchar_test_fk" Detail: Key (varchar)=() is not present in table "varchar_father". 테스트용 테이블이며, varchar_father 테이블의 pk를 varchar_test에서 fk로 참조하고있다. varchar_father테이블은 아무런 데이터도 들어있지 않다. --정상 insert into sc..

흔히 볼 수 있는 메뉴의 트리뷰는 대부분 하드코딩 되어있다 프로젝트 간, 권한별 메뉴조회등을 위해 DB에서 메뉴를 불러올 시, 트리뷰는 하드코딩이 불가 DB에서 불러온 데이터에 따라 트리뷰가 바뀔 수 있도록 컴포넌트 제작 트리뷰의 디자인은 deni-react-treeview를 사옹 npm으로 설치해도 좋고, 다른 라이브러리도 대부분 형태가 같기 때문에 원하는 라이브러리 설치 1. 트리뷰의 기본 형태 import React from 'react' import DeniReactTreeView from 'deni-react-treeview' const TreeView = () => { const fruitsAndVegetables = [ { id: 100, text: 'Fruits', children: [ {..

리액트의 페이징 처리 하단 페이지의 경우 웹페이지의 여러부분에서 공통으로 사용되는 기능이기 때문에, 컴포넌트로 만들어 재사용 페이지네이션 컴포넌트에 파라미터 전달 후, 페이지 버튼들을 리턴 백단(스프링부트), 페이지번호를 노출할 부모컴포넌트, 페이지번호를 리턴해주는 pagination컴포넌트 순으로 설명 1. 백단에서의 데이터 조회 @RequestMapping(value = "/sym/ccm/cde/SelectCcmCmmnDetailCodeList.do") @ResponseBody public HashMap selectCmmnDetailCodeList(@RequestBody CmmnDetailCodeVO searchVO) throws Exception { /** 페이지번호 클릭 시 searchVO에 이동..