LazyWon Story

목차 컴포넌트 안에 다른 컴포넌트 사용하기 Slot Provide/Inject Template refs 컴포넌트 안에 다른 컴포넌트 사용하기 □ 부모 컴포넌트와 자식 컴포넌트 다음과 같이 컴포넌트를 하나 구현한다. src/components 폴더에 PageTitle.vue 파일을 생성한다. Page Title src/views 폴더에 NestedComponent.vue 파일을 생성한다. 컴포넌트에서 다른 컴포넌트를 사용하는 방법은 사용할 컴포넌트를 import 한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록하면 된다. 개발하면서, 혹은 애플리케이션이 서비스 되면서 각 페이지 타이들의 색상이나 레이아웃 변경 등 디자인 변경이 필요한 경우, PageTitle 컴포넌트만 수정하면..

목차 서버와의 데이터 통신을 위한 API 호출 메소드 만들기 서버 데이터 렌더링 Mock 서버에 API를 생성하고 테스트 데이터를 등록하는 방법과 Vue 컴포넌트에서 Mock 서버에 등록한 API를 호출하여 서버 데이터를 바인딩 하는 방법에 대해 알아보겠다. 서버와의 데이터 통신을 위한 API 호출 메소드 만들기 모든 데이터를 서버로부터 가져오고 사용자 인터렉션을 통해 발생한 데이터는 서버로 보내서 데이터베이스에 저장해야 한다. 서버 통신을 위해 가장 많이 사용하는 패키지 중 하나인 Axios를 이용해 API 호출 메서드를 개발해서 앞으로 구현하는 모든 Vue 컴포넌트에서 사용할 수 있도록 전역 메소드로 등록 하겠다. ♣ Axios란 ? Axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신..

목차 Postman 설치 Mock 서버 생성 API 반환 데이터 설정 Postman의 Mock 서버를 생성하여 서버 환경이 준비되어 있지 않더라도 효율적으로 프론트엔드 개발을 진행하기 위한 방법 중 하나인 Mock(가짜) 서버를 사용하는 방법에 대해 알아보자. 일반적으로 Postman은 개발된 API가 제대로 동작하는지 테스트 용도로 많이 사용되는데, 그런 용도 외에도 매우 많은 기능을 제공한다. 그런 유용한 기능 하나가 바로 Mock 서버이다. Postman 설치 https://www.postman.com/download https://www.postman.com/download www.postman.com Mock 서버 생성 Create New 메뉴를 클릭하여 팝업이 나타나면 Mock Server를 ..

목차 컴포넌트란? 컴포넌트 구조 이해하기 데이터 바인딩 리스트 렌더링(v-for) 렌더링 문법(v-if, v-show) 이벤트 처리(v-on) computed와 watch Vue 컴포넌트 개발을 위한 기본 문법에 대해 알아보자. 컴포넌트란? 컴포넌트는 View, Data, Code의 세트이다. HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재한다. 컴포넌트의 가장 큰 특징은 재사용이 가능하다는 점이다. 다른 컴포넌트에 import 해서 사용할 수 있다. Vue에서 컴포넌트는 페이지 자체일 수도 있고, 페이지 내 특정 기능 요소일 수 있다. Vue CLI 이용하여 프로젝트 최초 생성 시, src 폴더 밑에 components 폴더가 있다. 그런데 라우터 설정을..

목차 라우팅이란? Vue-Router 설치 Lazy Load 적용하기(비동기 컴포넌트) 본격적으로 프로그램을 구현하기에 앞서 가장 먼저 해야 할 일은 라우터를 설정하는 일이다. 라우팅이란? vue와 같은 단일 페이지 애플리케이션의 경우 페이지 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라, 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. 즉, 라우팅이란 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해하면 된다. Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해 놓아 사용자가 메뉴를 클릭하거나 브라우저 주소를 갱신했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면을 전환시킨다. V..

목차 Vue CLI 설치 Default 옵션으로 프로젝트 설치하기 Manually select features 옵션으로 프로젝트 설치하기 Vue 프로젝트 매니저로 프로젝트 설치 Vue CLI 설치 Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 배포 할 수 있게 도와주는 도구이다. vs code의 터미널에 다음 명령어를 입력하여 Vue CLI를 설치한다. npm install -g @vue/cli -g(global) npm install -g 패키지명 -g 옵션을 사용하면 설치하는 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용할 수 있는 global 패키지로 등록된다. --save npm install 패키지명 --save ./node_modules에 패키지를 ..

목차 Visual Studio Code 설치 Node.js 설치 NPM(Node Package Manager) 설치 Vue 개발을 위한 유용한 vs code Extension 설치 Vue.js 개발을 위한 개발환경을 구성하도록 하겠다. Visual Studio Code 설치 https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on you..

목차 Vue.js는 무엇인가? Vue.js 장점 Vue.js 특징 급히 Vue.js 프로젝트에 투입되어야 하기 때문에 무작정 공부하기 위한 책을 구매하였다. Vue.js 프로젝트 투입 일주일 전 vue.js 에 대해 들어만 보았지 아는것이 거의 없기 때문에 하나씩 배워가려고 한다. 게으른 내가 공부하기 위해 (살기 위해) 블로그에 기록하기로 했다. Vue.js는 무엇인가? Vue.js가 목표로 하는 것은 웹의 장점과 앱의 장점을 모두 수용할 수 있는 웹앱 애플리케이션을 만들 수 있는 프레임워크를 제공하는 데 있다. 일반적인 웹사이트 페이지 이동시마다 페이지 전체를 다시 로딩하게 된다. 매번 이동시마다 자바스크립트, CSS, 이미지 파일 등 전체를 서버로부터 받아와서 로딩을 하는 것이다. Vue.js Vu..