전체 글 (27) 썸네일형 리스트형 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에서 제공해.. git commit 이름 확인 및 변경하기 1. Git Bash 실행 2. 현재 지정된 이름 확인 cat ~/.gitconfig 3. 이름 변경 vi ~/.gitconfig i 변경할 이름 입력 esc 키 클릭 :wq - vi 로 편집하러 들어가게 되면 위와 같은 상태가 됩니다. - 수정하기 위해 i 클릭 (수정 상태가 되면 아래 INSERT가 표기됩니다.) - delete 키로 지운 후 수정 - esc 키 클릭 후 :wq 입력으로 저장 (:w! 명령어는 저장하지 않고 나가기) 4. 변경사항 확인 vi ~/.gitconfig 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 폴더가 빠졌기 때문입니다.. Visual Studio Code에서 github 소스 가져오기 1. Visual Studio Code 실행 (비 워크스페이스 열기 : Ctrl + Shift + N) 2. 키보드 F1 > git clone 검색 후 선택 3. git repository URL입력한다. 3-1. git 로그인 > 받으려는 레파지토리에서 Code 클릭 후 URL 복하해서 붙여넣으시면 됩니다. 4. 저장할 local 위치 선택 5. Open 클릭 - Open : 현재 열려있는 VSCode에서 Open - Open in New Window : 새로운 창으로 VSCode Open - Add to Workspace : 현재 열려있는 VSCode에 Workspace 추가 6. 소스를 가져온걸 볼 수 있다. 이전 1 2 3 4 다음
