'Library' 카테고리의 글 목록

JQuery

♻️ 제이쿼리 함수를 → 자바스크립트로 구현 (모음집)

제이쿼리를 자바스크립트로 제이쿼리는 무겁고 느리다. 그리고 요즘에는 리액트, 뷰를 쓰지 제이쿼리는 레거시 프로젝트에만 잔존하는 구시대적 유물이 되어 버렸다. 그렇지만 이전에는 전세계에서 가장 많이 사용된 웹라이브러리라는 명성이 있었는데, 그 이유는 기존 자바스크립트에 없는 여러 편리한 전용 선택자나 메서드를 지원해 주었기 때문이다. 또한 제이쿼리를 이용한 파생 여러 스타일리쉬 라이브러리 숫자도 한몫했다. 하지만 퍼포먼스 문제 때문에 가능한 한 제이쿼리 사용을 지양해야 되지만, DOM을 다루는데 있어 압도적인 편리함은 포기하기엔 너무 달콤하다. 따라서 이번 포스팅에선 몇가지 자주 애용되는 제이쿼리 메서드를 바닐라 자바스크립트로 구현해보아 웹 코딩에 있어 좀 더 편하게 이용해보도록 하자. You might ..

인파_

2023.02.24

(0)

JS 라이브러리 모음

🎨 fslightbox - 성능 좋은 이미지 라이트박스 라이브러리

fslightbox.js 티스토리에 기본으로 내장되어있는 라이트박스 라이브러리는 lightbox2.js 로서 무겁고 느리다. 반면, fslightbox.js 라이브러리는 이미지, 비디오 또는 사용자 지정 소스를 통해 원하는 모든 것을 깔끔한 오버레이 상자에 표시하는 종속성이 없는 바닐라 자바스크립트 플러그인이다. 사용하기 쉬우면서도 가벼우며 이미지, HTML 동영상, YouTube 동영상 등 다양한 유형의 소스를 깔끔한 오버라이팅 박스에 표시할 수 있다. Chrome, Firefox, Edge, Opera, IE 브라우저 모두 사용이 가능하며, 또한 리액트와 뷰 프레임워크에 대해서도 지원한다. 다만 몇가지 애니메이션이나 상위 기능은 Pro 라이센스를 써야해서 유료화가 필요하다. 그래도 기본적인 라이트박스..

인파_

2023.02.23

1

JS 라이브러리 모음

📚 AXIOS 설치 & 특징 & 문법 💯 정리

Axios 라이브러리 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 아다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다. Axios 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 axios vs fetch axios fetch 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 ..

인파_

2022.07.18

13

JS 라이브러리 모음

🎨 Animate.css - 애니메이션을 클래스로 간편하게 사용

Animate.css Animate.css는 css의 애니메이션 효과들을 라이브러리화 하여 누구나도 css 깊을 지식 없이 사용하기 쉬운 애니메이션 라이브러리 이다. 예를들어 부트스트랩이 css 디자인 템플릿을 클래스로 설정한다고 하면, 이건 애니메이션 부트스트랩 이라고 보면 된다. Html 엘리먼트에 클래스명만 부여하면 고퀄리티의 애니메이션 효과를 적용할수가 있어 사용하기 편하게 구성되어 있다. Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasi..

인파_

2022.07.03

1

JQuery

📚 jQuery 요소 인덱스(index) 넘버 구하기

JQuery에서 요소 익덱스 구하기 같은 태그 요소들이 여러개 있는데, 이들의 익덱스를 구해서 순서로 제어하고 싶을때 index() 메소드를 통해 가능하다. 다음은 똑같은 li 5개의 요소들을 인덱스를 통해 특정 요소를 구별하는 예제이다. 1 2 3 4 5 6 /* 같은 이름의 li.papers 요소들에게 각각 클릭 이벤트들을 등록해준다. */ $(".test > ul > li").click(function () { // 만일 li 요소를 클릭한다면, 그 클릭한 형제요소 간의 인덱스 순서를 구해 반환해준다. let num = $("li").index(this); $('.result > p > span').text(num + 1); }); See the Pen jquery index by barzz12 (..

인파_

2022.07.02

(0)

JS 라이브러리 모음

🎨 MockFrame - iframe을 브라우저창으로 스타일링

iFrame In A Browser Mockup iframe을 사용해 웹페이지를 불러올때 다음 사진과 같이 단순한 사각형 영역에 홈페이지를 띄우는 정도로 아주아주 못생기게 나온다. 거기다 스타일링 이래봤자 iframe 테두리 정도 꾸미는 거 외에는 전무하다. 하지만 mockiframe.js 라이브러리를 사용하면 이렇게 iframe 웹페이지를 마치 브라우저 윈도우창에서 띄우는 것처럼 멋지게 스타일링 해준다. 사용법도 매우 쉬워 iframe을 이용해 자신의 포트폴리오 사이트를 띄울일이 있다면 요긴하게 쓰일것 같다. mockiframe.js 사용법 Present iFrame In A Browser Mockup - mockframe.js | CSS Script A JavaScript to make your if..

인파_

2022.06.25

2

JS 라이브러리 모음

🎨 Tagify - 해시 태그(#tag) 입력을 이쁘게 간편히 구현

Tagify js 라이브러리 게시물을 구현할때 빠지지 않는 것이 바로 게시글 # 해시 태그 기능이다. 당장 이 티스토리 게시글에도 태그 기능이 들어 있다. 해시 태그 기능을 만드는 것 자체는 그렇게 어렵지 않다. 적당히 어느 요소에 # 문자를 저장하고 서버에서 문자열 파싱해서 데이터베이스에 저장하면 되기 떄문이다. 다만 UI/UX 적인 요소에서 각 해시 태그를 블럭으로 만들어서 보기 좋게 관리하기에는 쉽지 않은데, 다행히 tagify.js 라는 태그 컴포넌트가 있어 소개해본다. See the Pen Tags input - vanilla by Yair Even Or (@vsync) on CodePen. 위의 샘플 코드처럼 자동으로 해시 태그 영역을 생성해주고, 태그 문자 추가 애니메이션과 더불어 박스를 더..

인파_

2022.06.16

12

JS 라이브러리 모음

🎨 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리

Dropzone.js Dropzone.js는 프론트 페이지에서 사용하는 대표적인 파일 업로드 라이브러리이다. 기본적으로 드래그 앤 드롭 기능을 지원하며, 라이브러리 기본 스타일 또한 동적인 애니메이션과 고급스러운 파일 첨부 상호작용이 매우 훌륭하다. (테마 역시 커스텀 수정이 가능하다) 특히 이미지 파일을 업로드할때, 기본적으로 이미지 썸네일 미리보기를 지원하며 멀티 업로드 기능 역시 지원한다. Amazon S3 멀티파트 업로드도 지원한다고 한다. 긴말 필요없이, 아래 코드 실행 예제를 보고 이미지 파일들을 업로드 해보자. See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen. See the Pen dropzone.js sample-2 (bootstrap)..

인파_

2022.06.15

12

JS 라이브러리 모음

🎉 가벼운 아이콘 폰트 [feather icon] 다운 & 사용법

Feather 아이콘 적용하기 이 아이콘팩은 색이 채워져 있지 않고, 라인으로만 된 디자인으로 깨끗하고 귀여운 모양을 가진다. 사람들이 가장 많이 쓰는 폰트 아이콘의 거장인 Font Awesome 은 위처럼 색이 비워진 아이콘을 쓰려면 유료 정기 결제를 해야 하기 때문에 이 아이콘팩은 가벼우면서도 쓸만한 것 같다. 아이콘의 확장자는 SVG로 이미지 깨짐없이 사이즈 조절과 색상 변경이 아주 쉽게 가능하다. 또한 일러스트 디자인으로 사용하기에도 적합하다. Feather – Simply beautiful open source icons Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 gr..

인파_

2022.06.13

(0)

JS 라이브러리 모음

🎨 Youtube-Background - 유튜브 영상을 헤더 배경 화면으로

youtube-background 홈페이지의 배경화면으로 유튜브 영상을 간단하면서도 깔끔하게 구현할수 있는 라이브러리를 소개해 본다. 적용 예시는 다음과 같다. youtube-background 사용법 GitHub - stamat/youtube-background: Simple script for embedding YouTube, Vimeo and HTML5 videos as cover background Simple script for embedding YouTube, Vimeo and HTML5 videos as cover background - GitHub - stamat/youtube-background: Simple script for embedding YouTube, Vimeo and HTML..

인파_

2022.05.27

6

JS 라이브러리 모음

🎨 jQuery.Ripple - 이미지에 물결 그래픽 효과 주기

jQuery WebGL Ripples jQuery.Ripple은 이미지에 WebGL의 힘으로 물결 그래픽 효과를 가미하여, 마우스 커서를 움직이면 수면 파동을 일으키는 그래픽적인 요소를 화면에 출력해 고급스러운 배너 느낌을 주는 라이브러리이다. 현재 이 블로그도 카테고리 메뉴의 헤더 이미지 영역에 이 기술을 적용중이며 작성자 역시 매우 만족중이다. GitHub - sirxemic/jquery.ripples: Add a water ripple effect to your background using WebGL. Add a water ripple effect to your background using WebGL. - GitHub - sirxemic/jquery.ripples: Add a water ripp..

인파_

2022.05.26

7

JS 라이브러리 모음

🎉 Font Awesome 5 PRO 버젼 다운 & 사용법 💯 정리

Font Awesome 5 PRO 버젼 (v5.15.4) 전세계에서 가장 많이 쓰는 폰트 라이브러리의 폰트어웨이썸5의 최신버젼인 5.15.4v를 소개해본다. 현재 최신 6.0 버젼이 나왔지만 아직 베타 기간이며, PRO버젼을 쓸려면 당연히 년간 100달러를 납부해야한다. 폰트어썸5 버젼만 해도 압도적이고 퀄리티 높은 여러개의 폰트들을 제공하며, PRO버젼이라 더욱더 다양한 추가 폰트를 지원해주고 4가지 추가 폰트옵션도 제공한다. 티스토리 스킨에 적절히 사용하면 보다 높은 홈페이지를 꾸밀수 있다. 본인 블로그의 왼쪽 사이드바 아이콘 역시 폰트어썸 PRO 버젼을 사용했다. Font Awesome 5 PRO 설치 PRO버젼 다운링크가 적용된 해당 html 태그를 티스토리 스킨이나 프로젝트에 붙여준다. 원하는 ..

인파_

2022.02.26

15

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

You Can Become A

Programmer

Library

♻️ 제이쿼리 함수를 → 자바스크립트로 구현 (모음집)

인파_

🎨 fslightbox - 성능 좋은 이미지 라이트박스 라이브러리

인파_

📚 AXIOS 설치 & 특징 & 문법 💯 정리

인파_

🎨 Animate.css - 애니메이션을 클래스로 간편하게 사용

인파_

📚 jQuery 요소 인덱스(index) 넘버 구하기

인파_

🎨 MockFrame - iframe을 브라우저창으로 스타일링

인파_

🎨 Tagify - 해시 태그(#tag) 입력을 이쁘게 간편히 구현

인파_

🎨 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리

인파_

🎉 가벼운 아이콘 폰트 [feather icon] 다운 & 사용법

인파_

🎨 Youtube-Background - 유튜브 영상을 헤더 배경 화면으로

인파_

🎨 jQuery.Ripple - 이미지에 물결 그래픽 효과 주기

인파_

🎉 Font Awesome 5 PRO 버젼 다운 & 사용법 💯 정리

인파_

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역