[Vue] 01)Basic & Basic 실습

개요

• Front-end 개발은 Web App 또는 Web Site의 UI/UX를 제작하고 관리하는 과정
• Front-end 프레임워크와 라이브러리(React, Angular, Vue.js)를 사용하여 개발 효율성을 높잉고, Web App의 복잡성을 관리
• Front-end 개발에 사용되는 주요 기술은 HTML, CSS, JavaScript

---

Web App 이란?

• 웹 브라우저에서 구동되는 서비스
• 웹 페이지가 그대로 보이는 것이 아닌 디바이스에 설치된 App처럼 보이는 것
• 웹 페이지가 디바이스에 맞는 적절한 UX/UI로 표현되는 형태

SPA(Single Page Application)

• 이전까지는 사용자의 요청에 대해 적절한 페이지 별 template을 반환
• SPA는 서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식
  • CSR(Client Side Rendering) 방식으로 요청을 처리하기 때문

[참고] Server Side Rendering

• 기존의 요청 처리 방식
• Server가 사용자의 요청에 적합한 HTML을 응답

CSR이란

• 최초 하나의 HTML을 받아옴
• 각 요청에 대한 대응을 JavaScript를 사용하여 필요한 부분만 다시 렌더링
  • 필요한 페이지를 서버에 AJAX로 요청
  • 서버는 화면을 그리기 위해 필요한 데이터를 JSON 방식으로 전달
  • JSON 데이터를 JavaScript로 처리, DOM 트리에 반영(렌더링)

CSR의 장점

• 모든 HTML 페이지를 서버로부터 받아서 표시하지 않아도 됨
  • 클라이언트-서버간 통신 즉, 트래픽 감소
  • 트래픽 감소 - 응답 속도가 빨라짐
• 문서 전체를 매번 새로고침하는 것이 아니라 필요한 부분만 고쳐나가므로 각 요청이 끊김없이 진행
  • UX 향상
• BE와 FE의 작업 영역을 명확히 분리 할 수 있음
  • 협업이 용이

반면,

• 첫 구동 시 필요한 데이터가 많으면 많을수록 최초 작동 시작까지 오랜 시간이 소요
• Naver, Netflix, Disney+ 등 모바일에 설치된 Web-App을 실행하게되면 잠깐의 로딩시간이 필요
• 검색 엔진 최적화(Search Engine Optimization)가 어려움
  • 서버가 제공하는 것은 텅 빈 HTML
  • 내용을 채우는 것은 AJAX 요청으로 얻은 JSON 데이터로 클라이언트(브라우저)가 진행
• 대체적으로 HTML에 작성된 내용을 기반으로 하는 검색 엔진에 빈 HTML을 공유하는 SPA 서비스가 노출되기는 어려움

---

Front-end Framework = HTML+CSS+JS를 더 편하게 작업하기 위한 틀

---

Vue

MVVM Pattern

• 소프트웨어 아키텍처 패턴의 일종
• 마크업 언어로 구현하는 그래픽 사용자 인터페이스의 개발을 Backend(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함
• View - 우리 눈에 보이는 부분 = DOM
• Model - 실제 데이터 = JSON
• View Model(Vue)
  • View를 위한 Model
  • View와 연결(binding)되어 Action을 주고 받음
  • Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경됨
  • View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨

MVVM Pattern 정리

• MVC 패턴에서 Controller를 제외하고 View Model을 넣은 패턴
• View는 Model을 모르고, Model도 View를 모름
  • DOM은 Data를 모름. Data도 DOM을 모름(독립성 증가, 적은 의존성)
• View에서 데이터를 변경하면 View Model의 데이터가 변경되고, 연관된 다른 View도 함께 변경됨

---

Vue instance

<script>
	const vm = new Vue()
	console.log(vm)
<script>

el(element)

• Vue instance와 DOM을 mount(연결)하는 옵션
  • View와 Model을 연결하는 역할
  • HTML id 혹은 class와 마운트 가능
• Vue instance와 연결되지 않은 DOM 외부는 Vue의 영향을 받지 않음
  • Vue 속성 및 메서드 사용 불가

<script>
	const app = new Vue({
		el: '#app'
	})
	console.log(app)
</script>

• 새로운 Vue instance 생성
• 생성자 함수 첫번째 인자로 Object 작성
• el 옵션에 #app 작성 = DOM 연결
• 인스턴스 출력

<script>
	const app = new Vue({
		el: '#app'
	})
	console.log(app)
</script>

• Vue와 연결되지 않은 div 생성
  • 두 div 모두에 {{message}} 작성
• message 속성이 정의되지 않았다는 경고와 {{message}}가 그대로 출력되는 차이

data

• Vue instance의 데이터 객체 혹은 인스턴스 속성
• 데이터 객체는 반드시 기본 객체 {}(Object) 여야 함
• 객체 내부의 아이템들은 value로 모든 타입의 객체를 가질 수 있음
• 정의된 속성은 interpolation{{}}을 통해 view에 렌더링 가능함
• Vue instance에 data 객체 추가
• data 객체에 message 값 추가
• 추가된 객체의 각 값들은 this.message 형태로 접근 가능

<script>
	const app = new Vue({
		el: '#app',
		data: {
			message: 'Hello, Vue'
		},
	})
</script>

---

method

• Vue instance의 method들을 정의하는 곳
• methods 객체 정의
  • 객체 내 print method 정의
  • print method 실행 시
  • Vue instance의 data내 message 출력
• 콘솔창에서 app.print() 실행

<script>
	const app = new Vue({
		el: '#app',
		data: {
			message: 'Hello, Vue!'
		},
		methods: {
			print: function() {
				console.log(this.message)
			},
		}
	})
</script>

• method를 호출하여 data 변경 가능
  • 객체 내 bye method 정의
  • print method 실행 시
  • Vue instance의 data내 message 변경
• 콘솔창에서 app.bye() 실행
  • DOM에 바로 변경된 결과 반영
  • Vue의 강력한 반응성(reactivity)

[Caution]

• 메서드를 정의할 때, Arrow Function을 사용하면 안됨
• Arrow Function의 this는 함수가 선언될 때 상위 스코프를 가리킴
• 즉 this가 상위 객체 window를 가리킴
• 호출은 문제없이 가능하나 this로 Vue의 data를 변경하지 못함

 

• MBTI 타입을 인풋하면 해당 타입에 대한 설명이 있는 페이지로 이동됨

MBTI 검사기

    const app = new Vue({
      el: '#app',
      data: {
        allTypes : ['istj', 'isfj', 'infj', 'intj', 'istp', 'isfp', 'infp', 'intp', 'estp', 'esfp', 'enfp', 'entp', 'estj', 'esfj', 'enfj', 'entj'],
        mbtiType : 'mbtiType'
      },
      methods: {
        redirection: function(mbtiType, allTypes){
          if(allTypes.includes(mbtiType)){
            window.open(`<a href=https://www.16personalities.com/ko/성격유형-$>https://www.16personalities.com/ko/성격유형-$</a>{mbtiType}`)
          }
        }
      }
    })
  

• 입력되는 글귀가 합해져서 페이지에 출력

테스트

첫 번째 입력 : {{ message1 }}

두 번째 입력 : {{ message2 }}

합산 입력 : {{message1}} {{message2}}

   var app = new Vue({
        el : '#app',
        data: {
          message1: 'message1',
          message2: 'message2',
        }
   });