seungho-dev

💁🏻 CI/CD?CI/CD(Continuous Integration / Continuous Deployment)는 소프트웨어 개발과 배포를 자동화하는 프로세스를 의미하는데 머지, 테스트, 빌드과정이 여기 포함된다. 오늘은 우선  github에서 제공하는 actions 기능을 사용해 main branch에 push 했을 때 aws에 접속하여 빌드하고 서비스를 재시작하는 워크플로우를 만들어 보려고한다.👨🏻‍💻 Action?Github Actions의 작업단위로 /.github/workeflows 디렉터리 내에서 *. yml 확장자로 만들 수 있다. 쉽게 설명하자면 ec2와 같은 가상컴퓨터가 레파지토리에 대한 다양한 이벤트(push, pull_request, issues 생성..)에 대해 YAM..

오늘은 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..

오늘은 지난 시간에 이어 공식문서를 보면서 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 (완료)게임타입 및 횟수 제한 (완료)퍼즐 정답 검증 시스템 (완료) UI와 기타 수정해야 할 부분은 많지만 빠르게 서비스 완성을 목표로 Nest를 사용해 backend를 구현해 보기로 하였다.그럼 간단하게 NestJS에 대해서 알아보는 것으로 시작해 보자 개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다.  공식문서의 소개에 따르면 NestJS는 효율적이고 확장 가능한 Node.js server-side applications을 구축하기 위한 프레임워크라고 한다.기본적으..

오늘은 드디어 핵심기능 중 마지막인 정답 검증을 구현하는 날이다다음 주부터는 회원가입과 로그인을 구현해 볼 생각이다.고고~!!개인적인 공부를 위해 작성하는 블로그입니다. 혹시라도 잘못되거나 부족한 부분이 있다면 댓글로 알려주시면 감사하겠습니다. 💡 핵심 기능 구현성냥개비 드래그 & 드롭 (완료)성냥개비 회전 (완료)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 }) { /..