반응형 WEB front-end22 react-hook-form React에서 form 을 다루는 라이브러리 form validation Input 테그가 늘어나면 그 수만큼 변수 및 useState()를 생성해 줘야함 각 항목마다 일일이 검증이 필요함 이 기능들을 간단하게 처리해 줄 라이브러리... 까먹지 않게.. 1차 정리를 해 둔다.. 설치 npm install react-hook-form 사용 import { useForm } from "react-hook-form"; function ToDoList() { const {register, handleSubmit, formState: { errors }, setError,} = useForm(); const onValid = (data) => { if (data.password !== data.password1).. 2022. 8. 17. javascript post redirect 고객사의 웹사이트를 만드는 업체에서 우리가 제공하는 웹페이지를 임베디드 해서 보여주기로 했었는데.. 단순페이지가 아니라서 모바일에서 보여줄수가 없다고 연락이 왔다. 임베디드 해주겠다고 한지 한달이 지나서야.. ;;; 원래 location.href 로 넘길려고 했으나.. 제공한 URL이 GET방식이어서 변수값 노출을 막기위해 POST 전송 방식이 필요했다. 서비스 URL과 보여줘야할 URL의 도메인이 달라서 화면을 새로고침하면서 POST로 전송을 해야했다. 문자 OTP 인증 후 인증이 완료가 되면 아래의 코드를 실행하도록 안내했다. const form = document.createElement('form'); // form 태그 생성 let objs = document.createElement('inpu.. 2022. 8. 5. Recoil * Recoil은 React를 위한 상태관리 라이브러리이다. * 하나의 상태를 모든곳에서 공용으로 사용 가능 * 설치 npm install recoil * Recoil을 사용하기 위해 부모트리 어딘가에 RecoilRoot가 필요하다. function App(){ return( ); } * Recoil Atom 만들기 import {atom} from "recoil"; export const isDisplay = atom({ key : "isDisplay", default: true ); * isDispay 값 참조 : useRecoilValue const isDisplay = useRecoilValue(isDisplay); * 값 변경 : useSetRecoilState const setDisplayAt.. 2022. 7. 21. 알아두면 좋은 팁.. (React Query) * React Query - : fetch의 로딩 상태와 로딩 이후 데이터를 셋팅하는것을 자동으로 해 주는 라이브러리 npm i react-query * apexcharts : 각종 chart 제공 npm install --save react-apexcharts apexcharts * CSS 색 참조 사이트 https://flatuicolors.com * head 영역 부분을 변경하기 위한 component npm i react-helmet 2022. 7. 21. tomcat에 배포하기... ReactJS로 코딩을 하면 무조건 nginx나 node로 서버를 올려야 하는줄 알았는데... 톰캣으로 편리하게 올리는 방법이 있었다. 먼저 React 프로젝트에서 package.json 에 아래의 항목을 추가 한다. "homepage": "domin:port/folder", 의 형식으로 추가 "homepage": "http://dev.test.com", // 난 이렇게 추가 React 빌드 npm run build 그러면 프로젝트 폴더 밑에 build 폴더가 만들어 진다. 그리고 이 build 폴더 밑의 모든 파일들을 복사해서 tomcat의 webapps 폴더 아래에 복사를 해 주는데... localhost에 바로 올리고 싶으면.. ROOT 폴더에 넣어주고.. http://dev.test.com/dev.. 2022. 7. 15. styled-component(1) styled-component 설치 : 해당 프로젝트의 디렉토리에서 실행 npm i styled-components 사용방법 import styled from "styled-components"; const div = styled.div``; // back tick (숫자 1 왼쪽 옆에 있는것)을 입력하고 그 사이에 스타일을 작성한다. const div = styled.div` background-color: red; width: 100px; height: 100px; `; styled-component에 props 전달 const Div = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; .. 2022. 7. 11. 이전 1 2 3 4 다음 반응형