본문 바로가기

전체 글

Angular> 상품 상세 페이지 2022. 2. 4. 순서 1. 상품 페이지 컴포넌트 생성 2. 상품 페이지를 위한 Angular route 생성 3. HTML페이지에 router link 추가 4. Product Service에서 product를 가저올 수 있는 ProductDetailsComponent 5. Spring Boot app에 요청할 URL을 부르는 Product Service 6. 상품 정보를 보여줄 ProductDetailsComponent를 위한 HTML 수정 상품 정보를 볼 수 있게 Spring Boot 를 설정 수정이나 메서드를 만들어야 할 것 같지만 REST API 기본 기능으로 안해도 됨. 1. component 생성 2. app.module.ts route 생성. ProductDetailsComponent로 등록. 3. rout..
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 조건문 서식

티스토리툴바