이전 블로그에서 Hello를 화면에 표시하는 실습과 Vue Instance에 대해서 언급했었다.오늘은 Vue 인스턴스를 생성하고, 그 옵션 값에 대해 설명하려한다. [Hello를 화면에 표시하는 실습]https://brainmemory.tistory.com/36 [Vue Instance]https://brainmemory.tistory.com/37 ... Hello를 화면에 표시하는 실습을 하면서 아래 그림을 첨부했었다. Vue Instance에 대한 내용을 작성하면서 아래 그림을 첨부했었다. 그 중 "//......" 에 들어갈 수 있는 옵션들에 대해서 오늘 요약해보려고 한다.options 들에는 아래 그림과 같이 template, el, data, methods, created 등이 있다. optio..

Vue 인스턴스란?- Vue로 화면을 개발함에 있어 가장 중요한 요소- 컴포넌트와 밀접한 관계 있음 개발할 때 아래와 같은 흐름으로 이어나갈 것이다! 1. Vue 라이브러리로 로딩 2. 접근 가능한 Vue라는 객체에, 화면에서 사용할 옵션(데이터, 속성, 메서드 등등)을 포함하여 화면 단위를 생성. 따라서 위와 같은 코드에서 new Vue 를 이용 → Vue를 생성.Vue 안에 사용되는 옵션(데이터, 속성, 메서드) 등이 작성되어있을 경우 해당 옵션을 가진 인스턴스 생성이 될 것이다. 이어서 Vue 인스턴스를 생성에 대한 글은 다음 시간에 할 예정이다....

프로그래밍 언어를 배울 때 초급 단계는 항상 "Hello World!"다.다시 말해서 화면에 "Hello World!"가 표시되도록 개발 실습을 한다. 나 또한 왕초보임으로~ Hello를 찍어본다... Hello~ It's me~~ 코드는 아래와 같이 작성하고~ 저장된 index.html 파일이 존재한는 폴더로 가서, 더블클릭(크롬으로 인터넷 브라우저를 열자)!! 아래 그림처럼 결과가 표시된다.

1. node.js 설치 아래 주소로 들어가서 node.js 설치 파일(LTS)을 다운받는다.LTS) Long Term Support 버전으로 설치 : Current 버전보다 안정적! * node.js를 설치하는 이유- 싱글 파일 컴포넌트 및 NPM를 이용하여 vue 프로젝트를 구성할 예정임으로... 설치 Download 주소 : https://nodejs.org/en/ 2. Chrome 설치 나는 Chrome이 설치되어있어서~ PASS익히 알겠지만, 개발자도구나 아래 플러그인을 사용하기 위해 설치! 3. Vue.js 크롬 플러그인 설치 Download 주소 : https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanh..

저번 SETTING(1)은 테마를 설치했다면 오늘은 아래 package들을 설치할 예정이다~!! 왼쪽 트리 화면에서 [Install] 클릭. 그런 다음, 아래 그림처럼 패키지 검색 후 install~! 마찬가지로 아래 항목들을 순서대로 설치하자~ 1) atom-beautifyindent(들여쓰기)를 맞추는 기능 외 코드를 개발자가 보기 편하게 수정해주는 기능을 가짐 2) autoclose-html시작테그를 작성하는 순간, close 테그를 작성해주는 기능을 가짐- ex) 입력 시 -----> 생성 3) highlight-selected선택된 테그에 대해서 강조해줌- ex) 코드가 주구절절 많은 경우 선택 시 와 연결된 를 강조하여 알려줌 4) color-pickercolor에 대해서 RGB 값을 확인한 ..

오늘은 코딩 실습을 하기위해서 필요한 환경을 SETTING하려는 날~ 오늘은 어디까지 할 수 있을 지는 모르겠지마능~~ 1. 아톰 설치! 1) 아래 주소에서 다운받아서 설치~! Download 주소 : https://atom.io/ 그러면, 바탕화면에 아래와 같은 그림이 표시된다. 2) Theme를 설정 설치 완료 후에는 Theme를 설정이 필요하다.따라서, 아래와 같은 화면에서 내가 설치해야할 부분은 총 두 가지!! ① UI Theme - 직관적인 파일 아이콘을 제공하여 파일 구분이 쉽도록 도와주는 테마!② Syntax Theme - 자바스크립트 코드 구문 강조색의 조합이 잘 되어 있어 코드의 가독성을 높여주는 테마!! ① UI Theme UI Theme는 트리메뉴에서 "Install"클릭 후 "set..