Vue.js
-
[JavaScript] Vue.js 프론트 개발 (feat. REST API 통신 with Django/Flask)Frontend/Vue.js 2021. 5. 27. 21:08
Vue.js 초기 설정은 아래를 참고했습니다: https://ninano1109.tistory.com/54?category=939829 JavaScript 기반 Vue.js 웹 개발 초기 설정(feat.Node.js) 웹 개발 시 프론트엔드 개발을 위해 Django와 같은 백엔드 프레임워크에서 한번에 개발을 할 수 있지만, 큰 규모의 프로젝트를 다룬다면, 프론트와 백엔드를 분리해서 REST API로 통신하는 구조로 ninano1109.tistory.com main.js에는 Vue.js에서 개발 시 사용할 모듈들을 등록해 놓고 사용합니다. Vuex를 사용하기 위해 store와 웹 UI CSS 프레임워크인 Vuetify를 추가했습니다. # src/main.js import Vue from 'vue' impo..
-
[Python] Flask REST API 서버 만들기 (feat. MySQL, Vue.js 연동하기)Backend/Flask 2021. 5. 9. 11:58
0. Flask 설치 프로젝트 폴더를 생성하고 flask 패키지를 설치합니다. $ pip install flask 1. 기본 app.py 작성 프로젝트 폴더 내부에 app.py 파일을 만들고 아래와 같이 기본 세팅을 해줍니다. 2. MySQL 연결하기 2-1. flask에서 사용할 수 있는 mysqldb 패키지 설치하기 $ pip install flask_mysqldb 2-2. flask_mysqldb 모듈 import # app.py from flask_mysqldb import MySQL ... mysql = MySQL(app) 2-3. MySQL 계정 설정 및 환경변수 생성하기 # 환경변수 생성 패키지 설치하기 $ pip install python-dotenv app.py와 같은 경로에 .env 파..
-
[JavaScript] Vue.js vuex 설치하기(feat. npm install 오류)Frontend/Vue.js 2021. 4. 19. 22:00
https://ninano1109.tistory.com/54 JavaScript 기반 Vue.js 웹 개발 초기 설정(feat.Node.js) 웹 개발 시 프론트엔드 개발을 위해 Django와 같은 백엔드 프레임워크에서 한번에 개발을 할 수 있지만, 큰 규모의 프로젝트를 다룬다면, 프론트와 백엔드를 분리해서 REST API로 통신하는 구조로 ninano1109.tistory.com Vue.js에서 기본 props와 emit으로 component간 데이터를 주고받을 경우 프로젝트 규모가 커짐에 따라 많이 번거로워질 수 있으므로, vuex가 지원하는 store에서 데이터들을 한번에 관리할 수 있는 중앙집중저장 방식을 활용할 수 있습니다. 1. Vuex 설치 명령어 $ npm install vuex --sav..
-
CORS 오류 해결(feat.REST API 통신 오류 )FullStack/Vue.js+Django 2021. 1. 3. 23:55
프론트와 백엔드를 REST API로 연결하여 개발할 때, 서버를 돌려 브라우저에서 확인해보면 CORS 오류를 마주할 때가 있습니다. Cross-Origin Resource Sharing CORS에러는 외부에서 다른 도메인이 내 로컬 서버에 데이터를 요청할 때 이를 허용하지 않아 생기는 오류입니다. 즉, Javascript의 동일 출처 정책에 따라 도메인이 다른 서버로부터 요청을 받으면, 보안 문제로 간주하여 CORS 이슈를 발생시키고 이를 차단합니다. 예를 들어 프론트(클라이언트) 서버는 localhost:8080이고 백엔드(외부) 서버는 localhost:8000이면, 포트가 달라서 CORS가 발생할 수 있습니다. 이러한 경우 외부 서버에서 보내는 요청의 헤더(Access-Control-Allow-Or..
-
JavaScript 기반 Vue.js 웹 개발 초기 설정(feat.Node.js)Frontend/Vue.js 2020. 12. 22. 22:35
웹 개발 시 프론트엔드 개발을 위해 Django와 같은 백엔드 프레임워크에서 한번에 개발을 할 수 있지만, 큰 규모의 프로젝트를 다룬다면, 프론트와 백엔드를 분리해서 REST API로 통신하는 구조로 개발을 합니다. 프론트용 프레임워크 중 가장 많이 쓰이는 건 React.js이지만, 더 쉽고 빠르게 배워 활용할 수 있는게 Vue.js입니다. JavaScript 언어 기반의 Frontend 프레임워크인 Vue.js를 활용하여 프론트 페이지를 만들기 위한 초기 설정에 대해 알아보겠습니다. 1. node.js 설치 먼저 node.js를 설치합니다. Node.js 설치 후 npm 패키지 매니저로 Vue.js에서 사용하는 패키지들을 설치할 수 있고, package.json 파일에 패키지들을 저장해 놓고 명령어 하..
-
[Vue.js] JavaScript 자바스크립트 Promise return 활용방법(feat.axios)Frontend/Vue.js 2020. 10. 22. 00:40
Promise란? " A promise is an object that may prodeuce a single value some time in future" 즉, 자바스크립트의 비동기 처리 로직에서 순서를 지켜 실행시키고 싶을 때 사용하는 개념입니다. 쉽게 말해 특정 코드의 실행이 끝날때 까지 기다렸다가, 완료되면 리턴값으로 원하는 값을 반환할 수 있습니다. 자바스크립트의 비동기 처리와 콜백함수는 코드가 짜여진 순서대로 실행되지 않기 때문에, 예를 들어 프론트에서 백으로 article 생성 데이터를 보낸 후 article list를 요청해서 받아오고 싶을 때, 방금 생성한 article을 포함하지 않은 article list가 페이지에 보여질 수가 있습니다. 따라서 이러한 경우, Promise를 쓰면 ..