seungho-dev

[React] 성냥퍼즐 웹 서비스 만들기 11일차 (Mysql / Prisma / NestJS)

오늘은 지난 시간에 이어 공식문서를 보면서 nestJS에서 Prisma와 Mysql를 설치하고 연결해보려고 한다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 👨🏻‍💻 Mysql 설치Mysql은 대표적인 관계형 db 관리 시스템으로 세계에서 가장 널리 사용되는 오픈소스 데이터베이스 중 하나이다.https://www.codeit.kr/tutorials/5/MySQL-%EC%84%A4%EC%B9%98-macOS공식 홈페이지에서 받아도 괜찮고 brew로 받아주어도 괜찮다.brew install mysql 설치가 완료되면 서버를 시작해 보자brew services start mysql 다음 명령어를 실행하면 서버가 정상적으로 실행 ..

오늘은 드디어 핵심기능 중 마지막인 정답 검증을 구현하는 날이다다음 주부터는 회원가입과 로그인을 구현해 볼 생각이다.고고~!!개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 (완료)성냥개비 회전 (완료)Match 컴포넌트 분리, History 기능 (완료)Undo, Redo, Remove (완료)게임타입 및 횟수 제한 (완료)퍼즐 정답 검증 시스템 (오늘 할 것) 💁🏻 유사도 비교 함수유사도 함수를 만들려고 생각해보니까 문제가 있었다. 현재는 이렇게 gameData.json을 불러올 때 정답까지 같이 가져오고 있는데 커닝이 가능하기 때문에 추후에 서버에서 정답을 조회해서 체크 후 결과를..

오늘은 게임타입에 따라 UI 변경과 횟수를 제한하는 시스템을 만들어 보려고 한다.이게 끝나면 핵심 기능 구현파트 중 마지막인 정답 검증 시스템만 남았다! 자 그럼 오늘도 렛츠고고 ~! 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 (완료)성냥개비 회전 (완료)Match 컴포넌트 분리, History 기능 (완료)Undo, Redo, Remove (완료)게임타입 및 횟수 제한 (오늘 할 것)퍼즐 정답 검증 시스템💁🏻 횟수 제한 구현보통 성냥퍼즐에는 크게 옮기는 유형과 지우는 유형 두 가지가 있는데 유형에 따라 버튼 활성화와 횟수 카운팅 방식을 바꿔야 하기 때문에 전체적인 퍼즐객체에 ga..

오늘은 저번시간 구현한 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 }) { /..

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

오늘은 네비게이션바와 다크모드를 추가해보려고 한다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 🔨 네이게이션바 만들기우선 어제 라우팅을 조금 손봤는데 라우팅 설정이 많아지면서 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..