본문 바로가기

IT

[vue.js] 웹팩(webpack) 출처: medium.com/@hgenie14/%EC%9B%B9%ED%8C%A9-webpack-%EC%9D%84-%EC%95%84%EC%A3%BC-%EA%B1%B0%EC%8B%9C%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%B4%EB%B3%B4%EC%9E%90-d80cc2632af8 1. 모듈화 여기, helloWorld()라는 메서드가 정의되어 있는 index.html 파일이 있다. ... 만약, 이 메서드를 다른 페이지에서도 사용해야 한다면 같은 코드를 중복해서 다시 정의해 주어야 한다는 문제가 발생한다. 이런 상황에서는 모듈화를 통해 문제를 해결할 수 있다. ... ↑ index.html function helloWorld() { return 'Hel.. 더보기
[vue.js] vuex Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. Vuex는 기존 Flux의 아키텍처를 따라가고 있고 React로 본다면 Redux와 비교 대상으로 볼 수 있다. Vue.js에서도 Redux를 사용할 수 있지만 Vue.js는 Vuex와의 호환이 좋을 뿐만 아니라 더 직관적으로 개발할 수 있다. 하지만 Vuex는 말 그대로 중앙 집중식 저장소 이기 때문에 props와 event에 얽매이지 않아도 된다. 그렇기 때문에 컴포넌트의 구조가 복잡한 경우에는 props와 event를 통한 데이터 전달보다는 Vuex를 통해 별도의 저장소에서 데이터를 관리하는 것이 올바르다. 대부분 Vuex의 채택은 필.. 더보기
[vue.js] 뷰 CLI 싱글 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 파일로 변환해주는 도구가 필요. ex. 웹팩(웹앱의 자원을 자바스크립트모듈로 변환), 브라우저파이(웹팩과 비슷한 모듈 번들러) 뷰 프로젝트를 쉽게 구성할 수 있게 뷰 CLI 도구를 제공. CLI에서 제공하는 명령어를 이용하면 뷰 애플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성 가능. 웹팩이나 브라우저파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용 가능. .vue 파일을 HTML, css, javascript 파일로 변환해 주기 위한 뷰 로더를 포함. 뷰 CLI 설치 npm install vue-cli -global # vue-cli 설치 vue # vue-cli 설치 여부 확인 webpack-s.. 더보기
[vue.js] 싱글 파일 컴포넌트 체계 싱글 파일 컴포넌트 체계란 .vue파일로 프로젝트 구조를 구조를 구성하는 방식. 확장자 .vue파일은 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일 .vue 파일은 아래와 같은 구조를 가짐. 더보기
[vue.js] 데이터 바인딩 데이터 바인딩 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미. 주요 문접으로는 {{}} 문법과 v-bind 속성 {{}} - 콧수염 괄호 가장 기본적인 텍스트 삽입 방식 v-bind 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식 아이디 바인딩 클래스 바인딩 스타일 바인딩 자바스크립트 표현식도 가능 {{ message }} {{ message + "!!!" }} {{ message.split('').reverse().join('') }} 디렉티브(directive) 뷰 디렉트브란 HTML 태그안에 v- 접두사를 가진 모든 속성들을 의미 ex. 더보기
[Vue.js] Vue 템플릿(Vue template) 뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환 해주는 속성. template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환. 더보기
[vue.js] vue HTTP 통신 (Axios) HTTP 통신웹 앱에서 서버에 데이터를 요청하는 HTTP통신은 필수.HTTP는 브라우저와 서버간에 데이터를 주고받는 통신 프로토콜.브라우저에서 Request하면, 서버에서 Response. 웹앱의 대표적인 사례로는 jQuery의 Ajax가 있음. 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바 스크립트. 뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리 제공.vue resource와 axios가 바로 그것. 뷰 리소스(Vue Resource)뷰 리소스 사용 방법1. CDN을 이용 라이브러리를 로딩2. npm으로 라이브러리를 설치하는 방법npm i vue-resource 예제 프레임워크 목록 가져오기 엑시오스(axios)현재 가장 많이 사용되는.. 더보기
[vue.js] vue 라우터 라우팅(Routing)라우팅 -> 웹 페이지 간의 이동 방법을 말함.라우팅은 SPA에서 주로 사용됨. 화면 전환이 매끄러움. 화면 깜빡임 없이 화면전환 즉, 사용자 경험을 향상 시킬 수 있음. (일반적으로 브라우저에서 요청시 서버 응답을 받으면, 화면 깜빡임 발생)뷰뿐만 아니라 리엑트, 앵귤러 모두 라우팅을 이용해 화면 전환. 뷰 라우터(Vue Router)라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.페이지 간 이동이 자유로움페이지 이동 태그. html의 a태그 역할페이지 표시 태그. 변경되는 url에 따라 컴포넌트를 뿌려줌.예제 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 네스티드 라우터(Nested Router)라우터로 페이지 이동할 때 최소 2개 이상의 컴포넌트를.. 더보기

티스토리툴바