반갑습니다
이 강의에서는
우리가 이 과정을 통해 개발할
UI 애플리케이션을 보여드리려고 합니다
이를 통해 여러분이 이 애플리케이션과
이 애플리케이션의 사업 모델과 Use Case에 대해
감을 잡으실 수 있도록 말입니다
여러분이 이 애플리케이션에 익숙해진 후에는
이 애플리케이션을 지원하기 위해 제가 개발할
백엔드 서비스가 무엇인지 설명해드리겠습니다
그 다음에는 이 서비스들을
Spring Security를 활용해서
보호하는 방법도 보여드리겠습니다
그래서 가장 먼저 애플리케이션이 어떻게 보일지
보여드리겠습니다 하지만 제가 말했듯이
우리는 이 애플리케이션을 이 과정의 마지막까지
단계별로 개발할겁니다
지금 단계에서는 이 애플리케이션이
어떻게 보일지 어떻게 작동할지 이해만 해주시면 됩니다
보시다시피 EasyBank라는 이름의
은행 애플리케이션입니다
유저들이 이메일과 비밀번호를 입력하고
애플리케이션에 로그인할 수 있는
로그인 페이지가 있을겁니다
그래서 여기에 happy@example.com이라는
제 자격증명을 입력하고
비밀번호를 입력합니다
로그인을 클릭하면
대시보드 페이지에 랜딩하게 됩니다
여기서는 이 EasyBank 애플리케이션과 연동해둔
저의 계좌 정보, 잔고 정보
대출 정보 카드 정보를 볼 수 있습니다
이 계좌 페이지를 클릭하면
계좌번호, 이메일 정보
계좌 유형, 지점 주소를 포함한
자신의 모든 계좌 정보를
확인할 수 있습니다
비슷하게 잔고 페이지가 있습니다
이 페이지에서는
은행 계좌에 있는
잔고 총액과
자신의 계좌에서 제일 최근 거래내역을
볼 수 있습니다
그리고 굉장히 유사하게 대출 정보도 볼 수 있습니다
대출 총액은 얼마인지
대출의 종류는 무엇인지 주택 대출인지
자동차 대출인지 개인 대출인지
그리고 현재 은행에 납부해야 할
미지급금은 얼마인지
그리고 대출과 함께 이 은행에서 사용하는
카드들도 볼 수 있습니다
신용카드인지 한도가 얼마인지
이번 달 현재까지 사용 금액이 얼마인지
남은 한도가 얼마인지
이것들이 이 애플리케이션을 사용하며
확인할 수 있는 정보들입니다
로그아웃 버튼도 있는데
유저를 로그아웃 시킵니다
다음으로 문의하기 페이지도 있습니다
이건 모두에게 공개된 페이지입니다
누구나 이 페이지를 열 수 있습니다
자신의 정보를 입력하고
은행에 문의할 수 있습니다
계좌를 개설하고 싶거나
대출을 신청하고 싶거나
이런 모든 Use Case에 이 문의하기 페이지를 사용해
정보를 입력하고
데이터를 백엔드에 제출할 수 있습니다
마지막으로 공지사항 페이지가 있습니다
이 공지사항 페이지에는
은행이 엔드 유저에게 발행하고자 하는
모든 공지사항이 게시됩니다
진행 중인 혜택이 있거나
모바일 앱 점검 시간이 있거나
새로운 신용카드를 출시할 때처럼 말이죠
이런 정보들은
이 공지 웹페이지에 게시하게 됩니다
아셔야 할 것은 문의하기 페이지와
공지사항 페이지 모두 공개페이지라는 것입니다
자격증명이 필요 없습니다
누군가 자신의 계좌 정보, 대출 정보 거래 정보를
알고자 한다면
당연히 자신의 자격증명을 통해
이 애플리케이션에 로그인해야 합니다
그래야만 그 보안 페이지들을 볼 수 있죠
이 애플리케이션은
Angular 프레임워크 기반으로 개발됐었습니다
이것이 불만족스러울 수도 있는데
여러분이 Angular와 친숙하지 않다면
만족스럽지 않을 수 있습니다
하지만 백엔드 Spring boot 애플리케이션과
통신할 별도의 UI 애플리케이션을
선택한 이유는
첫번째로
이것이 최근에 가장 많이 보이는
일반적인 개발 유형이기 때문입니다
다크네이션의 대부분이
모든 UI 애플리케이션에
별도의 UI 프로젝트가 있는
풀스택 개발을 채택하고 있습니다
이 UI 애플리케이션들은
여러분의 백엔드 코드와 함께 REST 서비스에 연결됩니다
이 백엔드 애플리케이션들은
Spring boot 애플리케이션의 도움을 받아 개발되고 있습니다
즉 이것이 가장 일반적인 시나리오라서
이것을 개발했습니다
Angular 프레임워크의 도움을 받아
이렇게 별도의 UI 애플리케이션 개발을 선택한
두 번째 이유는
특정 보안 위험성이나
CSRF, CORS와 같은 보안 공격을 보여드리기 위해서입니다
별도의 UI 애플리케이션이 있어야만
이것들의 시범을 보여드릴 수 있습니다
그래서 별도의 UI 애플리케이션을 제작했습니다
물론 제가 백엔드에서 개발할
모든 서비스들은
Postman에서 테스트하고 검증할 수 있습니다
그러니 이런 솔루션을 자유롭게 활용하시기 바랍니다
저를 따라 이 Angular 애플리케이션을 선택한다면
그렇게 하셔도 됩니다
제가 여러분에게 이미 만들어진 Angular 코드를
제공해드릴 것이고 불과 몇 분 안에
이 애플리케이션을 세팅할 수 있습니다
여러분의 애플리케이션을 세팅한 직후에
여러분의 Angular 애플리케이션과
Spring boot 애플리케이션 사이에
통신을 설정하는 방법에 대해
특정한 지침을 드릴겁니다
그러고 나면 준비 완료입니다
혹은 이 Angular 방식을 따라하고 싶지 않다면
우리가 개발할 모든 서비스와 시나리오를
Postman으로 언제든 검증해봐도 좋습니다
어떤 시나리오를 채택하는지는 여러분의 선택입니다
따라서 크게 보면
이것이 우리가 개발할 애플리케이션이고
이 과정에서 여러분이
백엔드 웹 애플리케이션에서 우리가 개발할 서비스에 대해
이해하거나 대략적인 개념을 잡을 수 있길 바랍니다
다음 강의에서는
이 EasyBank 애플리케이션을 지원하기 위해
Spring Boot 웹 애플리케이션에서
우리가 개발할
서비스 목록을 보여드리겠습니다
감사드리며 다음 강의에서 뵙겠습니다
수고하셨습니다