전체 글 (511) 썸네일형 리스트형 Drag and Drop Let's see how we can implement drag and drop using JavaScript Set Up In the HTML file, add the draggable="true" to the element you want to drag and drop. Add styles /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; borde.. JavaScript Module - Button Ripple Effect Let's see how we can create a button ripple effect. The completed code looks like the one below. I have used the coordinates and the click event to implement this. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.. 자바스크립트 모듈 - 버튼물결 자바스크립트로 버튼 클릭 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 요소의 위치와 클릭이벤트를 사용하여 효과를 적용하는 방식입니다. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.left = `${e.clientX - e.target.getBoundingClientRect().x}px` rippleEl... 리덕스 리덕스는 오픈소스 자바스크립트 라이브러리로 애플리케이션의 상태를 관리하는 역할을 합니다. 리액트 리덕스 설치 리액트 프로젝트를 생성할 때 템플릿 옵션을 추가하면 리덕스가 자동으로 설치됩니다. npx create-react-app --template redux 리듀서 생성 feature 폴더 안에 생성할 리듀서를 담을 폴더를 생성 폴더 안에 파일을 추가하고 아래와 같이 슬라이스를 생성합니다. import { createSlice } from "@reduxjs/toolkit" const initialState = {} export const authSlice = createSlice({ name:'auth', initialState, reducers: { reset: (state) => initialStat.. Node.js - Working with MongDB There are many database we can connect to Node.js server. MongDB is an easy to work no-sql database and very popular among Node.js developers. In this writing, we can will how we can use MongoDB with Node.js. Getting Connection Code from MongoDB Go to https://cloud.mongodb.com/ and click database. Next to the title of the database you will find 'Connect'. Click it Choose 'Connect your applicatio.. Firebase Database (Angular, React) Firebase is a cloud-based backend service that provides various features. For the database services, there are real-time databases, an older version, and a newer version called Firestore. Since there is not much of a difference between the two we will see how we can set up, and use the Firestore with applications HTML 삽입 미리보기할 수 없는 소스 Firebase Authentication - Google OAuth In addition to the conventional method of using the ID and password, the Firebase authentication service provides various options such as using a third-party authentication like Google OAuth. Today we will see how we can use Google OAuth with multiple frameworks. HTML 삽입 미리보기할 수 없는 소스 파이어베이스 (인증) - 구글 OAuth 파이어베이스의 인증 서비스는 전통적인 아이디와 비밀번호를 활용하는 방법 외에도 다양한 인증 수단을 제공합니다. 오늘은 구글이나 페이스북 등에 저장된 사용자 정보를 통해 인증하는 방식에 대해서 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 이전 1 ··· 11 12 13 14 15 16 17 ··· 64 다음
