고고마코드

1. 프로젝트 생성 angular-cli @angular/cli 가 이미 전역에 되어 있는 분은 넘어가셔도 됩니다. $ npm i @angular/cli angular 프로젝트 생성 $ ng new angular-bootstrap-example 2. 버전 확인 및 패키지 설치 ng-bootstrap 설치 전, 자신의 버전을 확인해야 합니다. 해당 버전에 맞게 다른 패키지(bootstrap, ng-bootstrap)를 설치해야 하니까요. (생각보다 예민합니다. 버전을 최대한 맞춰주세요.) { "name": "angular-bootstrap-example", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build..

1. 개발환경 2. 오류 @ng-bootstrap/ng-bootstrap+설치 $ ng add @ng-bootstrap/ng-bootstrap 설치 시도 시 아래와 같은 오류 발생 오류 내용 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: client@0.0.0 npm ERR! Found: @angular/common@14.0.6 npm ERR! node_modules/@angular/common npm ERR! @angular/common@"^14.0.0" from the root project npm ERR! npm ERR! Could not resolv..

1. Angular.js 프로젝트 생성 @angular-cli 패키지 설치 $ npm i -g @angular/cli angular-cli 설치가 되어 있는 분은 다음으로 넘어가시면 됩니다. Angular.js 프로젝트 생성 $ ng new client Angular 프로젝트를 생성하고자 하는 경로에서 명령어 실행하세요. 서비스 실행 및 확인 $ ng serve --watch 또는 $ pm2 start "ng serve" --name "client" --watch pm2를 사용하시려면 pm2 패키지 설치가 되어 있어야 합니다. pm2 설치는 npm install -g pm2 로 설치하면 됩니다. 윈도우 환경에서는 pm2 start "ng serve" 를 다른 방법으로 실행해야 합니다. 계속 수정하면서 결..

@angular-cli를 통해 빠르게 component 생성 시, 원하지 않는 html, css, spec 등의 파일들이 같이 생성이 됩니다. 필요한 파일만 생성하기 위해 옵션을 설정하는 방법입니다. component 생성 기본 예제) Component 생성 $ ng g c test # ng generate component test 와 같습니다. 저는 루트 디렉터리가 angular_test이기 때문에, angular_test 아래에 test 아래에 css, html, spec.ts, ts 파일들이 생성됐습니다. 근데 저는 component.ts 만 생성되길 원하는데 자꾸 다른 파일들도 같이 생성되니까 하나하나 지우기가 너무 귀찮았어요. angular.json에서 옵션을 주면 되더라구요. schemati..

오류 & 오류 원인 ngForm 과 ngModel 을 같이 사용하려고 할 때, 코드를 위와 같이 작성했더니 오류가 발생했습니다. 오류 내용을 읽어보니 ngModel을 사용하려면 name 속성을 사용하거나, ngModelOptions을 standalone으로 정의되어야 한다고 합니다. ngModel만 사용할 때는 문제 없었는데, ngForm과 ngModel을 같이 사용하려고 하니 오류가 발생하네요. ngForm과 ngModel을 함께 쓰려면 위 조건을 잘 지켜주어야 하는 것 같습니다. 오류 해결 해결 방법1 name 속성을 주어서 해결할 수 있습니다. 해결 방법2 ngModelOptions을 standalone으로 정의하여 해결할 수 있습니다. 모든 입력 필드에는 속성 이름이 있는 것이 좋으니 더 좋은 해..

https://.github.io// 에 Angular를 배포하기 위한 방법입니다. repository가 public으로 설정되어 있다는 가정 하에 진행합니다. 만약 repository가 private로 설정되어 있다면 GitHub Pro 이상의 계정을 구매해야 합니다. git 사용법에 대해서는 별도로 작성하지 않습니다. git 사용법이 궁금하다면 아래 링크를 참고해 주세요. Git :: 설치부터 기본 사용법까지 (1) - git 설치 Git :: 설치부터 기본 사용법까지 (2) - git 사용법(github, 명령어) Git :: 설치부터 기본 사용법까지 (3) - git 으로 협업(팀프로젝트)하기 패키지 설치 및 세팅 angular-cli-ghpages 패키지 설치 $ npm install -g an..

Observable subscribe 를 사용할 때 아래와 같은 경고를 만났습니다. @deprecated — Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. **해당 경고의 원인과 해결 방법을 기록합니다.** 경고 & 원인 예제1 of([1, 2, 3]).subscribe( v => console.log(v), e => console.error(e), () => console.log('complete') ); subscribe 부분에서 경고가 발생하는데, 이유는 직접적인 인수 입력을 통..

AngularJS 를 공부하는 중 input 태그에 이벤트를 다루는 중 해당 이벤트의 값을 가져오지 못하는 오류를 만났습니다. 해당 오류의 원인과 해결 방법을 기록합니다. 오류 & 오류 원인 예제 1 value = ''; handleInput(event: Event) { this. value = event.target.value; } 예제 2 오류가 나는 비슷한 패턴은 예제1 또는 예제2 에서 발생합니다. 오류의 원인은 TypeScript 가 event.target 의 정확한 타입이 무엇인지 모르기 때문에 발생하는 오류입니다. 예를 들어 target 이 HTMLInputElement 인지 HTMLTextareaElement 인지 모른다는 것입니다. 해결 방법 오류를 해결하는 방법은 두 가지..