가장 인기 있는 JS 라이브러리를 배우기 위한 12가지 유용한 예제 💝

내blog에 원래 게시됨

소개

실험을 통한 학습은 아마도 새로운 것을 빠르게 동화시키는 가장 좋은 방법일 것입니다.
이것이 바로 이 게시물의 목적입니다. 다음과 같은 향상된 스니펫을 사용하면 작업을 시작할 준비가 된 시작점을 갖게 됩니다.

우리는 무엇을 배울 것입니까?

이 기사에서는 몇 가지 편집 가능한 예제를 통해 대중적인 라이브러리를 사용하고 조작하는 방법을 살펴보겠습니다.

이러한 모든 예는 Znote과 함께 사용할 준비가 되어 있지만 간단한 스크립트로도 사용할 수 있습니다. API, 데이터베이스 쿼리, 데이터 시각화 및 작업 자동화가 정말 쉬워집니다! 🌈

모든 예제는 내 Github에서 직접 다운로드할 수 있습니다.

git clone https://github.com/alagrede/znote-app.git
cd znote-app/examples

시작 참고 사항

1. 익스프레스 JS

Express는 JS로 백엔드를 구축하는 가장 인기 있는 백엔드 프레임워크 중 하나입니다.

데모: 이 예제는 HTML 양식 또는 JSON 데이터에서 수신된 데이터에 대한 간단한 백엔드를 빌드하는 방법을 보여줍니다.


Express client/server demo

2. 극작가

Playwright는 최신 웹 앱을 위한 종단 간 테스트 프레임워크입니다. 그러나 일부 브라우저 작업을 자동화하는 데에도 사용할 수 있습니다!

데모: 이 예제는 코드로 웹 페이지와 상호 작용하고 스크린샷을 만드는 방법을 보여줍니다.


Playwright demo

3. 댄포JS

Danfo.js는 구조화된 데이터를 조작하고 처리하기 위한 직관적이고 사용하기 쉬운 데이터 구조를 제공하는 멋진 라이브러리입니다.

데모: 여기에서 로컬 파일에서 데이터 세트를 로드하고 테이블로 표시하는 방법을 볼 수 있습니다.


DanfoJS demo

4. 쓰리글로브

ThreeGlobe는 주로 WebGL Globe에서 영감을 받은 ThreeJS Globe 시각화입니다. 구형 프로젝션을 사용하여 지구본에 데이터 시각화 레이어를 나타내는 ThreeJS WebGL 클래스입니다.

데모: 여기에서는 ThreeGlobe를 로드하고 기본 예제(예: 위성)와 상호 작용하는 방법을 배웁니다.


ThreeGlobe satellites

5. D3

D3.js는 데이터를 기반으로 문서를 조작하고 고급 시각화를 만들고 HTML, SVG 및 CSS를 사용하여 데이터에 생명을 불어넣는 가장 강력하고 널리 사용되는 JS 라이브러리 중 하나입니다.

데모: D3를 가져오고 topojson으로 간단한 세계 지도를 그리는 방법.


D3 Globe demo

6. P5

p5.js는 예술가, 디자이너, 교육자, 초보자 및 기타 모든 사람이 접근 가능하고 포괄적인 코딩을 만드는 데 중점을 둔 창의적인 코딩을 위한 JavaScript 라이브러리입니다.

데모: p5를 가져오고 마우스 위치가 첨부된 간단한 동적 캔버스를 실행하는 방법.


P5 demo

7. Sequelize를 사용한 SQL

Sequelize는 Oracle, Postgres, MySQL, MariaDB, SQLite 및 SQL Server 등을 위한 최신 TypeScript 및 Node.js ORM입니다. 견고한 트랜잭션 지원, 관계, 열망 및 지연 로딩, 읽기 복제 등을 제공합니다.

데모: MySQL용 SQL 드라이버를 로드하고 쿼리를 수행하고 결과를 HTML 테이블로 표시하는 방법


SQL demo

8. 플로틀리JS

d3.js 및 stack.gl 위에 구축된 Plotly.js는 높은 수준의 선언적 차트 라이브러리입니다. plotly.js는 3D 차트, 통계 그래프 및 SVG 지도를 포함하여 40개 이상의 차트 유형과 함께 제공됩니다.

여기에서 기후에 관한 실제 데이터 세트를 사용하는 몇 가지 사용 사례를 볼 수 있습니다.

9. 활성 화재(NASA 데이터)

10. 인구 그래프

11. 기후 온도 이상

12. ISS 위치

보너스

Ray.so

코드의 아름다운 스크린샷을 만드는 온라인 제품 😍

데모: 코드의 아름다운 스크린샷을 쉽게 생성하는 방법 알아보기


Ray.so demo

SVG 테스터

loadBlock 함수를 사용하는 방법과 이를 사용하여 svg를 테스트하는 방법을 설명하는 사용자 지정 메모

데모: SVG 이미지 로드 및 테스트


SVG tester demo

더 나아가

거의 모든 용도와 작업 흐름에 대해 이 앱은 무료이며 도구 상자에 필수입니다! 또한 외부 라이브러리를 로드할 수 있도록 하여 무한한 가능성을 제공하는 고급 사용 사례에 대한 전문적인 제안도 있습니다 🌍

일상적인 작업을 쉽고 반복 가능한 것으로 바꾸면 작업이 더 재미있어질 것입니다. ❤️

이 앱here을 다운로드하고 설명서 웹사이트here를 확인할 수 있습니다.