본문 바로가기

Vue.js

(4)
postman을 사용하여 API 테스트하기 - 2 이전글 이전글에서 Postman을 설치하고 Mock Server를 만들었다! 이번에는 API를 Mock Server에 등록하고 테스트해보려고 한다. Add request를 선택하여 API를 추가했다. 여기서 API 이름은 list로 해주었고, path에는 {{url}}/list를 입력했다. example을 추가하여 이것 역시 {{url}}/list로 path를 설정해 주고 save를 하였다. 이후 run을 하여 실행시키면 콘솔창에 GET https 주소를 찾을 수 있다. 주소를 입력하면 위처럼 잘 나타나는 것을 확인할 수 있다. Vue.js 프로젝트에서 이것을 사용해 보자. npm install axios --save 터미널에 위의 명령어를 입력하여 axios를 설치해 준다. axios는 서버와 데이터를..
postman을 사용하여 API 테스트하기 - 1 책을 읽고 메모용으로 작성한 글. 책과 달리 postman의 인터페이스가 살짝 다르길래 비슷하게 해봤음. https://www.postman.com/downloads/ Download Postman | Get Started for Free Try Postman for free! Join 25 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com postman을 설치! new를 누르고 Mock Server를 생성 Request URL에 test를 입력하고 next를 눌러 진행한다. Mock Server Name을 설정하고 Moc..
데이터 바인딩 책을 읽고 메모용으로 작성한 글. 자세한 설명없이 코드만으로 어떤 구조인지 알 수 있다... 데이터 바인딩을 하는 여러 방법들 Text raw html Form Textarea Select Check box Radio img src Button Class Style v-for v-if, v-show v-on change key computed, watch Text 데이터 바인딩 DataBinding.vue Hello, {{title}}! data()에 정의된 title과 {{title}}이 바인딩되어 Hello, World가 출력된다. index.js에 해당 내용을 추가 import DataBinding from '../views/DataBinding.vue' const routes = [ { path:..
Vue.js와 Spring Boot 연결 프로젝트를 설치할 곳에 경로를 설정 터미널에서 vue cli설치 npm install –g @vue/cli vue프로젝트 생성 vue create front cd front npm run serve로 실행 npm run serve package.json파일에서 포트번호를 설정 "scripts": { "serve": "vue-cli-service serve --port 8082", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 또는 vue.config.js파일에서 포트번호 변경 module.exports = { server: { port: 8082, }, }; 프록시 서버를 이용하여 spring boot와 vue를 연결 연결하지 않..