진스

- 정리 1. export 함수or변수 (딱 지정했으니 이대로 사용) - 경우에는 import { 함수명 } from * 으로 사용하는데, 2. export default (default로 임의로 지정) - 경우에는 import 함수명 from * 으로 사용하게 됩니다 이름을 바꾸고 싶으면 '원래이름 as 바꿀이름' 3. import {bus as taxi} from 'bus.js'; ( as로 변수명을 바꿔서 호출) export(내보내기) export에는 named와 default가 있습니다. export 하는 모듈은 “use strict” 입니다. 두 가지 방식으로 모듈을 export할 수 있습니다. export - named // 1. 먼저 선언한 함수 내보내기 myFunction(){ ....} ..

출처 for, foreach, filter, map, reduce 기능 및 성능 비교 Javascript와 jQuery를 주로 쓰면서도 궁금했다. 반복문에는 우리가 일반적으로 알고있는 for문, $.each, forEach, map, filter 등 정말 많은 종류가 있다. daesuni.github.io Javascript와 jQuery를 주로 쓰면서도 궁금했다. 반복문에는 우리가 일반적으로 알고있는 for문, $.each, forEach, map, filter 등 정말 많은 종류가 있다. 주로 하나의 메서드로 대부분 것들을 할 수 있지만, 어떨때는 each를 써야 하고 또 어떤 경우에는 filter가 좋은지를 정확히 알고 쓰지 못했고 왜 이렇게 따로따로 만들어놨을까 라는 생각도 했다. 이번 포스트에서..

출처 [js] 자바스크립트 map 함수, filter 함수 프론트엔드로 근무를 하면서, 자바스크립트의 중요성에 대하여 절실히 느끼게 됩니다. 실무에서 자주 사용하게 되는 배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서 goddino.tistory.com map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. map 함수 구문 array.map(callbackFunction(current value, index, array), thisArg) · currentValue : 배열 내 현재 값 · index : 배열 내 현재 값의 인덱스 · array : 현재 배열 · thisArg : callba..

codesandbox slot 이용한 modal - CodeSandbox slot 이용한 modal by baejm using @vue/cli-plugin-babel, store, vue codesandbox.io Input.vue (상위 컴포넌트) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 빈칸 엔터면? 알림! 할일을 입력하세요. import Modal from "..

vue에서 css 스타일 적용 1 2 3 4 Colored by Color Scripter cs 이제 div태그에는 백그라운드 이미지가 적용되었습니다. 이 외에 필용한 스타일(크기, 사이즈 방식 등등)은 따로 지정하시면 됩니다. 위에 필요한 속성 등 알아둘 사항은 아래와 같죠. 일반 css 적용 1 2 3 4 5 #box2-2{ width: 300px; height: 150px; background-image: url("/images/attach/earth.jpg"); } Colored by Color Scripter cs 1. 혹시 위와 같이 적용하였음에도 이미지가 안나오는 경우 필요한 css 속성이 적용되었는지 확인하세요. 적용된 div 영역에는 width, height 등의 다른 스타일이 필요할 수..

api/index.js //index.js function kakaoFetch(keyword) { return axios.create({ baseURL: "https://dapi.kakao.com/v3/search/book?target=title", headers: { Authorization: " KakaoAK 나의REST API키", }, params: { query: keyword}, }); } export { kakaoFetch }; Colored by Color Scripter cs 작업할 vue 내에 //KakaoList.vue 카카오 검색 import { kakaoFetch } from "@/api";// import axios from "axios";export default { data(..

출처 [번역]ES6 축약코딩 기법 19가지 자바스크립트를 스마트하게 사용해보자 chanspark.github.io 원작 25+ JavaScript Shorthand Coding Techniques - SitePoint Become a faster developer and check out this guide to shorthand JavaScript coding techniques, with longhand versions for comparison. www.sitepoint.com 1. 삼항조건 연산자 (The Ternary Operator) 2. 간략계산법 (Short-circuit Evaluation) 3. 변수 선언 4. If Presence 5. For 루프 6. 간략 계산법 (Short-cir..

출처 vuex 새로고침시 상태 초기화 방지 vuex 새로고침시 상태 초기화 방지 kyounghwan01.github.io vue를 쓰시면 vuex를 거의 대부분 쓰실 것입니다. 그런데 이 vuex가 한가지 문제가 있습니다. 어떠한 화면에서 vuex의 store값을 의존해서 사용하고 있다 가정하고, 새로고침을 하면 store값에 의존하는 데이터가 사라지게 된다는 것이죠 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 contextText export default { name: 'HelloWorld', computed :{ contextText : function(){ return this.$store.getters['test']; } }, } Colored by Color Sc..