seungho-dev

오늘은 저번시간 구현한 history 스택에 저장되는 데이터를 가지고 Undo, Redo 구현과 지우는 문제를 구현하기 위해Remove기능을 만들고 퍼즐에 수정 횟수를 제한하여 문제풀이가 가능하도록 만들어보겠습니다. 오늘도 가보자~! 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 (완료)성냥개비 회전 (완료)Match 컴포넌트 분리, History 기능 (완료)(new) Undo, Redo, Remove (오늘 할 것)퍼즐 정답 검증 시스템💁🏻 Undo, Redo 구현지금 히스토릴 배열에 변경된 내용을 저장하고 현재 스탭을 currentStep으로 가리키고 있는데 undo()는 cur..

오늘은 지금까지 코드를 정리해 보고 히스토리 기능을 만들어 보려고 합니다! 고고개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 (완료)성냥개비 회전 (완료)(new) Match 컴포넌트 분리, History 기능 (오늘 할 것)퍼즐 정답 검증 시스템정답 검증 시스템을 만들기 전에 PuzzleCanvas.jsx 가 커져 내용을 Matchsitck.jsx로 분리하였다.import { Image } from "react-konva";export default function Matchstick({ stick, image, isSelected, onSelect, onDragMove }) { /..

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

최근 성냥퍼즐 프로젝트에서 사용한 Konva.js와 예전에 사용했던 Three.js 모두webGL을 쉽게 다룰 수 있도록 만들어진 라이브러리인데오늘은 웹에서 그래픽을 다루기 위해 설계된 WebGL에 대해서 공부해 보았습니다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💁🏻 WebGL이란 사실 래스터화 엔진이다.래스터화(rasterize)란 백터형태의 데이터를 2d 이미지(2차원 배열)로 변환하여 픽셀에 색상을 할당하는 과정을 말한다.우리가 보는 모니터화면은 GPU내부 메모리, framebuffer에 있는 2차원 배열의 픽셀정보를 가져와 보여주게 되는데 이때 래스터화에 대한 계산이 GPU를 통해 병렬적으로 처리된다. 이때 s..

오늘은 javascript에서의 원시타입과 객체타입이 뭔지, 리액트와 불변성에 대해서 공부해 봤다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.💁🏻 원시타입과 객체타입불변성을 이해하려면 먼저 자바스크립트에 원시타입과 객체타입을 알아야 한다.자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시타입(primitive type)과 객체타입(Object/reference type)으로 구분할 수 있다. (객체타입에는 객체와 배열이 해당됨)원시타입인 score에 100이라는 값을 할당할 때 기존 주소에서 100을 할당받은 주소로 변경된다.원시타입: 한번 할당된 원시 값은 읽기 전용(read only)으로 변경할 수 없다.따라서 원시 ..

오늘은 드디어 핵심 기능인 퍼즐 시스템을 만들어 보려고 한다너무 재밌겠다 바로 가자~! 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.💡 핵심 기능 구현성냥개비 드래그 & 드롭 (오늘 할 것)성냥개비 회전퍼즐 정답 검증 시스템 ✨ 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..