728x90 반응형 front-end15 Vue의 module타입 변수, 함수, 클래스, 인스턴스의 집합을 독립된 파일(~.js, ~.vue)로 만든 것 모듈로 만들어 필요한 기능만 여러 프로그램에서 재사용 모듈 내부에서 export 된 것만 외부 프로그램에서 사용 가능 export : 개수와 상관없이 내보내기 가능 export default : 기본 한 개만 내보내기 가능 [test.html] body-script-type을 module로 설정 + - 계산하기 {{result}} type이 module이고 src가 해당 파일 경로로 적혀있다. [test.js] import { title, add, sub } from './test_module1.js'; // import { title, add, sub } from './test_module2.js'; console... 2022. 9. 5. API로 아파트 리스트 가져오기 1. CDN추가( vue와 axios CDN추가) 2. body에 vue객체 생성 3. body에 테이블 생성( divid#app / table>tr>th*5하면 빠르게 테이블 완성) 번호 아파트이름 층수 법정동 매매가격 4. 공공데이터 포털에 들어가서 인증키 받기 ✔️ 검색에서 '아파트 매매 실거래 상세조회' 검색 ✔️ 오픈 API탭에서 활용신청 클릭 ✔️ 마이페이지에서 활용건에 들어가기 ✔️ 활용 신청한 건이 나온다. ✔️ 기술문서 열어보기 ✔️ 서비스 URL복사 .✔️ body-script부분에 address 변수 생성하고 서비스 URL 복붙 ✔️ 기술 문서에 보면 지정 컬럼들이 있음. API에서 전체를 가져오는 게 아니라 지정 컬럼을 갖고 오고 싶다면? 요청변수에 '항목구분'에 '필수(1)/옵션(.. 2022. 7. 28. axios 비동기처리, Promise, async, await ✔️ajax로 비동기 처리 어떻게 했나? 비동기 처리 1: 아파트 정보를 openAPI로 불러옴 → 비동기 처리 2: 주소를 G.L으로 보냄(위/경도) → 아파트 위치 파악 💡문제점? 데이터를 순서대로 불러오지 않으니 동시에 처리됨 💡해결책! async ✔️axios란? Vue에서 권고하는 HTTP 통신 라이브러리는 axios Promise 기반의 HTTP 통신 라이브러리 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다 https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for t.. 2022. 7. 20. Vue.js 컴포넌트 SFC(single file application) ✔️컴포넌트 (Component)란? Vue의 가장 '강력한 기능' 중 하나 HTML Element를 확장하여 재사용 가능한 코드를 캡슐화 Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 Life Cycle Hook 사용 가능 전역 컴포넌트와 지역 컴포넌트 ✔️전역컴포넌트와 지역 컴포넌트 📌전역 컴포넌트 : 전역 컴포넌트를 등록하려면, Vue.component('tagName',{ options}), html에서 컴포넌트를 불러올 때 권장하는 컴포넌트 이름 : 케밥 표기법 ( 전부 소문자, - ), 전역이라서 다른 Vue영역에서도 사용 가능 📌지역 컴포넌트 : Vue의 해당 el영역 안에서만 사용 가능 ✔️컴포.. 2022. 7. 11. Vue.js 이벤트 ✔️EVENT : DOM Event를 청취하기 위해 v-on directive 사용 📌v-on : v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다 클릭 클릭된 수는 {{count}}입니다. - 로직이 길 때: 이벤트 발생 시 처리 로직을 v-on 라인에 넣기 힘들다. 이 때문에 v-on에서는 이벤트 발생시 처리해야 하는 method의 이름을 받아 처리한다. (함수로 전달할 인자가 없으면 자동으로 event가 생성된다. v-on:click="hahaha"의 경우 인자를 작성하지 않았으므로 ) 클릭 - 원본 DOM 이벤트에 액세스 해야 하는 경우 특별한 $event 변수를 사용해 메서드에 전달할 수도 있다. test1 test2 form에서 bu.. 2022. 7. 8. Vue.js 인스턴스 속성(methods, filter, computed, watch) ✔️Vue Instance 속성 – methods, filter, computed, watch : vue 2.x에서는 따로 쓰이지만 3.x로 가면 setup으로 한 번에 묶어서 쓰임 📌methods : Vue Instance는 생성과 관련된 data 및 method의 정의 가능 method안에서 data를 “this.데이터이름” 으로 접근 가능 method안에서 this변수를 쓸 경우, arrowfunction 쓸 수 없다 {{message}} {{eng()}} {{kor()}} - 함수를 써서 log로 찍어보기 count:{{count}} 💡html에서는 {{변수명}}, {{함수이름}} / script의 vue내에서는 변수든 함수든 this로 접근 / script의 vue밖에선 vue명.변수명 or 함.. 2022. 7. 7. Vue.js개요, 인스턴스, 디렉티브 1) Vue2와 Vue3..? https://vuejs.org/ Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. vuejs.org 2020년 9월 Vue3가 정식 릴리즈 되고 나서도 Vue2에서 Vue3로 사용자들이 자연스럽게 넘어갈 수 있도록 꽤 오랜 기간 vuejs.org에서 Vue2를 기존 공식 문서로 유지해 왔다. 그러다가 사람들이 하도 3으로 안 넘어가니까 2022년 2월 공식문서 버전이 Vue3가 되었다. 그렇다고 해서 Vue2를 보지 못하는 건.. 2022. 7. 7. jQuery 소개 ✔️제이쿼리 왜 사용할까? : 웹사이트를 만들 때 HTML, CSS, JS 등을 이용하여 만든다. HTML은 틀을 만들고 CSS는 디자인을 입히며, JS로 다이내믹하게 변화하는 웹페이지 효과를 준다. 제이쿼리는 자바스크립트의 기능을 모아놓은 라이브러리이다. JS를 사용해서 내가 코드를 짜나 상대방이 코드를 짜나 똑같은 코드가 나올 수 있다. 쉽게 말해 귀찮음 방지로 제이쿼리를 사용하는 것이다. 제이쿼리 덕분에 JS를 작성하는 방식을 아주 간단하게 바꿔 놓는다. ✔️제이쿼리 특징 브라우저 호환성 네이티브 DOM API보다 직관적이고 편리한 API제공(코드가 짧아짐) Event처리, Ajax, Animation 효과 쉽게 사용 ✔️제이쿼리 다운 방법1: 제이쿼리 파일 다운 https://jquery.com/.. 2022. 6. 29. VSCode 익스텐션 필수! 리스트 ✔️ VS 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 your favorite platform - Linux, macOS, and Windows. code.visualstudio.com ✔️Extension에 들어가기 ✔️Material Theme : VS Code 테마 및 아이콘 변경하는 플러그인.. 2022. 6. 20. 이전 1 2 다음 728x90 반응형
