희운의 일상 블로그

rxjs 비동기 처리 예제* 라우터 이동 혹은 5분에 한 번씩 api를 다시 조회const REFRESH_INTERVAL = 60000 * 5; // 5분public data$ = new Observable();private cache1$: Observable | undefined;get SyncData(): any { if (!this.cache1$) { const timer$ = timer(0, REFRESH_INTERVAL); const router$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd)); this.cache1$ = merge(router$, timer$).pipe( dis..

CryptoJS를 이용한 api 통신 예제CryptoJS:  여러가지 암호화 복호화 알고리즘들을  자바스크립트로 구현하여 사용할 수 있도록 만들어진 라이브러리* CrpytoJs로 구현할수 있는 대표적인 암호화  알고리즘   MD5, SHA, AES(DES)* 자바스크립트 라이브러리 설치(react,vue,angular등에서 사용할때 npm 방식)npm install crpyto-js --savenpm install @types/crypto-js --save(cdn 로드 방식)>import * as CryptoJS from 'crypto-js';public CryptoJSAesEncrypt(passphrase: any, plain_text: any): any { const salt = CryptoJS..

카카오맵 api 연동우선  angular 기반의 카카오맵을 연동하기 전에 아래의 경로를 통해 카카오  api 키를 발급받아야 합니다.카카오 API: https://developers.kakao.com/* 회원가입 하고 내 애플리케이션 추가하기를 한후 앱 설정 > 앱 키 의 Javascript 키를 복사해 둡니다.(angular는 자바스크립트 기반이므로 당연히 javascript 앱 키가 필요합니다.)* 카카오맵 연동 페이지 컴포넌트 생성한후에 아래와 같이 셋팅한후에 원하는데로 사용 하시면 되며, 참조된 맵 api 샘플 가이드를토대로 커스텀하게 수정해서 사용하면 됩니다.* 카카오 지도, 마커, 마커 인포 윈도우 표시 (주석 및 내용참고 :  https://apis.map.kakao.com)    impor..

Front(SPA) 카카오 로그인 API 연동 하기(Angular) 카카오 로그인 API 연동 : 로그인 api 연동방식이 타 sns(소셜) api 에 비해 가장 심플하고 군더더기가 없어 로그인 연동 방식이 어렵지 않습니다. 상세한 부분은 아래에 카카오에서 제공하는 공식 문서를 확인 바랍니다. * api 문서 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api import { Component, NgZone, OnInit, OnDestroy } from '@angular/core'; declare const Kakao: any; declare const $: any; export const kakao_key = { apiKey: '1d11..

Front(SPA) 구글 로그인 API 연동 하기(Angular) 구글 로그인 API 연동 : 기본 gapi auth2 방식의 로그인은 2023년 3월 31일 이후 지원이 중단되며, 새로운 클라이언트 아이디를 생성해서 작업하려면 반드시 아래의 gsi 로그인 방식을 이용해야 합니다. * api 문서 : https://developers.google.com/identity/gsi/web/guides/overview?hl=ko import { Component, NgZone, OnInit, OnDestroy } from '@angular/core'; declare const google: any; declare const $: any; export const google_key = { apiKey: 'Abcd..

Front(SPA) 네이버 로그인 API 연동 하기(Angular) SNS 로그인 api 연동은 보통 한번 작업해 놓으면 특별히 수정할일이 없는 부분이긴 한데 최근 4대 SNS 계정의 연동 방법이 조금 귀찮게 바뀌어서 다시 정리하는 차원에서 공유(공유이지만 사실상 기록) 합니다. 네이버 로그인 API 연동 : 네이버는 다른 소셜과 다르게 여전히 콜백처리를 특정 url 로 하게 합니다. 보통의 웹페이지 방식에서는 문제될게 없지만 front 즉 리액트,뷰,앵귤러,스벨트 등등 SPA 기반(싱글페이) 방식에서는 깔끔하지가 않습니다. 또한 로그인을 시도하는 클릭 버튼 조차 커스텀 하게 사용이 어렵습니다. 그래서 제가 사용하는 방법은 새창으로 뜬 로그인 페이지에서 곧바로 콜백이 일어 나기 때문에 부모페이지에서 직접..