Angular.js (29) 썸네일형 리스트형 구글 OAuth2 로그인 "확인되지 않은 앱 입니다. " 해결방법 !! [angular https ssl통신 설정방법 ] 현재 나는 앵귤러에 로그인을 올리고있다. 구글인가서버에서 인증하고 정보제공을 동의하게 되면 access_token 을 url파라미터로 받아오게되는 과정이다. 하지만 구글 로그인시 구글 인가서버 ( with redirect_url , client_id, response_type , scope) 에서 인가를 하게 되면 확인되지 않은 앱이라고 나올 때가 있다. 이는 HTTPS 문제이다. 구글API 는 HTTPS (HTTP Security) 상에서만 작동되도록 설정 되어 있는데, 우리는 보통 localhost 에서 개발연습을 하기에 HTTP 에서 테스트를 하게 되고, 여기서 확인되지 않은 앱이라고 나오는것이다. 이제우리는 ng serve 할때 ssl 설정해주어서 구글API 에 접속할수 있게 해주어야한다. 단도직.. Toast UI Viewer 탑재하는법! viewer 라이브러리는 @toast-ui/editor 에 이미 포함이 되어있다. 따라서 라이브러리 npm 설치는 이전전편을 참고해주길 바란다. 1. 뷰어용 컴포넌트를 만든다. ng generate component viewer 2. 생성된 viewer.component.ts 에 뷰어라이브러리를 import 한다. import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer'; 3. viewer.component.html 에 뷰어 를 탑재할 div를 생성한다. 또한 viewer 가 사용할 css도 탑재해준다. . . . . . . 4. 이어서 viewer.component.ts 에 viewer를 셋팅한다. let viewer: Viewer; @Comp.. html 을 string 으로 appendChild 해주는 방법! document .querySelector('#viewer') .insertAdjacentHTML('beforeend', "안녕"); 이렇게 하면된다. Toast UI Editor 에 color 플러그인 탑재하기 [ Angular.js ] 전편에서 잘 작동하는 editor 를 확인하였다. 토스트 ui 버전 2로 업데이트 되면서, NHN은 토스트ui 라이브러리 경량화를 위해서 색상,차트 등의 기능들은 플러그인으로 따로 뽑아놓았다. 따라서 만약 기본 뷰어를 사용하다가 폰트색상, 차트그리기 등의 기능이 필요하다면 우리는 그떄 플러그인을 뷰어셋팅때 꼽아주면 된다. (말그대로 plug in) 다음의 과정을 거치면 뷰어에 color셋팅하는 버튼이 생기는 것을 확인 해볼수 있다. 1. 라이브러리 다운로드 $ npm install @toast-ui/editor-plugin-color-syntax --save 2. viewer 셋팅때 plugin으로 탑재. editor = new Editor({ el: document.querySelector('#edit.. Angular.js에 Toast UI Editor 탑재하기 1. 컴포넌트 생성 ng generate component write 2. npm라이브러리 다운로드 npm install @toast-ui/editor --save 3. writer.component.ts - 토스트ui 에디터 임포트해주기 import editor form'@toast-ui/editor'; - 에디터 셋팅 export class PostWriteComponent implements OnInit { constructor() {} set() { let editor = new Editor({ el: document.querySelector('#editor'), height: '500px', initialEditType: 'markdown', previewStyle: 'vertical', });.. var / let / const 차이점 var : 중복선언(재선언) 가능 / 재할당 가능 var VR = " 1234"; var VR = " 123 "; VR = " 123 "; let: 중복선언(재선언) 불가능 / 재할당 가능 let LE = " 1234" let LE = " 123 " /불가능 재선언 LE = " 123 " //가능 재할당 const : 중복선언(재선언) 불가능 / 재할당 불가능 const CON ="1234"; const CON ="123"; // 에러 CON = "123" // 에러 변수명 뒤에 물음표(?) 와 달러 ($) 표시 Angular 프로젝트를 보다보면 다음과 같은 형태의 변수 명을 볼 수있다. 1. 변수명 뒤에 물음표 export class ModelA{ id: number; name?: string; type?: string; phoneNumber?: string; } 여기서 물음표는 무엇을 뜻할까? ㄴ> optional 하다는 의미를 내포시킨다. ㄴ> 물음표가 없다면 변수가 사용되지 않을 경우 undefined를 표출하게 된다. ㄴ> 설계시 필수값이 아니라면 , 즉 DB에서 required="true" 가 아닌경우는 물음표를 붙여서 설계하면 좋을것이다. 2.변수명 뒤에 달러 지난 시간에 배운 Rx와 관련있다. Observable 변수명 뒤에 $를 붙여주면 스트림통신을 뜻한다. 달러의 $는 Stream의 줄임말로 볼.. Angular.js Observable [기초] Observable 은 어플리케이션 내의 부분끼리 통신할 수 있게 해주는 방법을 제공한다. 이들은 앵귤러에서 자주쓰이며 특히 , 이벤트 핸들링을 할경우 Observable을 하라고 추천받는다. observer패턴은 subject라고 불리는 객체지향패턴에서의 subject라불리는 객체이다. 여기서 subject란 dependents 리스트들을 유지하고, 자동으로 state 변화를 관찰하는 소프트웨어 패턴이다. 이 패턴은 [ publish / subscribe ] 와 비슷하다. Observable 은 우리가 선언해서 사용한다. 즉, values들을 publish 하는 함수를 선언한다. 하지만, 소비자가 subscribe 하기 전까지는 보내주지않는다. !! Lazy하므로 구독을 꼭 해야한다 , 소비자.. 이전 1 2 3 4 다음
