seungho-dev

오늘은 핵심 기능구현 두 번째로 드래그 & 드롭에 이어성냥개비를 회전하는 기능을 만들어 보려고한다오늘도 재밌게 만들어보자~!개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 성냥개비 회전 (오늘 할 것)퍼즐 정답 검증 시스템 💁🏻 현재 선택된 성냥개비 구현우선 Image에 onClick을 추가하고 클릭했을때 handleSelect()를 통해 현재 선택된 성냥의 id값을 저장한다.import { useRef, useEffect, useState } from "react"import { Stage, Layer, Image, Transformer } from "react-konva"export..

오늘은 드디어 핵심 기능인 퍼즐 시스템을 만들어 보려고 한다너무 재밌겠다 바로 가자~! 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.💡 핵심 기능 구현성냥개비 드래그 & 드롭 (오늘 할 것)성냥개비 회전퍼즐 정답 검증 시스템 ✨ React-Konva 설치npm install react-konva konva일단 제일 중요한 기능인 캔버스에서 성냥개비를 회전하고 드래그 & 드롭하는 기능을 순수 js로 구현해보고 싶은 마음은 굴뚝같지만 누군가 좋은 라이브러리를 만들어주셔서 예의상 사용하기로 했다. 🥰 오늘은 간단하게 konva.js를 이용해서 이미지를 드래그 & 드롭할 수 있게 만들어볼 거다. 우선 성냥의 구조체를 생각해 보았다. 가..

오늘은 네비게이션바와 다크모드를 추가해보려고 한다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 🔨 네이게이션바 만들기우선 어제 라우팅을 조금 손봤는데 라우팅 설정이 많아지면서 main.js 만들었던 Router를 ./routes/index.jsx 로 분리하였다.import * as React from 'react'import * as ReactDOM from 'react-dom/client'import Router from './routes/index'import "./index.css"ReactDOM.createRoot(document.getElementById("root")).render( ) component..

이번 프로젝트 아이콘을 한번 만들어 보았다. 살짝 뾰로통한게 포인트! 프로젝트 세팅을 간단하게 끝내고 이제 라우팅 설정을 하려고 하다가내가 알던 컨포넌트기반 라우팅에서 router 객체로 관리하도록 바뀐 부분이 있어 아래 heropy님 블로그를 참고해 만들게 되었다.  굉장히 설명이 잘되어있다.https://www.heropy.dev/p/9tesDt 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💁🏻 React Router를 사용하는 이유는?기존 SSR방식에서는 라우팅을 통해 서버로 해당 자원을 요청해 페이지를 전환했지만 React는 CSR방식을 사용하며 VDOM을 이용한 SPA(Single Page Application)에..

안녕하세요! 저는 최근 부캠을 수료하고 개발자가 되고 싶은 흔한 비전공자 취준생입니다.취준백수의 넘쳐나는 시간에 공부도 할 겸 개인 프로젝트를 하나 하고 싶었는데 마침 유튜브 알고리즘으로 예전에즐겨봤던 문제적 남자에 자주 출제되던 성냥개비 문제를 보고 바로 한번 만들어보기로 했어요 ㅋㅋㅋㅋ 그럼 바로 가자~~!!⛏️  React-Vite 설치(JavaScript + SWC)npm create vite@latest matchstick-puzzle프로젝트 시작하다가 발견했는데 react가 19 버전이 나왔더라구요 Next도 15 ㄷㄷ 시간 왤케 빨라.. 아 공부할게 늘었네 Next는 13->14 만큼의 변화는 없어보여 일단 안심했고 React 19에서 동시 렌더링 지원하는 거랑 특히 Suspense로 us..