Vue.js 프로젝트 투입 일주일 전

Vue.js는 UI 개발을 위한 Progressive Framework(웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발) 이다웹 : 브라우저 → 접근성이 용이하다앱 : 빠르다Vue.js는 SPA 개발을 위한 FE Framework 이다맨 처음 웹사이트

다양한 플러그인을 통해 개발 생산성을 극대화시킬 수 있다확장성 있는 서버 개발을 JS로 가능하도록 하는 JS 런타임 환경원래 JS는 클라이언트(브라우저)에서 동작하는 언어이나, Node.js는 크롬의 V8 엔진을 이용해 브라우저에서 JS가 동작하듯이 서버에서 작동하게

Vue CLI는 앞으로 Vue 프로젝트를 생성할 때 마다 사용해야하므로 -g(global) 옵션으로 설치한다Default(Vue 3)을 선택한다기본 8080 포트에서 실행되며, 다른 포트에서 실행을 원할 시 --port 3000 과 같이 옵션을 추가한다node_modu

사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 라우팅이라고 한다라우팅에 대한 이해vue-routerprefetch컴포넌트의 로딩 시점Vue와 같은 SPA는 페이지를 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아닌, 클라이언트에서 미리 가

View, Data, Code의 세트컴포넌트는 재사용이 가능 → 다른 컴포넌트에 import 해서 사용src/components다른 vue 파일에서 호출해 공통으로 사용할 수 있는 vue 컴포넌트 파일src/views흔히 페이지라고 부르는, 화면 하나하나에 해당하는 v

Mock 서버는 실제 서버처럼 클라이언트로부터 요청을 받으면 응답하는 가짜 서버이다Postman의 Mock 서버 기능을 활용한다Postman 공식 홈페이지에서 데스크톱 앱을 설치한다Mock Servers 탭에서 Create New를 통해 Mock Server를 생성한다

실제 프로젝트에선 모든 데이터를 서버로부터 가져오고, 사용자로부터 생성된 데이터는 서버에 보내 DB에 저장해야 한다Vue에서 서버 통신을 위해 가장 많이 사용하는 Axios를 이용해서 API 호출 메소드를 만들고 앞으로 구현하는 모든 Vue 컴포넌트에서 사용할 수 있도

src/components 폴더에 PageTitle.vue 파일을 추가한다/src/components/PageTitle.vuesrc/views폴더에 NestedComponent.vue 파일을 추가한다/src/views/NestedComponent.vue컴포넌트에서 다른

Vue는 프로젝트 규모가 커질수록 관리하기 힘들었다data, computed, watch, methods 등 컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리가 힘들었다컴포지션 API는 setup 메소드 안에서 한 덩어리로 연관성 있는 로직을 코드로 구현할 수

프로젝트에서는 클라이언트인 Vue 애플리케이션과 서버 애플리케이션을 분리해서 개발하고 각각을 별도의 포트로 운영하게 되는 경우가 많다이렇게 클라이언트와 서버가 다른 포트를 사용할 때, HTTP 요청을 하게 되면 CORS 문제가 발생한다이러한 문제를 해결하기 위해 Pro

애플리케이션이 복잡해지고 컴포넌트의 수가 많아지면 컴포넌트 간 데이터 전달이 어려워진다데이터를 store에 저장하고, 프로젝트 전체에서 사용할 수 있도록 해준다모든 Vuex 애플리케이션의 중심에는 store가 있다Vuex 저장소가 일반 전역 객체와 다른 점은 2가지가

build 명령어를 실행하면 프로젝트 배포를 위한 파일이 프로젝트 루트 디렉토리의 dist 폴더에 생성된다생성된 dist 폴더에는 css, img, js 폴더와 index.html이 생성된 것을 확인할 수 있다js 폴더에는 우리가 작성한 모든 js파일과 vue 컴포넌트