전체 글 (23) 썸네일형 리스트형 [STS] Spring Boot Maven Project Create(메이븐을 이용한 스프링부트 프로젝트 생성) 1. STS 설치 https://spring.io/tools Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or Theia IDE. spring.io 2. File > New > Project... 3. Maven Project 4. maven-archetype-webapp 검색 > Group Id : org.apache.maven.archet.. GitLab project/repository STS에 가져오기 1. STS > Git Repositories > Clone Git Repository - 우측 상단 perspective에 Git Repository 가 없을 경우 -> Window > Show View > Git Repositories - Show View 에 Git Repositories가 없을 경우 -> Other... 에서 Git Repositories 검색 2. GitLab project/repository 접속 3. Clone > Clone with HTTPS Copy 4. Protocol https 선택 후 URL 에 복사한 URL 붙여넣기 - URL 붙여넣으면 Host, Repository path 자동으로 채워집니다. - 계정 정보 입력 후 Next 4-1. 구글 또는 github 계정.. VSCode GitLab project/repository clone VSCode에 GitLab repository를 clone하려고 합니다. SSH Key 방식도 있으나, 번거로운 작업들이 있어 비밀번호 로그인 방식으로 진행합니다. 1. GitLab에 로그인 2. clone 하려는 project 클릭 3. Clone > Visual Studio Code(HTTPS) 4. Visual Studio Code 열기 5. Open 6. Clone 받을 폴더 지정 7. GitLab 로그인 계정 입력 (구글 또는 github 계정일 경우 해당 계정 입력) 8. 비밀번호 입력 8-1. 구글 또는 github 계정으로 로그인하신 분은 비밀번호가 존재하지 않습니다. 비밀번호 초기화 작업을 진행해줍니다. 8-2. GitLab에서 우측 상단의 프로필 > Edit profile 8-3. Pa.. 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 .. 이전 1 2 3 다음
