728x90 전체 글748 [React] useLayoutEffect 🔗 출처 useLayoutEffect – React The library for web and native user interfaces react-ko.dev 🤓 정의 useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect입니다. useEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 비동기적으로 동작하기 때문에 다른 작업에 의해 blocking 하지 않고 필요한 시기에 실행됩니다. 🆚 화면이 업데이트된 후 effect가 실행됩니다. useLayoutEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 동기적으로 동작하기 때문에 해당.. 2024. 3. 25. [React] useId 🔗 출처 useId – React The library for web and native user interfaces react.dev 🤓 정의 useId()는 React 18 버전에 출시된 훅으로 접근성 속성에 전달될 수 있는 고유 Id를 생성하기 위한 React Hook입니다. 🥸 문법과 특징 const id = useId() 매개변수를 사용하지 않습니다. 라벨과 관련된 Id 생성 : label 요소와 그와 연결된 입력 요소(input, select, textarea)에 대한 id와 htmlFor 속성을 사용할 때 사용합니다. 여러 관련 요소에 대한 Id 생성 : 여러 관련 요소에 Id를 제공해야 하는 경우 호출하여 공유 접두사를 생성할 수 있습니다. import { useId } from "reac.. 2024. 3. 24. [일기] 다시 시작 보호되어 있는 글 입니다. 2024. 3. 24. [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. 숫자 야구 게임 개발 계기.. 학창 시절 때부터 즐겨하던 숫자 야구 게임을 오랜만에 하고 싶었지만.. 주위에 같이 해줄 친구가 없는 관계로 남자친구 바짓가랑이를 붙잡고 울며 겨자 먹기로 게임을 하던 중.. 차라리 프로젝트로 만들어서 혼자 하는 게 더 빠르지 않을까?라는 생각을 하게 되었는 데!!!! 진짜로 만들어 버렸다! 현재는 게임 진행과 메모장(그림판)만 사용할 수 있지만 추후에는 DB 연결, PWA, socket.io 기능도 추가하여 더 다양한 기능을 넣어볼 예정이다. 숫자 야구 게임 bulls-and-cows-rose.vercel.app GitHub - eundol0519/BullsAndCows: 숫자 야구 게임 숫자 야구 게임. Contribute to eundol0519/BullsAndCows developm.. 2023. 10. 30. [React + Typescript] Canvas 태그와 useRef를 사용하여 그림판 만들기 아직 블로그에 올리진 않았지만 지금 개인적으로 만들고 있는 프로젝트에 그림판 기능을 넣어보고 싶어서 canvas 태그와 useRef를 사용하여서 그림판 기능을 만들었습니다. 기능에 관한 코드와 설명은 추후 프로젝트가 완성되면 추가적으로 기재하도록 하겠습니다. 2023. 10. 20. 이전 1 2 3 4 5 6 7 8 ··· 84 다음 728x90
