Programming/Javascript (25) 썸네일형 리스트형 Svelte / Snowpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 package 설치 npm i -D snowpack svelte @snowpack/plugin-svelte ( 템플릿 구성용 ) npm i -D @snowpack/plugin-optimize ( html, js 난독화 및 최적화 ) npm i -D @snowpack/plugin-babel ( 바벨 ) npm i -D @snowpack/plugin-sass ( sass ) npm i -D bootstrap@next ( 부트스트랩 ) Svelt for VS Code 패키지 설치 ( 코드 하이라이트 ) 3. package.json 파일 script 추가 "scripts": { "dev": "snowpack dev", "build": "snowpack buil.. Webpack template 프로젝트 만들기 1. 프로젝트 생성 npm init -y 2. 관련 플러그인 설치 npm i -D webpack webpack-cli webpack-dev-server@next npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 ) npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 ) npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 ) npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 ) npm i -D postcss autoprefixer postcss-loader ( 스타일 후.. 캐러셀 만들기 - with Owl Carousel owl carousel 한 화면에 여러개의 이미지를 나타내며 돌아가는 기능을 합니다. 1. 다운로드 owlcarousel2.github.io/OwlCarousel2에서 압축 파일을 다운로드 합니다. 필요한 파일은 dist\assets폴더 내부의 css파일과 src\js폴더에 있는 js 파일입니다. 그리고 jquery파일도 필요하니 다운받아놓습니다. Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your need.. 캐러셀 만들기 - with bxSlider 1. bxSlider 프러그인 다운로드 bxslider.com에서 다운로드에서 다운로드 가능합니다. 링크로 연결하는 방법이 기본으로 나와있는데, The other ways에 직접 다운로드하여 사용할 수 있도록 다운로드 경로도 제공합니다. 그리고 jquery도 필요하니, 다운받아놓습니다. jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com 2. 복사하기 압축을 풀면 dist 폴더 안에 있는 css파일과 js파일을 원하는 폴더로 옮겨서 사용합니다. 주의할 점은 images 폴더를 css 파일들을 옮겨놓은 폴더에 함께 복사해 놓아야 한다는 점입니다. 이 이미지는 스타일시트에서 사용하는 이미지들입니다. 3.. 무료 간트 차트 라이브러리 Gantt chart library ourcodeworld.com/articles/read/434/top-5-best-free-jquery-and-javascript-dynamic-gantt-charts-for-web-applications mongoDB Atlas Test DB 만들기(React 강좌 중에서..) 안녕하세요, 리액트를 한번 배워볼까 해서 동영상을 따라 시도해보고 있는데, 처음 MongoDB 연결하는 부분부터 막히네요. 예전에는 사용자만 생성해도 test Database가 만들어졌던 것 같은데, 최근 방법이 바뀌었나봅니다. 방법은.. 1. clusters->collections 메뉴로 이동하여 create database 를 클릭해줍니다. 2. Database이름: test, Database Collections: devices 으로 생성해줍니다. 3. 그리고 소스를 실행해서 확인합니다. const express = require('express') const app = express() const port = 5000 const mongoose = require('mongoose') mongoos.. electron 배포파일 만들기(electron-builder) 1. electron-builder 설치 npm install electron-builder --dev-save 2. package.json파일 수정 "scripts" 부분에 "deploy"를 추가하고, "build" 부분을 추가합니다. { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "deploy":"electron-builder --windows nsis:ia32" }, "repository": "https://github.com/electron/electron-quic.. electron 실행파일 만들기(electron-packager) 1. Electron-packager 설치 npm install electron-packager --save-dev 2. package.json파일 수정 - "scripts" 내부의 "build" 부분을 추가해 줍니다. phonebook이라고 되어있는 부분이 실행앱 이름이 됩니다. { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-packager . phonebook" }, "repository": "https://github.com/elec.. 이전 1 2 3 4 다음
