⁂ Vue.js/: 기본 익히기

[Vue.js] 03 Vue 프로젝트를 생성해보자!

Vue 프로젝트를 생성해보자. 우선 명령 프롬프트에서 생성을 해본 뒤 Visual Studio Code에서 생성을 해보려고 한다. 이 때 Visual Studio Code에서 코딩시 들여쓰기 규칙이 맞지 않으면 에러가 발생하니 주의하자. 1. 명령 프롬프트에서 생성해보기 1) project01 프로젝트 생성 (기본옵션으로만 구성) \나만의경로\workspace_vue>vue create project01 방향키로 선택 ? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) npm run serve App running at: - Local: http://localhost:8081/ - Network: http://고정IP:8081..

[Vue.js] 02 Vue 기초 환경설정

1. Vue.js Vue.js는 비교적 최근에 등장한 JavaScript Framework이다. Angular와 React가 지배하고 있던 JavaScript Framework 시장에서 점유율을 꾸준히 높히며 최근에는 React와 Angular의 양자구도보다는 React, Angular 그리고 Vue 이 세가지를 비교하는 글이 눈에 많이 띄고 있다. 이 Vue.js를 사용하기 위해서 우선 환경설정부터 해보려 한다! 1) Node.js 설치하기 우선 Vue.js를 사용하기 위해서 Node.js가 필요하다. Node.js는 Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임이며 서버 프로그램을 작성하는데 많이 사용된다. 아래의 사이트에서 설치프로그램을 다운..

[VUE.JS] 01 SPA와 REST API

VUE.JS를 이해하기 위해선 먼저 SPA와 REST API에 대한 이해가 선행되어야 한다. 그래서 한번 알아보자!! 1. SPA(Single Page Application) SPA란 단일 페이지 어플리케이션를 뜻하며 하나의 페이지 안에서 변화가 필요한 영역 부분만 새로고침(동적) 하는 형태를 말한다. SPA는 적은 트래픽 양으로 서버를 움직일 수 있다는 장점이 있지만 최초의 페이지 로딩시 모든 JS+CSS를 가져와야 해서 초기 로딩 속도가 느리다는 특징이 있다. 이 단일 페이지는 다양한 컴포넌트들로 구성이 되어있다. 1) 컴포넌트(Component) 컴포넌트는 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI 요소를 뜻하며 재사용 가능하도록 구조화 한 것이다. 2) 웹프론트엔드..