seungho-dev

리액트 훅 중 `useEffect` 를 사용하다 다음과 같이 콜백 인수로 비동기 함수를 직접 넣게 되면 오류가 발생하게 된다.이는 `useEffect`의 동작 방식과 비동기 함수의 특징 사이에 발생하는 문제이다. 조금 더 자세히 알아보자 💁🏻 useEffect의 동작 원리`useEffect`는 컴포넌트의 라이프사이클에 따라 실행되는 훅(Hook)으로 커밋페이지(Commit Phase) 이후 사이드 이펙트를 처리하기 위해 동작하는데 이때 실행되는 콜백함수는 undefind나 클린업 함수(CleanUp Function)가  반환되어야 한다.하지만 async 함수는 Promise를 반환하므로 React는 이를 클린업 함수로 간주하고 실행하려고 시도하다가 오류를 발생시게 된다.클린업 함수는 이전 사이트 이펙..

오랜만에 하는 포스팅이다.드디어 최소기능 MVP 성냥퍼즐 웹 서비스를 완성하였다. 🎉 이제 배포하기 전에 서버비용을 줄여보고자 캐싱을 위한 React Query 설정을 마지막으로 서비스 홍보하는 방식이나 유지보수 부분을 포스팅해 봐야겠다.배포는 아직 정해지진 않았지만 cloudflare pages + aws ec2 + aws rds로 생각해두고 있다. 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  보다시피 기능은 어느 정도 완성이 되었는데 계속해서 손봐야 할게 실시간으로 생기고 있다..계속 수정하다가는 배포까지 못할 것 같아 이 정도에서 마무리하기로 했다. 💁🏻 React QueryReact Query(TanStack Que..

오늘은 NestJS로 구현한 api를 사용해 프론트에서 Authentication을 구현해보려고 한다.바로가자~!개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  위와 같이 /login post 요청을 통해 JWT 토큰을 받아오면 /profile 라우터에 접근할 때토큰인증을 해야 한다. 우선 전역적으로 로그인 정보를 저장하기 위해 zustand와 토큰정보를 브라우저에 저장하기 위한 미들웨어인 persist도 같이 설치해 주었다.💁🏻 Zustandnpm install zustand zustand-persist zustand란 React 애플리케이션의 전역 상태 관리 라이브러리로 Redux와 같이 Flux구조를 사용하지만 보일러 플레..

오늘은 지난 시간에 이어 공식문서를 보면서 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..