seungho-dev

오랜만에 하는 포스팅이다.드디어 최소기능 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구조를 사용하지만 보일러 플레..

안녕하세요~~오늘은 nodemailer을 사용한 회원가입 및 메일 인증과 로그인 기능을 구현해 보도록 하겠습니다. 💡오늘 구현할 폴더 구조src/├── auth/ # 인증 및 회원가입/로그인 관련│ ├── auth.controller.ts # 회원가입, 로그인, 이메일 인증 엔드포인트│ ├── auth.service.ts # 인증 로직 (회원가입, 로그인, 이메일 인증)│ ├── auth.module.ts # Auth 모듈 정의│ ├── jwt.strategy.ts # JWT 인증 전략│ ├── jwt-auth.guard.ts ..

오늘은 저번에 이어서 backend 서비스 로직을 완성해 보자 바로 가자~! 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  💁🏻 DTO , 서비스로직, 컨트롤러 설정nest g res usersnest g res puzzlesnest에서 제공하는 제너레이터를 사용해서 User와 Puzzle에 대한 모듈, 서비스, 컨트롤러를 만들었다. createPuzzleDto와 createUserDto를 만들어 주었고 유효성 검사를 위해 class-validator와 class-transformer를 다운로드하고 create-puzzle.dto.ts에서 사용해 주었다.npm i --save class-validator class-transf..

https://school.programmers.co.kr/learn/courses/30/lessons/42746 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 오늘은 간단하게 정렬카테고리에 있는 가장 큰 수를 만드는 문제를 풀어보았다. 다음 그림과 같이 주어진 배열의 수를 사용해 만들 수 있는 가장 큰 수를 리턴하는 문제이다.위의 배열을 보면 34, 3, 30 순으로 정렬이 되어야 하는데 문자열로 변환해서 정렬해 보니 [9, 5, 34, 30, 3] 순으로 정렬이 되었다. 그럼 어떻게 정렬을 해야 34, 3, 30 순으로 정렬이 될까? 나는 간단하게 생각해서 자리 수를 마지막자리를 반복하여 채워 넣어..

오늘은 지난 시간에 이어 공식문서를 보면서 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 다음 명령어를 실행하면 서버가 정상적으로 실행 ..

https://school.programmers.co.kr/learn/courses/30/lessons/87694?language=python3 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 오랜만에 알고리즘 문제를 풀어봤다. 깊이/너비 우선 탐색에 있는 아이템 줍기 문제로 알고리즘 고득점 kit에 있는 문제이다.   주어진 사각형들의 외곽선을 따라 아이템과 캐릭터의 최단길이를 구하는 문제이다. 처음 봤을 때 어떻게 풀어야 하지 싶었지만 차근차근 필요한 부분을 생각해 보았다. 💁🏻 외곽선 구하기제일 먼저 그래프 탐색을 위한 외곽선을 구해야 하는데 어떻게 구해야 할까 생각해 봤는데 정말 단순하게 먼저..

💡 핵심 기능 구현(완료)성냥개비 드래그 & 드롭 (완료)성냥개비 회전 (완료)Match 컴포넌트 분리, History 기능 (완료)Undo, Redo, Remove (완료)게임타입 및 횟수 제한 (완료)퍼즐 정답 검증 시스템 (완료) UI와 기타 수정해야 할 부분은 많지만 빠르게 서비스 완성을 목표로 Nest를 사용해 backend를 구현해 보기로 하였다.그럼 간단하게 NestJS에 대해서 알아보는 것으로 시작해 보자 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  공식문서의 소개에 따르면 NestJS는 효율적이고 확장 가능한 Node.js server-side applications을 구축하기 위한 프레임워크라고 한다.기본적으..

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

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