본문 바로가기

분류 전체보기

(204)
구글 로그인 라이브러리 변경 - 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..
오버로딩(Overloading) vs 오버라이딩(Overriding) 오버로딩은 한 클래스 내에서, 같은 메소드를 매개변수를 바꿔서 여러개 정의하여 사용하는 것, 같은 기능을 하는 애는 이름을 똑같이 줄 수 있다. 오버라이딩은 부모 클래스로부터 상속받은 메소드의 동작 방법을 자식 클래스의 상황에 맞게 변경(재정의)하여 우선적으로 사용하는 것 오버로딩 void overload(){ System.out.println("매개변수 0개"); } void overload(int i, int j){ System.out.println("매개변수 "+ i + " 그리고 " + j); } void overload(double d){ System.out.println("매개변수 " + d); } 같은 메소드 명인데, 매개변수 개수나, 타입을 바꿔가면서 따로따로 지정하여 사용 할 수 있다. ..
OOP(Object Oriented Programing) 객체지향 프로그래밍 질문 받았던 내용 중에 머릿 속에서 구름처럼 어렴풋이 알았던 것이 드러나서 구름을 걷어내 보고싶었다. 1. 객체 (Object) 객체는 대상, 오브젝트, 한 덩이(?), 하나의 개념 예를 들어 사람을 하나의 객체라고 할 수 있고, 자동차를 하나의 객체라고 할 수 있다. 프로그래밍 적으로는 커스텀한 ValidException 을 하나의 객체라 할 수 있고, 한가지 로직을 수행하는 SomethindService 도 하나의 객체라고 할 수 있다. 2. 클래스 (Class) 객체들이 공통적으로 갖는 속성들을 모아서 정의 내린 것을 클래스 라고 한다. 흔히 말하는 객체는 붕어빵, 클래스는 붕어빵 틀 좀더 코드에 가깝게 예시를 들면 class SomethingService 내부에 어쩌구 서비스를 구성하는 요소들을 ..
[Nuxt] (mixins 사용법) vue 페이지나 컴포넌트에서 분리된 공통 함수에서 this 사용하기 [Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용하기 [Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용하기 제목을 어떻게 지어야할 지 고민이었다. 물론 방법을 찾는 과정에서도 검색어를 뭐라고 해야할지도 고민이었다. 일단 하고싶은건, 로컬 변수를 쓰는 페이지나 컴포넌트 내부에 공통으로 자주 tacit.tistory.com 지난번에 작성한 글에서 별도의 파일로 분리한 함수를 사용할 때 컴포넌트나 페이지 내에서 사용되는 지역 변수들을 변경시켜주기 위해서 화살표 함수도 시도해보고, this를 bind도 해보고, plugins 도 사용해보고, localThis로 아예 인자를 통째로 넘겨주기도 해보았다. 저번에 했던걸 요약하자면 pages/index.vue 페이지 안에서 사용되는 thi..
[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..