1. Swiper
캐러셀(이미지 슬라이드) 같은 기능 구현을 직접 해도 되지만,
쉽고 빠르고 예쁘게 여러 기능을 만들고 싶을 때 사용하는 라이브러리
(이미지 lazy loading이나 터치/드래그도 가능)
사용법:
https://swiperjs.com/get-started#use-swiper-from-cdn
튜토리얼에 따름
1. js파일, css파일 다운받아서 첨부
2. html, css, js 예제코드 복붙
(기억으로는... cdn복붙해서 태그 복사해오면 됬던거같은데..)
-> css 변경도 가능함
Chart.js
웹페이지에 차트를 써야할때 사용
(관리자, admin 페이지 만들어서 통계를 낼때 사용)
-div박스에 css스타일 넣어서 만들수도 있지만... chart는 이거 쓰는게 ..
사용법:
1. https://cdnjs.com/libraries/Chart.js
js파일 다운받거나, cdn 버전 구해서 html 파일에 넣으면 끝
2. https://www.chartjs.org/docs/latest/
그리고 chart.js홈페이지에서 예제코드 아무거나 붙여넣기하면 차트 나옴
코드를 입력const data = {
labels: ['A', 'B', 'C'],
datasets: [
{
label: 'Dataset 1',
data: [1, 2, 3],
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
},
{
label: 'Dataset 2',
data: [2, 3, 4],
borderColor: '#FF6384',
backgroundColor: '#FFB1C1',
}
]
};
하세요
- EmailJS
원래 이메일 전송은 서버가 해야함, 하지만 Gmail등의 서버를 잠깐 빌려
자바스크립트만으로도 이메일 전송이 가능
-유저가 내 이메일 계정으로 이메일 전송도 가능하고, 내 이메일 계정으로 남에게 이메일 전송도 가능
사용법 :
https://www.emailjs.com/docs/introduction/how-does-emailjs-work/
위 사이트 들어가서 가입해서 계정 만든 후
튜토리얼 그대로 복붙 하고 내가 방금 만든 EmailJS 계정 아이디만 잘 채우면 됨
4. Lodash
array, object, 문자, 숫자 자료를 다루기 편해지는 기본함수를 제공해줌
예를들어 array 자료에 있는 마음에 안드는 'a'라는 문자를 제거하고 싶으면?
직접 반복문 돌리거나, filter함수를 쓰면 되지만
Lodash가 설치되어 있으면
_.pull(어레이자료,'a');
를 쓰면 됨
사용법 :
https://lodash.com/
5. React & Vue
페이지가 너무 많거나, 같은 페이지가 계속 쓰일때 사용하면 좋음
모바일 앱처럼 페이지 이동없이 동작하는 Single Page Application을 만들때 유용함
