반응형 Dev39 vue-router 설치부터 환경설정 및 사용방법 목차 1. router 설치 2. router 설정 3. router 예제 1. router 설치 (yarn , npm) yarn 설치 yarn add vue-router@4 npm 설치 npm install vue-router@4 참고 : https://router.vuejs.org/installation.html 2. router 설정 router를 사용하기 위해 3개 의 파일을 설정해야 합니다. 3개의 파일은 router-index.js / main.js / App.vue 입니다. index.js 첫 번째로, router 폴더를 생성하고 그 안에 index.js 생성해야 합니다. 해당 폴더는 밑에 main.js에서 호출하여 전역으로 router로 사용하기 위한 설정을 위한 폴더입니다. 왜냐하면 in.. 2023. 5. 2. [Vue] Axios를 이용한 http 통신 - 설치부터 예제, 비동기 처리까지. 목차 1. Axios 란? 2. Axios 설치 3. Axios 문법 4. Axios 사용 방법 (post) 5. Vue 에서 Axios 설정 6. Axios 예제 (Get, Post) 7. Axios 비동기처리 예제 (Get, Post) https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com 1. Axios란? - node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입.. 2023. 4. 18. [JS] 데이터를 다루는 객체 사용 방법 (feat. 전개연산자 (ES6), Trouble Shooting) 목차 1. 코드로서의 객체 생성 (객체 리터럴) 2. 함수를 이용한 객체 생성 3. 클래스를 이용한 객체 생성 4. 객체 속성 추가 및 삭제 5. ★ 객체 복사 (참조 끊기) 및 분해 ★ (feat. Spread Operator, Destructuring assignment) 6. [ES6] Spread Operator를 이용한 Trouble Shooting 1. 코드로서의 객체 생성 (객체 리터럴) let box = { width: 200, height: 200, borderRadius: 5, backgroundColor: "red", }; 코드로서의 객체는 위와 같이 객체내에 프로퍼티를 정의합니다. 해당 방법이 객체를 만드는데 가장 많이 사용되는 방법이지만, 단점도 굉장히 많습니다. 객체는 기본적인 .. 2023. 4. 10. [Vue.js] 이슈부터 해결하는 Vue 프레임워크 Deep Dive (feat. 공식문서) Vue.js 프레임워크를 이용해 개발하며 마주했던 문제와 해결 방법에 대해서 작성합니다. [Issue1] 상위 컴포넌트의 data의 값이 변경될 때, 하위 컴포넌트에 props로 바인딩 한 값이 변경되지 않는 현상. (업무 예시 : 요금조정 컴포넌트(상위 컴포넌트)에서 axios 통신으로 받아온 데이터(vuex- state)로 DatePicker 컴포넌트(하위 컴포넌트) 날짜 변경(props data)을 해야 하는데 변경되지 않는 이슈 발생) [Solve1] 하위 컴포넌트에 :key ="props value" 를 속성으로 추가하면, 해당 데이터 변경 시 해당 하위 컴포넌트 데이터 변경 감지함. 부모 컴포넌트 입니다. 용돈 주기 ( 해당 예시에서는 :key 없이도 잘 변경이 됩니다..! :key를 어떻게 .. 2023. 3. 28. [Review - 드림코딩] 온라인 개발 공부의 치명적인 함정 https://youtu.be/d3PYoBwow9I 영상 요약 스택오버플로우, 블로그, 유튜브, 강의 등 방대한 콘텐츠가 있다. 하지만, 이러한 콘텐츠를 잘못 소비하면 실력 향상도 안되고 자칫 위험한 정보를 배울 수 있다. 그렇다면 어떻게하면 퀄리티가 높은 지식을 얻을 수 있을까? 드림코딩의 앨리님이 개발자로서 제대로 공부하고 역량 향상에 도움이 되는 방법을 소개해준다. 첫 번째, 공식 문서를 읽는 것 (제일 중요) 공식문서를 First Source Of Truth, 지식의 원천으로 삼아라. 처음 배울 때 공식문서로 기본기를 쌓는다. 기본이 쌓이면 공식 문서로 지식을 강화하며 재확인한다. 현업에서 일을하며 주기적으로 공식문서로 업데이트 내용을 얻어내며 역량을 강화해야한다. 프로그래밍 언어, 프레임워크, .. 2023. 3. 27. [Vite] 빛처럼 빠른 빁 ⚡ ( with. Vue 설치 ) 목차 Vite 이란? Vite 사용하는 이유 Vite가 속도 개선하는 방법 Vite 설치 및 실행 ( with. Vue.js ) 참고 1. Vite 이란? Vite의 공식적인 특징 6가지 빠른 서버 시작 -> 최고✔️ 엄청나게 빠른 HMR ( 핫 모듈 리플레이스를 통해 소스 업데이트를 빠르게 반영한다. ) -> 최고✔️ 풍부한 기능 → 타입 스크립트, JSX, CSS 지원한다. 빌드 최적화 도구 이다. 다양한 플러그인을 제공한다. 타입스크립트 타입으로 만들어진 API이다. 참고 : https://vitejs.dev/ 2. Vite 사용하는 이유 (어떤 문제를 해결하기 위해 사용하는 것일까?) 가장 큰 장점은 빌드 속도 및 새로운 코드 적용했을 때 반영속도이다. 브라우저에서 ES 모듈을 사용할 수 있기 전.. 2023. 3. 27. [git] git 이슈 노트 Git 사용하며 발생했던 이슈를 정리했습니다. 한번 겪은 문제를 다시 만났을 때 더 빠르게 해결하기 위해 기록을 하고 있습니다. 목차 1. 대/소문자 파일명 변경 적용 - 03.16 2. 예시를 통한 gitignore 작성하기 - 04.13 1. 대/소문자 파일명 변경 적용 [Issue1] abcdTest.vue 파일을 AbcdTest.vue 파일로 변경했지만, git에서는 해당 파일명 변경(대소문자)이 적용되지 않음. [Solve1] git command로 설정 변경 후 commit & push 1. git 설정 변경 git config core.ignorecase false 2. 폴덤명 변경 abcdTest.vue -> AbcdTest.vue 3. git push git add. & git commi.. 2023. 3. 16. [Vue.js] props & emit 사용 가이드 props : 부모(상위) 컴포넌트에서 호출하는 자식(하위) 컴포넌트에게 전달해주는 데이터(문자, 숫자, 객체) emit : 자식(하위) 컴포넌트에서 부모(상위) 컴포넌트에게 전달해주는 데이터 ex) 부모 컴포넌트 (구매리스트 : buyList.vue)에서 호출 된 자식 컴포넌트( 데이트피커 컴포넌트 : DatePicker.vue) { startDateEx = seletedValue; } " @selectEndDate=" (seletedValue) => { endDateEx = seletedValue; } 구매 목록(부모 컴포넌트) 에서 해당 emit 값을 받을 때, @인자명 = " ( seletedValue ) => { this.exData = seletedValue } " 이런 형식으로 작성이 되어있.. 2023. 3. 16. [JS] JavaScript 문법 노트 ( map, set, || , nullish ) 목차 1. map 2. set 3. || 논리연산자 4. nullish 연산자 5. 반복문 중간에 끝내기 ! 1. map 객체 배열에서 map을 사용하여 동일한 key 값을 가진 value 출력하기. const ajax = new XMLHttpRequest(); // ajax 통신 ajax.open("GET", "https://api.hnpwa.com/v0/news/1.json", false); // 객체 데이터 받기 위함 ajax.send(); const newFeed = JSON.parse(ajax.response).splice(0, 5); // 객체 데이터 5개만 가져오기! // map : 배열 객체에서 동일한 key 값을 가진 value 뽑아내기 console.log("newFeed 원본",new.. 2023. 2. 22. 이전 1 2 3 4 5 다음 반응형
