본문 바로가기

전체 글54

DataTable row 클릭 처리 DataTable의 row를 클릭하여 이벤트를 동작시키고자 할 경우 아래와 같이 row를 처리하는 click event 코드를 추가하여야 한다 $("#test-table").on('click', 'tbody tr', function(){ $("#test-table").DataTable().row($(this)).data();}); row를 클릭하여 모달을 띄우고 싶을 경우 아래와 같은 방식으로 할 수 있다. $("#test-table").on('click.modal.data-api', 'tbody tr', '[data-toggle="modal"]', function(){ let row=$("#test-table").DataTable().row($(this)).data(); let url=.. 2022. 11. 10.
JS div 특정영역 새로고침 화면의 특정 영역만을 새로고침하려고 할 때 load 함수를 사용하여 새로고침을 할 수 있다. $('#test-area').load(location.href+' #test-inner-area'); 2022. 11. 10.
React Helmet Async를 활용한 Meta Tag 관리 및 공유하기 웹 애플리케이션에서 SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 적절한 메타태그를 관리하는 것은 매우 중요합니다. react-helmet-async는 React 기반의 애플리케이션에서 동적으로 메타태그를 관리할 수 있도록 도와주는 도구입니다. 이 글에서는 react-helmet-async를 활용한 메타태그 관리 방법과 공유하기에 대해서 정리해보았습니다. 1. react-helmet-async로 메타태그 관리1.1 react-helmet-async 설치react-helmet-async는 SSR(서버사이드 렌더링)과 클라이언트 렌더링 모두에서 사용할 수 있는 메타태그 관리 라이브러리입니다. 설치 명령어는 다음과 같습니다:npm install react-helmet-async1.2 메타태그 컴포넌트 .. 2022. 10. 12.
React Router를 활용한 Toss Payments Redirect 처리 Toss Payments를 사용하는 프로젝트에서는 결제 성공/실패 후 Redirect URL로 사용자를 안내해야 합니다. 이 과정에서 URL 파라미터를 통해 결제 상태를 전달받아 처리하고, 적절한 페이지로 리디렉션하는 로직을 구현할 수 있습니다.아래는 Toss Payments의 성공 및 실패 Redirect 처리 컴포넌트를 구현하는 방법과 관련된 내용을 설명합니다.1. Redirect URL 설정Toss Payments 요청 시 successUrl과 failUrl을 설정합니다. 이 URL로 결제 성공 또는 실패 후 리디렉션됩니다.tossPayment.requestPayment('카드', { amount: productAmount, orderId: id, orderName: name, .. 2022. 10. 12.
Toss Payments를 활용한 결제 기능 구현하기 Toss Payments는 간편하고 안전한 결제 시스템을 제공하며, React 프로젝트에서 쉽게 적용할 수 있습니다. 이번 글에서는 Toss Payments SDK를 사용해 결제 기능을 구현하는 방법을 단계별로 설명하겠습니다. 1. 결제 함수 구현결제 요청을 처리하는 useTossPayment 함수입니다. 이 함수는 사용자 데이터를 저장하고 Toss Payments로 결제를 요청합니다.import { loadTossPayments } from '@tosspayments/payment-sdk';import Swal from "sweetalert2";const useTossPayment = async (id, name, price, url, rcpName, addrPost, addr1, addr2, phon.. 2022. 10. 12.
Webpack 5에서 "Rule can only have one resource source" 에러 해결 방법 Webpack 5를 사용하다 보면 아래와 같은 에러를 만날 수 있습니다:Error: Rule can only have one resource source (provided resource and test + include + exclude) 이 에러는 Webpack의 규칙 설정에서 resource, test, include, exclude를 함께 사용했을 때 발생합니다. Webpack 5에서는 이러한 조합이 허용되지 않으며, 설정을 분리하거나 규칙을 수정해야 합니다. 하지만 만약 프로젝트의 의존성 문제나 기존 코드와의 호환성 때문에 Webpack 5를 사용하는 것이 어렵다면, Webpack 4로 다운그레이드하여 문제를 해결할 수 있습니다.  --- Webpack 버전 다운그레이드 방법 아래는 Webpac.. 2022. 1. 10.

티스토리툴바