지난 번 강의에서
Postman으로 Register API 서비스를 테스트해보고
성공적으로 새로운 유저를 등록할 수 있었습니다
이번 강의에서는
Postman과 Angular UI 클라이언트를 두 가지를 통해
Notices API를 테스트해보겠습니다
이 과정에서 뭔가 문제를 찾게 될 건데
자세히 얘기해보도록 하겠습니다
이 문제를 해결하기 위해서는
Spring Security의 도움이 필요합니다
Notices API를 테스트하기 위해서는
REST API 경로가 무엇인지 확실히 알아야 합니다
/notices 이며 HTTP GET 메소드를 지원합니다
제 서버가 실행되고 있습니다 Postman으로 먼저 테스트해보겠습니다
Postman에서 API를 불러오려고 합니다
http://localhost:8080/notices 입니다
HTTP GET 메소드로써 호출하는 것입니다
전송 버튼을 누르면
어떠한 인증도 요구되지 않기 때문에
데이터베이스 안에 있는 제대로 된 응답들을
받게 됩니다
총 6개의 활성화된 notice들이 있고
전부 Postman 응답에 표시되고 있습니다
이제 Angular UI 애플리케이션을
통해서 테스트 해봅시다
이것이 제 Angular UI 애플리케이션입니다
Notices를 누르자마자
백엔드로부터 응답을 받아야 하고
Angular 애플리케이션에 공지사항(notices) 정보가
보여져야 합니다
백엔드까지의 흐름이 어떤지 보여드리겠습니다
그래야 클라이언트와 백엔드 서버 사이의
소통이 어떻게 이루어지는지 확실히 이해할수 있을 것입니다
HOME, LOGIN, CONTACT US, NOTICES 페이지들은 모두
헤더(header) HTML에 있습니다
헤더 HTML를 확인해봅시다
header.component.html을 열면
어떠한 창이 헤더에 보이든
지금 여기에 표시됩니다
왜냐하면 인증되지 않았기 때문입니다
그러니까 인증이 되지 않은 경우에는
Home, Login, Contact Us, and Notices 들이 표시됩니다
누군가 notices를 클릭하면
Angular 앱에게
"유저를 /notices로 이동시켜줘"라고 말하는 것입니다
우리가 설정할 라우팅 정보들은 어디에 있느냐
우리는 이 모든 라우팅 정보들을
app-routing.module.ts에 설정했으니 열어보겠습니다
이 안에 notices 경로로는
notice 요소를 찾고 불러오라고
명령하는 것입니다
Notices 요소에서는
요소가 초기화하는 중에
누군가 이 요소에 접근하려 하면
dashboardService 안에 있는
getNoticeDetails 함수를 불러옵니다
벡엔드에 있는 REST API를 불러오는 것이기 때문에
그걸 등록하려는 것입니다
응답을 받으면 마찬가지로
NoticesComponent 클래스 안에 있는
notices 배열에 들어갑니다
이 notices 객체는
notices의 HTML 페이지를 확인해보면
ngFor를 사용 중입니다
Angular에서 ngFor는 요소 리스트를
notices 배열에 넣습니다
이게 바로 모델 객체 notices 입니다
let notice of notices 코드는
각 요소를 반복하게 하는 것입니다
모든 요소는
div 안에 반환하면
실행됩니다
각 notice 객체에서
noticeSummary와 noticeDetails를 가져오고
동일하게 UI 페이지에 표시됩니다
notices.component.ts에 돌아가서
getNoticeDetails를 클릭하고
(dashboardService 안에 있습니다)
rooturl 에게 HTTP GET 요청을 할수 있도록 합니다
rooturl은 localhost:8080입니다 잘 되고 있습니다
경로는 /notices입니다 이것도 잘 작동됩니다
그리고 observe를 response 설정하면
헤더나 바디 따로가 아니라
전부를 원한다고 요구하는 것입니다
전체 응답을 원하다는 것이죠
컴포넌트도 확인해보면
바디는 백엔드 서버에서 받은
응답 객체에서 추출합니다
그리고 withCredential이 true라고
언급하지 않습니다
이것은 공용 API이기 때문이죠
Spring Security 프레임워크는
프론트엔드로부터 오는 보안 쿠키, 정보, 인증
세션(Session) ID 등을 기대하지 않습니다
그러므로 withCredentials를
true로 지정하지 않습니다
다 잘 동작하는 것 같습니다
UI 안에도 실수가 없었습니다
Postman을 통해 백엔드의 notices API를 테스트해봤는데
완벽하게 동작했습니다
자신감을 갖고 공지사항 페이지에
응답들이 표시되기를 기대합니다
좋은 결과를 기대해 봅시다 NOTICES를 누르겠습니다
그전에 개발자 콘솔을 열어서
콘솔이 깨끗한지 확인합니다
이번엔 진짜 NOTICES를 클릭합니다
깜짝 놀라실 겁니다 짜잔
에러가 발생했습니다
localhost:4200 그러니까 클라이언트 애플리케이션과
포트 8080에 호스트된
백엔드 애플리케이션과의 소통이
CORS 정책에 따라
차단되었다는 것을 뜻합니다
UI 애플리케이션과
백엔드 어플리케이션의 소통이 이루어지지 않는다는 뜻입니다
백엔드 애플리케이션의 콘솔을 확인해 보면
예외는 없습니다
이 말은 즉 요청이
백엔드 쪽에는 오지도 않았다는 것입니다
브라우저 레벨에서 실패하는 겁니다
어떻게 된 것일까요? 실수는 없었는데 말입니다
UI 쪽은 완벽했고
백엔드 쪽도 완벽했습니다
문제는 최신 브라우저에 있는
CORS 정책입니다
다음 강의에서는
CORS 정책에 대해 알아보겠습니다
Spring Security의 도움을 받아
문제를 고치고 다시 UI 클라이언트와
백엔드 서버와 소통을 할 수 있도록 말입니다
감사합니다 다음 강의에서 뵙겠습니다