-
angular 6 tip 01
angular 6 tip 01 angular 로그인후 페이지 이동 모든 페이지에서 로그인으로 이동을 하게 되면 이동전 url 을 local storage 에 저장해둔다. 기존 코드 import { Injectable } from "@angular/core"; import { CanActivate, Router } from "@angular/router"; import { OpenIdConnectService } from "./open-id-connect.service"; @Injectable() export class RequireAuthenticatedUserRouteGuard implements CanActivate { constructor(private openIdConnectService: OpenIdConnectService, private router: Router) {} canActivate() { if (this.openIdConnectService.userAvailable) { return true; } else { // trigger signin this.openIdConnectService.triggerSignIn(); return false; } } }...
-
VS Code Settings Sync
VS Code Settings Sync를 이용하여 여러개 컴퓨터에서 동기화 해보자. install setting sync ctrl + shift + P enter type install extension enter search Settings Sync click install 또는 아래 링크에서 인스톨을 누르면된다. https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync 설치가 되면 ctrl + shift + P 를 누르고 sync를 입력하자. 그럼 다음그림이 나온다. 일단 reset extension setting을 먼저 하자. (기존 정보가 있을지도 모르니 지우자.) gist token github에 접속해서 token을 얻는다. ** Settings > Developer settings > Personal access tokens ** 이름...
-
Jenkins 사용시 팁
jenkins에서 사용시 팁 github plugin 설치하기 jenkins » manage jenkins » plugin manager GitHub API Plugin GitHub Authentication plugin GitHub Branch Source Plugin GitHub Integration Plugin GitHub plugin 이렇게 설치하자. trigger 설정 트리거중에 GitHub hook trigger for GITScm polling 이거를 선택해준다. build 설정 Execute Windows batch command 를 추가해서 빌드한다. cd console call npm i call npm run build:ssr-staging xcopy /Y /S wwwroot c:\temp\console_root_staging "C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\msdeploy.exe" -verb:sync -source:IisApp='c:\temp\console_root_staging' -dest:iisapp='aaa.com',computerName='https://192.168.1.19:8172/msdeploy.axd?site=aaa.com',authType='basic',username='admin',password='password' -enableRule:AppOffline -allowUntrusted rmdir /S...
-
Angular 6 컴포넌트 input output
앵귤러에서 컴포넌트를 사용해 생각할 점을 적어본다. 현재 구조 post 라는 컴포넌트에서 글제목 글내용 두개의 인풋박스를 사용하여 값을 서버로 보내는 중이다. 바뀌어야 할 구조 글내용을 쓰는 곳을 에디터로 만들 계획이고 이것을 전체 프로젝트 이곳 저곳에서 사용할 계획이다 editor를 컴포는트로 빼서 현재 페이지에서 사용해보자. 자식 컴포넌트를 만들고 기존 컴포넌트에서 텍스트 박스를 자식 컴포넌트로 이동하고 부모 컴포넌트에서는 자식사용하는것으로 변경 부모 <post-form-content-editor></post-form-content-editor> 자식 - 에디터 <div> <span>Contents Write</span> </div> <textarea id="postformcontent"rows="6"> </textarea> 이제 컴포넌트를 두개를 사용하였으나 부모의 화면에 기존과...
-
Web Project시 주의사항
현재 진행중인 웹프로젝트시 주의사항들을 적어두자. 예전부터 가지고 있던 생각이었는데 http://kwonnam.pe.kr/wiki/web/신규서비스 를 읽고 난후 적어봐야겟다고 생각해서 적어본다. 위 글에서 나온 내용도 리뷰해서 동의하는 부분은 이 글에 적어볼 생각입니다. 계속 업데이트를 하려고 합니다. https://teamsmiley.github.io/2017/02/10/code-style/ 이글도 관련이 되있기는 합니다. 전반적인내용 유저 모델과 어드민 모델이 다를경우 WithAdmin이라는 걸로 구분한다. 커스텀 미디어타입 , 함수명 클래스명 모두 WithAdmin으로 한다. frontend url은 전부 소문자로 작성한다.(인증시 토큰이 넘어오는데 대소문자를 구분을 한다.) type스크립트 사용시 가능하면 any 타입을 줄인다. 업데이트시 enter키를 치면 업데이트되게 한다. 엔터를...
-
Code Review - 3
code review - 3 시간 날 때마다 코드 리뷰를 해보고 문서를 작성하자. 다음 컴포넌트를 보자. import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { combineLatest } from 'rxjs'; import { Category } from '../../models/category.model'; import { Post } from '../../models/post.model'; import { CategoryDataService } from '../../services/category-data.service'; import { PostDataService } from '../../services/post-data.service'; import * as showdown from 'showdown'; const converter = new showdown.Converter(); @Component({ selector: 'www-post', templateUrl: './www-post.component.html', styleUrls:...
-
Code Review - 2
code review - 2 시간 날 때마다 코드 리뷰를 해보고 문서를 작성하자. uploadPostImg(resource: any): Observable<any> { let url = `${this.apiUrl}boardfiles`; return this.http.post(url, resource) .pipe( catchError(this.handleError) ); } uploadPostThumbnail(resource: any): Observable<any> { let url = `${this.apiUrl}boardfiles`; return this.http.post(url + '/thumbnail', resource) .pipe( catchError(this.handleError) ); } 함수 이름이 마음에 안든다. 이 클래스는 파일을 업로드하는 기능인데 post라는 변수명이 갑자기 등장. 잘못된듯 싶고 img라는 이름은 꼭 이미지만 업로드하는 기능같아 보이는데 코드에는 그런 부분이 없다. 그냥 일반적인 파일업로드만으로 봐야해서 이름을...
-
Angular toastr notification
ngx-toastr 요즘 디비 업데이트를 하거나 할때 화면에 알림 표시를 해주는 것을 본적이 있다. 그래서 적용해 봤다. install npm install ngx-toastr --save 설정 angular-cli 프로젝트를 사용하므로 angular.json파일을 수정한다. "styles": [ "src/styles.css", "./node_modules/ngx-toastr/toastr.css"//추가 ], app.module.ts에 다음 추가 한다. animation이 없는것과 있는것으로 구성할수 있는데 없는것을 사용하겠다. @NgModule({ imports: [ ToastNoAnimationModule, ToastrModule.forRoot({ toastComponent: ToastNoAnimation, timeOut: 10000, positionClass: 'toast-top-right', preventDuplicates: true, }), // ToastrModule added 사용 import { ToastrService } from 'ngx-toastr'; @Component({ ... }) export class YourComponent { constructor(private...
-
Github 자동 로그인
github 자동 로그인 git 리파지토리가 많다보니 하나씩 pull받는게 만만치 않다. 배치파일로 만들어 보자. 주의할점은 https로 클론받는게 아니라 sshkey를 이용해서 클론을 받을 예정임 https는 어떤 이유에서인지 잘 안되는경우가 많더라구요. 깃허브 데스크탑 설치 https://desktop.github.com/ ssh key 생성 C:\Program Files\Git\git-bash.exe ssh-keygen.exe -t rsa C:\Users\Administrator.ssh 폴더에 id_rsa id_rsa.pub 파일이 생성된다. (다른 유저를 사용중이면 C:\Users\UserName\.ssh) 깃 초기화 git config --global user.name "teamsmiley" git config --global user.email "teamsmiley@gmail.com" private repo 클론 git clone git@github.com:USER_NAME/GIT_NAME.git 배치파일로 매번 클릭의 수고를 덜자. cd C:\Users\<your-id>\Desktop\Github\APP...
-
AutoMapper-TS
Automapper ts 사용하기 c#으로 automapper를 써서 코드를 간결하게 만들어서 잘쓰고 있는데 앵귤러 프로젝트를 하는데 모델들 관리가 힘들어서 automapper 비슷한걸 찾아보다 이걸 찾았다. 사용해보니 코드가 간결해지고 명확해져서 너무 좋다. install npm install automapper-ts –save angular.json수정 scripts에 추가해 주면 된다. "styles": [ "styles.css" ], "scripts": [ "./node_modules/automapper-ts/dist/automapper.min.js" ], typings.d.ts 를 추가 하자. (꼭 해야하는지는 모르겟음.) src/typings.d.ts /* SystemJS module definition */ declare var module: NodeModule; declare module 'automapper-ts'; interface NodeModule { id: string; } model을 만들자. cd...