Development Artist

Life Cycle 이전 시간까지 우리는 Vue의 디자인패턴과 그에 따라 어떻게 동작하는지 살펴 보았는데요, 이번 시간에는 Vue의 라이프 사이클과 그에 따라 // src/views/AboutPage.vue Home | About 이곳은 About Page. COUNT:{{cnt}}, ONE:{{data1}}, TWO:{{data2}}, THREE:{{data3}} click 그 다음, src 아래에 router.js 파일을 생성해줍니다. HomePage는 / 경로로, AboutPage는 /about 경로로 사용하기 위한 설정을 담고 있습니다. // /src/router.js import Vue from "vue"; import VueRouter from "vue-router"; import Home f..

Design Pattern 이전 장에서, 깡통 Vue 프로젝트를 하나 생성하고 실행도 시켜보았습니다. 이제 궁금해집니다. 어떻게 저런 모양을 하고 있는 것이지? 이것을 이해하기 위해서는 Vue의 디자인 패턴을 알아야합니다. 구글링해보면 알겠지만, Vue의 디자인 패턴은 MVVM 입니다. MVVM은(Model-View-ViewModel)의 약자입니다. 각자의 역할이 무엇일까요? ‘View’는 사용자에게 보여지는 UI 부분이 됩니다. ‘Model’은 데이터가 들어있습니다. ‘ViewModel’은 ‘Model’의 데이터를 가져다가 View에 바인딩합니다. 이렇게 설명하면 잘 와닿지가 않습니다. 실제 코드를 한번 봐볼까요? 아래는 src/main.js 입니다. Vue가 실행되면 가장 먼저 main.js를 보게 ..

Create Vue Project 이전 장에서, Vuejs를 시작하기 위해 nodejs, npm, vue-cli 설치를 완료했습니다. 이제는 Vue 프로젝트를 시작해봅시다. CLI를 켭니다. ( 저는 Git bash ) vue create [원하는 프로젝트 명] 그러면 다음과 같이 뜰겁니다. Vue 3는 2020년 9월 19일에 출시되어 2022년 2월 즈음 정식 기본 버전으로 채택된 것으로 알고 있습니다. 하지만, 여전히 Vue 2를 지원하는 라이브러리가 많이 있는 상황입니다. 따라서, 이번 포탈 개발은 Vue 2로 진행하였습니다. Vue 3와 Vue 2의 차이점은 https://www.samsungsds.com/kr/insights/vue_js_3.html 다음 링크를 참고 바랍니다. 아래와 같이 V..

Install 일단 지금 Vuejs를 시작하려는 PC의 환경이 다양할텐데요, OS의 차이라던지, CLI의 차이라던지. 저는 Window11, Git bash로 진행을 하는 점 참고 부탁드립니다. Vuejs는 패키지 관리 툴로 npm을 사용합니다. ( 가령 Linux에서는 rpm, yum, apt-get. 파이썬에서는 pip.) 따라서, Vuejs를 시작하기전에 npm이 설치가 되어야 하는데요, npm은 nodejs를 설치하게 되면 자동적으로 설치가 됩니다. 먼저 nodejs와 npm이 PC에 설치되어 있는지 확인해 봅시다. node --version # or node -v npm --version # or npm -v 설치가 안되어 있다면, https://nodejs.org/en/ 해당 페이지로 접속하여..

이슈 router 설정하면서, 다음과 같이 multi-word로 구성을 해야한다고 하면서 빌드가 안되는 모습. 해결 multi-word로 구성을 해주면 된다. ex) ProfileView.vue 와 같이... 원인 html 태그와 혼동을 없애기 위함이다.

이전 포스트에서 깡통 Vue 프로젝트를 생성하는 법을 기록하였다. 지금 포스트는 Vuetify 설치에 대한 기록이다. Vuetify Vuetify를 설치하는 것은 굉장히 쉽다. # vue add vuetify Veutify 2 를 선택. Check > package.json 파일 > vue.config.js 파일

DOM (Document Object Model) 웹 페이지에 대한 인터페이스. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공. DOM은 원본 HTML 문서의 객체 기반 표현 방식. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점. DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않습니다. DOM은 브라우저에서 보이는 것이 아니다. 브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합. 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과 다르다. 이는, 렌더링 되는 요소만이 관련 있..

1. Class, Object, Instance ( https://geonlee.tistory.com/11 ) Class : 틀 Object : 추상적. 구현될 만물. Instance : 실체화 된 것. 2. 추상클래스와 인터페이스의 차이점 추상클래스 : 클래스내부에 abstract으로 해서 자식에서 알맞게 써라. Interface : 구현 객체가 같은 동작을 한다는 것을 보장하기 위함. 3. Controller, Service, DAO(mapper), Component 차이 4. ArrayList, LinkedList, Vector 차이 + JAVA Collection Framework https://hwan1001.tistory.com/10 5. StringBuilder vs StringBuffer ..