SOP (Same-origin policy)동일 출처 정책어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용하는 것을 제한하는 보안 방식웹 애플리케이션의 도메인이 다른 도메인의 리소스에 접근하는 것을 제어하여 사용자의 개인 정보와 데이터의 보안을 보호하고, 잠재적인 보안 위협을 방지한다.잠재적으로 해로올 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄인다. Origin (출처)URL의 Protocol, Host, Port 를 모두 포함하여 ‘출처’라고 부른다.이 3가지가 모두 일치하는 경우, 동일 출처로 인식한다. CORS Policy (교차 출처 리소스 공유 정책)다른 출처에서 온 리소스를 공유하는 것에 대한 정책으로, 웹 애플리케이션이 다른 도메인에 있는 리소스에..

State Management = 상태 관리Vue 컴포넌트는 이미 반응형 상태를 관리하고 있다.→ 상태 = 데이터 컴포넌트 구조상태(State) - 앱 구동에 필요한 기본 데이터뷰(View) - 상태를 선언적으로 매핑하여 시각화기능(Actions) - 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 상태 관리의 단순성이 무너지는 시점⇒여러 컴포넌트가 동일한 상태(데이터)를 출력해야 하는 경우, 계층 구조가 깊어지면 prop이 중첩되면서 코드가 비효율적이고 관리가 어려워진다.여러 컴포넌트가 동일한 상태(데이터)를 변경시킬 경우 앞의 경우와 반대로 emit 이 중첩되면서 관리 패턴이 깨지게 된다.⇒ 해결책 : 계층구조를 막론하고 모든 컴포넌트(전역)에서 참조하고 데이터를 직접 가져올..

Routing네트워크에서 경로를 선택하는 프로세스→ 웹 애플리케이션에서 다른 페이지 간의 전환과 경로를 관리하는 기술 RouterLink페이지를 다시 로드하지 않고 URL을 변경하여 URL 생성 및 관련 로직을 처리한다.HTML의 태그를 렌더링 한다. RouterViewRouterLink URL에 해당하는 컴포넌트를 표시한다.원하는 곳에 배치하여 컴포넌트를 레이아웃에 표시할 수 있다. router/index.js라우팅과 관련된 정보와 설정이 작성되는 곳router에 URL과 컴포넌트를 매핑한다. viewsRouterView 위치에 렌더링할 컴포넌트가 있는 곳기존 components 폴더와 기능적으로 다른 것은 없지만 분류의 의미로 따로 구성되어 있다.컴포넌트 이름도 일반 컴포넌트와 구분하기 위해 이름을 ..

Props부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되는 속성 부모 속성이 업데이트되면 자식으로 전달되지만 그 반대는 안된다.자식 컴포넌트에서 props 를 변경하는 것은 불가능하다.또한 부모 컴포넌트가 업데이트 될 때마다 이를 사용하는 자식 컴포넌트의 모든 props가 최신 값으로 업데이트 된다.→ 부모 컴포넌트에서만 변경하고 이를 내려받는 자식 컴포넌트는 자연스럽게 갱신되도록 하는 방식 One-Way Data Flow모든 props는 자식 속성과 부모 속성 사이에 하향식 단방향 바인딩을 형성한다.하위 컴포넌트가 실수로 상위 컴포넌트의 상태를 변경하여 앱에서의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지하고 데이터 흐름의 일관성과 단순화를 확보하기 위해 단방향으로 설정한 것! Pro..

Component재사용 가능한 코드 블록UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다.자연스럽게 애플리케이션은 중첩된 컴포넌트의 트리 형태로 구성된다. Single-File Components (SFC)컴포넌트의 템플릿(html), 로직(JS) 및 스타일(css)을 하나의 파일로 묶어낸 특수한 파일 형식 (.vue)Vue SFC는 HTML, CSS, JavaScript 를 단일 파일로 합친 것각 .vue 파일에서 3가지 유형의 최상위 언어 블록인 , , 블록은 컴포넌트의 뷰, 로직, 스타일을 독립적으로 배치하고 있다.언어 블록 작성 순서는 상관없다. 각 vue 파일은 최상위 블록을 하나만 포함할 수 있다. 각 vue 파일은 setup 속성이 붙은 블록을 하나만..

Template SyntaxDOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용 1. Text interpolation데이터 바인딩의 가장 기본적인 형태이중 중괄호 구문 (콧수염 구문)을 사용한다.속성이 변경될 때마다 업데이트 된다. 2. Raw HTML콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에 실제 HTML로 출력하려면 v-html 을 사용해야 한다. 3. Attribute Bindings콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 대신 v-bind를 사용한다.HTML의 속성 값을 vue의 반응형 변수 속성과 동기화 되도록 한다.바인딩 값이 null 이나 undefined 일 경우 렌더링 요소에서 속성이 제거된다. 4. Ja..