Angular (9) 썸네일형 리스트형 Angular Property 'paginator' has no initializer and is not definitely assigned in the constructor.ts(2564) Angular Material MatPaginator 코드 작성 중 에러가 발생했다. Property 'paginator' has no initializer and is not definitely assigned in the constructor.ts(2564) material 공식 사이트에 있는 matpaginator 예제 그대로 붙여 넣었는데, constructor 에러가 났다. ts(2564) 에러는 생성자에서 할당해주지 않아 발생하는 오류이다. 예제에서는 생성자를 선언하지도 않았고, matpaginator initializer error 키워드로 구글링을 해봐도 명확한 답변을 얻기 어려웠다. 일단 위 에러에 대한 서치 결과 원인 1 : 에러 메시지 그대로 생성자에 할당해주지 않았다. 원인 2 : .. Angular Shared Module 생성으로 Module 공유하기(공통 Module) Angular 사용하다 보면 중복으로 선언하게 되는 Module이 있습니다. 예를 들어 Angular의 material 의 사용 시 module마다 MatTableModule 을 선언해줘야 하죠. Java의 공통으로 사용하는 Method를 모아둔 공통 함수 파일이나, 공통 컬럼을 선언해둔 DTO처럼 Angular에서도 공통 Module을 만들어 해당 Module만 선언한다면, 가독성 뿐 아니라 일일이 Module을 찾아 선언해주는 시간도 줄일 수 있습니다. NgModule 상세 @NgModule({ // 정적 설정. 이 내용은 컴파일러와 관련된 내용입니다. declarations: [], // 셀렉터를 설정합니다. // 런타임 설정, 인젝터 설정 providers: [], // 모듈이 실행될때 사용하는 .. Angular 4-1. 게시판 만들기 (화면 생성) 1. routing, modue, component 생성 ng g module board --routing ng g component board ng g component board/board-list ng g component board/board-edit ng g component board/board-detail 글 목록, 상세보기, 등록&수정 화면 생성 board.module.ts @NgModule({ declarations: [ BoardComponent, BoardListComponent, BoardDetailComponent, BoardEditComponent ], imports: [ CommonModule, BoardRoutingModule ] }) export class BoardModu.. Angular 3. Routing 구성하기(lazy-loading: 지연 로딩) 1. Angular lazy-loading: 지연로딩 Angular는 NgModule을 모두 즉시 로딩됩니다. 사용 여부 관계없이 app에 선언된 NgModule을 모두 로딩시키는 거죠. 볼륨이 큰 workspace나 라우팅 규칙이 복잡하게 구성된 앱일 경우 앱 초기 실행 시간이 길어집니다. 그럴 때, 지연 로딩을 통해 초기 실행에 필요한 모듈만 로딩하고, 당장 사용하지 않는 모듈은 사용할 때 로딩하는 방식으로 구성할 수 있습니다. 자세한 내용은 아래 Angular 가이드 문서를 참고해보세요. https://angular.kr/guide/lazy-loading-ngmodules Angular 가이드 Angular 가이드 angular.kr 2. lazy-loading 선언 방법 Before const r.. Angular 2. bootstrap 템플릿 적용 1. bootstrap에서 다운받은 템플릿 적용하기 - bootstrap에서 다운받은 파일을 보면 html, css, js 등의 파일로 이루어져있습니다. - 템플릿 적용하는 방법은 간단합니다. 모든 파일을 workspace에 복사해넣으면 됩니다. - 하지만 저는 header, content... 등으로 나누었기 때문에 index.html 파일에 있는 것들을 나눠서 복사해줬습니다. - 불필요한 js, img 등은 제거했습니다. - css 파일은 수정 없이 적용해줬습니다. 2. js 파일 이벤트 ts로 적용하기 - 템플릿을 보시면 상단의 메뉴 버튼이 있습니다. - 버튼을 누르면 메뉴가 숨겨지는 기능인데, 해당 기능은 js 파일로 정의되어 있어 ts 파일로 옮겨주겠습니다. - 파일은 js>scripts.js .. Angular 1. 홈페이지 만들기 전 준비 및 개발 참고 사이트 소스 정리 이전에 - 프로젝트 생성 후 localhost 페이지를 보면 이런 화면이 나옵니다. - 새로운 페이지를 만들어주기 위해 위 내용들은 모두 지울 텐데, 위 내용 중 Angular 개발에 참고할만한 내용을 봅시다. - Resources > Learn Angular > Learn Angular 클릭하면 Angular에 대한 정보를 볼 수 있는 공식 홈페이지가 나옵니다.(한글은 아래 URL 클릭) > Angular가 무엇인지, 기본 단위인 Component가 무엇인지, 개발 가이드 등의 정보가 있으니 활용해 보세요. https://angular.kr/docs Angular 가이드 Angular 가이드 angular.kr - Resources > Angular Material > Google에서 제공해.. Angular 소스 git clone 후 node_modules 폴더 없을 경우 https://crong-cat.tistory.com/5 Visual Studio Code에서 github 소스 가져오기 1. Visual Studio Code 실행 (비 워크스페이스 열기 : Ctrl + Shift + N) 2. 키보드 F1 > git clone 검색 후 선택 3. git repository URL입력한다. 3-1. git 로그인 > 받으려는 레파지토리에서 Code 클릭 후 URL 복하해서 붙여 crong-cat.tistory.com git clone 방법은 위 게시물을 참고해주세요. 1. git clone 후 소스를 보니 node_modules 폴더가 없습니다. 1-1. node_modules 폴더가 없는 이유 : git commit 시 node_modules 폴더가 빠졌기 때문입니다.. Angular 개발환경 설정하기 1. Angular 설치를 위한 사전 준비 - Angular를 로컬 환경에 설치하기 위해서는 Node.js, npm package manager 가 필요하다. - npm package manager 은 Node.js를 설치하면 같이 설치가 된다. - Node.js 설치 URL : nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - Node.js 설치 확인 node -v - npm 설치 확인 npm -v 2. Angular CLI 설치 - 터미널 실행 (cmd) - 터미널에 아래 명령어 실행 npm install -g @angular/cli - 설치 확인 ng versio.. 이전 1 2 다음
