FE/vue 썸네일형 리스트형 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월까지 공부한 내용.. 더보기 이전 1 다음
