<1101 내용 정리> Vue - 1

Front-end Development

• 웹사이트와 웹 애플리케이션의 사용자 인터페이스(UI)와 사용자경험(UX)를 만들고 디자인 하는 것

- Client-side frameworks(CSR) : 클라이언트에서 화면을 렌더링 하는 방식

• 클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반의 프레임워크

필요한 이유

웹에서 하는 일이 많아짐

1. -> 단순히 무언가를 읽는 곳에서 무언가를 하는 곳으로 변함
   • JavaScript 기반의 Client-side frameworks의 출현으로 매우 동적인 대화형 애플리케이션을 훨씬 더 쉽게 구축 할 수 있게 되었다.
2. -> 다루는 데이터가 많아졌다.

SPA -> CSR 방식

• 페이지 한 개로 구성된 웹 애플리케이션

1. 서버로부터 필요한 모든 정적 HTML을 처음에 한번 가져옴
2. 브라우저가 페이지를 로드하면 Vue 프레임워크는 각 HTML 요소에 적절한 JavaScript 코드를 실행 한다 ( 이벤트에 응답, 데이터 요청 후 UI 업데이트 등 )
   • ex: 페이지 간 이동시 ,페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지 일부 갱신
   • Google Maps, 인스타 그램 등의 서비스에서 갱신 시 새로고침이 없는 이유

1. 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드
2. 다음 JavaScript를 사용하여 DOM을 업데이트 하고 페이지를 렌더링

- 장점

1. 빠른 속도
   • 페이지 일부를 다시 렌더링 할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 일반적으로 더 빠름
   • 서버로 전송되는 데이터의 양을 최소화
2. 사용자경험
   • 새로고침이 발생되지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다.
3. front-end와 back-end의 명확한 분리
   • 대규모 애플리케이션을 더 쉽게 개발하고 유지관리 가능

단점

1. 초기 구동 속도가 느림
   • JavaScript가 다운로드, 구문 분석 및 실행 될 때까지 페이지가 완전히 렌더링 되지 않기 때문
2. SEO(검색 엔진 최적화)문제
   • 페이지를 나중에 그려나가는 것이기 때문에 검색에 잘 노출되지 않을 수 있다.

Vue

• 사용자 인터페이스 구축을 위한 JavaScript 프레임워크

Vue의 학습 이유

1. 쉬운 학습 곡선 및 간편한 문법
2. 반응성 시스템
   • 데이터 변경에 따라 자동으로 화면이 업데이트 되는 기능을 제공
3. 모듈화 및 유연한 구조
   • 애플리케이션을 컴포넌트 조각으로 나눌 수 있음
   • 코드의 재사용성을 높이고 유지보수를 용이하게 함

Vue의 핵심 기능

1. 선언적 렌더링(Declaritive Rendering)
   • HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JavaScript 데이터를 기반으로 어떻게 보이는지 설명할 수 있다
2. 반응형(Reactivity)
   • JavaScript 상태 변경사항을 자동으로 추적하고 변경사항이 발생할 때 DOM을 효율적으로 업데이트

Vue 작성하기

• CDN 및 Application instance 작성

<script src='link'></script>
<script>
	const { createApp } = Vue
    
    const app = createApp({})
</script>

• app.mount()
  - 컨테이너 요소에 애플리케이션 인스턴스를 탑재
  • 각 앱 인스턴스에 대해 mount()는 한번만 호출 가능

<div id='app'></div>


app.mount('#app')

ref()

- 반응형 상태(데이터)를 선언하는 함수
- 인자를 받아 .value 속성이 있는 ref 객체로 래핑하여 반환
- ref로 선언된 변수의 값이 변경되면 해당값을 사용하는 템플릿에서 자동으로 업데이트

const { createApp, ref } = Vue

const app = createApp({
	setup() {
    	const message = ref('Hello vue!')
        console.log(message) // ref 객체
        console.log(message.value) // Hello vue!
        }
   })

• 템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환이 필요하다
• 템플릿에서 ref를 사용할 때는 .value를 작성할 필요가 없다 (automatically unwrapped)

• createApp()에 전달되는 객체는 Vue 컴포넌트
• 컴포넌트의 상태는 setup() 함수 내에서 선언되어야 하며 객체를 반환해야 한다.

• 반환된 개체의 속성은 템플릿에서 사용할 수 있다
• 콧수염 구문을 사용하여 메시지 값을 기반으로 동적 텍스트를 렌더링

Event Listender in Vue

• 'v-on' directive를 사용하여 DOM 이벤트를 수신할 수 있다.
• 함수 내에서 refs를 변경하여 구성 요소 상태를 업데이트

---

템플릿에서의 unwrap시 주의상항

• 템플릿에서의 unwrap은 ref가 최상위 속성인 경우에만 적용가능하다
  
• 문제의 해결을 위해서는 id를 최상위 속성으로 분해하면 됨

일반 변수 대신 굳이 .value가 포함된 ref가 필요한 이유는?

• vue는 템플릿에서 ref를 사용하고 나중에 ref의 값을 변경하면 자동으로 변경 사항을 감지하고 그에 따라 DOM을 업데이트함
• vue는 렌더링 중에 사용된 모든 ref를 추적하며, 나중에 ref가 변경되면, 이를 추적하는 구성 요소에 대해서 다시 렌더링 한다.