컴퓨터공학/Boot & Angular Angular> 검색 기능 2022. 1. 31. 개발 순서 1. Spring boot에서 검색 메소드 생성 2. 검색을 위한 컴포넌트 생성 3. 검색을 위한 Angular route 생성 4. route에 데이터를 보내기 위한 검색 컴포넌트 수정 5. Product service를 통해 product를 검색하는 ProductListComponent 수정 6. Spring Boot에 URL을 요청하는 Product service 수정 Angular에서는 Event를 Event binding으로 감지한다. 다른 프레임워크에서는 Event handling이라고 한다. Event 종류는 focus - 구성요소가 집중되었을 때 blur - 구성요소가 집중을 잃었을 때 keyup - 누른 키를 땔 때. keyup.enter keydown - 버튼을 눌렀을 때 d.. Angular> 카테고리로 상품 출력 2022. 1. 30. 순서 1. Spring boot 수정 - entity id 설정 2. Angular에서 Product Category class 생성 3. menu component 생성 4. prduct service로부터 데이터를 읽기 위해 menu component 수정 5. Spring boot 에 url 요청하기 위해 product service 업데이트 6. HTML에서 menu component 링크 수정 1. Spring boot 수정 - entity id 설정 Rest api에서 entity의 id가 보여지도록 설정하는 방법 MyDataRestConfig.java 2. ProductCategory 클래스 생성 3. 컴포넌트 생성 4. 컴포넌트는 서비스에서 ProductCategory 클래스 객체를 가져와.. Angular> 카테고리로 제품 검색 예시 2022. 1. 28. 간단개념 Router - 메인 라우팅 서비스. 유저 선택에 따라 적절한 route를 보여준다. Route - 컴포넌트와 URL 경로를 일치시킨다. RouterOutlet - placeholder 역할을 한다. route에 맞는 컴포넌트를 보여준다. RouterLink - 어플리케이션에서 url으로 routes를 연결시킨다. ActivatedRoute - 현재 컴포넌트를 열고 있는 route. route parameter에 접근하기에 유용하다. 더 자세한 건 홈페이지에서.. Angular - Common Routing Tasks Angular angular.io 순서 1. Routes 정의 2. Routes에 기반하여 Router 구성 3. Router outlet 정의 4. 카테고리 id param가 지.. Angular> Online Shop Template 적용 2022. 1. 23. 부트스트랩 설치 npm install bootstrap을 입력 버전 차이로 보안 취약점이 생긴 것이다. 해결책이 써있다. npm audit fix 그리고 npm install @fortawesome/fontawesome-free 입력 npm audit fix 를 쳐도 vulnerabilities가 사라지지 않는데 그냥 무시하자. package.json하고 node_modules를 보면 잘 있다.. angular.json을 보면 "styles" : [ "src/styles.css" ]가 있는데 angular 프로젝트의 모든 곳에 적용되는 CSS이다. 여기에 node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/@fortawesome/fontawes.. Angular> Front end - Product List 2022. 1. 22. 순서 1. Angular 프로젝트 만들기 2. Angular component 만들기 3. TypeScript 클래스 만들기 4. Angular Service 만들기 REST API를 위한 5. Angular service에서 데이터를 얻기 위해 Angular component 업데이트 6. HTML에 데이터 표현 7. Spring Boot app에 CrossOrigin 넣기 1. 2. Angular project setup ng new angular-ecommerce 부트스트랩 복사하고 index.html에 붙여넣기 app.component.html 모두 삭제하고 내용 넣기 ng generate component components/product-list app.component.html에 produc.. Spring Boot> backend 구성하기 2022. 1. 16. DB 구성과 Spring boot로 백엔드를 테스트해보자. DB 테이블 만들기 CREATE USER 'ecommerceapp'@'localhost' IDENTIFIED BY 'ecommerceapp'; GRANT ALL PRIVILEGES ON * . * TO 'ecommerceapp'@'localhost'; ALTER USER 'ecommerceapp'@'localhost' IDENTIFIED WITH mysql_native_password BY 'ecommerceapp'; 유저와 권한을 부여하고 전환한다. DROP SCHEMA IF EXISTS `full-stack-ecommerce`; CREATE SCHEMA `full-stack-ecommerce`; USE `full-stack-ecommerce`.. Angular> Bootstrap 적용, 조건문, 서식 2022. 1. 16. 부트스트랩을 가져오기 이것을 index.html에 붙인다. Angular 조건문 서식 Angular> 기본 작동 방식 2022. 1. 15. 작동방식 실행되면 가장 보여지는 페이지 index.html app-root 태그가 있는데 ts 파일에서 selector에 있다. html에서 selector를 태그로 쓰면 url의 html이 보여진다. 컴포넌트와 테이블을 만들어 보자. 1. 새로운 프로젝트를 만들고 이동 ng new [프로젝트] : 프로젝트를 위한 앵귤러 스타터 파일들을 모두 만든다. cd [프로젝트] ng serve 프로젝트를 만들고 경로를 불러오고 경로에 가서 ng serve한다. 그런다음 localhost:4200으로 접속 2. update main template page src/app/app.component.html 파일 틀고 안에 있는 기본 내용은 싹 다 지운다. 3. generate new component ng gener.. 이전 1 2 3 4 5 다음
