해피그래머

Guestbook

방명록쓰기 폼
  • 리두 2017.12.05 21:31 안녕하세요. ^^
    책보고 angular 프로그래밍 하다가 궁금한 점이 있어서 질문 남깁니다.
    typescript에서 daum 또는 naver의 지도 api를 임포트해서 사용할 경우
    기존 자바스크립트에서의 경우
    1. script import
    2. new daum.map / new naver.map 과 같은 형태로 지도 api를 사용하는데요

    타입스크립트의 경우에는 어떻게 사용할 수 있을까요?
    위와 동일하게 사용할 경우 ts > js로 컴파일 될때, new daum, new naver에서 cannot find name 에러가 발생됩니다.
    서드파티 라이브러리 없이 어떻게 사용할 수 있는지 궁금합니다.
  • jake 2017.07.03 15:51 안녕하세요 책 보다가 왜 작동이 안되는지 이해가 안가서 질문 남깁니다.
    4장 컴포넌트에서 예제 4.7을 보시면 인풋에 전달을 한다고 되어 있는데
    프로젝트도 새로 만들어서 새로 다시 써보고 해도 컴포넌트 템플릿을 못 가고옵니다. app.module.ts 설정이? 잘못된 것 같은데 이부분 설명을 부탁드려요

    index에는 자식 컴포넌트 셀렉터 쓰는게 맞죠?
  • 해피그래머 happygrammer 2017.07.15 17:58 신고 방명록을 빨리 확인해야 하는데 new 표시가 없어서 지금 확인했습니다.

    질문 주신 예제 4.7는 input 장식자를 이용해서 부모 컴포넌트의 속성 지시자에서(예제 4.6) 전달된 값을 자식 컴포넌트에서 @Input 장식자로 받는 예제인데요.

    컴포넌트간에 값이 전달될 수 있으려면 값을 주고받는 컴포넌트는 루트 모듈(app.module.ts)에 모두 등록이 돼야 합니다.

    그러면 예제 4.6 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 [name1]과 같이 속성 바인딩으로 전달했을때 다음과 같은 형식으로 전달해 줍니다.

    <child-input [name1]="fruit1" .. >

    이때 child-input 지시자는 자식 컴포넌트의 셀렉터입니다. 위 코드와 같이 부모 컴포넌트에서 자식 컴포넌트로 값을
    넘겨주면 자식 컴포넌트(예제 4.7)는 바인딩 속성명 name1으로 받을 수 있습니다.

    @input() name1: string;

    질문 중에 index는 어떤 인덱스를 말씀 주시는 것인지 잘 이해를 못 했습니다.
    제가 질문을 제대로 이해 못 해서 답변이 부족한데요. 추가 질문을 주시면 답변 드리겠습니다.
  • dd 2017.05.04 08:55 Angular2 프로그래밍 책 45p. 관련하여 질문드립니다
    책을보며 angular2를 공부하고있는 학생입니다

    tasks.json 설정파일 내부코드를보면
    isWatching : true 라는 부분이 있던데
    맨처음 파일생성을 하면 이부분이없습니다

    찾아보니 최근 vscode에서는 isWatching이란게 없어지고 isBackground라는것으로 대체되었더군요 정확하지는않습니다만
    그렇다면 isBackground를 쓰게 된다면 상단의 args와 showOutput 의 내용도 바꿔야하는지 아니면 책에 그대로 가지고가야하는지 알고 싶습니다
  • 해피그래머 happygrammer 2017.06.09 10:45 신고 안녕하세요. 방명록을 지금 확인해서 답변이 늦었습니다. 태스크러너 설정은 개발 목적에 맞춰 설정하기 때문에 정해진 정답은 없습니다. 다만 책에서 의도했던 설정은 타입스크립트 파일인 *.ts을 열고 빌드 단축키(ctrl+shift+b)를 눌렀을 때 타입스크립트 파일이 *.ts -> *.js 로 컴파일 되는 형태의 task.json 설정을 구성하려 했었습니다. 이에 맞춰 구성한다면 다음 정도로 설정하면 됩니다.

    {
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["${file}"]
    }

    책은 angular를 주제로 하고 있어 VSCode나 타입스크립트와 관련해서는 분량상 다룰 수 없는 부분이 있어 보다 전문적인 내용들은 공식 가이드를 확인하는 것이 좋다고 생각됩니다. 감사합니다.

    tasks.json 스키마 :
    https://code.visualstudio.com/docs/editor/tasks-appendix

    task.json 작성 방법 : https://code.visualstudio.com/docs/editor/tasks
  • Pil 2017.04.04 00:24 Angular2 프로그래밍 책에 관련하여 질문드립니다.
    page 94
    4.3.3 컴포넌트만들기 에서
    예제 4.1 코드가잇는데,
    예제코드를 작성하였는데, 실행하는방법을 모르겟습니다..
    Angular2가 아직 하나도 익숙하지가않아 많이어렵네요..

    helio-component.ts -> helio-component.js (es6) 파일로 변환하였는데\,
    책의 실행결과는 *.html 로 된거같은데,
    js파일을 html으로 열수가 잇는건가요?
  • 해피그래머 happygrammer 2017.04.04 10:58 신고 안녕하세요.
    책의 환경은 AngularCLI인데요. AngularCLI를 먼저 설치하고 컴포넌트를 추가하는 방식으로 진행하시면 됩니다.

    예를 들어 책의 94번 예제를 실행하고자 한다면 AngularCLI(2장 39p참고)까지 모두 설치되고 나서 94p의 예제를 작성하기 전에 다음 명령어를 이용해 컴포넌트를 추가합니다.

    $ ng g component hello

    그럼 다음 hello 컴포넌트가 추가됩니다.

    \app\hello\hello.component.ts

    추가가 되었으면 우선

    ng serve 명령어로 AngularCLI에서 제공하는 서버를 실행해서 브라우저(예http://locadlhost:3000 )에서 결과를 확인할 수 있습니다. 브라우저에서 AngularCLI가 실행해준 결과를 확인하고 나서 책의 예제 코드를 입력 하는 방식으로 실습을 진행해 나가시면 됩니다.

    AngularCLI는 타입스크립트 파일을 자바스크립트로 컴파일 해주고 이를 실행해 HTML로 응답해 주는 서버를 포함하고 있습니다. 초기 학습 단계에서는 사용자가 별도로 Angular 개발 환경 설정을 건들일이 없습니다. 혹시 제가 답변 드린 내용중에 부족한 부분이 있다면 다시 질문주시면 최선을 다해 답변 드리겠습니다. 고맙습니다.
  • 2016.10.12 11:51 비밀댓글입니다
  • 2017.01.07 13:52 비밀댓글입니다