본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section6] 73. 여러 Vue앱과 여러 컴포넌트 Vue.js를 사용하여 페이지 일부(여러 HTML)를 제어하거나, 소위 '싱글 페이지 애플리케이션(SPA)'를 구축할 수 있다. HTML 페이지의 여러 독립적인 부분을 제어하는 경우, 여러 Vue앱으로 작업하는 경우가 많다. (ex: createApp()을 두번 이상 호출하여 여러 앱을 만든다.) # SPA 구축 반면에 SPA를 구축하는 경우, 일반적으로 하나의 '루트 앱'을 작업하고(즉, createApp()은 전체 코드베이스에서 한번만 사용됨), 대신 여러 컴포넌트로 사용자 인터페이스를 구축한다. 여러 Vue앱이 있는 경우에도 컴포넌트를 사용할 수 있지만, 하나로 연결된 큰 사용자 인터페이스를 구축하는 경우, 일반적으로 여러 Vue앱을 사용하지 않는다. 왜일까? Vue앱은 서로 독립적이므로 서로 통신..
[Udemy Vue 완벽가이드 Section6] 72. 복잡한 사용자 인터페이스 구축에 컴포넌트를 사용하는 이유 - 컴포넌트를 결합해서 전체 사용자 인터페이스를 구축할 예정이다. - 컴포넌트를 사용해 여러 템플릿과 각 템플릿에 연결된 로직을 재사용이 가능한 구성요소로 '캡슐화'할 것이다. - 코드와 로직, 모든 템플릿과 화면에 표시되는 내용을 재사용이 가능한 작은 조각으로 분리함으로써 복잡한 앱의 코드단계를 쉽게 구조화하고 관리하는 방법도 볼 예정 ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
[Udemy Vue 완벽가이드 Section6] 71. 컴포넌트 소개 컴포넌트는 유용하다. 여러 개의 li를 생성할 때, 페이지의 다른 부분에서 재사용할 수 있다. 컴포넌트는 큰 애플리케이션을 작은 청크 여러 개로 분할할 때에도 유용하다. 그렇다면, 컴포넌트는 어떻게 생성할까? 그리고 작동원리는 뭘까? # 컴포넌트 생성방법 컴포넌트는 Vue.js가 인식하는 공식 기능이다. 컴포넌트는 Vue 앱에서 생성할 수 있다. createApp을 사용해 Vue 앱을 생성하고, 그 생성된 Vue 앱을 이용해서 컴포넌트를 만든다. Vue 앱을 저장하는 app 상수에서 component 메서드를 호출한다. Vue에 새 컴포넌트를 생성하고 싶다고 알려주는 것. **참고로 app.mount('#app')이 app.component 뒤에 와야한다. app.component(); ## compon..
[Udemy Vue 완벽가이드 Section6] 70. 문제 이해하기 Manuel Lorenz Show Details Phone: 01234 5678 991 Email:manuel@localhost.com Julie Jones Show Details Phone: 09876 543 221 Email:julie@localhost.com 위 예제에 Manuel, Julie 두 친구의 list 항목이 들어있는 ul이 있다. 현재는 Vue앱이 없다. 이를 하나의 Vue 앱으로 관리할 수 있다. 친구 데이터를 HTML 코드에 하드코딩하는 대신, Vue 코드로 Vue 애플리케이션에 보관해보자. 즉, 위 코드처럼 li 항목들을 HTML 코드로 하드코딩하지않고, Vue.js를 사용해 동적으로 렌더링해보자. Vue앱의 data 프로퍼티에 friends로 저장해보자. app.js const ..
[Udemy Vue 완벽가이드 Section5] 66. Vue 앱 생명주기 - 이론, 실습 Vue는 상당히 정교한 생명주기를 가지고 있어, 코드를 실행해야 하는 시점이 언제든 해당 코드를 실행할 수 있다. createApp으로 먼저 앱을 생성한다. 그리고 HTML 코드, 즉 DOM에 mount 메서드로 Vue가 앱을 어디에 렌더링할지 알 수 있도록 mount도 해준다. 앱을 생성하고 화면에 무언가 나타나기 시작할 때, 해당 앱이 몇 개의 지점에 도달한다. 이 지점은 생명주기 단계로, 메서드를 Vue앱 구성객체에 추가하여 해당 시점에서 실행해야하는 코드를 실행시킬 수 있다. (하지만, methods 옵션에 추가하는 메서드와 같다는 건 아니다. methods에 추가하는 메서드는 스스로 호출하는 메서드거나, click과 같은 이벤트에 대해 호출하는 메서드이다.) 생명주기 훅 메서드는 Vue앱 구성객..
자바스크립트 ES6모듈 내보내기/불러오기(export/import) 하나의 파일에서 다른 파일의 코드, 외부 라이브러리를 불러오고 싶다. example: import moment from "moment"; 위 코드는 MomentJS라는 라이브러리를 불러오는 작업을 수행하고 있다. # ES6 모듈 시스템의 이점 - import, from, export, default처럼 모듈 관리 전용 키워드를 사용하기 때문에 가독성이 좋다. - 비동식 방식으로 작동 - 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리한 측면이 있다. # 복수 객체 내보내기/불러오기 하나의 자바스크립트 모듈 파일에서 여러 개의 객체를 내보내고 불러오는 방법을 알아보자. ## 내보내기 import 키워드의 짝꿍인 export 키워드를 사용해서 명시적으로 선언한다. 이때 내보내는 변..
웹 서버 웹 서버는 웹 브라우저와 마찬가지로 제품'군'이다. 웹 브라우저 : 제품'군' 웹 브라우저의 다양한 제품 : Chrome, Safari, Internet Explorer etc.. 웹서버 : 제품'군' 웹 서버의 다양한 제품 : Apache, IIS, Nginx, Live Server 등등. # Liver Server 웹 서버의 제품 중 하나가 바로 Live Server!! - Visual Studio Code의 확장 기능. 아주 유명하고 잘나가는 웹 서버. ## Live Server 켜는 방법 1/ index.html을 오른쪽마우스 클릭 → 'Open with Live Server'를 클릭. 2/ 맨 아래 'Go Live'를 클릭 → Live Server가 켜지면서 'Port: 5500' 이렇게 바뀐다..
[Udemy Vue 완벽가이드 Section5] 64. Ref 활용하기 # input 요소에서 입력값을 가져오는 방법 input 요소로부터 값을 가지고 오는 방법은 여러가지가 있다. 지금까지는 모든 키 입력에 대해 input 이벤트를 수신하여 saveInput 메서드가 실행되도록 하였다. Set Text {{ message }} saveInput 메서드를 통해 해당 input의 현재값을 data 프로퍼티인 currentUserInput에 저장한 다음, 해당 프로퍼티를 이용해 입력된 값을 message로 할당하는 방식. //app.js data() { return { currentUserInput: "", message: "Vue is great!", }; }, methods: { saveInput(event) { this.currentUserInput = event.targ..

티스토리툴바