Frontend (56) 썸네일형 리스트형 React - Style Libraries (Bootstrap) Let's see how we can add style libraries in the React application Bootstrap Run the command shown below to install the bootstrap npm i bootstrap Add the path in the index.js file import 'bootstrap/dist/css/bootstrap.css'; Done References Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Boo.. Tabulator - Dynamic Column Values Let's see how we can diaplay field values of Tabulator dynamically on the JSP with data fetched from a DB. The way it is done is to use the Mutators module to manipulate the orginal data in a column of the table by calling a function as value for the Mutator Implementaiont Add the Mutators module and function as its value. The first parameter for the function represents the original data in the .. NPM - Nodemon Usually, to reflect the changes in the backend on the front end when developing an app, we have to save changes and rerun the server. Nodemon is a live server library that reflects the changes automatically without us having to do so. Implementation Installing Nodemon npm i nodemon Running Once installed we can either run the nodemon directly using the path or NPM commend ▶ Running Directly Run .. 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.. 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.. Hooks - useRef (Creating a Reference to Elements) In vanilla JS, we can get elements by creating a reference to the DOM element to change them dynamically. On the other hand, in React, not only is not possible to use the document object in a component but also we can access the element directly and change the value of attributes. But if there is a way to get access to elements as we do with vanilla JS in React, it would not hurt to have the ski.. 이전 1 2 3 4 ··· 7 다음
