프로그래밍 언어를 배울 때 초급 단계는 항상 "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..

어제 간략하게 View, ViewModel, Model에 대해서만 정리해보았다.오늘은, DOM, DOM Listeners, Data Binding등을 정리하면서 흐름을 이해해보려한다. 용어 설명 View 사용자에게 보이는 화면 DOM HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 DOM Listeners 돔의 변경내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 Model 서버에서 가져온 데이터를 담는 용기 Data BindingsView에 표시되는 내용과 모델의 데이터를 동기화 ViewModelDOM Listener와 Data Binding을 제공하는 영역 예를 들어, Naver나 Google 같은 화면에서 "오늘의 운세"를 입력한 후 [검색] 창을 ..

MVVM 패턴이란? : Model - View - ViewModel로 구조화하여 개발하는 방식 용어 설명 Model (데이터를 담는 그릇) 서버에서 가져온 데이터 ViewModel 뷰와 모델의 중간 영역 View 사용자에게 보여지는 화면 다시말해서, 화면 앞단의 화면 동작과 관련된 로직과 화면 뒷단의 데이터 베이스 테이터 처리 로직을 분리하여 코드를 구성한 패턴을 말한다.