솔솔의 천방지축 개발일기

뷰 개발자 도구 (뷰 크롬 플러그인) 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있음 크롬, 파이어폭스, 사파리에서 모두 지원 가능 Google => vue.js devtools 입력 Chrome 웹 스토어 클릭 하여 chrome에 추가 눌러줍니다. 뷰 개발자 도구 사용 방법 윈도우 기준 Chrome에서 F12 눌러주세요. 개발자도구 오픈! (Mac일 경우, cmd + option + I) 위에 화살표 모양 클릭하여 Vue 선택 (Vue가 안보일 경우, Chrome 종료 후 재실행) 1. 최상위 컴포넌트 2. 최상위 컴포넌트의 상세내용 3. 뷰엑스 속성 확인 4. 특정 시간 동안에 발생한 이벤트 관찰 5. 새로고침 ** 오류 처리 [Download the Vue Devtools exten..

1. Node.js란? 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미 * 서버 사이드 : 웹 화면과 관계된 서버 로직을 처리하는 영역 뷰 CLI (Command Line Interface)를 이용하여 쉽게 뷰 프로젝트를 구성하기 위해서는 Node.js 필요 * CLI : 커맨드 라인 명령어. 윈도우의 명령 프롬프트 창과 맥의 터미널 등, 명령어로 특정 동작을 수행할 수 있는 콘솔 창 2. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드! Current 버전 보다는 LTS 버전을 추천.. 이유는 LTS가 더 안정적이고 라이브러리 ..

Vue.js 개발을 위해 필요한 환경을 설정해보겠습니다. 1. ATOM 에디터 설치 A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. 다운로드한 exe 파일 실행 3. 테마 설치 실행하면 끝이지만 개발할 때 유용한 테마와 패키지 추가로 설치 Themes 클릭 후 seti-ui 입력하여 seti-ui / ..

1. Vue.js 란 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 화면단 라이브러리이자 프레임워크 뷰의 창시자 에반은 앵귤러의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작하며 뷰가 탄생하였다. * 프레임워크 : 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 (뼈대) * 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 2. 장점 배우기 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 가지고있다. 앵귤러를 더 가볍게 쓰고 싶어 만든 프레임워크 앵귤러의 양방향 데이터 바인딩 특성과 리액트의 단방향..