go 설치에 관하여

설치에 관해 확실히 알아두지 않으면, 버전에 대한 전환이 어렵습니다.

macOS 기준으로 다운로드 사이트에서 자동 설치 패키지를 다운받으면 설치가 편합니다.
설치가 완료되면 다음과 같은 상태가 됩니다.

  • /usr/local/ 폴더에 go 라는 폴더와 함께 관련 소스가 설치됩니다.
  • /etc/paths.d/ 안에 go 라는 파일이 있고 그안에 go 실행 경로인 /usr/local/go/bin 이 기록되어 있습니다. => PATH 로 기록이 되어 있기 때문에 이제 터미널에서 go 명령어가 사용이 가능합니다.

수동으로 추가적인 환경 설정이 필요합니다.

  • GOPATH :
  • PATH 에 GOPATH 추가

혹시 go 버전을 변경하려면 다음과 같이 처리하면 좋습니다.

  • 기존 소스인 /usr/local/go 폴더를 다른 이름으로 변경하고 새로운 버전의 빌드된 소스를 /usr/local/go 폴더로 저장해 놓으면 됩니다.

SystemJS 로 Angular2 로컬 개발 환경 만들기

소스 보기

개요

  • 꼭 필요한 최소한의 라이브러리만 이용합니다.
  • SystemJS 를 사용하였습니다.
  • angular-cli 를 사용하지 않았습니다.
  • jspm 을 사용하지 않았습니다.
  • 브라우저에서 미리 TypeScript 를 트랜스파일한 형태의 JS 파일만을 이용합니다.
  • SystemJS 에서는 트랜스파일하지 않습니다.
  • 테스트용 로컬 서버는 http-server 를 이용하였습니다.

angular2 가 의존하는 라이브이러리 설명 (2.4.2 기준)

  • core-js
    • 자바스크립트를 위한 표준 모듈 라이브러리입니다.
    • 상위 버전의 자바스크립트 스펙 사용을 위한 폴리필의 역할을 합니다.
    • reflect-metadatacore-js 에 포함되어 있기 때문에 따로 추가할 필요가 없습니다.
      • reflect-metadata 는 Decorator Metadata 를 위한 ES7 Reflection API 를 사용할 수 있게 해주는 라이브러리 입니다.
  • zone.js
    • Change Detection 의 역할을 합니다.
    • 모델의 변경을 감지하기 위해 angular 가 제공하던 방식이 아닌 범용 디텍션 라이브러리 입니다.
  • rxjs
    • The ReactiveX library for JavaScript 입니다.
    • 말이 필요없네요. Go
    • angular2 에서 기본 탑재한 패키지입니다.

그래서 최종 설치한 패키지 리스트

  • SystemJS 패키지
    • “systemjs”: “^0.19.41”
  • angular2 최소 패키지
    • “@angular/common”: “^2.4.2”
    • “@angular/compiler”: “^2.4.2”
    • “@angular/core”: “^2.4.2”
    • “@angular/platform-browser”: “^2.4.2”
    • “@angular/platform-browser-dynamic”: “^2.4.2”
  • core-js 패키지
    • “core-js”: “^2.4.1”
  • zone.js 패키지
    • “zone.js”: “^0.7.4”
  • rxjs 패키지
    • “rxjs”: “^5.0.3”
  • TypeScript 패키지 (트랜스파일하기 위한)
    • “typescript”: “^2.1.4”
  • http-server 패키지 (테스트용 로컬 서버를 띄우기 위한)
    • “http-server”: “^0.9.0”

Hello Angular2 with angular-cli

angular cli 를 이용해서 빠르게 Hello 부터 찍어보겠습니다.
공식 사이트인 https://cli.angular.io 에서 사용법을 쉽게 확인할 수 있습니다.

https://cli.angular.io

커맨드 라인 인터페이스를 이용해서 angular2 웹페이지를 띄우기가 이렇게도 쉽습니다.

angular2-cli

npm 을 이용해서 커맨드 라인 인터페이스를 설치합니다.

npm i amgular-cli -g

cli 가 성공적으로 설치 되었으면, ‘ng new [프로젝트명]’ 이라는 명령어를 사용하여 프로젝트를 새로 만듭니다.

ng new hello-angular2

프로젝트가 성공적으로 만들어진 후, 해당 프로젝트 폴더로 이동합니다.

cd hello-angular2

‘ng serve’ 라는 명령어로 서버를 실행합니다.

ng serve

ng-serve

사이트를 바로 볼 수 있습니다.

ng-serve-site

angular-cli 를 통한 디렉토리 구조를 잠시만 살펴보고,

angular-cli-structure

브라우저에 찍힌 ‘app works!’ 부분을 고쳐보도록 하겠습니다.

hello-angular2/src/app/app.component.ts 파일에 적힌
‘app works!’ 부분을
‘Hello Angular2!’ 로 바꾸고 저장을 합니다.
저장만 해도 브라우저에 적힌 글귀가 자동으로 바뀝니다.

app.component.ts

일단은 브라우저에 Hello 를 빠르게 찍어 보았습니다. 다음 포스팅에는 디렉토리 구조에 대해 자세히 알아보겠습니다.

hello-angular2-site

SystemJS

systemjs-github

Universal dynamic module loader – loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.

  • Universal : 범용 모듈 로더입니다.
    • 자바스크립의 모듈 로딩 방식은 여러가지 입니다.
      1. NodeJS 에서 사용하는 CommonJS 1
      2. RequireJS 로 대표되는 비동기 모듈 로딩 방식인 AMD (Asynchronous Module Definition) 2
      3. CommonJS 와 AMD 를 다 지원하는 모듈 구현 방식인 UMD 3
      4. ES6 의 표준안인 import 4 / export 5
    • global 스크립트도 로딩할 수 있습니다.
  • Dynamic : 동적 모듈 로더입니다.
    • 설명
  • 브라우저와 NodeJS 둘다 사용이 가능합니다.