이번 섹션에서는
두 가지 보안 개념에 대해 자세히 다룰 예정입니다
바로 CORS 와 CSRF입니다
하지만 설명을 시작하기 앞서
웹 애플리케이션에서
UI 애플리케이션을 분리시켜야 합니다
왜냐하면 제가 단순히 Postman을 사용하여 API들을 불러오게 되면
배우게 될 보안 컨셉들이 눈에 띄지 않을 수 있기 때문입니다
그런 이유로 제가 여러분들께
Angular 기반 UI 클라이언트를 따로 제공하려고 합니다
그리고 이 Angular 클라이언트를 사용하여
백엔드 Spring Boot 애플리케이션을 이용한
소통을 할 수 있으며
그리고 이 과정에서
미리 언급한 보안 컨셉들
CORS와 CSRF를 중요한 개념으로 확실히 배우게 됩니다
그 다음에는
Spring Security 프레임워크의 도움을 받아
언급한 두 보안의 위협에 대해서도 다룰 수 있습니다
어떤 이유로든 여러분이 Angular를 사용하기 싫다거나
Angular를 배우기 싫다면
이건 Spring Security를 중점으로 한 과정이기 때문에
Angular에 대해
자세히 설명하지는 않겠습니다
Angular에 대한 기본적인 개념만 다루고
Angular 코드들은 제가 다 제공할 것이며
Angular 애플리케이션을 어떻게 구축하는지와
Angular 애플리케이션을 설정할 때 실행해야 하는 명령어들도
전부 알려드릴 것입니다
만약 여러분들이 Angular 형식의
테스팅이나 백엔드 애플리케이션에 흥미가 없다면
적어도 제가 이 과정 내에서 하는 것들을
잘 봐두기를 권장합니다
그래야 CORS와 CSRF 같은 개념에 대해 배우고
이를 어떻게 Spring Security에서 다루는지를 배울 수 있습니다
그리고 미리 말했듯이
모든 Angular의 서비스들은 Postman으로도 테스트할 수 있습니다
그러므로 계속 Postman을 사용하여 테스팅 하셔도 됩니다
그리고 여러분들이
Angular를 사용하여 테스팅하는 것에도 관심이 있다면
이 Angular 애플리케이션을 다운 받으시면 됩니다
설치하는 방법은 제가 설명 드리도록 하겠습니다
GitHub 리포지터리에 들어가서
section6 폴더를 보면
그 안에 여러 하위 폴더들이 있습니다
00_UI_Initial Code 라는 폴더 안에
Angular UI 애플리케이션 코드를 올려두었습니다
제가 직접 쓴 코드이며
안에 보시면
EasyBank 웹 애플리케이션과 관련된 모든 상황들을 고려해놨습니다
이걸 사용해서
로컬 시스템 안에 있는 Angular UI 애플리케이션을 설정할 수 있고
웹 애플리케이션을 실행했을 때
백엔드 서버와도 소통할 수 있게 됩니다
제가 이 코드를 전달 드리는 이유는
제가 여러분 앞에서 실시간으로 코드를 입력하는 건
사실상 불가능하기 때문입니다
그리고 다시 한 번 이건 Augular 수업이 아니기 때문에
대다수의 여러분은
Angular를 배우는 것에 큰 관심이 없을 것입니다
그렇기 때문에 제가 사전에 미리 준비된 코드를 사용하는 것이며
이번 섹션에서
EasyBank UI 애플리케이션을 설정하는 데에 사용할 것입니다
그리고 미리 준비된 코드와 더불어
프로젝트 하나를 더 볼 수 있을 것입니다
이름은 동일하게 bank-app-ui 입니다
이 프로젝트 안에는
이번 섹션에 필요한 모든 코드들이 있습니다
만약 이번 섹션 동안 뭔가 문제가 생길 경우
언제든 여러분의 코드를
폴더 안에 있는 코드와 비교해 볼 수 있습니다
그리고 시작하기 위해서는
이 폴더 안에 있는 프로젝트를 사용하면 됩니다
프로젝트 이름은 UI_Initial Code 입니다
물론 우리가 사용할
전용 Spring Boot 웹 애플리케이션의 백엔드 코드도 항상 준비되어 있습니다
아울러
PDF 파일도 있는데
그 안에는 여러분들이
Angular 애플리케이션을
로컬 시스템에 구축하는 법이 설명되어 있습니다
여길 보시면
여러분이 가장 먼저 해야 할 것은
Node.js 웹사이트에 접속하는 것입니다
이 링크를 누르면
Node.js를 다운 받기 위한 옵션이 나옵니다
그러면 로컬 시스템에 설치를 할 수 있습니다
그러니 여러분의 운영체제에 맞는 것을 찾아
Node.js를 다운 받아 주시기 바랍니다
설치가 완료되면
node -v 명령어를 입력합니다
그 명령어가 로컬 시스템 안에 설치된
Node.js의 버전을 표시합니다
오류가 발생한다면
Node.js 설치가 똑바로 되었는지 확인해 보길 바랍니다
그 다음 입력할 명령어는
npm install -g @angular/cli 입니다
그러니 PDF에 적혀있는 이 명령어를 잘 복사해서
Angular CLI를 설치하는데 사용하시기 바랍니다
로컬 시스템 안에 말입니다
Angular CLI가 설치됐다면
Angular에 관련된 명령어들을 사용할 수 있게 되는데
터미널에서 사용할 수 있습니다
그러면 이제 Angular 애플리케이션을 시작하고
만들 수 있습니다
Angular CLI를 활용하여
실행할 수 있는 명령어들이 많이 있습니다
그렇기 때문에 두 번째 명령어를 실행하는 것이
매우 중요합니다
여러분이 세 번째로 해야 할 것은
Visual Studio Code 소프트웨어를 다운 받는 것입니다
이 웹사이트에서 다운 받으면 됩니다
Visual Studio Code는
Angular 프로젝트를 작업할 때 쓸 수 있는 훌륭한 IDEA입니다
좋은 지원을 제공합니다
Spring Boot 웹 애플리케이션에서
IntelliJ IDEA를 사용한 것과 같은 개념입니다
마찬가지로
Angular 프로젝트를 위해 Visual Studio Code를 사용하는 것입니다
그리고 네 번째와 다섯 번째 단계들도
제가 곧 설명드릴 테지만
일단 자세한 부분은 다 설명드린 것 같습니다
어떤 이유로든 설치 과정 중에
로컬 시스템 내에서
문제가 생긴다면
우선 추천드리는 방법은
Stack Overflow에서 해결책을 찾는 것입니다
구글의 도움을 받는 것도 좋습니다
그럼에도 문제를 해결할 수 없을 땐
제게 직접 질문을 보내면
제가 최대한 도와드리도록 하겠습니다
그리고 많은 학생들이 공통적으로 겪는 문제들을
이 PDF 파일에 업데이트 해두려고 하는데
그게 다른 학생들에게도 도움이 될 겁니다
전부 이 PDF 파일 안에 있습니다
이제 제 노트북으로
Visual Studio Code를 열어보도록 하겠습니다
자 지금 보이는 화면이
처음 Visual Studio Code를 열었을 때 보이는 화면입니다
여기 옵션 중에 Open Folder 를 누르거나
Open Folder가 보이지 않을 경우
File에 들어가서 Open Folder를 찾으시면 됩니다
여기서 bank-app-ui 프로젝트를 선택하면 되는데
이것은 UI_Initial Code의 하위 폴더입니다
GitHub 리포지터리에서 코드를 다운 받을 때
폴더 탐색기가 이런 식으로 보입니다
그럼 bank-app-ui에 들어가서
이 bank-app-ui 폴더를 선택하고
Open 버튼을 누르면 됩니다
폴더를 열면
이런 화면이 보입니다
여기서는 우선 이 Terminal 옵션을 선택하고
New Terminal을 선택합니다
그럼 새로운 터미널이 열리게 되는데
같은 워크스페이스 위치에 생성됩니다
만약에 macOS에서 pwd 명령어을 실행하면
이 화면에서
현재 실행 중인 디렉토리들이 보여집니다
여러분들이 터미널을
bank-app-ui 프로젝트 내에서 열었는지 꼭 확인하시길 바랍니다
이 프로젝트 안에서
아주 중요한 파일을 열 수 있는데
바로 package.json 입니다
package.json은 pom.xml과 매우 유사합니다
package.json 안에서
UI 웹 애플리케이션에 필요한
모든 dependencies을 정의합니다
여기에 있는 건 전부 Angular와 관련된 dependencies들입니다
Bootstrap과 Font Awesome에 관련된 라이브러리들도 있습니다
이게 Angular 프로젝트 내의 메인 파일이며
Angular 애플리케이션에 필요한
dependencies들이 전부 있습니다
다음 할 일은 바로 이 명령어
npm install 을 실행할 차례입니다
동일하게
명령어는 터미널 안에서 실행해야 합니다
npm install도 마찬가지입니다
이 명령어가 하는 일은
이 명령어를 실행할 때마다
아 그리고 이 명령어는 처음 한 번만 실행하면 됩니다
Angular 애플리케이션을 처음 구축할 때입니다
이 명령어를 설치하자마자
package.json 속
제가 정의한 라이브러리들에 기반한
모든 dependencies들이 다운받아집니다
이제 보시다시피
node_modules라는 이름의 폴더가 없습니다
제가 이 명령어를 실행해야지만
node_modules라는 이름의
새로운 폴더가 생성되는 게 보일 겁니다
이 node_modules 안에는
필요한 dependencies들이 전부 다운 받아져 있습니다
이걸 열면
긴 목록의 라이브러리들이 있습니다
우리가 방금 실행한 명령어로 다운 받아진 것입니다
npm install 말입니다
모든 설치가 성공적으로 완료된 것 같다면
다음 명령어를 실행해야 합니다
PDF 안에 언급한 내용입니다
명령어는 ng serve 입니다
하지만 다섯 번째 명령어를 실행하기 전에
Angular CLI를 설치했는지 꼭 확인하시기 바랍니다
두 번째 단계에서 설명드렸던 것 기억하십니까?
그렇지 않으면 ng serve 명령어는 실행되지 않을 것입니다
왜냐하면 ng serve는
Angular CLI가 있어야 실행되는 명령어기 때문입니다
제가 ng serve를 입력하면
다운받은 dependencies을 기반으로
제 애플리케이션을 컴파일 해줍니다
그리고 알아서 Angular 애플리케이션을 열어주죠
과정이 완료될 때까지 잠시 기다려 봅시다
그러면 애플리케이션이 시작됩니다
애플리케이션이 성공적으로 시작된 것 보이십니까?
그리고 애플리케이션이
포트 4200과 접속할 수 있다고 알려줍니다
이 URL을 복사해보도록 하겠습니다
제 브라우저로 동일하게 접속해보도록 하겠습니다
보시다시피 이런 화면입니다
이게 저의 EasyBank 애플리케이션의 홈페이지입니다
로그인 페이지도 있습니다
문의하기(Contact Us) 페이지도 있습니다
마지막으로 공지사항(Notices) 페이지도 있습니다
현재 공지사항 페이지는 공백입니다
백엔드와의 소통이 이루어지고 있지 않기 때문입니다
그래서 백엔드로부터
공지사항 정보를 불러오려고 할 때
응답을 받지 못하고 실패하는 것입니다
그렇기 때문에 페이지가 계속 공백인 것입니다
하지만 괜찮습니다
그건 다가오는 강의에서 고쳐보도록 하겠습니다
하지만 여러분들이 확실히
Angular 애플리케이션를 설정할 수 있어야 합니다
이런 것들에 관심이 없다면
제가 하는 것과
제가 설명하는 컨셉을 잘 봐두고
CSRF와 CORS 같은
Spring Security 개념에 대해
제대로 이해해야 합니다
자 그럼 여러분들이 이번 섹션에서 다루게 될 내용들에 대해
완전히 이해하셨을 거라고 생각하겠습니다
감사합니다 다음 강의에서 뵙겠습니다
수고하셨습니다