FrontEnd(Vue, Javascript, JQuery)/Vue (12) 썸네일형 리스트형 Vue 웹 페이지 생성 순서 개인적으로 작성한 ToyProject1을 기준(기본 Vue 프로젝트 생성)으로 알아본다.처음이니까 어떻 돌아가는지나 보자 ※ 필자의 경우 네이버의 vibe가 vue의 참고 페이지로 삼았다. 순서대로 프로젝트 경로, main.js, App.vue, index.html이다. 제일 먼저 실행은 main.js부터 시작이다. 내가 이해한 방식으로 요약하자면"웹 페이지로 만들건데 store와 router라는 javascript import할 것이고, index.html 에 있는 id가 app인 곳에다가App.vue를 삽입(마운트) 할거야"다. 또한 3번 째 사진의 를 통해서 SAP를 구현하는 중요한 부분이다.router.js를 보자. (세세한 라이브러리나 함수같은 경우는 따로 정리할 것이다. 여기서는 기본틀만) .. Vue 명령어 이번에 새롭게 vue를 이용한 사이드 프로젝트를 이용하면서 vue에 대한 흐름을 대략적이나마 이해하게 되었는데아직은 자유롭게 쓰는 느낌이 아니라 약간의 이해만 가지고 쓰는 느낌이 난다.... 명령어에 대해 복기하면서 공부한다. 차근차근 App.vue부터..App.vue- 루트 Component로써 웹이 실행되는데 가장 핵심적인 역할을 한다.- 전역 컴포넌트로써 하위 컴포넌트에 특별한 조치를 취하지 않는 이상 하위 컴포넌트에 영향을 간다. 현재 나의 App.vue와 vuex를 import한 store.js 코드 상태이다. 1. store.commit("setAccount", id);- 개인적인 공부 공간이기 때문에 다른 곳은 이해가 가고 이해됐으므로 Pass- setup()에 있는 store.commi.. Vue 예약어(?) - 이해하고 외우자 Vue에 대해서 간단한 화면이나 data관련 예약어 정도는 알아야 한다. 상위 컴포넌트 ① import axios from 'axios' : Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. → 자동으로 JSON데이터 형식으로 변환 ( 그래서 npm install 이었구나 ) ※ Promise : 비동기 처리를 위한 패턴으로 ES6에서 도입되었다. 프로미스의 등장으로 전통적인 콜백 패턴의 단점을 보완할 수 있게 되었다. → Promise는 비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfilled, rejected) 정보를 .. Node.js/Vue ==============================================================명령어 (내가 Vue프로젝트를 개발하기 위한 간단한 명령어들만 우선 기입)==============================================================Node.js는 기본적으로 최신 버전으로 설치하는 것이 가장 좋다. npm install -g @vue/cli→ vue를 사용할 수 있도록 하는 명령어이다. vue create 프레젝트명→ vue 프로젝트를 만드는 명령어이다. npm run serve→ vue를 local에서 실행시킬 수 있는 명령어이다. npm install axios→ http통신을 할 수 있도록 하기 위한 명령어이다. npm install .. 이전 1 2 다음
