본문 바로가기

Angular

Angular> 주문 내역 2022. 3. 31. Backend 개발 순서 1. OrderRepository REST API 생성 2. OrderRepository REST API를 읽기 전용으로 config 설정 1. 유저 이메일로 주문을 검색할 수 있는 endpoint 노출. Spring Data REST와 Spring Data JPA 는 query method를 지원, Spring은 메서드 이름 기반으로 쿼리를 생성한다. 인터페이스를 만들고 위처럼 쓴다. 2. Frontend 개발 순서 1. 웹브라우저 스토리지에 로그인한 유저 이메일 저장 2. OrderHistory 클래스 생성 3. OrderHistory 서비스 생성 4. order-history component 생성 5. HTML 페이지 수정 6. login-status component에 ..
Angular> 리팩토링 2022. 3. 30. 개발순서 1. 데이터베이스 테이블 삭제 2. 이메일 주소가 unique값을 갖도록 스키마 수정 3. CustomerRepository 에서 findByEmail 메서드 생성 4. CheckoutServiceImpl 업데이트 만약에 같은 이메일을 갖고 있는 고객이 있으면 이미 있는 유저를 사용한다. 1. 2. use `full-stack-ecommerce`; set foreign_key_checks=0; truncate customer; truncate orders; truncate order_item; truncate address; set fcustomeroreign_key_checks=1; alter table customer add unique(email); 데이터 삭제를 해야 하므로 foreign..
Angular> 유저 등록, 회원 전용, 세션 저장 2022. 3. 29. 유저 등록 -> 가입버튼은 뜨지만 작성 화면은 안나옴.. 미해결 1. Okta에서 User Registration 기능 키기 Security - Profile Enrollment - Action 에서 수정한다. 2. login component 수정 Set up self-service registration | Okta Developer Set up self-service registration | Okta Developer Note: This document is written for Okta Classic Engine. If you are using Okta Identity Engine, see Self-service registration for relevant guidance. See Identi..
Angular> 로그인 로그아웃 2022. 3. 26. 개발 순서 1. okta.com에서 개발자 계정을 만든다. 2. Okta에서 Open ID Connect 클라이언트 앱을 추가 3. OpenID Connect 를 위한 앱 설정 4. Okta SDK dependencies를 설치 5. Okta Sign In 위젯 통합 6. login/logout 버튼을 위한 login status component 추가 7. routes를 연결할 수 있는 App Module config 수정 3. ng generate interface config/MyAppConfig 으로 config 파일을 생성한다. Client Id는 클라이언트 앱의 public identifier issuer는 토큰의 발행자이고 Okta Authorization Server에서 승인하는 곳이다. ..
Angular> 로그인 로그아웃 기능 사전 설정 2022. 3. 20. 사전지식 구현할 기능은 1. 로그인 로그아웃 기능 2. 등급 전용 페이지 접속 3. 고객 구매 내역 Authentication : 유저를 인증하는 과정 Authorization : 유저 행동을 결정하는 과정. 예를 들면 게스트, 일반, vip, 관리자 등 역할에 따라 할 수 있는 행동이 다 다르다. OAuth 2 : Authorization 프레임워크. 리소스 소유자에 따라 접근 제한할 수 있게 하는 프레임워크. OpenID Connect (OIDC) : 클라이언트가 인증받은 리소스 소유자에 대한 identity 정보를 받을 수 있게 허락한다. JSON Web Token (JWT) : 무결성을 보장하기 위해 서명된 것. OAuth와 OpenID Connect에 의해 사용된다. www.oauth.net O..
Angular> 데이터베이스에 주문 정보 저장2 2022. 3. 19. Frontend 개발순서 1. common 클래스 생성 customer, order, orderItem, address, purchase 2. checkoutService 생성 Rest API 생성 3. checkoutComponent 수정 checkoutService 와 Router 주입 form 데이터를 모으기 위한 onSubmit 메서드 업데이트 CheckoutService 부르기 1. ng generate class common/Customer ng generate class common/Order ng generate class common/OrderItem ng generate class common/Address ng generate class common/Purchase 클래스 생성 2. ..
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의 서브 클래스. 다른 점은 최근 이벤트를 저장해서 새로운 구독자에게 보낸다...

티스토리툴바