본문 바로가기

컴퓨터공학

Angular> 데이터베이스에 주문 정보 저장 2022. 3. 13. Spring Data REST를 사용하지 않은 이유? 기본 CRUD는 사용하기는 좋은데 커스텀에 한계가 많아서 커스텀 로직을 사용하려면 직접 만들어서 사용. Backend 개발 순서 1. database script 실행 2. entities 생성 3. data transfer objects 생성 4. repository 생성 5. service 생성 6. controller 생성 1. USE `full-stack-ecommerce`; SET FOREIGN_KEY_CHECKS=0; DROP TABLE IF EXISTS `order_item`; DROP TABLE IF EXISTS `orders`; DROP TABLE IF EXISTS `customer`; DROP TABLE IF EXISTS `addre..
Angular> 장바구니 총액 2022. 3. 9. Publish & Subscribe interaction 복습 그림 어떤 컴포넌트가 Service 변수를 구독하고 다른 컴포넌트에 의해서 변수가 갱신되면 구독한 컴포넌트에게 변수를 배포 전달한다. Replay Subject Subject의 서브클래스 나중에 접속한 구독자를 위해 이전 이벤트 버퍼를 유지하고 늦게 오느라 놓친 부분을 다시 보내준다. RxJS - Subject (rxjs-dev.firebaseapp.com) RxJS rxjs-dev.firebaseapp.com CheckoutComponent는 C 이전에 있던 일들을 모른다. 이전에 일어났던 것들을 알려주고 시작한다. BehaviorSubject 이것도 Subject의 서브 클래스. 다른 점은 최근 이벤트를 저장해서 새로운 구독자에게 보낸다...
Angular> 유효성 검사 2022. 3. 6. Angular는 기본으로 제공하는 유효성 검사가 있다. https://angular.io/api/forms/Validators Angular angular.io 유효성 검사 추가 특징 Define custom validators Cross field validation Asynchronous validators https://angular.io/guide/form-validation Angular angular.io 요구사항 빈자리가 있으면 안되고 이메일 규칙을 따라야 하고 신용카드 번호는 숫자만 16개 CVC는 숫자만 3개 개발 순서 1. form controls에 관한 유효성 검사 규칙을 구체화한다. 2. form control에 접근하는 Getter method를 구체화한다 3. 에러메시지를 보여주..
Angular> 결제화면 3 2022. 3. 1. Country and State Frontend 1. Country와 State의 클래스를 만든다. 2. 서비스에 Countries와 States 관련 메서드를 추가한다. 3. 서비스로부터 country 데이터를 얻을 수 있게 checkout component 수정 4. country 관련 드랍다운 리스트를 HTML에 추가 5. checkout component에 이벤트 핸들러 추가 6. state 관련 드랍다운 리스트를 HTML에 추가 1. ng generate common/Country ng generate common/State 2. baseUrl 과 constructor에 HttpClient 추가 RestAPI에서 _embedded 내용을 가져오기 위해 인터페이스를 만든다. 3. 4. 5. 값이 ..
Angular> 결제 화면2 2022. 3. 1. Year and month 순서 1. 서비스 생성 2. 년도와 월에 대한 서비스 메서드 추가 3. 서비스로부터 년도, 월 정보 데이터를 갖고오는 컴포넌스 업데이트 4. HTML에 드랍다운 리스트 생성 1. ng generate service services/SeolForm 서비스 생성 2. rxjs: Reactive JavaScript rxjs 에 있는 of는 object를 Observable로 바꾼다. Angular - The RxJS library Angular angular.io 3. 배열 변수 만들고 서비스를 constructor에 주입한다. 현재 몇 월, 년도인지 가져와서 서비스 메서드에 주입한다. 신용카드 월, 년도 데이터를 서비스에서 가져와 만들어 놓은 변수에 넣는다. 4. 루프를 통해서 배..
Angular> 결제 화면 2022. 2. 23. 앵귤러는 두 가지 폼이 있다 Reactive forms, Template-driven forms Reactive forms를 사용 할건데 좀 더 자세한 설명은 공식문서에서 보자. Angular - Introduction to forms in Angular Angular angular.io Form Control와 Form Group 개념이 있다. 전자는 유효상태와 가치를 추적하는 개별적인 control 이고 후자는 control의 모음이며 nested group을 생성할 수 있다. 순서 1. checkout component를 생성한다. 2. checkout component를 위한 route를 생성한다. 3. checkout component의 링크와 버튼을 만든다. 4. reactive form을 위..
Angular> 장바구니 목록 수량 조절 2022. 2. 16. 순서 1. CartDetailComponent 생성 2. CartDetailsComponent 라우트 생성 3. 쇼핑카트 아이콘에 링크 추가 4. 카트 아이템을 얻기위해 CartDetailsComponent 수정 5. CartDetailsComponent HTML 추가 1. ng generate component components/cart-details 2. app.module.ts에 CartDetailsComponent에 해당하는 route 추가 복습. routeLink로 접근하면 해당하는 route의 CartDetailsComponent가 route outlet에 페이지 출력 3. 카트 아이콘에 routeLink를 달아준다. 4. cartServcie에서 데이터를 얻어서 CartDetailsComp..
Angular> 장바구니 추가 버튼 2022. 2. 12. 순서 1. 카트 상태 컴포넌트 : 메인페이지, 총 금액, 갯수 2. 카트 상세 페이지 : 카트에 있는 아이템 리스트 3. 카트 상세 페이지 : 아이템 추가 제거 4. 체크아웃 버튼 5. 체크아웃 폼 장바구니 추가 버튼 만들기 1. Create new component : CartStatusComponent ng generate component components/cart-status 2. CartStatusComponent를 위한 HTML template 추가 app.component.html에 새로 만든 cart-status.component 태그 app-cart-status를 넣는다. 3. 카트 넣기 버튼 추가 addToCart 메서드를 넣었는데 이걸 만들어주자. 4. ProductListCompo..

티스토리툴바