개발새발! 🙉

앵귤러 API 문서를 보면서 궁금했던 것들을 하나씩 까보려고 한다. 현재 프로젝트에서 쓰고 있는 앵귤러 5 버전을 기준으로 기록한다. @NgModule NgModule이란 기능 모듈 단위로 코드를 관리하는 것을 말한다. 기능이 연관된 구성요소(컴포넌트, 디렉티브, 파이프 등)를 하나로 묶어 관리하는 단위이다. 아래처럼 @NgModule 데코레이터로 선언하여 메타데이터를 입력한다. 앵귤러 애플리케이션은 최상위 모듈인 AppModule에서 시작된다. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component..

이번에 앵귤러 모바일 프로젝트에 투입되었다. 애플리케이션 서버를 실행할 때 ng serve가 아닌 ionic serve로 서버를 실행하더라...? 생전 처음 들어본 inoic이 무엇인지 알아봤다. 사전지식 반응형 웹 (웹) : html, css, js로 이루어진 웹을 모바일 상의 화면으로 보는 것 네이티브 앱 (앱) : android(코틀린) 혹은 ios(스위프트) 환경의 코드로 제작된 모바일용 애플리케이션 하이브리드 앱 (앱) : 웹 코드로 이용해 각 플랫폼(android, ios)으로 패키징 한 애플리케이션 (웹+앱) 프로그레시브 웹앱 (웹) : 하이브리드 앱처럼 보이지만 설치가 필요하지 않고, 네이티브앱 기능을 사용할 수 있는 애플리케이션 ionic Framework (아이오닉) 2013년에 등장한..

문제 발생 앵귤러에서 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 -> ..

JavaScript 관련해서 세계적인 트렌트를 확인할 수 있는 사이트를 알게 돼서 내용을 공유한다. 무궁무진하게 생기는 JavaScript 시스템에서 트렌드를 쉽게 확인할 수 있다. 라이징스타 risingstars 사이트에 접속하면 2023년 프론트엔드 프레임워크 인기 순위를 알 수 있다. React가 2021년부터 현재까지 자바스크립트 생태계에서 1위를 유지하고 있다. 대표적인 프론트엔드 3대장 (React, Vue, Angular) 말고도 htmx, Svelte, Million 등 프레임워크가 인기를 끌고 있다. 그래프 오른쪽에는 사람들이 덧붙인 코멘트가 있어서 같이 읽어보면 좋다. 이 사이트의 장점은 프론트엔드 말고도 백엔드, 모바일, 빌드 도구, 테스팅 프레임워크, AI 등 다양한 자바스크립트 시..

문제 발생 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..

컴포넌트 커뮤니케이션 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 ], }) 즉, 아래처럼 두 줄을 추가하면 에러는 사라진다. 앵귤러를 ..