JudithHopps JudithHopps

Axios란? Vue 프로젝트에서 서버와의 통신을 위해 가장 많이 사용하는 패키지 중 하나 서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리 Promise 객체 형태로 값을 return한다. 터미널에 아래 명령어를 입력하여 설치해준다. npm install axios --save src/mixins.js파일을 생성해주세요 import axios from "axios"; export default { methods: { async $api(url, method, data) { return ( await axios({ method: method, url, data, }).catch((e) => { console.log(e); }) ).data; }, }, }; main.js 파일을 아래와 ..

[Vue.js 프로젝트 투입 일주일 전] part 7 서버 데이터 바인딩 실습 파트이다. router/index.js main.js mixins.js DataBindingList2.vue 포스트맨 add request를 3~4번 반복하고 있다... 하지만 되지 않는다 가장 화나는 것은 다른 사람의 mock서버는 정상 작동이라는 것이다. 가상 서버 list url링크로 들어가면 아래와 같이 뜬다. 1시간 동안 헤맸다..... 왜 안될까............뭐가 문제지 postman 문제 같은데 초기화하고, 삭제하고 다시 생성해도 문제는 반복된다. json으로도 설정했고, add request -> add example 순으로 잘 했는데... 왜 안될까............... json 코드를 수정한 결과..

Mock 서버 실제 서버처럼 클라이언트로부터 요청을 받으면 응답하는 가짜 서버를 말한다. 사용하기 위해 Postman이란 툴 설치 필요 다운로드 링크 ↑ Postman으로 Mock 서버 생성 방법 mock 열기 로그인 (계정이 없다면 생성) 왼쪽 메뉴바 Mock servers 선택 create mock 선택 후 아래 화면과 같이 입력 5. mock 서버 이름을 입력한 후 next 입력 6. 오른쪽 상단 No Environment 박스 선택 후 mock(server 이름 필자는 mock이다) 클릭 API 반환 데이터 설정 1. test 옆 화살표 클릭 후 default 클릭 2. Body 부분을 아래와 같이 수정해준다. 3. mock 서버에 커서를 가져가고 우츨 버튼을 눌러 run server을 클릭한다...

데이터 바인딩이란? Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. (React는 단방향 데이터 바인딩 지원) ※ 양방향 데이터 바인딩이란? 모델에서 데이터를 정의한 후 뷰와 연결하면 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 변경사항이 반영되는 것 데이터 바인딩 예제 1. vue-project\src 폴더에 DataBinding.vue 파일을 생성한 후 다음 코드 작성 Hello, {{title}}! export default { data() { return { title : 'world' }; } } 2. vue-project\src\router 폴더에 index.js 파일을 열어 코드 추가(이때, 기존 코드는 삭제하지 않는다. ) import DataBinding from ..

이번 포스팅에서는 Vue 컴포넌트에 대해서 알아보고자 합니다. 컴포넌트란 ? View, Data, Code의 세트라고 이해할 수 있다. 컴포넌트는 HTML 코드, 자바스크립트 코드, 데이터가 존재한다. 가장 큰 장점은 재사용이 가능하다는 것이다. 즉, 다른 컴포넌트에 import가 가능하다. Snippet 설정하기 snippet이란 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 불러와 사용하는 기능이다. snippet을 사용하는 방법은 파일 > 기본설정 > 사용자코드조각구성 이다. 그 후 vue를 입력하고 아래와 같이 내용을 수정해준다. "Generate Basic Vue Code": { "prefix":"vue-start", "body": [ "\n" ], "description": "Genera..

Vue 프로젝트를 빠르게 구성하고, 빌드, 배포할 수 있게 도와주는 플로그인을 이용합니다. Vue CLI란? Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다. Vue Router(라우터) 설정 라우팅이란 사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 의미한다. 즉, url 주소에 따라 페이지가 전환되는 것 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. Vue-Router 설치 cmd(터미널)에 다음 명령어를 입력해주세요 cd vue-project 입력 vue add router 입력 'use..

Vue.js를 활용하기 위해 설치해야 할 것이 있습니다. 설치 필요 Visual Studio Code 설치하기 Node.js 설치하기 (짝수버전 추천) + ) 추가로 크롬 설치하기 Vs Code (Visual Studio Code) 환경구축 Extensions 또는 cmd+sjoft+x를 눌러 확장 프로그램 검색 켜기 vuter 검색 후 설치 prettier-code formatter 검색 후 설치 cmd (터미널) 환경구축 npm install -g @vue/cli 입력 npm create vue-project 입력 후 default 3 선택 cd vue-project 입력 npm run serve 입력 아래와 같이 창이 뜨면 성공입니다. Local 뒤에 있는 url 링크에 들어가면 아래와 같이 창이 ..

Vue.js란? 웹 개발을 단순화하고 정리하기 위해 개발된 자바스크립트 프론트엔드 프레임워크이다. SPA(단일 페이지 애플리케이션) 개발을 위한 프론트엔드 프레임워크이다. 사용자 인터페이스 개발을 위한 Rrogressive Framework이다. Angular와 React에서 부족함을 제거하고 장점을 모아두었다. 프레임워크 선택 : Angular vs React vs Vue 등장 순서 : Angular → React → Vue 세 개의 프레임워크 중 한 가지를 고르자면 Vue를 고르겠다. 이유는 가장 빠르고 직관적으로 익힐 수 있기 때문이다. Vue.js의 장점 직관적이고 배우기 쉽다. 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있다. Angular의 장점(데이터 바이딩) ..