에러 상황 해석 : 얘가 null 일 수도 있어 바보야 (..? ㅋ) 해결방법 1번 es5 사용법 : 널리쉬 ? 변수?속성명 -> 만약 변수가 null이면 -> undefine로 변경 만약 변수가 null이 아니면 -> 속성명이 실행됨 2번 (변수 as any) 3번 if(변수 != null) { 실행문 }
React
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..
Counter Library 숫자 올라가기 외부 Library ( 그냥 애니메이션 효과를 넣고 싶을때 사용 ) CDN(링크) 방식 , NPM(설치) 방식 두가지가 있음 주의 waypoint 라는 외부 라이브러리 필수 설치 필요 JQuery 도 필요 ( 필자는 typescript 사용 ) # 0) JQuery npm i --save-dev @types/jquery npm i @types/jqueryui 여러 옵션들이 있으니 공식 홈페이지 참조 공식 홈페이지 https://github.com/bfintal/Counter-Up CDN 폴더 경로 사용법 사용법 : => html 부분 숫자 => js 부분 $(선택자).counterUp({ delay : 숫자, // 지연시간 (1/1000 초) time : 숫자 ..
useParam url/기본키 정보를 받게하는 함수이다. 예제 // TODO : useParams() => url/기본키 정보를 받게하는 함수 const { dno } = useParams(); App.tsx Router 사용시 useNavigate 강제로 페이지이동시키는 함수이다. 정의 ( React 기본 라이브러리 ) let navigate = useNavigate(); 사용법 url 로 페이지 강제 이동 navigate(" url")
폴더 : types // 자바의 모델 클래스와 유사 // 인터페이스 역할 : 속성에 자료형을 미리 지정하는것. // => 목적 : 각 속성에 자료형(type) 를 강제하는 것 export default interface IEmp { eno?: any | null, ename: string, job: string, manager: number | string, hiredate: string, salary: number | string, commission: any | null, dno: number | string } service 나 page 등 다양하게 쓰임 service 예제 import http from "../utils/http-common"; import IEmp from "../types/IE..
타입 추론 모든 변수에 자료형을 지정하지 않아도 값으로 추론하는 기능을 부여 타입(자료형) 단언 컴퓨터는 알수 없으나 개발자는 확실히 그 변수의 자료형을 확신하면 사용 가능 사용법 변수 as 자료형 예시 (가정) : 개발자가 isNumber가 true 이면 무조건 val 값은 정수가 된다고 확신할때 변수의 초기값 : 생략가능 예시 let num : number = 10; 자료형 생략 가능 기본값이 있는 매개변수 : 생략 가능 예시 function 함수명 (매개변수1 : number , 매개변수2 : number = 0) : number { return 값 } 자료형 생략 가능 리턴자료형 : 함수에서는 생략이 가능 예시 function function 함수명 (매개변수 : number ) : number ..
enum 열거형 특징 1) 상수를 대체해서 사용한다. 2) 자동으로 1씩 증가한다. 3) 값을 직접 지정도 가능하다. 사용법 enum enum명 { 속성1, 속성2, ... } 예시 에러 type 별명 붙이기 (네... 별명...) 사용법 type 별명 = 자료형 | 자료형2 ... let 변수명 : 별명 = 값 특징 같은 형태의 자료형을 쓸 때 편리할것 같다. 예시
