Frontend
-
[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..
-
[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..
-
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를 쓰면 ..