본문 바로가기

programming

 (118)
구글 로그인 라이브러리 변경 - 4. 라이브러리를 사용하지 않고 google OAuth 로 direct 요청 방식 구현 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 👉 링크 authorization 에서 flow 선택 (gsi/client 라이브러리 사용) 라이브러리를 사용하지 않고 google oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Direct Using Google OAuth 2.0 다시 한 번 목적을 생각해보자 나는 access_token 과 refresh_token을 사용하여 “로그인”을 이용할 것이다 refresh_token을 따로 관리해서 자동로그인 시켜주고 로그인이 거의 영원히 풀리지 않도록 하기 위해서 그리고 지금 라이브..
구글 로그인 라이브러리 변경 - 2. 구글 로그인 라이브러리에서 변경되는 내용 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 authorization 에서 flow 선택 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 변경되는 내용 library의 deprecate 2023.01.04 Google Sign-in Javascript 라이브러리가 (gapi.auth2 모듈) deprecated 되었다. 2023년 3월 31일부터 다운로드가 안된다. Google Identity Services for Web을 사용해라. 출처 : Discontinuing authorizati..
구글 로그인 라이브러리 변경 - 3. authorization flow (gsi/client 라이브러리 사용) 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 👉 링크 authorization 에서 flow 선택 (gsi/client 라이브러리 사용) 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Google Identity Options(선택지) 이번 포스팅에서는 Sigin + API (목적은 access_token으로 구글 API 사용하기) -> 새로운 라이브러리 gsi/client 를 사용하는 구현방법에 대해서 정리해보려 한다. authorization 의 flow 지금 파트가 어디(authen..
구글 로그인 라이브러리 변경 - 1. Google Identity OAuth 개념 구글로 로그인 시키는 방법은 잘 정리된 블로그들 많으니 참고 (필요 선행작업 : 구글 클라우드 플랫폼에서 클라이언트 ID 발급받기) 잘 쓰고 있던 구글 로그인 js 라이브러리가 deprecated 된다고 한다. 바꿔줘야한다. 바꿔주는 김에 OAuth 개념 정리 정리할 내용 Google Identity 간단 개념 (+ oauth) 구글 라이브러리에서 변경되는 내용 authorization 에서 flow 선택 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Google Identity OAuth 2.0 개념 인증을 위한 개방형 표준 프로토콜(약속) 여러 서비스..
[JS] List of Json 객체로 이루어진 리스트에서 최솟값/최댓값 또는 해당 객체의 index 찾기 흔하게 많이 사용되는 간단한 알고리즘(?)을 정리하려한다 다음과 같이 객체로 이루어진 리스트가 있다 const transactionList = [ { id: 1, transactionId: 99, sellDate: "20220801", price: 300, }, { id: 2, transactionId: 99, sellDate: "20220701", price: -200, }, { id: 3, transactionId: 99, sellDate: "20221001", price: 400, }, { id: 4, transactionId: 99, sellDate: "20221101", price: -100, }, ]; [Case1] 여기서 sellDate 가 가장 빠른 날짜를 찾고 싶다 1. 리스트 안의 Ob..
OOP(Object Oriented Programing) 객체지향 프로그래밍 질문 받았던 내용 중에 머릿 속에서 구름처럼 어렴풋이 알았던 것이 드러나서 구름을 걷어내 보고싶었다. 1. 객체 (Object) 객체는 대상, 오브젝트, 한 덩이(?), 하나의 개념 예를 들어 사람을 하나의 객체라고 할 수 있고, 자동차를 하나의 객체라고 할 수 있다. 프로그래밍 적으로는 커스텀한 ValidException 을 하나의 객체라 할 수 있고, 한가지 로직을 수행하는 SomethindService 도 하나의 객체라고 할 수 있다. 2. 클래스 (Class) 객체들이 공통적으로 갖는 속성들을 모아서 정의 내린 것을 클래스 라고 한다. 흔히 말하는 객체는 붕어빵, 클래스는 붕어빵 틀 좀더 코드에 가깝게 예시를 들면 class SomethingService 내부에 어쩌구 서비스를 구성하는 요소들을 ..
[Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용하기 제목을 어떻게 지어야할 지 고민이었다. 물론 방법을 찾는 과정에서도 검색어를 뭐라고 해야할지도 고민이었다. 일단 하고싶은건, 로컬 변수를 쓰는 페이지나 컴포넌트 내부에 공통으로 자주 쓰이는 함수를 common 화 하는 것이었다. 이전에는 흔하게 functions/common.js 이런식으로 자주 사용되는 함수들을 죄다 모아놓던가 했었다. 함수 별로 각각 사용되는 매개변수들을 일일히 정의하고 넘겨주는 것은 덤이요,,, 최종적으로 선택해서 사용한 방법 Mixins) redirect to 👉 https://tacit.tistory.com/166 [Nuxt] (mixins 사용법) vue 페이지나 컴포넌트에서 분리된 공통 함수에서 this 사용하기 [Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용..
An invalid form control with name='' is not focusable. input 에 required를 주고는 조건(v-if) 에 따라서 display none이 되도록 설정되어있음 required로 되어 있는데… div에서 display:none으로 보이지 않도록 했으니깐… submit를 누르면 에러표시를 할 수가 없어서 그런거다. 공존할 수 없는 몇가지가 있다 readonly & requried 불가
REST API 메서드 예시 (GET/POST/PUT/PATCH) 1. GET -> 파라미터로 받아온 id로 해당되는 Cat 객체 찾기 router.get('/cats/:id', (req, res) => { try { const params = req.params; const cats = Cat.find((cat)=> { return cat.id === params.id }) res.status(200).send({ success : true, data: { cats } }) }catch(error) { res.status(400).send({ success: false, error : error.message }) } }) 2. POST -> 신규 객체 추가 router.post('/cats', (req, res) => { try { const data = req.b..
[Express] Post로 JSON 데이터 보내기 (미들웨어 설정) express 설치 후 post로 JSON 객체를 보내려는데, undefined 가 뜬다 post 라우터 app.post('/cats', (req: express.Request, res: express.Response) => { try { const data = req.body console.log(data) res.status(200).send({ success: true, data : {} }) } catch(error){ res.status(400).send({ success: false, error: error.message }) } }) 포스트맨에서 테스트한 내용 백엔드 라우터에서 콘솔로그로 받은 req.body -> undefined 이는 아주 간단하게 해결된다 express가 json 데이터..

티스토리툴바