테스트 라이브러리 도입 이유기존에 프로젝트를 진행할 때, api 개발을 할 때에는 시간에 쫓겨 dev 환경에서만 value를 직접 입력하여 결과를 지켜보는 식으로 수행했었다.이런 방식은 UI를 보면서 하니 직관적으로 보인다는 장점은 있지만... 그 부분을 개발한 사람만 알고 있는 과정이라 조금 불편할 수도있다는 생각이 들었다.Vitest 설치 및 적용Next.js는 기본적으로 Webpack 번들러를 이용하기에, Vitest를 사용하려면 설치 후 일부 설정을 해주어야 한다.npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom# 또는yarn add -D vitest @vitejs/plugin-re..

배포를 해본 적이 없어서 간단하게라도 배포해보고자 Vercel을 알아보게 되었다! Vercel 이란?next.js 개발 팀에서 제작한 호스팅 사이트Configuration, SuperVision 없이 즉시 배포 가능GitHub, GitLab 등 버전관리툴과 연동하여 사용배포한 프로젝트에 대해 Push를 하면 재배포가 가능하다!1. 배포 과정먼저 프로젝트를 완성하고, Vercel 홈페이지에 접속후, 깃허브나 깃랩 계정으로 로그인!초기 깃허브 연동을 하라고할때, 전 프로젝트를 연동할지, 선택할지는 본인이 고르면 된다.지금은 배포가 된 상태라 저렇게 뜨지만, 아무것도 없으면 프로젝트를 임포트하라고 한다.Add New 버튼 클릭후 Project 클릭배포하고싶은 프로젝트 Import누르게되면 다음과 같은 화면이 ..

Phaser3란canvas API를 매핑한 JavaScript 기반의 게임 프레임워크유니티, 언리얼 엔진을 제외하고, 2D게임을 만드는데 유용하다!개발에 앞서 알아야할 사실들Phaser의 경우 JavaScript로 구현하기 때문에, React + TypeScript환경에서 적절하게 코드를 수정해야한다.Phaser는 Scene이라는 단위로 맵, 화면을 구성한다. 게임 로직을 구성할 때 사용한다. (효과음 또는 동작 등...)개발 진행1. Phaser 설치VScode에서 다음과 같은 명령어를 입력하여 간단하게 설치가 가능하다.npm i phaser 2. 프로젝트 생성Vite를 이용해서 기본 프로젝트를 생성한다! npx create vite@latest [프로젝트명] -- --template react-tsn..

** VSCode 기준입니다 1. React Snippet 다운로드React Snippet을 검색하면 이렇게 나옵니다. 다운 받아주세요.2. 단축키 정보들1. rfcexport default function 생성import React from 'react'export default function page() { return ( page )} 2. rfce export default 를 외부에 쓸 때import React from 'react'function page() { return ( page )}export default page 3. rfcp props를 가진 function 생성시import React from 'react'import PropTypes from 'prop-t..