개발새발! 🙉

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

VsCode(Visual Studio Code)는 최초 설치하면 언어가 영문으로 기본 설정되어있다. 한국 사람은 한국어로 봐야 더 편한법! VsCode에서 영문을 한국어로 변경하는 방법을 설명한다. 1. VsCode 설정창 접속하기 VsCode에서 단축키 F1를 누르면 명령어를 입력할 수 있다. 또는 좌측 하단에 톱니바퀴 버튼 클릭 후 [Command Palette] 메뉴를 선택해도 된다. 입력창에 Configure Display Language를 입력한다. 2. 한국어 선택하기 바로 언어를 선택할 수 있는 목록이 나오는데 한국어를 선택한다. 재시작 경고창이 뜰 것인데 Restart를 눌러서 다시 시작하면 메뉴가 한국어로 설정된 것을 확인할 수 있다. 반대로 한국어에서 영문으로 다시 변경할 때에도 같은 ..

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

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

외부 라이브러리가 포함된 Java 웹 애플리케이션을 war로 배포하려고 하니, 배포 실패가 되면서 maven repository에서 외부 라이브러리가 누락되었다는 오류가 발생했다. 지금부터 누락된 라이브러리를 local maven repository에 직접 추가하는 작업을 진행하려고 한다. 예를 들어 외부 라이브러리 ImageConverter.jar 파일을 직접 추가하려고 한다. lib 폴더에 jar 파일 넣기 프로젝트￦lib 폴더를 생성하여 아래처럼 maven dependency 형식대로 폴더를 만든다. maven의 디렉토리 구조대로 동일하게 구성한다. lib 폴더 -- com 폴더 -- company 폴더 -- ImageConverter 폴더 -- 1.0.0 폴더 -- ImageConverter-1...

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

VsCode(Visual Studio Code)를 사용하다보면 탐색기에서 상위 폴더와 하위 폴더가 / 로 분류되어 폴더 계층구조가 겹쳐서 보인다. 한 눈에 계층구조를 파악하기 불편하므로 폴더를 계층구조로 보이도록 설정할 것이다. 1. VsCode 설정창 들어가기 본인의 운영체제에 따라 아래의 키를 동시에 누르면 VsCode 설정창에 접속한다. Windows : Ctrl + , macOS : ⌘ + , Linux : Ctrl + , 2. Compact Folders 체크박스 해제 설정창에서 explorer.compactFolders 검색 후 Explorer: Compact Folders 체크박스를 해제한다. 이제 하위 폴더도 계층 구조대로 확인할 수 있다. 간단하지만 은근 신경 쓰이는 부분 해결!

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

다형성(polymorphism)이란 하나의 객체가 여러 가지 타입을 가질 수 있는 것이다. 자바에서는 다형성을 위해 부모클래스 타입의 참조변수로 자식클래스 타입의 인스턴스를 참조할 수 있도록 한다. 오버로딩과 오버라이딩을 통해 다형성을 구현할 수 있다. 오버로딩과 오버라이딩의 비교 오버로딩과 오버라이딩은 그 단어의 유사함으로 인해 혼동하기 쉽다. 하지만 그 개념은 확실히 다르며, 그 차이점을 아는 것이 중요하다. 오버로딩(overloading)은 새로운 메서드를 정의하는 것이고, 오버라이딩(overriding)은 상속받은 기존의 메서드를 재정의하는 것이다. 오버로딩 오버라이딩 메서드명 동일 동일 매개변수 및 타입 다름 동일 리턴 타입 관계 없음 동일 다형성을 구현하는 방법 오버로딩 : 메서드명이 같지만 ..

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