반응형 더 알아보기/기능81 [Next.js] Drag&Drop 기능 구현하기 이번에는 관리자 페이지에서 이미지를 업로드할 때 파일 선택 버튼 외에도 드래그 앤 드롭으로 이미지를 삽입할 수 있는 기능을 구현해보았다. 코드 아래 링크에 블로그와 기존에 구현했던 이미지 파일 변환 기능을 활용하여 구현하였다. Test 페이지 (/pages/test.js) import Head from "next/head" import FileBox from "@/elements/library/fileBox/Test" import { useEffect, useState } from "react" import styled from "styled-components" const Test = () => { const [imageFile, setImageFile] = useState(null) // AWS에 이.. 2024. 1. 9. [Next.js] Grouping Pagination 만들기 (라이브러리 X) 이전에 구현했던 페이지네이션에서...(그룹화) 기능을 추가한 버전으로 업그레이드하게 되면서 해당 내용을 정리해 보았습니다. Pagination 만들기 (라이브러리 X) 오늘은 Pagination(페이지 네이션) 기능을 만들어 보았다. 라이브러리 대신 부트스트랩으로 CSS 입혔고, 기능은 JS 사용해서 만들었다. (라이브러리를 사용하지 않은 이유 : 블로그를 찾아보던 중 reac eundol1113.tistory.com [React-query] Pagination에 Prefetching 사용하기 현재 진행 중인 프로젝트에 페이지네이션 기능을 구현했는 데 페이지를 넘길 때마다 데이터를 불러오는 속도보다 화면 전환 속도가 더 빨라서(데이터 불러오는 속도 < 화면 전환 속도) 페이지가 eundol1113.tis.. 2023. 12. 11. [Next.js] 드롭다운 영역 외 클릭 시 메뉴 닫기 드롭다운은 프로젝트에서 자주 구현하게 되는 기능인만큼 만들다 보면 이것저것 기능이나 디자인을 넣고 싶어지는 데 이번에는 드롭다운 영역 외 클릭 시 드롭다운 메뉴가 닫히는 기능을 만들어 보았다 기능 구현 과정에서 useRef를 사용하였고 이 과정에서 ref.current.contains(e.target)이라는 개념도 새롭게 알게 되었다. 🤔 ref.current.contains(e.target)란? ref : React의 'useRef' 훅을 통해 생성된 ref 객체 (ex. const ref = useRef(null) ref.current : Ref 객체의 'current' 속성을 나타내며, 해당 Ref가 현재 참조하는 DOM 요소 ref.current.contains(e.target) : 현재 Ref가.. 2023. 11. 27. [Next.js] 드래그 상태에서 css 조작하기 관련 글 목차 1️⃣ react-beautiful-dnd를 사용하여 드래그로 순서 변경하기 [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 yo eundol1113.tistory.com 2️⃣ 다중 이미지 업로드 및 미리 보기 + 드래그로 순서 변경 [Next.js] 다중 .. 2023. 11. 23. [React + Typescript] Canvas 태그와 useRef를 사용하여 그림판 만들기 아직 블로그에 올리진 않았지만 지금 개인적으로 만들고 있는 프로젝트에 그림판 기능을 넣어보고 싶어서 canvas 태그와 useRef를 사용하여서 그림판 기능을 만들었습니다. 기능에 관한 코드와 설명은 추후 프로젝트가 완성되면 추가적으로 기재하도록 하겠습니다. 2023. 10. 20. [React + Typescript] 부모 자식 간에 useRef 사용하는 방법 React와 Typescript를 사용한 프로젝트에서 input에 useRef를 사용하던 중 새롭게 알게된 내용을 정리했습니다. 동일한 컴포넌트에서 useRef를 사용하는 경우 이 내용이 큰 도움이 되지 않을 수 있지만, 부모 컴포넌트에서 자식 컴포넌트에 prosp로 ref를 넘기고, 해당 ref에 접근하여 DOM을 조작하거나 값을 얻어야 하는 경우에 도움이 될 듯 합니다. 실행 화면 코드 useRef() : DOM 취득 용도로 HTMLInputElement 타입을 설정하고, 초깃값으로 null을 설정한다. // Parent.tsx import { useState, useEffect, useRef } from "react"; import Input from "./Input"; import Button f.. 2023. 10. 19. [React-Toastify] 토스트 기능 구현해보기 사이드 프로젝트 Linkey를 진행하면서 토스트 기능을 React + Typescript에서 구현해보았고, 그 과정을 정리해보았습니다! 라이브러리 선택 과정 React Bootstrap과 react-toastify라는 두 가지 선택지 중에서 최종적으로는 React-Toasitify 라이브러리를 선택하였는 데, 현재 개발 중인 사이드 프로젝트가 디자이너나 기획자가 없는 상태에서 프론트 1명과 백엔드 1명이 진행하는 프로젝트이다 보니 UI적으로 임펙트가 부족하다는 느낌이 들어 React Bootstrap에 애니메이션을 추가해서 구현하는 것보다는 빠른 개발을 위해 Node.js 패키지 (React-Toasitify)를 선택하게 되었다. React Bootstrap > Toasts Toasts | React B.. 2023. 9. 26. [AWS] S3에 이미지 추가/삭제/복사(이동) 및 설정하는 방법 입사한 지 1년 3개월 만에 드디어 AWS S3의 추가/삭제/복사 기능을 구현했다. 팀장님 계실 때도 못했던 걸... ChatGTP와 팀원분과의 합동으로 해결해 냈다. 무한한 감사를... 이 글이 AWS S3에 늪에서 헤매고 있는 개발자분들에게 도움이 되기를 바라며... AWS S3 설정하는 방법 next/image src에 AWS S3 이미지 삽입하는 방법 이미지 추가 이미지 삭제 이미지 복사 AWS S3 설정하는 방법 이 부분은 다른 블로그에도 설명이 잘 되어 있어서 간결하게 넘어갑니다 AWS 접속 후 로그인하고 S3에 버킷에 들어간다. 무료 클라우드 컴퓨팅 서비스 - AWS 프리 티어 Q: AWS 프리 티어란 무엇입니까? AWS 프리 티어는 고객에게 서비스별로 지정된 한도 내에서 무료로 AWS 서비.. 2023. 7. 13. axios 여러 개 요청하기 (multiple request) 프로젝트 리뉴얼 과정에서 한 컴포넌트에 5개의 get api를 요청해야 해서 단순하게 생각했을 때는 useEffect에 api를 넣으면 된다고 생각했었지만 실제로 테스트해보았을 때 몇 가지 문제가 발생했었다. 불러온 값이 없다는 error 발생 순차적으로 불러오려니 시간이 오래 걸려 로딩이 느림 유지보수가 용이하지 않음 한꺼번에 api를 요청하는 방법은 없을까 찾아보니 axios.all을 사용하는 방법이 있다는 걸 알게 되었다. 기존에 axios와 크게 다르지는 않아서 좋았다. import axios from "axios" import { useEffect } from "react" const Test = () => { const getAHandler = () => { return axios.get("/.. 2023. 3. 30. 이전 1 2 3 4 ··· 9 다음 반응형
