더 알아보기/기능84 [React] 서명패드 만들기 리액트에서 signature-pad로 서명하기, react-signature-canvas에 placeholder 넣기 회사에서 설문 제작 시 선택할 수 있는 새로운 문항 종류로 `서명 입력`을 받을 수 있는 모듈을 구현하게 됐다. 서명 입력 받는 라이브러리 중 가장 대표적으로 사용되고 있는 signature-pad를 리액 jiyoon-park.tistory.com REACT에서 서명 패드를 만드는 방법 - 블로그 개발자가 버그 및 문제에 대한 주제를 토론하고 지식을 작성 및 공유하며 전 세계 수백만 개발자와 연결할 수 있는 소셜 네트워크입니다. ko.quish.tv reactjs-popup React Popup Component - Modals,Tooltips and Menus — All in one. .. 2022. 7. 22. [React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 문제점 해결 [1탄] [React] 마우스로 드래그 스크롤 구현하기 - 라이브러리 O 마우스 버튼을 누르거나 터치하여 스크롤을 구현하는 React 컴포넌트 - wenyanet 인디아나 드래그 스크롤 반응 드래그시 스크롤 구현 예제 / 샌드 박스 여행에 오신 것을 환영합니다! 직접 시도해보 eundol1113.tistory.com [2탄] [React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 X [React] 마우스로 드래그 스크롤 구현하기 마우스 버튼을 누르거나 터치하여 스크롤을 구현하는 React 컴포넌트 - wenyanet 인디아나 드래그 스크롤 반응 드래그시 스크롤 구현 예제 / 샌드 박스 여행 eundol1113.tistory.com [3탄] 1탄에서 성공했다가 input focus 문제로 2탄에서 갈.. 2022. 7. 18. [React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 X [React] 마우스로 드래그 스크롤 구현하기 마우스 버튼을 누르거나 터치하여 스크롤을 구현하는 React 컴포넌트 - wenyanet 인디아나 드래그 스크롤 반응 드래그시 스크롤 구현 예제 / 샌드 박스 여행에 오신 것을 환영합니다! 직접 시도해보 eundol1113.tistory.com 이전에 react-indiana-drag-scroll 라이브러리를 사용하여 구현한 마우스 드래그 스크롤 기능에는 치명적인 문제가 있었다.. 바로 input 태그가 동작하지 않는다는 문제였는 데 이와 관련해서 메일도 보내 보았지만 답장을 받지 못해서 반쯤 포기하고 있다가 라이브러리 없이 js를 이용하여 마우스 드래그 스크롤을 구현한 블로그를 발견했다. 아직 코드를 이해하는 중이라 자세한 설명은 여기를 보는 게 좋을 것 .. 2022. 7. 14. [React] 다중 체크박스 구현하기 [react] 체크박스 구현 (ft. 전체 선택, 전체 해제) react에서 체크박스 부분 체크, 전체 체크, 전체 해제 구현입니다. 구현 영상 부모 컴포넌트 import React, { useState } from 'react'; import MealTimeCard from './MealTimeCard'; const MealChooseCard = ().. goddino.tistory.com 기존에 구현했던 checkbox를... 활용해서 이번에도 그걸로 다중 checkbox를 만들 생각이였는 데 5시간 정도 헛발짓 하다가 그냥 내가 만들었다. 위에 있는 블로그를 보고 따라 했었는 데 나중에라도 해결 된다면 남기고 싶어서 남겨본다.. 지식인이랑 OKKY랑 맨날 들어가서 확인 해본다😡😡 [부모 컴포넌트] .. 2022. 7. 7. [Next.js] 수평 dnd 만들기 이전 게시물에서 구현했던 dnd는 수직으로 정렬되어 있어서 단순히 display: flex 설정만 해주면 동작하겠지 했는 데 [Next.js] 다중 이미지 업로드 및 미리보기 + 드래그로 순서 변경 [React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 라이브러리는 react-beautiful-dnd npm 사이트에서 가져와서 사용했다. react-beautiful-dnd Beautiful and accessible drag and drop f.. eundol1113.tistory.com 아래처럼 깨지는 느낌과 함께 내가 원하는 대로 정렬이 안되어서 애를 먹었다. 공식 문서와 구글링으로 찾은 블로그를 참고하여 문제를 해결 할 수 있었다. GitHub - atl.. 2022. 7. 4. [React] 마우스로 드래그 스크롤 구현하기 - 라이브러리 O 마우스 버튼을 누르거나 터치하여 스크롤을 구현하는 React 컴포넌트 - wenyanet 인디아나 드래그 스크롤 반응 드래그시 스크롤 구현 예제 / 샌드 박스 여행에 오신 것을 환영합니다! 직접 시도해보십시오! 데모 웹 사이트로 이동합니다 . 설치 npm install --save react-indiana-drag-scrol www.wenyanet.com 프로젝트 진행 중 일반 사용자들을 고려 했을 때 세로 스크롤은 마우스의 휠을 사용하면 되지만 가로 스크롤의 경우 스크롤바가 있더라도 일일이 스크롤바를 눌러서 조정하는 건 사용성에 좋지 않다는 의견이 나와서 드래그 스크롤로 구현하게 되었다. (+ 가로 스크롤바도 보여줘서 가로 스크롤이 있다는 걸 시각적으로 보여줬다.) 과정 1) 라이브러리 설치 npm i.. 2022. 7. 4. [Next.js] 다중 이미지 업로드 및 미리보기 + 드래그로 순서 변경 [React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 라이브러리는 react-beautiful-dnd npm 사이트에서 가져와서 사용했다. react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago.. eundol1113.tistory.com 앞서 정리했던 블로그 코드를 기반으로 변형하였다. 다중 이미지 업로드 및 미리 보기 기능은 아래 블로그를 참고하였다. 이미지 다중 업로드 및 미리보기 리액트에서 어떻게 이미지를 여러장 업로드 시키고 미리보기를 어떻게 구현하는지 설명하려고 한다. .. 2022. 6. 28. [React, Next.js] react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 라이브러리는 react-beautiful-dnd npm 사이트에서 가져와서 사용했다. react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: a year ago. Start using react-beautiful-dnd in your project by running `npm i react-beautiful-dnd`. There are 1288 other projects in the npm registry using www.npmjs.com npm i react-beautiful-dnd 첫 번째 시도 react-beautiful-dnd side .. 2022. 6. 28. [JS] 객체 👉 배열 / 배열 👉 객체 방 추가, 삭제 기능을 만든 후 서버에 데이터를 넘겨주는 과정에서 객체 형태가 아닌 배열 형태로 넘겨 달라는 요청을 받고 찾아보던 중 Object.entries()와 Object.assign()에 대해서 알게 되었다. [React] 방 추가, 삭제 기능 만들기(객체 삽입, 삭제, 수정) 방을 추가하고, 삭제 할 수 있는 기능으로써 특정 방을 삭제하면 해당 방의 데이터만 삭제되고 나머지 값들은 자동으로 앞당겨 오도록 구현했다. (목적) 삭제 버튼 클릭 시 해당 행의 방만 삭제 eundol1113.tistory.com 아래 게시물을 참고하였고, 이 게시물은 내가 배운 개념을 정리하고자 작성한 게시물이다. [js] 객체를 배열로 바꾸는 법, 배열을 객체로 바꾸는 법 자바스크립트 데이터에서 객체를 배열로, 배열.. 2022. 5. 27. 이전 1 2 3 4 5 6 7 ··· 10 다음 728x90
