angular 샘플 프로젝트 만들어보기

• github link

• environment 에서 블록체인 설정 정보, tokeninfo로 새로 설정
• 퍼블리싱 작업 완료
• AWS에 구축한 서버에 nginx로 웹서비스 띄우기 .. 그 이후 내가 빌드한 소스코드를 배포한다.

빌드(build)

• angular를 개발하면 angular-cli를 사용할 수 있게 되고, 이를 이용하면 ng-build 라는 명령어를 사용해 간단한 빌드를 진행할 수 있다.
• 개발모드에서 build를 진행할 경우 ng-build라는 명령어를 사용하면 되지만, 운영 모드에서 빌드시엔, ng-build --prod라는 옵션을 사용한다.
• 단, –prod모드에서는 엄격한 문법 체계가 적용되기 때문에, 개발모드에서 발생하지 않던 문법 에러가 발생할 수 있다. 나같은 경우에도, 당장 운영에 올려야 하는데 개발모드에서 나지 않던 문법 에러가 발생하였었고, 해결을 위해 문법 적인 부분을 좀 더 찾아보고 수정해 무사히 빌드를 시켰었다.
• 최적화를 위해 좀 더 엄격히 문법을 체크하는 걸까..
• 해당 명령어가 동작하고 나면 프로젝트의 하위 폴더로 dist라는 폴더가 생성되고, 이 폴더 안에 있는 파일들이 app을 동작 시키는데 필요한 파일들이 된다.
• 다시 빌드할경우 기존 dist폴더에 있는 내용을 전부 삭제 후 실행한다.

webpack에 대한 간단한 이해

• vue도 그렇고, angualr도 그렇고 프로젝트를 빌드할시 webpack으로 번들링을 할 수 있다.

webpack 기본 개념

• 노드 모듈중의 하나. 기본적으로 nodejs설치가 필요하다.
• 웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구이다.
• 번들링이란, 여러개의 파일 중에 종속성이 존재하는 파일을, 하나의 파일로 묶어 패키징을 시키는 과정을 의미한다.
• 1번 파일에서 2번 파일에 있는 함수를 호출해야 할 경우, 스크립트를 불러오는 순서를 2번 파일을 제일 상단에 올려놓고 1번 파일을 그 다음에 불러와지도록 선언 했지만, 이제는 모듈이라는 개념을 사용해 1번 파일에서 2번 파일을 불러오기만 하면 된다.

사용 장점

• 번들링을 함으로써 파일은 하나로 합쳐지고 네트워킹 요청횟수는 줄어들게 된다.
  • 자바스크립트간의 종속성 뿐만 아니라 스크립트내에서 필요한 css나 img와 같은 파일(.css, .jsp)도 번들링해서 하나의 파일로 합쳐주기 때문에, 네트워크 요청을 최소할 수 있다.
• 중복된 소스코드도 최소화
• 모듈 개념을 사용하기 때문에 글로벌이 오염되지 않는다.

배포(deploy)

주어졌던 배포 환경

• AWS서버에 블록체인 노드 구축이 되었다.
• 각 노드들에 대한 네트워크 구성이 되었고,
• 담당을 받은 네트워크에 접속하기 위한 pem파일을 받아 해당 서버에 접속하여 작업을 진행하였다.
• 서버는 Ubuntu 18.04.2 LTS, Nginx
• AWS에서 ssl설정 처리를 해주고 있었기 때문에 내가 따로 deploy이후에 ssl설정할 부분은 없었다.
• AWS Elastic load balance 에서 서비스 도메인을 port 80으로 프록시를 해주고 있음.
  

사용한 배포툴

• pm2
• sudo pm2 start server.js
• pm2의 ecosystem.config.js를 사용하지 못한 이유…

pm2 로 모니터링

• pm2 list
• pm2 monit 0
• pm2 log 0

기타 사용해 본 서비스 실행 방법

http-server

• 소스코드경로에서 sudo http-server ./dist/ -p 80

nginx

• nginx 경로 : /etc/nginx/sites-available
• Nginx 실행 : sudo service nginx restart

크로스 브라우징 설정

• angular의 경우, ie 브라우저 호환성 체크를 위해 polyfills.ts를 확인하면 된다.
• 하지만 작업 중, 문서와 다르게 polyfills.ts에서 ie지원을 위한 모듈들의 주석을 다 해제했으나 ie11 이하 아래 버전은 호환되지 않았었다. (그래서 결국 ie11로만 갔다)

실수한 점

• 업무 중 코어 네트워크가 바뀌었을때 예의 주시 했어야 했는데 미처 챙기지 못해, 데이터를 제대로 불러오지 못하여 테스트 중 이슈가 있었다.

Reference

• https://jodu.tistory.com/38
• https://poiemaweb.com/angular-cli
• https://poiemaweb.com/angular-basics
• https://han41858.tistory.com/45
• https://steemit.com/javascript/@noreco/webpack
• https://feel5ny.github.io/2018/03/25/angular_observable/

Nginx

• apache의 C10K 문제(한 시스템에 동시접속자 수가 1만명이 넘어갈 때 효율적인 방안)를 해결하기 위해 **event-driven 구조로 만든 웹서버.
• 개발한 응용 프로그램은 OSI 7 Layer 중 application Level에서 동작하며 그 아래 Level에서 Nginx 같은 웹서버가 http 통신을 제공하게 된다.

Nginx vs Apache

• client가 http 요청을 보낼때 Apache는 MPM(Multi-Process Module)을 사용하여 처리한다.
• MPM에는 두가지의 방식이 존재한다.

1. PreFork 방식(다중 프로세스 처리)
2. Worker 방식(말티 프로세스-스레드 방식)

nginx는 event-driven 방식

• nginx는 event-driven 방식으로 동작한다. 한 개 또는 고정된 프로세스만 생성하고, 그 프로세스 내부에서 비동기 방식으로 효율적으로 작업들을 처리 한다.
• 따라서 동시 접속 요청이 많아도 Process 또는 Thread 생성 비용이 존재하지 않는다.

Reference

• https://medium.com/sjk5766/%EB%84%8C-%EB%AD%90%EB%8B%88-nginx-9a8cae25e964

Intro

• 사내 프로젝트를 위해 explorer 사이트를 열게 되었다. 1차적으로 private network를 기존 EOS Tracker에 있던 EOS Blockchain 설정만 바꾸어 먼저 오픈을 하게 되었다.
• EOS Tracker는 EOSEssentials의 프로젝트 중 하나로 볼 수 있다.
• EOS Tracker는 Real time block explorer for EOS Blockchain 로서, Oasisbloc Explorer는 이 프로젝트의 소스코드를 clone하여 작업을 진행하였다.
• EOSEssentials의 다른 프로젝트를 확인하려면 이곳에서

Angular 기본 서칭

angular나 typescript에 대한 충분한 지식 없이 급하게 반영하다보니 코드를 보면 답답한 마음이 많이 들었던 작업이었다. 이제라도 angular에 대한 기본적인 것을 정리해보려고 한다.

• 프로젝트는 angular 6를 사용했다.
• angular 는 Typescript를 기반으로 개발이 되고, angular 어플리케이션은 typescript를 javascript로 변환해야 한다. (angular는 typescript 뿐만 아니라 javascript, dart로도 작성될 수 있지만, angular 공식 문서, 커뮤니티에서 가장 많이 활용되고 있는건 typescript라고 함.)
• 또한 프로젝트가 의존하는 모듈들은 로드하는 html 파일의 script 태그를 작성해야 한다.
• Angular CLI를 이용해 프로젝트를 생성하면, 의존 모듈의 설치는 기본 패키지 매니저인 npm으로 자동화되어 진행된다.
• Angular cli의 빌드 기능은 의존성 관리를 위한 작업을 자동화 하여 진행한다.
• aunular cli 빌드 기능은 내부적으로 모듈 번들러인 webpack을 이용하여 아래 작업을 자동으로 지원한다.

- TypeScript에서 javascript로의 트랜스파일링
- 디버깅 용도의 source map 파일 생성
- 의존 모듈과 HTML, CSS, 자바스크립트 번들링
- 코드의 문법 체크
- 코드의 규약 준수 여부 체크
- 불필요한 코드의 삭제 및 압축
- AoT 컴파일

Angular CLI란?

• angular cli는 간단한 명령어를 사용해 angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있다.
• angular의 다양한 구성 요소들을 선별적으로 추가할 수 있는 커맨드-라인(command line interface)이다.
• 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다. ( ng serve, ng serve & )
• (심플하게 생각하면 프레임워크? angular cli는 프레임워크의 개발환경을 구축해준다~ )
• angular cli는 angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라, 표준 스타일 가이드를 제공한다.

angula cli가 주로 지원해주는 기능

• angular 프로젝트 생성
• angular 프로젝트의 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가
• liveReload를 지원하는 내장 개발 서버를 사용한 angular 프로젝트 실행
• unit/e2e(end-to-end) 테스트 환경 지원
• 배포를 위한 angular 프로젝트 패키징

Angular 6 특징

• 2018년 5월 출시
• angular 5와 거의 유사, 5와 호환됨

Angular 5 에서 도입된 기능

• HTTPClient API
• Lambda지원
• 여러 별칭을 사용해 구성 요소를 내보내어 마이그레이션 프로세스를 쉽게 수행 가능
• 표준화를 위한 새로운 파이프 도입
• 빌드 최적화 도입, build optimizer를 자동 지원
• 향상된 컴파일러 적용

Angular 5 에서 추가된 기능

• angular-cli 명령어 업데이트 : ex) ng-update
• cdk 업데이트,
• Angular Material Updated
• 반응형 js 라이브러리인 RxJS 사용
• Angular Element : 앵귤러 컴포넌트를 모든 html 페이지에서 사용할 수 있는 웹 컴포넌트로 게시할 수 있다. 앵귤러 요소 패키지를 사용하면 네이티브 맞춤 요소를 쉽게 만들 수 있다.
• Tree on Service : 죽은 코드 제거 가능…

기타, Angular의 observable

• observable은 angular 2가 나왔을때 소개된 것.
• 옵저버블은 angular의 특정 기능이 아니고, es7 릴리스에 포함될 비동기 데이터를 관리하기 위한 새로운 표준이다.
• angular는 이벤트 시스템과 http서비스에서 옵저버블을 광범위하게 사용한다.

Reference

• https://jodu.tistory.com/38
• https://poiemaweb.com/angular-cli
• https://poiemaweb.com/angular-basics
• https://han41858.tistory.com/45
• https://steemit.com/javascript/@noreco/webpack
• https://feel5ny.github.io/2018/03/25/angular_observable/

test page

• test page
• commit contributor not showing error
• ㅠㅠ/..