사내 방화벽, 보안 프로그램을 극복하고 angular-cli 설치하기

npm을 이용하여 angular-cli 좀 깔아보려는데 에러가 계속 났다.

SELF_SIGNED_CERT_IN_CHAIN

찾아보니 뭔가 인증서가 문제가 있다고…

나는 뭔가 문제가 있다가도 아무일도 한것도 없는데 해결되는 것을 종종 목격한바 있기에 여유롭게 저절로 해결되기를 기다렸다. 한 3주쯤 지났는데도 해결이 되지 않아서… 오늘은 좀 열씸히 찾아봤다.

잘은 모르겠으나, 인증서 관련 문제다.

특히나 집에 있는 PC는 안그런데, 회사 PC에서 https 사이트에 접속할때면, 아래와 같은 에러가 수시로 발생한다.

뭔 말인고 하고 알아보니…

나는 https://cli.angular.io/ 에 접속했는데도 불구하고, 인증서 발급자가 Certificate.plustech.co.kr 이고, 발급대상은 www.devfestkhi.com 이다. 뭔가 인증서가 이상하다는 냄새가 난다.

plustech를 찾아보니…  수산아이엔티 라는 곳이 나오고, 보안 솔루션 제공 업체라는 설명이 있었다. 우리 사무실에 설치된 프로그램인것 같다. 보안 프로그램 담당자에게 연락을 했다. https 사이트를 접속하는데 인증서가 조작되고 있는것 같다. 에러가 발생한다. 라고 하니, https사이트의 인증서를 가로채서 자기네 인증서를 넣고 어쩌고 한다고 하는데… 왜그러는지는 자세히 모르겠다. ㅠ

여튼 이놈때문에 에러가 난다고 하니, 이상한 사이트인지 아닌지 확인한뒤 업무 관련성을 이야기하니 예외처리를 해주었다.

나 같은 경우에 http://registry.npmjs.org/  와 https://nodejs.org 에 접속할때 이와같은 현상이 있었다. http://registry.npmjs.org/ 만 해당될 경우에는 홈디렉토리/.npmrc   파일에 ‘registry=http://registry.npmjs.org/’ 라고 넣어주니 https를 사용하지 않았다.

이렇게 또 열심히 진행하다보니… 로그를 캡쳐해놓지 않았으나, 웬 sln파일(Visual Studio 프로젝트 파일)을 컴파일 할수 없다고 에러를 밷는다. 그래서, Visual Studio Communiti Edition을 받아다 깔고 다시….

를 실행하였더니… 이제는 CL.exe 를 찾을수 없다는 오류가 난다.

찾아보니 Visual Studio를 설치할때 C++ 개발 환경을 체크하지 않아서 그런거다. 다시 체크를 해줬다.

그랬더니만, 이제 Windows SDK 8.1을 설치하라고 나온다. 성실하게 설치해줬다.

그랬더니 드뎌 설치 완료 ㅠ.ㅠ

설치하고나니 허탈해서 뭘 더 하기가 싫네…

일단 이대로 놔둬야겠다.

 

Angular2 시작하기 (feat. Code Igniter)

  1. 에디터 고르기 : 몇가지 추천할만한 에디터가 있지만, 많은 사람들이 칭찬하는 ATOM.
  2. php+mysql 개발 환경 설정+code igniter : XAMPP + CI 3.x 로 해결
  3. angular2 개발 환경 설정

위의 세가지를 진행하고 나면 이제 어떻게 엮을까를 고민하게 된다. 뭐 대충 엮일꺼라고 생각은 했지만 아직 구체적이지 않아서…

php+Code Igniter는 간단하기 JSON 서비스 역할만 할것이다. 일종의 DB 역할만…
대부분의 UI 관련 내용은 angular2를 이용하여 브라우저상에서 수행될 것이다.

CI에서 JSON을 개발하는 것은 어렵지 않았다. 사실, CI를 쓸 필요도 없었다. 하지만, 무척 간단하고(일주일 정도 보기엔, Rails와 폴더 구조나 개념도 비슷해보임), 혹여나 나중에 확장하거나 할때 Web 프레임웍 하나 정도는 끼고 있어야 도움이 될것 같다는 생각이 들었다. 그리고, 국내에서는 CI가 사용자를 가장 많이 확보하고 있는 것 같다

JSON 서비스 틀을 만들고 나니, 이제 angular2로 ui를 구성해야하는데, 생짜로 하려니 또 막막하다. 난 UI Component를 날코딩하는게 무척 싫다. 컴포넌트 예쁘게 만드는데도 한세월이고, 재사용 가능한 컴포넌트로 제작하다보면 시간 소모가 심하다. 그렇다고, 재사용이 자주 되지도 않지만, 재사용 가능하도록 만들지 않으면 유지보수할때 무척 짜증난다. angular2는 여전히 개선이 진행중이기 때문에, 자료나 써드파티 툴들이 부족하다. angular2는 무엇인가에 대한 자료만 무성하다~

몇가지 찾아본 컴포넌트가 있는데 그 중 PrimeNG 정도면 될것 같아서 이녀석으로 진행하기로 했다. 아직 angular2에 익숙하지 않아서, 얼마나 버벅댈지는 모르지만 또 진행해봅시다.

진행 계획

  • front-end
    • npm 설치
    • 예제 스터디
    • UI Component 스터디
    • UI-DATA간 연동
  • back-end
    • codeigniter 설치
    • REST API 개발

 

참고링크

  • http://ngcourse.rangle.io/handout/why_angular_2.html (Angular2 학습에 필요한 전반적인 기술 다룬 내용, 강추)
  • https://angular.io/docs/ts/latest/tutorial/ (공식 튜토리얼)
  • http://victorsavkin.com/ (angular2 개발 커밋 1등공신의 블로그, angular2 동작원리 잘 설명되어 있음
  • http://blog.thoughtram.io/categories/angular-2/ (angular 전문 컨설팅 독일 회사 블로그 내용 설명 좋음)
  • http://seokjun.kr/ecmascript-6-features/ (ECMA6 간략 설명)
  • http://xgrommx.github.io/rx-book/ (Rx.js 설명: Angular2 에서 아주 열심히 Rx.js 씀)
  • http://rxmarbles.com/ (Rx 이해를 돕는 애니매이션 사이트)
  • http://mobicon.tistory.com/category/Angular.io (한글 개인 블로그)
  • http://es6-features.org/#StatementBodies (ES6 와 ES5 코드 비교)
  • https://kangax.github.io/compat-table/es6/ (ES6 브라우저호환성)
  • http://han41858.tistory.com/3
  • http://sculove.github.io/slides/2016_FETrend/#/
  • https://kangax.github.io/compat-table/es6/
  • https://medium.com/@basarat/typescript-won-a4e0dfde4b08#.2xxoq0vo8 (Typescript Won)
  • https://www.gitbook.com/book/basarat/typescript (Typescript 학습자료)