포시코딩

개요 오랜만에 Vue를 통해 프론트엔드를 구현하게 되었는데 Vue 2.0때와 사용 방법이 크게 달라지는 부분이 있어 포스팅하게 되었다. Before export default { data() { return { inputRef: null, uploadedImage: '', }; }, methods: { handleChange(e) { // change 이벤트 함수 showImage(); }; handleDrop(e) { // drop 이벤트 함수 showImage(); }; showImage() { } }, }; 기존이 위처럼 data에서 변수명을 선언하고 methods에서 함수를 선언해 사용했다면 After import { ref } from 'vue'; export default { setup() ..

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

1. nodejs 최신버전 설치 링크 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 프로젝트 이름으로 된 폴더 생성 후 해당 폴더로 에디터 실행 (vscode 사용했음) 3. nodejs 서버 세팅 npm install express # nodejs 웹 프레임워크 sudo npm install -g nodemon # 수정될때마다 자동으로 서버 재실행해주는 모듈. # -g : 글로벌로 설치해서 다음 프로젝트부턴 다시 설치할 필요 없게끔 server.js const express = require('express'); const app = express(); app.listen(8080..