하루에 하나씩

배포를 해본 적이 없어서 간단하게라도 배포해보고자 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..

개인 프로젝트를 진행하려고npm create-next-app@latest .... 입력 후npm run dev를 하였더니 다음과 같은 오류가 발생했다.설치하지도 않은 파일들을 인식할 수 없다..?프로젝트를 재생성을 3번을 했는데도 계속 반복되어 다른 방법을 찾아보았다해결 방법답은 이전에 진행했던 프로젝트의 캐시파일 및 서비스 워커 파일알람 시스템을 구현했었는데, 여기서 사용한 firebase들이 service worker에 남아있었고웹 브라우저 상에는 캐시가 아직 남아있었다...지금은 삭제되었으나 원래는 여기에 정보들이 있었고, 모두 Unregister를 해주었다.또한, 크롬브라우저에서 이미지 캐시 파일 삭제를 수행해주었고, Application 내에 전 프로젝트와 관련된 정보를 모조리 삭제시켜주었더니 ..