Develop_NOTE

웹 애플리케이션을 제작할 때 재사용 가능한 부분을 독립적으로 구축 할 수 있게 해주는 것을 컴포넌트라고 부른다. [Vue.js] 컴포넌트(Component) Vue.js 컴포넌트(Component)? 웹앱을 제작할때 재사용 가능한 부분을 독립적으로 구축할 수 있게 해주는 핵심 개념이다. 컴포넌트를 사용하면 작은 부분을 독립적으로 구축하고, 이를 조합하여 큰 웹 joroki.tistory.com App.vue 파일에서 Child.vue 컴포넌트를 등록하면 Child.vue의 부모 컴포넌트는 App.vue가 되는 것이다. 이때, 부모 컴포넌트(App.vue)에 등록된 데이터를 자식 컴포넌트(Child.vue)가 사용 하고 싶을 부모에서 데이터를 자식 컴포넌트에 데이터를 전송해주고, 자식 컴포넌트에서 전송한 ..

Vue3, Vue Router, axios를 활용하여 간단하게 로그인 & 로그아웃 기능을 구현해보고자 한다. 기능정의는 아래와 같다. 1. 사용자가 로그인 정보 입력 후 Login 버튼 클릭시 axios를 활용하여 post요청 2. 로그인 성공시 다른페이지로 route 이동 & 로그인 실패시 alert 3. 로그인 성공 후 새로고침해도 로그인 정보 값이 유지되기 위해 로그인 상태값을 생성하여 로컬스토리지에 저장 4. 로컬스토리지에 로그인 상태값이 없을시 로그인 페이지로 리디렉션 & 다른 url 접근은 불가. *) 단순 기능 기록 목적을 위한 것 이기 때문에 props,emit을 이용한 데이터 처리 or Vuex를 활용한 코드는 스킵 1. Login.vue 에서 로그인 기능 작업 - id,비밀번호 inpu..

개발환경 Laravel 8 Laravel mix 6 node ver → 12.14 Vue3 기본 세팅은 아래와 동일하다. [Laravel&Vue.js] 라라벨 개발환경에서 Vue.js 컴포넌트 사용하기 개발환경 Laravel 8 Laravel mix 6 node ver → 12.14 Vue3 1.Laravel 프로젝트 생성 composer create-project --prefer-dist laravel/laravel="8.*" laravel-vue3 2.npm 설치 및 & Vue3 및 해당 종속 항목 설치 npm install npm i vue@next && npm i joroki.tistory.com 이 포스트 내용은 컴포넌트를 가져오는 것 뿐만이 아니라 개발 환경은 Laravel 모든 프론트 처리는..

Vue.js 이벤트 핸들러는 Javascript기준으로 얘기하자면 button.addEventListener("click") 이것과 같다. 즉, HTML요소에서 발생하는 이벤트에 대한 로직을 처리해주는 것이다. 주로 애플리케이션내에서 사용자 인터렉션 및 다른 이벤트와 상호작용하기위해 자주 활용 된다. 이벤트 핸들러 예시 1. "v-on" 디렉티브 이벤트발생 export default { data() { return { }; }, methods: { handleEvent() { console.log("클릭 이벤트 발생"); } } }; 2. "@이벤트명" 디렉티브 이벤트발생 export default { data() { return { }; }, methods: { handleEvent() { consol..

Vue.js 반복문(v-for)란? 간단하게 얘기하자면 퍼블리셔가 상품목록을 구현한다고 했을때 'div','li' 이런 태그들을 수십개,수백개 똑같은 마크업 형태로 반복 작성하게되는데 이것을 수십개,수백개 마크업하지않고 축약해 줄 수 있는 기능을 제공하는게[ Vue.js의 반복문 'v-for'이다. 단순히 같은형태의 마크업만 반복해줄 뿐 아니라 배열(Array),객체(Object)형태로 이루어진 데이터들의 각 항목을 반복하면서 데이터 리스트를 기반으로 HTML을 생성해 줄 수 있다. 보통은 데이터리스트 기반으로 HTML을 생성하기위해 사용한다. v-for 기본 문법 기본 문법은 아래와 같다. 사과 1. 원하는 태그 안에 v-for="작명 in 반복횟수" 기입 2. v-for가 기입된 태그 안에 :key=..

Vue.js의 데이터바인딩이란? 웹 애플리케이션에서 UI와 데이터를 동기화하는 기능을 제공하는 Javascript 프레임워크이다. Vue.js의 데이터바인딩을 활용하면 데이터의 변화에 따라 화면의 내용이 자동으로 업데이트되어 사용자에게 동적인 웹 애플리케이션을 제공할 수 있게한다. 예를 들자면 쇼핑몰에 올라가는 상품의 가격 처럼 가변적인 데이터들에 사용 할 수 있겠다. 이를 위해서 Vue의 실시간 자동 렌더링 기능을 사용하기위해서 데이터바인딩을 사용한다. 선언적 렌더링 data() & 데이터바인딩 문법 위의 렌더링 기능을 사용하기 위해 아래와 같이 작성한다. {{ price1 }} 속성 바인딩 단순 텍스트 뿐 아니라 HTML의 속성(property)도 데이터 바인딩이 가능하다. v-bind:속성명="da..