개발새발! 🙉

문제 발생 앵귤러에서 HTTP 통신을 하기 위해 HttpClient를 이용하려고 한다. 서비스의 constructor에서 HttpClient를 가져다썼더니 NullInjectorError 에러가 발생했다. import { HttpClient } from '@angular/common/http'; @Injectable() export class UserService { constructor(public httpClient: HttpClient) { } // 여기서 문제 발생 } NullInjectorError 에러의 내용은 HttpClient에 대한 provider가 없다는 의미다. ERROR NullInjectorError: R3InjectorError(_AppModule)[_UserService -> ..

앵귤러 프로젝트에 곧 투입될 예정이라 앵귤러 첫걸음 이라는 책을 대여해서 읽어봤다. 책을 읽기 전, 목차를 살펴보니 앵귤러 개념들을 상세하게 다루고 있는 것 같아서 선택했다. 이 책의 장점은 예제 중심으로 이루어져 있어서 실습을 통해 앵귤러의 문법과 기능을 익힐 수 있고, 실습 예제도 Github을 통해서 가져다 쓸 수 있다. 기초 설명부터 실제 프로젝트인 상품 관리 애플리케이션을 실습으로 만들어볼 수 있고, 앵귤러 CLI를 활용한 개발 방법과 앵귤러 생태계의 서드파티 라이브러리 활용, 그리고 파이어베이스를 사용한 앵귤러 웹 애플리케이션 배포까지 다루고 있다. 다만 487페이지의 방대한 분량에다가 2017년에 발행된 책이다보니 동작하지 않는 소스도 많아서 구글링으로 해결하는데 꽤 많은 시간이 소요되어 가..

강의 소개 인프런에서 Angular(2+) Front에서 Back까지 강의를 수강 완료했다. 직전에 들었던 강의보다 라우터 모듈, 서비스 개념까지 다루고 있어서 좀 더 심도 있는 수준으로 배울 수 있다. 강의자는 Angular + Nest.js 스펙을 목표로 영상을 찍으신 것 같다. 강의 후기 이 강의는 총 20개 강의, 5시간 28분 분량으로 꽤 무겁다. 실습을 같이 병행하면서 오류도 고치다보니 수강 완료까지 3-4일이 소요되었다. 무료 강의지만 강의 퀄리티가 좋은 편이다. 스톱워치 실습을 시작하기 전에 TypeScript에 대해서 간단한 예제를 보여준다. tsc 명령어로 TypeScript 파일이 JavaScript 파일로 변환되는 과정, tsconfig.json 파일의 target 설명, 접근제한자..

문제 발생 Github에서 다른 사람이 올린 소스를 git clone하여 로컬 PC에 받은 뒤 ng serve 명령어로 프로젝트를 실행하니 아래의 오류가 발생한다. Error: Could not fine the '@angular-devkit/build-angular:dev-server' builder's node package. 직역하자면 '@angular-devkit/build-angular:dev-server' 빌더의 노드 패키지를 찾을 수 없다는 에러이다. 해결 방법 1 build-angular 패키지를 삭제했다가 다시 설치한다. npm uninstall @angular-devkit/build-angular npm install --save-dev @angular-devkit/build-angula..

강의 소개인프런에서 Angular 기본과 간단한 To-Do 어플리케이션 만들기 강의를 수강 완료했다. 이 강의는 앵귤러 2 버전 이상의 기본기를 배울 수 있는 무료 강의이다. 앵귤러 탄생 배경과 컴포넌트, 모듈같은 중요 개념들을 학습하고, 간단한 앱을 만들어 보면서 앵귤러를 가볍게 접할 수 있다.강의 후기이 강의는 총 10개 강의, 2시간 16분 분량으로 구성되어 있어서 크게 부담스러운 학습시간은 아니다. 게다가 무료 강의라서 가벼운 마음으로 학습할 수 있다. 초급자를 위한 기초 강의인지라 배우는데 큰 어려움은 없지만, ES6 문법과 TypeScript에 대해서 익숙하지 않다면 쉽지 않을 수 있다. 앵귤러 관련 Angular CLI 설치부터 모듈, 컴포넌트, 파이프 등을 이용해서 간단한 To-Do 앱을 ..

컴포넌트 커뮤니케이션 1) 부모-> 자식 컴포넌트 ✅ 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 @Input 데코레이터를 이용하면 부모->자식 컴포넌트로 속성값을 세팅할 수 있다. ✅ 자식 컴포넌트의 속성을 ES6 setter를 이용해서 데이터를 가공한 후에 비공개 속성값을 세팅할 수도 있다. get을 통해 비공개 속성값을 공개적으로 가져오게 된다. ✅ @ViewChild 데코레이터를 이용하여 자식 컴포넌트 클래스에 인스턴스 레퍼런스를 부모 컴포넌트에서 직접 전달받을 수도 있다. 2) 자식->부모 컴포넌트 ✅ 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 발송할 때는 @Output 데코레이터와 EventEmitter를 이용하여 특정 이벤트와 데이터를 발생시킬 수 있다. ✅ 이벤트 바인딩을 통해 ..

모듈(Module) 모듈 세부 구현이 숨겨지고 공개 API를 이용해 다른 코드에서 재사용 가능한 코드를 말한다. (예를 들어 리모컨) ES6에서의 모듈 ES6에서는 모듈 개념 + 변수의 스콥이 모듈로 제한된다. 스코프가 모듈 내로 제한된다는 의미는 각각 파일들이 하나의 모듈이 되는 것이며, 각각 파일에서 정의가 된 변수들은 파일 안에서 스콥이 보장된다. 따라서 각 파일에 있는 기능을 쓰려면 export, import 작업을 해야 한다. 앵귤러에서의 모듈 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능 단위로 그룹핑하게 해 준다. 모든 앵귤러 애플리케이션은 하나의 Root Module을 가진다. (ex. app.module.ts) 여러 Feature Module을 가질 수 있다..

앵귤러 16 버전 기준으로 프로젝트 파일 구조를 알아보려고 한다. 앵귤러 버전별로 파일 구조가 다를 수 있으며, 타버전은 버전별 file-structure 문서를 참고하자. 앵귤러 프로젝트 구조 중요한 파일들 하나씩 살펴보기 angular.json 파일 이 파일은 워크스페이스에 있는 모든 프로젝트에 적용되는 Angular CLI 환경설정 파일이다. Angular CLI를 이용해서 빌드, 실행, 테스트할 때 사용하는 설정도 이 파일에서 구성한다. 이 파일에서 대표적인 중요한 키워드를 살펴보자. "sourceRoot": "src" : 프로젝트의 루트 폴더는 src 폴더인 것을 알 수 있음 "outputPath": "dist/first-app" : 프로젝트 빌드시 dist 폴더가 만들어짐 "index": "s..

문제 발생 앵귤러에서 클래스 안에서 속성 선언 시 아래의 오류가 발생한다. Property xxx has no initializer and is not definitely assigned in the constructor name이라는 문자열과 todos라는 배열을 선언할 때, 속성 값에 초기화 값이 없다는 뜻이다. 속성을 선언하고 난 뒤 값을 할당하거나 생성자에 초기화하지 않을 때 발생한다. 이 오류는 TypeScript의 엄격한 클래스 초기화 검사의 일부로, 모든 클래스 속성이 사용되기 전에 초기화되는지 확인한다. 해결 방법 1 속성 값을 직접 선언하여 초기화한다. name: string = ''; // 빈 문자열로 초기화 todos: { done: boolean, text: string; }[] =..

문제 발생 앵귤러에서 양방향 바인딩을 하기 위해 ngModel 문법을 사용하려고 하니 아래 에러가 발생했다. Can't bind to 'ngModel' since it isn't a known property of 'input' 해결 방법 해결법은 매우 간단하다. 양방향 데이터 바인딩을 사용하기 위한 ngModel은 앵귤러 모듈에서 FormsModule 패키지를 import 해야 가져다 쓸 수 있다. 따라서 app.module.ts 파일에서 FormsModule 관련 정보를 추가한다. import { FormsModule } from '@angular/forms'; ... @NgModule({ imports: [ FormsModule ], }) 즉, 아래처럼 두 줄을 추가하면 에러는 사라진다. 앵귤러를 ..