2023.05.10 Vue - Life Cycle Hook
● Navigation Guard
- Vue router를 통해 특정 URL에 접근할 때 다른 url로 redirect를 하거나
해당 URL로의 접근을 막는 방법
- 종류
1. 전역 가드
: 애플리케이션 전역에서 동작
2. 라우터 가드
: 특정 URL에서만 동작
3. 컴포넌트 가드
: 라우터 컴포넌트 안에 정의
● 전역 가드
- Global Before Guard
: 다른 url 주소로 이동할 때 항상 실행
: router/index.js에 router.beforeEach()를 사용하여 설정
: 콜백 함수의 값으로 다음과 같이 3개의 인자를 받음
to -> 이동할 URL 정보가 담긴 Route 객체
from -> 현재 URL 정보가 담긴 Route 객체
next -> 지정한 URL로 이동하기 위해 호출하는 함수
: 콜백 함수 내부에서 반드시 한 번만 호출되어야 함
: 기본적으로 to에 해당하는 URL로 이동
: URL이 변경되어 화면이 전환되기 전 router.beforeEach()가 호출됨(화면이 전환되지 않고 대기 상태)
: 변경된 URL로 라우팅하기 위해서는 next()를 호출해줘야 함(next()가 호출되기 전까지 화면이 전환되지 않음)
● 라우터 가드
- 전체 route가 아닌 특정 route에 대해서만 가드를 설정하고 싶을 때 사용
- beforeEnter()
: router에 진입했을 때 실행됨
: 라우터를 등록한 위치에 추가
: 단, 매개변수, 쿼리, 해시 값이 변경될 때는 실행되지 않고 다른 경로에서 탐색할 때만 실행됨
: 콜백 함수는 to, from , next를 인자로 받음
● 컴포넌트 가드
- 특정 컴포넌트 내에서 가드를 지정하고 싶을 때 사용
- beforeRouteUpdate()
: 해당 컴포넌트를 렌더링하는 경로가 변경될 때 실행
- Params 변화 감지
: 변화하지 않음
: 컴포넌트가 재사용되었기 때문
: 기존 컴포넌트를 지우고 새로 만드는 것보다 효율적
● 404 Not Found
- 사용자가 요청한 리소스가 존재하지 않을 때 응답
- 요청한 리소스가 존재하지 않을 때
2023.05.11 Vue - Vue with DRF
● Server
- Client에게 정보와 서비스를 제공하는 컴퓨터 시스템
- 서비스 전체를 제공 == Django Web Service
: Django를 통해 전달받은 HTML에는 하나의 웹 페이지를 구성할 수 있는 모든 데이터가 포함
: 즉, 서버에서 모든 내용을 렌더링 하나의 HTML 파일로 제공
: 정보를 포함한 web 서비스를 구성하는 모든 내용을 서버 측에서 제공
- 정보를 제공 == DRF API Service
: Django를 통해 관리하는 정보만을 Client에게 제공
: DRF를 사용하여 JSON으로 변환
● Client
- Server가 제공하는 서비스에 적절한 요청을 통해 Server로부터 반환 받은 응답을 사용자에게 표현하는 기능을 가진
프로그램 혹은 시스템
- Server가 제공하는 서비스에 적절한 요청
: Server가 정의한 방식대로 요청 인자를 넘겨 요청
: Server는 정상적인 요청에 적합한 응답 제공
- 사용자의 요청에 적합한 data를 Server에 요청하여 응답 받은 결과로 적절한 화면을 구성
● CORS
- Cross-Origin Resource Sharing
- SOP(Same-Origin Policy)
: 동일 출처 정책
: 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는 것을 제한하는 보안 방식
: 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄임
- Origin(출처)
: URL의 Protocol, Host, Port를 모두 포함하여 출처라고 부름
: http:// localhost: 3000/ posts/3
(Scheme/Protocal) (Host) (Port) (Path)
: Protocol, Host, Port가 다 같아야 동일 출처로 인정
- CORS(교차 출처 리소스 공유)
: 추가 HTTP Header를 사용하여, 특정 출처에서 실행 중인 웹 어플리케이션이
다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
: 어떤 출처에서 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
: 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행
: 만약 다른 출처의 리소스를 가져오기 위해서는 이를 제공하는 서버가 브라우저에게
다른 출처지만 접근해도 된다는 사실을 알려야 함
- CORS policy(교차 출처 리소스 공유 정책)
: 다른 출처에서 온 리소스를 공유하는 것에 대한 정책
: CORS policy에 위배되는 경우 브라우저에서 해당 응답 결과를 사용하지 않음
: Server에서 응답을 주더라도 브라우저에서 거절
: 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS header를 포함한 응답을 반환해야 함
Java Script