https://sadie100.github.io/CypherTypeTest/ 사이퍼즈 성향 테스트 sadie100.github.io 3년 전에 만들고 Netlify를 통해 배포했던 사이퍼즈 플레이어 타입 테스트.도메인도 만료된 지 한참 전이고, 얼마 전 Netlify에서도 배포했던 프로젝트가 expire됐다는 메일을 받았다.이대로 묵혀둘까... 했는데 그래도 만들어둔 게 아쉬워서,별도의 도메인 구매가 필요 없는 깃헙 페이지를 이용해서 배포하여영원히 사는 프로젝트로 만들기로 했다.하는 김에 깃헙 액션을 통해 CI/CD도 연결해서, 거하게 리팩토링 작업을 했다.  Github Action을 위한 yaml 파일 만들기깃헙 액션 워크플로우를 만들기 위해서는 yaml 파일이 필요하다.해당 워크플로우가 어떤 Git..

이전에 GDD(Gpt Driven Development)로 만들었던 카드 짝 맞추기 게임.GPT 기반으로 코딩하기에는 확실히 HTML+CSS+Vanilla JS 스택을 선택하는 것이 가장 심플하고 대답도 잘 해주는 선택지겠지만...나는 웹 게임을 붙여서 개발하겠다는 취지로 빌드해 둔 Next.js 앱이 있었고 거기에 카드 짝 맞추기 게임을 이식하고 싶었다.그래서 GPT가 1부터 100까지 짜 준 게임 코드를 리액트 기반으로 바꾸기로 했다! 물론 GPT에게 코드를 맡겨서. 하지만 HTML 기반 프로젝트를 처음부터 코딩하는 것과 다르게, 이미 존재하는 리액트 기반 프로젝트에 코드를 변환하여 이식하는 일은 쉽지 않았다...예전엔 순도 100%의 GPT 코드만으로도 잘 돌아가는 게임을 만들 수 있었지만, 이번에..

최근 심심한 나머지 GPT를 활용해서 카드 짝 맞추기 게임을 개발한 적이 있었다.직접 머리 싸매고 코딩하기는 너무나 귀찮아서, GPT가 시키는 대로만 복사해서 만들었다.그 결과, 약 30분만에 HTML, JS, CSS로 애니메이션이 담긴 멀쩡한 웹 게임 하나를 만들 수 있었다. 직접 타이핑한 코드 한 줄도 없이, 오직 GPT의 대답만으로.그 과정이 무척 재밌었고, 마침 GPT가 예전 Chat 기록을 이제 다 보관해주는 만큼, 내 GPT 주도 개발 과정을 프롬프트와 결과 위주로 기록하려 한다.  먼저 GPT가 카드 짝 맞추기 게임을 모를 수도 있기 때문에, 확실히 이 게임에 대해 알고 있는지 확인하고자 했다.잘 알고 있었다. 그래서 복잡하게 프롬프트 짤 것 없이 간단하게 만들어 달라고 했다.처음에는 오직 ..

브라우저 창에 꽉꽉 차는 화면.Height를 full로 하기 위한 여정을 기록한다.먼저 간단하게 전체 화면을 구성하는 컨테이너 div태그의 height를 100vh로 주었다.vh란, 뷰포트 높이에 따라 달라지는 단위이다. 1vh는 뷰포트 높이의 1%이므로, 100vh는 뷰포트의 100%, 즉 full 높이를 말한다고 볼 수 있다.이렇게 하니 정말 화면이 꽉꽉 차 보인다.하지만 모바일 화면으로 접속해 보니 이상했다.간격이 적용되지 않는 문제는 둘째치고, 화면이 묘하게 아래로 처져 있었다.찾아보니 모바일에서는 vh 계산을 할 때 상단에 위치한 url바와 하단의 네비게이션바의 높이까지 포함하여 계산한다고 한다. 그래서 조금씩 어긋나게 되는 것.구글링을 통해 해결방안을 구했다.먼저 url바와 네비게이션바의 높이..

프로젝트를 빌드하기로 했다. 구글에 치니, netlify를 이용하면 간단하게 깃허브 프로젝트를 빌드할 수 있다는 말이 굉장히 많았기에 netlify 이용! 회원가입하고 깃허브에서 빌드할 프로젝트 레포지토리를 선택 후, 빌드한다. 빌드 세팅은 이렇게 해 주었다. 사실 여러 에러를 겪은 결과인데, 처음엔 Build command에 npm run build만 저장하고 빌드했다. 그랬더니 에러 발생. 각 버튼을 클릭하면 에러 이유를 알 수 있는 Deploy log를 볼 수 있다. 쭉쭉 내려 보니 Treating warnings as errors because process.env.CI = true.라는 문구와 함께 컴파일 실패 문구가 떠 있었다. 구글링해보니 빌드 명령어를 npm run build에서 CI=fa..