FE 썸네일형 리스트형 vue project 를 Tomcat에 배포하기 - 서버 설정이 없는 클라이언트 앱이기 때문에 사용자가 직접 특정 URL로 접속 시 404 오류가 발생함 - 따라서 서버 별 적절한 설정이 필요하다. (대체 경로 추가) - Vue 가이드 문서에 적절한 설정에 대한 예제가 있지만, 톰캣에 대한 예제는 없다. (Vue History 모드 서버 설정 예제) Tomcat 설정 작업 1) WEB-INF 폴더 생성 2) WEB-INF/web.xml 파일 생성 프로젝트명 설명 404 / => 404 Error 발생 시 /로 이동시켜, URL 탐색을 진행함 3) 빌드 후 dist 된 폴더에 WEB-INF 폴더 이동 (dist/WEB-INF) - 아래 작업을 해두면 빌드 시 dist 폴더 아래에 WEB-INF 폴더가 위치한다. - public 폴더 밑에 생성한 WEB-.. 더보기 4. 라우터 & HTTP 통신 라우팅? - 웹 페이지간의 이동 방법이다. - 싱글 페이지 애플리케이션 (SPA)에서 주로 사용한다. * SPA: 페이지 이동 시마다 서버에 웹 페이지를 요청해 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아놓고 페이지 이동 시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 - 화면의 깜빡거림 없이 화면을 매끄럽게 전환할 수 있다. - 뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면을 전환한다. 이런 프런트엔드 프레임워크를 사용하지 않고 HTML로도 라우팅 자바스크립트 라이브러리를 이용해 라우팅 방식의 페이지 이동을 구현할 수 있다. 뷰 라우터 - 뷰에서 라우팅 기능을 구현할 수 있도록 하는 공식 라이브러리 태그 설명 페이지 이동 태그. 화면에 로 표시되며 클릭하면 to.. 더보기 3. 뷰 컴포넌트 통신 3. 뷰 컴포넌트 통신 [컴포넌트간 통신과 유효범위] 뷰는 컴포넌트마다 자체적으로 고유한 유효범위를 갖는다. 따라서 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다. 따라서 뷰에서 미리 정의해놓은 데이터 전달 방식에 따라 일관된 구조로 애플리케이션을 작성하게 된다. [상하위 컴포넌트 관계] 기본적인 데이터 전달 방법이 상위 - 하위 컴포넌트 간의 데이터전달 방법이다. 상위 -> 하위 : props 라는 특별한 속성을 전달 하위 -> 상위 : 이벤트만 전달 가능 상위에서 하위 컴포넌트로 데이터 전달하기 // 하위 컴포넌트의 props 속성 정의 방식 Vue.component('child-component', { props: ['props 속성 이름'], }); 1. new Vue()로 인스턴스를 생성한다.. 더보기 2. 인스턴스 & 컴포넌트 1. 뷰 인스턴스 - 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성되어야 하는 기본 단위이다. 뷰 인스턴스 생성 New Vue ({ ... }); 뷰 인스턴스 형식은 위와 같다. [Hello Vue.js 를 출력하는 샘플 코드] {{ message }} 뷰 인스턴스 옵션 속성 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다. 예를 들어 위 예제에서는 data라는 미리 정의되어있는 속성을 사용했고 그 안에 message라는 새로운 속성을 추가해 Hellovue.js! 라는 값을 주었다. el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미한다. 예제에서의 '#app'은 돔 요소 중 app 이라는 아이디를 가진 요소를 의미하고 #선택자.. 더보기 1. vue 개발 환경 구축 작년에 공부했던 vue 기초 내용을 복습해보자! 무려 17년 4월부터 8월까지 공부한 내용.. 더보기 ES6 - 스프레드 오퍼레이터 스프레드 오퍼레이터는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다. 기존 자바스크립트의 객체 복제 방식 // 객체의 값을 복사하는 경우 var obj = { a : 10, b : 20 }; var newObj = { a : obj.a, b : obj.b }; console.log(newObj); // {a: 10, b: 20} // 배열의 값을 복사하는 경우 var arr = [1,2,3]; var newArr = [arr[0], arr[1], arr[2]]; console.log(newArr); // [1, 2, 3] 객체 복사 시 새로운 객체에 속성들을 선언하고 일일이 접근하여 대입해주어야 한다. 스프레드 오퍼레이터를 사용하면 타이핑할 코드의 양이 확연히 줄어든다. 스.. 더보기 ES6 - 향상된 객체 리터럴 기존 객체 정의 방식기존 객체 정의 방식은 다음과 같다. var dog = { name : 'khan', bark : function() { console.log('멍멍'); } }; 축약 방식 (1) 객체를 정의할 때 속성과 값이 같으면 아래와 같이 축약 가능 var name = 'khan'; var dog = { // name : name name }; console.log(dog); // {name : 'khan'} 축약 방식 (2) 속성에 함수를 정의할 때 function 예약어 생략 가능 const dog = { bark() { console.log('멍멍'); } }; dog.bark(); // 멍멍 더보기 ES6 - 화살표 함수 (Arrow Function) 화살표 함수 (Arrow Function) 기존의 함수 정의 방식 var a = function() { console.log('test'); }화살표 함수를 이용한 함수 정의 var a = () => { //... }; 화살표 함수 사용 예시// 화살표 함수를 이용한 함수 정의 var a = () => console.log('test'); // {} 필요 없음 a(); var b = () => { // 여러줄 일 때는 {} 사용 var name = 'gy '; var age = 26; return name + age; }; console.log(b()); //gy26 var c = (name, age) => { // 인자가 있을 때 console.log(name, age); }; c('gy', 26); .. 더보기 ES6 - const & let 새로운 변수 선언 방식 const와 let let- 한번 선언 시 재선언 불가let a = 10; let a = 20; // Identifier 'a' has already been declared - 물론 아래처럼 재할당은 가능하다.let a = 10;a = 20; const- 한번 값 할당 시 재할당 불가const a = 10;a = 20; // Uncaught TypeError : Assignment to constant variable - 객체나 배열로 선언 시 객체의 속성이나 배열의 요소는 변경 가능하다.// 객체const a = {name:'gy', age:26};console.log(a.name); // gya.name = 'test';console.log(a.name); // test //.. 더보기 이전 1 다음
