Web108 Vue.js개념 총정리(5)_vue실행도구,cli설치 1.Vue CLI란 Command Line Interface의 약자로 명령어를 통한 특정액션을 수행하는 도구(실행도구) 이다. 기본 vue 개발환경인 프로젝트환경 세팅을 해주기 때문에 폴더 구조에 대한 고민, build,lib구성,webpack설정은 어떻게 해야되는지 등에 대한 고민을 덜 수 있다. Vue CLI를 통해 생성한 프로젝트에서 개발한 vue 파일들은 결국엔 하나의 파일로 변환되어 주입이 된다. 이때 내부적으로 웹팩으로 돌아가는데 최신 Vue CLI에서는 웹팩의 설정이라던지 웹팩에 대한 내용을 내부적으로 숨기고 있어서 실제로 서비스를 구현, 또는 배포단계까지 확인을 하기 위해서는 웹팩에 대한 기본적인 도구에 대해서는 살펴보는 것이 좋다. 웹팩이란 ? 서로 연관 관계가 있는 웹 자원들을 JS, .. 2021. 2. 2. Vue.js개념 총정리(4)_템플릿문법,데이터바인딩,데이터변화감지 1.템플릿 문법이란 뷰의 템플릿은 HTML, CSS 등의 마크업속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성을 말한다. 여기서 템플릿 문법이란 뷰로 화면을 조작하는 '방법'을 의미하며 템플릿 문법은 크게 데이터바인딩과 디렉티브로 나뉜다. 1-1. 데이터바인딩 데이터바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법으로 가장 기본적인 데이터 바인딩 방식은 콧수염괄호({{}}) 이며, 이외에 v-bind 속성이 있다. new Vue({ template : '{{message}}' }); id바인딩 new Vue({ data : { bindId : 'myId' } }) 라이브러리 내부적으로 template 속성에서 정의한 마크업 .. 2021. 2. 1. Vue.js개념 총정리(3)_router(페이지이동),axios(http통신) 1.Router 1-1 라우팅이란 단일 페이지 어플리케이션 SPA에서 가장 먼저 처리해야 하는것이 바로 라우팅이다. 페이지를 이동할 때 서버에 요청하여 새로 페이지를 개인하는것이 아니라, 미리 해당 페이지를 받아놓고 페이지를 이동시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 것으로 이러한 방식을 SPA(Single Page Application)이라고 한다. 라우팅을 사용하여 화면간 전환을 매끄럽게 전환하여 사용자 경험을 향상시킬 수 있다. 1-2. VueRouter 뷰에서는 뷰라우터(VueRouter)라는 공식라이브러리를 통해 라우터기능을 지원한다. *cdn 방식으로 사용할때는 뷰, 뷰 라우터 순서로 기술하여 사용해야한다. 뷰 라우터는 페이지이동 기능을 제공하여 뷰 라우터를 이용하여 뷰로 만든 페이.. 2021. 1. 31. Vue.js 개념 총정리(2)_컴포넌트 통신규칙 1. 컴포넌트 통신 규칙이 필요한 이유 Vue경우 컴포넌트로 화면을 구성하기 때문에 같은 웹 페이지라고 하더라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효범위(Scope)를 가지기 때문이다. 따라서, 직접적으로는 다른 컴포넌트의 값을 참조할 수 없기 때문에 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터전달 규칙을 따라야한다. 상위에서 하위로는 props 속성을 전달하여 데이터를 내려주고 하위에서 상위로는 이벤트를 발생시킨다. 2.상위컴포넌트 → 하위컴포넌트 데이터 전달 2-1. props란 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성. 하위컴포넌트 속성에 정의한다 Vue.component('child-component',{ props:['props속성.. 2021. 1. 30. Vue.js 개념 총정리(1) _특징,장단점,컴포넌트,라이프사이클 -뷰 공식문서 : https://vuejs.org/v2/guide/ -뷰 스타일가이드: https://vuejs.org/v2/style-guide/ -뷰 쿡북 : https://vuejs.org/v2/cookbook/ 1.Vue.js 란 MVVM 패턴의 뷰 모델 레이어에 해당하는 화면단 라이브러리 바뀐 데이터를 DOM에 다시 대입해줘야지만 화면에 변경점이 적용되는것이 일반적인 웹개발방식 이었다면.. → 데이터의 변화를 라이브러리에서 감지해서 화면에 그려주는 반응형을 지원하는 라이브러리가 바로 Vue.js 이다. MVVM은 모델,뷰,뷰모델로 이루어진 패턴이며, 가장 잘 알려진 MVC는 모델,뷰,컨트롤러로 이루어진 패턴이다. MVVM는 뷰모델을 지원함으로서 뷰가 필요한 데이터와 커맨드를 제공해준다. 뷰모델이.. 2021. 1. 29. JSP 주석 오류 (<%-- --%>) 개인적으로 운영업무를 하다보니 소스에 주석을 상세하게 적는게 습관이 되어버렸다. 오늘은 주석때문에 생긴 에피소드를..간단히 적어보고자 한다.=_= http://xxx.xxx.xx/a/b/c.jsp?qry=alsjaorigoarjwgoajirgoajirgo;ajwrgoij 위와 같이 호출 시, 기존에 되던 소스가 갑자기 전혀 동작을 안 하는 문제 발생 Service단은 바꾼게 없고...JSP단에서 주석 작성한게 문젠가? 해서 봤더니 원인은 생각보다 단순(?) 했다. 프로세스가 진행이 되지 않았던 이유는 바로 "주석의 위치" 때문. 태그 파싱시 주석이 안의 내용을 생각하지 않고(?) 제대로 인식이 되지 않은 이유였다. 주석을 지우거나, 꼭 필요한 주석이라면 아래와 같이 태그와 다른 줄에 작성해준다. 간단하지.. 2019. 12. 17. 이전 1 2 3 4 ··· 18 다음
