먼저 상위(부모) 컴포넌트의 이름은 Topic, 하위(자식) 컴포넌트의 이름은 TopicSearch라고 가정합니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. Topic.vue (일부) <template> <div class=”topic”> <TopicSearch v-on:search=”doSearch” v-on:allOrder=”doAllOrder”/> </div> </template> 여기서 search. allOrder 는 나중에 this.$emit에서 사용할 이벤트 이름이며. doSearch, doAllOrder는 상위 컴포넌트에 있는 메소드 이름입니다. 왼쪽이 더보기…
이 방법은 npm의 Vue CLI를 통해 개발하는 경우 및 처음에 Vue.js 프로젝트를 생성할 때 Vue Router가 포함되지 않은 경우를 기준으로 작성되었습니다. 1) npm에서 Vue Router 설치 npm install vue-router –save 2) router 관련 설정 js 파일 생성 이름 및 경로는 자유롭게 지정할 수 있습니다. 3) 라우터 설정 더보기…
깃허브 주소: https://github.com/ayaysir/vue-todo Vue.js로 만든 할 일(todo) 관리 애플리케이션입니다. 주요 기능 입력, 수정, 삭제 기능 목록 표시 기능 목록을 JSON으로 저장하여 localStorage에 동기화 작성 날짜 표시 기능 모든 목록 삭제 기능
Vue.js에서 무한 스크롤(무한 페이징, 스크롤 페이징)을 적용하는 방법입니다. Vue-infinite-loading 이라는 라이브러리를 사용하면 무한 스크롤을 쉽게 구현할 수 있습니다. 원리는 특정 영역, 일반적으로 화면 맨 아래에 화면이 이동하면 Vue.js 에서 목록을 관리하는 배열에 추가 데이터를 AJAX 로 더하여 다시 렌더링하는 방식입니다. 이 예제는 별도의 예외 상황에 대한 고려 없이 단순하게 목록을 30개씩 더보기…
출처 바로가기(영문) Vue.js: v-on:click을 사용해 해당 요소(element)의 DOM 가져오기 이벤트 객체 $event를 사용하여 이벤트 핸들러를 가져올 수 있습니다. <div id=”foo” v-on:click=”select($event)”>…</div> $event는 자바스크립트에서 다음과 같이 처리할 수 있습니다. 참고로 event 자체는 클릭 이벤트이고, 어떤 요소를 클릭했는지 가져오는 것이 event.currentTarget(또는 event.target)입니다. export default { methods: { select: function(event) { 더보기…
IT 기술면접(일반) 예상문제: 웹개발 프론트엔드 개발 이론 요약 깃허브 프론트엔드 면접 문제은행 리스트 웹에서의 SPA (Single Page Application) 단일 페이지로 구성된 웹 어플리케이션을 뜻하는 단어입니다. 서버사이드 렌더링을 배제하고, 필요한 데이터만 JSON 등의 형태로 받아 동적으로 렌더링합니다. 기존 웹 환경에 비해 SPA가 부각되는 이유? 기존 어플리케이션은 화면이동 시에 화면 이동에 더보기…
축약형 export default { data() { return { todoItems: [] } }, } methods: { addTodo() { } }, 원래 형태 export default { data: function(){ return { todoItems: [] } }, } methods: { addTodo: function(){ } }, vue.js vue 축약 원래 this.values.splice(index, 1, replacementItem) editTodo(keyOfTodoItem, 더보기…
axios 홈페이지: https://github.com/axios/axios 사용법 axios는 Promise 기반의 AJAX 라이브러리입니다. 기본 형태는 다음과 같습니다. axios.get(‘/user’, { params: { ID: ‘anyvalue’ } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .finally(function () { // always executed }); axios.get 뿐만 아니라 post, delete, put, patch 등 리퀘스트 종류에 따라 사용할 수 있습니다. 더보기…
이전 글: Vue.js: 기초 사용 방법 + 예제: 이름으로 보는 운세 요구사항: Home, Portfolio, Guestbook 3개의 메뉴로 된 홈페이지를 만들되 각 메뉴는 Vue.js의 컴포넌트를 사용하여 작성하시오. <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <title>Homepage</title> <link rel=”stylesheet” href=”[부트스트랩-cdn-주소]”> </head> <body class=container> <nav id=”home-nav” class=”navbar navbar-expand-lg navbar-dark bg-dark”> <a class=”navbar-brand” href=”#”>{{ title 더보기…
Vue.js 소개 및 매뉴얼: https://kr.vuejs.org/v2/guide/ 인스턴스의 라이프사이클 beforeCreate: 인스턴스가 초기화 된 직후 데이터 관찰 및 이벤트 설정 전에 동기적으로 호출되는 단계입니다. create: 인스턴스가 작성된 후 beforeCreate 다음 단계에 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. data 속성에 접근할 수 있는 단계이므로 서버에 데이터를 더보기…