포시코딩

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - Vue(1)) 참고 jwt 해석을 위해 모듈 하나를 받아주자 npm install vue-jwt-decode React에서는 jwt-decode를 통해 사용 가능하고 Vue에서는 vue-jwt-decode를 통해 사용 가능하다. 두 모듈 다 사용하지 않고도 jwt를 해석할 수 있는데, parseJwt(token) { var base64Url = token.split('.')[1]; var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/'); var jsonPayload = decodeURIComponent(window.atob(base64).split..

Vue project로 만들 폴더에서 아래 코드 실행 vue create . 각각 Y와 걍 엔터 눌러서 설치 진행 설치가 완료되었다. 여기서 우리는 빨간네모쳐진 저 두 파일만 쓸거임 제일 먼저 public/index.html에 아래처럼 코드를 추가해준다. src/App.vue로 와서 다음과 같이 필요없는건 다 지워주고 클라이언트 ID에는 GCP에서 발급 받은 클라이언트 ID를 기입해주면 된다. 위와 같이 코드를 써주면 1차 테스트 준비 완료다. 과정에 대해 설명하자면 index.html에서 불러온 스크립트 때문에 google을 쓸 수 있게 됐고 mounted()를 통해 컴포넌트가 렌더링 되면 G_OAuth_btn를 id로 가진 div가 google.accounts.id.renderButton을 통해 구글..

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1))에서 결과물로 얻은 값은 jwt라고 하는데 jwt는 (Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이라고 한다. 자세한건 아래 블로그 참고 https://velog.io/@khy226/jwt로-로그인-기능-만들기-React-Rails jwt로 로그인 기능 만들기 (React + Rails ) jwt란? JWT(Json Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이다. velog.io 먼저 이전 포스팅에서 획득한 jwt의 해석을 위해 jwt-decode 설치 npm install ..

Google OAuth2 - React 연동 프로젝트로 사용할 폴더를 생성한 후 해당 폴더로 VSCODE 켜서 리액트 프로젝트화 시켜준다. npx create-react-app . 리액트 프로젝트가 만들어졌고 우리는 여기서 public/index.html src/App.js 이 두 파일만 사용할거임. index.html 파일에서 태그 안 태그 밑에 해당 코드를 작성해준다. 중간에 gsi 키워드가 들어가는게 포인트임. 다른 블로그들처럼 태그 쓰는건 옛날 방식이니 거르면 된다. index.html파일은 이게 끝 App.js 파일을 위와같이 정리해준 뒤 아래 코드를 따라 쓰자 import { useEffect } from 'react' import './App.css'; function App() { func..

프로젝트를 위해 google oauth2 로그인을 구현하던중 수많은 역겨운 수준의 블로그 포스팅들과 그마저 그대로 따라해도 안되는 샘플들 사이에서 위 안내처럼 거의 대부분의 구현 방법을 다룬 글들은 추후 쓰지 않는 방법이 될거란걸 알았다. google 공식 문서에서도 뒤죽박죽인 상황을 보고선 결국 요즘 구글링보다 더 결과에 만족을 느끼는 유튜브에서 원하는 내용을 찾을 수 있었다. 해당 포스팅에선 GCP (Google Cloud Platform) 에서 공통적으로 설정해야하는 부분을 짚고 React와 Vue 각각의 진행 방법에 대해 따로 포스팅할 예정이다. 정리 겸 올리는 글이기 때문에 내가 참고한 영상 그대로 해보고 싶으면 아래 링크를 통해 따라만 하면 React에서 구글 로그인을 구현할 수 있다. htt..

여기까지 했으니 목숨과 스코어도 만들어서 게임답게 만들어보자 다시 html 넘어가서 목숨, 점수 항목 추가 목숨: 5 점수: 0 js 쪽에도 life, score 변수 추가 let life = 5; let score = 0; cactus x 좌표가 0 미만이 될때마다 점수가 10점씩 오르게 하고 innerHTML 로 화면에 바로 반영되게 세팅 document.querySelector('#score').innerHTML = score; 충돌시에도 목숨을 1씩 깎으며 반영되게 세팅한다음 충돌감지 함수에 리턴값을 줘서 충돌한 cactus 는 바로 사라지게끔 했다. function collisionDetection(dino, cactus){ let xValue = cactus.x - ( dino.x + dino..

dino 캐릭터의 움직임, cactus 들의 접근까지 구현했으니 그 둘이 부딪히면 게임오버되게 만들어보자 충돌감지라고 영어로는 Collision detection 이라고 하는데 게임에서는 빠져선 안되는 기능이다. 2D인데다 사각형끼리의 충돌이니 간단하게 구현해보자 function collisionDetection(dino, cactus){ let xValue = cactus.x - ( dino.x + dino.width ); let yValue = cactus.y - ( dino.y + dino.height ); if( xValue < 0 && yValue < 0 ){ // 충돌! // 충돌 시 실행되는 코드 } } dino 가 점프했을 경우도 포함하여 두 사각형이 겹치는 순간이 있으면 if 문 안의 코..

이번엔 dino 를 점프시켜보자 스페이스로 점프할건데 이미 게임 스타트를 스페이스로 하고 있으면 어캄? timer 변수를 따로 지정해서 시간 대신 사용했듯이 상태에 대한 변수를 만들어 쓸거임 let gameState = 0; // 0: end, 1: start let jumpState = 0; // 0: default, 1: jump document.addEventListener('keydown', (e)=>{ if(e.code == 'Space'){ if(gameState == 0){ gameState = 1; // 게임실행 frameAction(); } else if(gameState == 1){ // 게임실행중일때 스페이스누르면 jumpState = 1; // 점프중으로 변경 } } }) 프레임함수..

프레임함수 안에서는 리얼시간이 아닌 프레임단위로 시간이 흐르기 때문에 따로 타이머를 만들어 사용해야한다. 여기에 여러개의 cactus 를 담을 수 있는 Array도 만들었음 let timer = 0; let cactusArr = []; 1초에 60번 실행되는 프레임함수가 ( 사용하는 모니터 주사율에 따라 다름. 144Hz 쓰면 144번, 60Hz 쓰면 60번 ) 120번마다 새 cactus 를 생성해서 Array 안에 들어가게 했다. if(timer % 120 == 0){ let cactus = new Cactus(); cactusArr.push(cactus); } 그 다음 해당 어레이가 forEach 문을 돌며 각각의 cactus 가 왼쪽으로 이동하며 화면에 뿌려지게끔 작성 cactusArr.forEa..

이전 게시글에서 내 캐릭터인 dino 와 장애물인 cactus 를 만들었으니 이제 cactus 가 나한테 달려오게 해보자 단순히 cactus 의 x 을 변경하면 순간이동하게되는거니 프레임마다 움직이게 할거임 https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame window.requestAnimationFrame() - Web API | MDN 화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 developer.mozilla.org function frameAction(){ requestAnimati..