npm 설치 # 7) 폼 유효성 체크 라이브러리 설치 # 7-1) formik npm i formik # 7-2) yup npm i yup # typescript npm i @types/yup 유효성 체크는 3가지로 나뉜다. Javascript 변수 초기화 , 유효성 체크 , 값이 들어오는 함수 import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; // Todo : 유효성 체크 lib // Todo : Formik 객체 초기화 (initialValues) : html 태그에서 // Todo : 체크대상 (email , password) : Field 태그 const initialValues = { na..
React/React - 외부라이브러리
대표적인 두가지 라이브러리 Yup & Formik # 폼 유효성 체크 라이브러리 설치 # 1) formik npm i formik # 2) yup npm i yup npm i @types/yup # import import { Formik , Form , Field , ErrorMessage } from "formik"; import * as Yup from "yup"; 중요 태그 태그 설명 Formik Formik 라이브러리 사용 정의 Form Form 태그 부분 정의 == form 태그 Field Form 태그 안의 Field 부분 정의 == input 태그 ErrorMessage Field 에러 메시지 부분 정의 Formik initialValues 객체 초기화 // Todo : 유효성 체크 lib..
install # 공유라이브러리 리덕스-툴킷 설치 npm i react-redux @reduxjs/toolkit 필자는 타입스크립트 사용 type // IAuth.ts : 인터페이스 import IUser from "./IUser"; export default interface IAuth { isLoggedIn : boolean, // 로그인 상태(true , false) user? : IUser | null, // 유저 객체 } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // IUser.ts : 인터페이스 export default interface IUser { // EMAIL VARCHAR2(1000) -- id (email) //..
공식 홈페이지 https://swiperjs.com/ npm 방식 # 공홈 : https://swiperjs.com/get-started#install-from-npm # 9) npm i swiper npm i swiper npm i @types/swiper # 9-1) js import : main.js : 자바스크립트 파일 import Swiper from 'swiper'; # 9-2) css import - App.tsx // TODO : swiper css import // TODO : 참조 : xxx.css -> (압축) xxx-min.css // TODO : : xxx.js -> (압축) xxx-min.js import "swiper/swiper-bundle.css"; 또는 import "sw..
DaterangePicker # 8-2) range calendar 달력 # 공식 홈페이지 : https://www.daterangepicker.com/ 컴포넌트 코드 // DaterangePicker.js import React, { useEffect, useRef, useState } from "react"; /* eslint-disable */ function DaterangePicker() { const [jdate, setJdate] = useState(""); // TODO : 특수한 함수 : 리액트에서 지정한 태그에 직접 접근할때 사용 const daterange = useRef(null); // TODO : 화면이 뜰때 달력 생성 useEffect(() => { if ($("#dateran..
JQuery-ui Calendar 달력 공식 홈페이지 https://jqueryui.com/datepicker/ CDN # 8-1) JQUERY-UI 달력 # 8-2) range calendar 달력 8-3) jquery-ui typescript npm i @types/jqueryui 컴포넌트 // Datepicker.tsx import React, { useEffect, useRef, useState } from "react"; function Datepicker() { const [jdate, setJdate] = useState(""); // TODO : 리액트에서 특정태그에 직접접근하는 방법 : const 변수명 = useRef() // TODO : html input 태그 속성 정의 : ref=..
Easing 공식 홈페이지 https://gsgd.co.uk/sandbox/jquery/easing/ public/lib/easing 폴더 CDN으로 진행 해봅시다 BODY scr/assets/js/initMain.ts // TODO : 7) Easing $(function () { $("#boxing").click(function () { $("#boxing") // .animate({css속성:값}, 지속시간, easing_효과) // easeOutElastic 함수 : easing.js 에 라이브러리 함수가 정의되어 있음 .animate({ marginLeft: "50px" }, 1000, "easeOutElastic") .animate({ marginTop: "50px" }, ..
Isotope CDN 또는 NPM 설치 두가지 방법 단 , cdn도 npm 필수는 해주자 npm 설치 (참고) npm install isotope-layout --save npm i imagesloaded (필수) npm i @types/isotope-layout npm i @types/imagesloaded CDN Isotope는 이미지가 겹치는 버그가 있기 때문에 imageLoaded도 같이 사용 BODY Isotope 만들기 src/assets/initMain.ts or js // initMain.ts export default function initMain() { // TODO : 6) Isotope + imageLoaded (버그 해결) // 버그 : 이미지 겹치는 버그 // 소제목 부분 : ..
Owl Carousel 회전목마 : 여러개의 사진이 자동으로 돌아가게 하는 lib 유사 라이브러리 : swiper 공식 홈페이지 https://isotope.metafizzy.co/ cdn 과 npm 둘 중 하나를 선택해서 사용 위의 ZIP 파일을 public/lib 에 넣기 공식 홈페이지 https://owlcarousel2.github.io/OwlCarousel2/ CDN HEADER BODY 필자는 typescript 사용 type 설치 npm i @types/owl.carousel 사용법 사용법 : 컨텐츠1 ~ 컨텐츠n까지 돌아감 => html : 컨텐츠 ... 컨텐츠 => js : $(선택자).owlCarousel({ 옵션 autoplay: true, // 자동으로 이미지가 돌아가는 설정 sma..
simpleLightBox Carousel 같은 얘들이라 해야하남 공식 홈페이지 https://simplelightbox.com/ 설치(CDN 도 가능) 및 import # 4) 라이트박스 lib : simpleLightBox 설치 npm i simplelightbox # 4-1) import SimpleLightbox from "simplelightbox" 설치 import SimpleLightbox from "simplelightbox"; # 4-2) simplelightbox css import : App.tsx import "simplelightbox/dist/simple-lightbox.css"; 만약 typescript 를 사용하다 이러한 것이 뜨면 현재 2023-10-30일 경으로 아직 si..
Wow.Js GNU GPL 라이센스 V3 (제약 : 소스 공개 필요) 공식 홈페이지 https://mattboldt.github.io/typed.js/ 설치 및 import 방법 # 3) wowjs : GNU GPL 라이선스 V3 (제약 : 소스 공개 필요) npm i wowjs # 3-1) wowjs import 방법 import { WOW } from "wowjs"; # 3-2) App.js 에 import import "wowjs/css/libs/animate.css" 만약 typescript 를 사용하다 이러한 것이 뜨면 현재 2023-10-30일 경으로 아직 wow에는 typescript 타입이 없다 따라서 # 공통) 외부 lib 타입이 없을때 대..
typed.js 화면에 타자처럼 타이핑 애니메이션 효과를 주는 라이브러리 공식 홈페이지 https://mattboldt.github.io/typed.js/ JQuery 필요 # 0) JQuery npm i --save-dev @types/jquery npm i @types/jqueryui 설치 및 import # type.js : 화면에 타자처럼 타이핑 애니메이션 효과를 주는 lib # => npm 설치 npm install typed.js # 2-1) typed.js import 방법 import Typed from 'typed.js' 정의 /src/assets/initMain.ts // initMain.ts import Typed from "typed.js"; export defa..
