전체 글 (522) 썸네일형 리스트형 Canvas - Dynamic Sizing While the width and height of a canvas element are relevant to the pixel, the width and height of the CSS are relevant to the size of the element that the size is applied to. For this reason, it is not a good practice to set the size of a canvas element with CSS as we would do with normal elements, if not possible, and it is better to rely on the element itself or JavaScript. With that being sai.. Deprecated When writing a code it is often that you see the message 'Deprecated'. Deprecated codes are the codes that are being replaced by updated or new codes that do the same function in a better way. Deprecated codes are meant to be replaced completely at some point but until then the codes work as normal. Given that it lives on a dead sentence it is recommended to use updated or new codes whenever pos.. Canvas The HTML element provides various features such as drawing shapes and animations that can be used to create games and other applications. In this writing, we will see some of its attributes and how to use them and I will also introduce some useful tricks when working with the canvas such as dynamic sizing and the drawing application made with the canvas. HTML 삽입 미리보기할 수 없는 소스 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.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 66 다음
