처음부터 시작하는 Java

vue.confing.jsconst { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, devServer: { port: 3000, proxy:"요청 api 주소", }}) 그후 axios url에 요청 api 주소 뒤 url을 작성해주면 된다 ez-

다른 위치로 이동컴포넌트 내에서 라우터에 접근하려면 router 속성을 사용Composition API 는 useRouter() 를 호출하여 라우터에 접근 다른 URL로 이동하려면 router.push 를 사용 - 새 항목을 히스토리 스택으로 푸시, 사용자가 브라우저의 뒤로가기 버튼을 클릭하면 이전 URL 로 이동함 이것은 router-link 를 클릭할 때 내부적으로 호출되는 메서드이므로, router-link :to" . . . "를 클릭하는 것은 router.push(...) 를 호출하는 것과 가틍ㅁ 선언 방식 - 프로그래밍 방식 - router.push( . . . ) // 문자열 라우트router.push('/users/eduardo')// 라우트(path)를 나타낸 객체router.push({..

일부 앱의 UI는 여러 단계로 중첩된 컴포넌트로 구성된다이 경우, URL 세그먼트가 중첩된 컴포넌트 중 특정 구조와 일치되어야 하는 것을 매우 일반적임예시/user/johnny/profile /user/johnny/posts ┌──────────────────┐ ┌──────────────────┐│ User │ │ User ││ ┌──────────────┐ │ │ ┌──────────────┐ ││ │ Profile │ │ ●────────────▶ │ │ Posts │ ││ │ │ │ ..

라우트를 생성할 때 선택적으로 라우트에 name 을 지정가능const routes = [ { path: '/user/:username', name: 'profile', component: User }] 그러면 에 to prop 을 전달할 때 path 대신 name 을 사용할 수 있음 사용자 프로필 이렇게 되면 /user/erina 로 링크를 생성하게 된다 name 을 사용했을 때의 이점하드코딩 URL 없음params 의 자동 인코딩URL 오타방지경로 순위를 우회하여, 같은 경로와 일치하는 하위 순위 라우트를 표시 각 이름은 모든 라우트에서 유일해야함, 같은 여러 라우트에 추가하면 라우터는 마지막 것만 유지할 것임

Vue Router는 Vue.js 의 공식 라우터Vue 코어와 긴밀하게 통합되어 싱글 페이지 앱을 쉽게 만들 수 있음기능중첩된 라우트 매핑동적 라우팅모듈식 컴포넌트 기반의 라우터 설정라우트에 파라미터, 쿼리, 와일드카드 적용Vue.js의 트랜지션 시스템을 사용한 트랜지션 효과라우트 탐색을 세밀하게 컨트롤링크에 자동으로 엑티브 CSS 클래스 적용HTML5 히스토리 모드 또는 해시 모드커스텀 스크롤 동작URL에 대한 적절한 인코딩 설치기존 프로젝트가 있을 시 자신이 사용하는걸로 ㄱnpm install vue-router@4yarn add vue-router@4pnpm add vue-router@4  동적 라우트 매칭과 파라미터 주어진 패턴에 따라 같은 컴포넌트에 라우트를 매핑 해야 될 때예를 들어 모든 사용..

Vue Router는 vue의 공식 클라이언트 사이드 라우팅 솔루션 클라이언트 사이드 라우팅은 싱글 페이지 애플리케이션(SPA)에서 사용자가 보는 콘텐츠에 브라우저 URL을 연결하는 데 사용사용자가 애플리케이션을 탐색함에 따라 URL이 적절하게 업데이트되지만, 페이지를 서버에서 다시 로드할 필요는 없음App.vue Hello App! 현재 라우트 경로: {{ $route.fullPath }} 홈으로 가기 소개로 가기  Vue Router 에서 제공하는 두 컴포넌트RouterLink - 태그 대신 사용RouterView - 현재 라우트 컴포넌트를 렌더링할 위치를 Vue Router에 알려줌(현재 URL 경로에 해당하는 컴포넌트)굳이 App.vue에 있을 필요는..

컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로다룰 수 있음 -> 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사하지만,Vue 는 각 컴포넌트에 사용자 정의 컨텐츠와 논리를 캡슐화할 수 있는 자체 컴포넌트 모델을 구현함 컴포넌트 정의하기 빌드 방식을 사용할 때 일반적으로 싱글 파일 컴포넌트(SFC) 라고 하는 .vue 확장자를 사용하는 전용 파일에 각 Vue 컴포넌트를 정의 당신은 {{ count }} 번 클릭했습니다. 빌드 방식을 사용하지 않을 때 Vue 컴포넌트는 Vue 관련 옵션을 포함하는 일반 Js 객체로 정의할 수 있음import { ref } from 'vue'export default ..

Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화하지만개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 여전히 있을 수 있음이러한 필요성을 충족시키기 위해 ref 라는 특별한 속성을 사용할 수 있음 //tem ref 는 v-for 장에서 언급한 key 속성과 유사한 특수 속성이를 통해 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있음예를들어 컴포넌트 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화 하려는 경우,프로그래밍 방식으로 조작하기 편리함 ref로 접근하기 Composition API 를 사용하여 참조를 얻으려면, 템플릿 ref 속성 값과 일치하는 이름으로 ref 를 선언해야함   ..

기본예제 계산된 속성은 계산되어 파생된 값을 선언적으로 사용할 수 있게 함그러나 상태 변경에 대한 반응으로 "사이드 이펙트" 를  수행해야 하는 경우가 있음(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경 하는 것) watch 함수를 사용하여 반응형 속성이 변경될 때마다 함수를 실행 가능const question = ref('')const answer = ref('?를 포함해서 질문을 해보세요')watch(question, async (newQuestion) => { if (newQuestion.indexOf('?') > -1) { answer.value = 'Thinking...' try { const res = await fetch('https://ye..

프론트엔드 폼 작업시 폼 입력 엘리먼트의 상태를 js 상태와 동기화해야 하는 경우가 많음 text = event.target.value">//단순화 * v-model 은 모든 폼 엘리먼트에서 감지되는 초기 value , checked 또는 select 속성 값을 무시항상 현재 바인딩된 js 상태를 유효값으로 취급, reactivity API를 사용하여 초기 값 선언해야함  기본 사용법 텍스트메세지: {{ message }} * 만약 IME 구성 (한국어 일본어 중국어)가 안된다면 v-model 대신 input 이벤트리스너와 value 바인딩을 사용해서 기능구현.... 여러 줄 텍스트여러 줄 메세지:{{ message }} 내부에 이중 중괄호 문법은 작동하지 않으므로 v-model을 사용{{ text }}..

이벤트 리스닝하기 일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용, DOM 이벤트를 수신하고 트리거 될 때 사전 정의해둔 js 코드를 실행ex> v-on:click="handler" or @click="handler"  두가지 핸들러 값1. 인라인 핸들러 - 이벤트가 트리거될 때 실행되는 인라인 js (네이티브 oncilck 속성과 유사)2. 메서드 핸들러 - 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 인라인 핸들러아래처럼 간단한 경우에 사용const count = ref(0)//tem1 추가숫자 값은: {{ count }}  메서드 핸들러v-on 은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행가능 const name = ref('Vue.js')function g..

v-for배열을 리스트로 렌더링 > item in tiems 형식의 특별한 문법이 필요items 배열 item 반복되는 엘리먼트의 별칭const items = ref([{ message: 'Foo' }, { message: 'Bar' }])//tem {{ item.message }}//인덱스도 지원const parentMessage = ref('Parent')const items = ref([{ message: 'Foo' }, { message: 'Bar' }])//tem {{ parentMessage }} - {{ index }} - {{ item.message }} v-for 의 변수 범위 (js 와 비슷함) 분해 할당 가능const parentMessage = 'Parent'const items..

반응형 상태 선언 ref() 컴포지션 API 에서 반응형 상태를 선언하는 권장 방법은 ref() 함수를 사용하는 것 import { ref } from 'vue'const count = ref(0)ref() 는 인수를 가져와서 .value 속성이 있는 ref 객체에 래핑하여 반환 const count = ref(0)console.log(count) // { value: 0 }console.log(count.value) // 0count.value++console.log(count.value) // 1참고 https://ko.vuejs.org/guide/typescript/composition-api.html#typing-ref싱글파일 컴포넌트 https://ko.vuejs.org/guide/scaling..

텍스트 보간법 데이터 바인딩의 가장 기본적인 형태는 Mustache(이중 중괄호) {{   }}속성 바인딩v-bind 디렉티브는 엘리먼트의 id 속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지 바인딩 값이 null 또는 nudefined이면 엘리먼트의 속성이 제거된 상태롤 렌더링 단축 문법불리언 특성버튼truthy 값이 있는경우 ture / 그 외 falsy 의 경우 속성 생략 여러 속성을 동적으로 바인딩 여러 속성을 나타내는 JavaScript 객체가 있는 경우const objectOfAttrs = { id: 'container', class: 'wrapper', style: 'background-color:green'}//template자바스크립트 표현식 사용 지금까지는 템플릿의..

옵션 API data, methods, mounted 같은 객체를 사용, 컴포넌트의 로직을 정의. 옵션으로 정의돈 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됨  숫자 세기: {{ count }}컴포지션 API import 해서 가져온 API 함수들을 사용하여 컴포넌트의 로직을 정의. SFC에서 컴포지션 API는 일반적으로  숫자 세기: {{ count }}* 사실 옵션 API는 컴포지션 API 위에 구현 그렇다면 무엇을 사용?? 옵션 API는 일반적으로 OOP 언어 배경을 가진 사용자를 위한 클래스 기반 모델과 더 잘 맞는  "컴포넌트 인스턴스"(예제의 this)의 개념을 중심으로 하며 반응형 세부 사항을 추상화하고 옵션 그룹을 통해 코드 구조를 실행하여 초보자에게 더 친숙 컴포..