프로그래밍나무

axios install npm i axios terminal에 위 코드를 써서 axios를 설치합니다. js 파일로 만들기 저는 axios를 편하게 쓰기 위해 src/util 밑에 http.js 파일로 따로 만들어 두었습니다. import axios from "axios"; // axios 객체 생성 export default axios.create({ baseURL: "http://localhost:8080", headers: { "Content-type": "application/json;charset=utf-8" } }); 해당 코드를 적용하면 url을 계속 쓸 필요 없이 편하게 서버와 통신할 수 있습니다. 통신 코드 작성 import http from "@/util/http"; 먼저 위 코드를 ..

package.json 파일에 들어갑니다. "scripts": { "serve": "vue-cli-service serve --port 포트번호", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test": "jest", "test:unit": "jest --no-cache" }, 해당 파일에 들어가서 scripts 안에 있는 serve 부분을 원하는 포트번호를 넣고 바꾸면 됩니다.

프로젝트에서 사용하기 위해 d3를 사용하였는데, 빠른 적용을 위해서 d3의 examples를 이용하였습니다. 그중 제가 사용한 것은 zoomable circle chart입니다. vuex의 store에 데이터를 저장해놓았다가 버튼을 클릭 시 해당 차트가 보이도록 설정하였습니다. example 가져오기 chart = { const root = pack(data); let focus = root; let view; const svg = d3.create("svg") .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("backgr..

현재 공부 중인 프로젝트를 싱글 파일 컴포넌트 체계로 바꾸기 위해서 .vue 파일로 프로젝트를 구성하고 있었습니다. {{emp.id}} {{emp.name}} {{emp.dept_name}} {{emp.title}} {{emp.salary}} 해당 코드는 직원들의 정보를 가진 emps배열에서 emp.name이 name을 포함하는 직원만 출력하는 코드입니다. 해당 코드를 .vue파일로 그대로 옮기니 v-if와 v-for를 같이 쓸 수 없다는 오류가 생겼습니다. Vue.js 문서와 stackoverflow에서 검색한 결과 Computed Properties를 사용하라는 결론을 얻었습니다. 해결 방법 computed: { sameName: function () { return this.emps.filter(i..

Vue Component를 js파일로 따로 만드는 작업을 하고 있었습니다. export default { template: `사원목록 검색 아이디 사원명 부서 {{emp.id}} {{emp.name}} {{emp.dept}} `, data() { return { emps : [], name : '', } }, methods: { search() { this.name = this.$refs.name.value; }, }, mounted() { this.emps = JSON.parse(localStorage.getItem('emp')); }, }; 그런데 이 js 파일을 import 하여 사용하던 도중 에러가 발생하였습니다. Component template should contain exactly one ..