오늘 푼 코드 카타
138476. 귤 고르기
59041. 동명 동물 수 찾기
59406. 동물 수 구하기
59408. 중복 제거하기
Vue.js
갑자기 무슨 Vue냐, 싶겠지만 간단하고 쉽게 프론트엔드 부분을 구현할 수 있다고 하여 조금 알아보았다.
API를 구현하는데에 있어 프론트에서는 어떻게 이용되는지, 어떻게 로직을 구현해야 효율적인지 알 수 있을 것 같아서 강의를 좀 찾아보았다.
Vue.js의 주요 개념
MVVM 패턴: Vue는 Model-View-ViewModel(MVVM) 패턴을 따른다. 데이터(Model)와 사용자 인터페이스(View)를 연결하는ViewModel 역할을 하며, 이를 통해 데이터와 UI가 실시간으로 동기화된다.
컴포넌트 기반: Vue는 UI를 작은 컴포넌트로 나누어 재사용성을 높이며 각각의 컴포넌트는 독립적으로 동작하고, HTML, CSS, 자바스크립트를 하나의 파일에 포함시켜 관리할 수 있다.
양방향 데이터 바인딩: Vue는 데이터와 UI를 쉽게 연결하는 양방향 바인딩을 제공한다. 이를 통해 데이터가 변경되면 자동으로 UI가 업데이트되고, UI에서 사용자가 값을 입력하면 데이터도 실시간으로 갱신된다.
디렉티브: Vue에서는 HTML 태그에 특별한 기능을 추가할 수 있는 디렉티브가 제공된다. 예를 들어, v-if는 조건부 렌더링을, v-for는 리스트를 렌더링하는 데 사용된다.
반응성 시스템: Vue는 기본적으로 반응형(reactive) 시스템을 제공한다. 데이터가 변경되면 이에 반응하여 UI가 자동으로 업데이트된다. Vue의 핵심 기능 중 하나이다.
예시코드
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: '사과' },
{ id: 2, name: '바나나' },
{ id: 3, name: '체리' }
]
}
})
</script>집중 안될 때 쉴 겸 컴퓨터 관련 영상을 찾아보고 있다. 이러다가 어중이 떠중이 되는거 아닌가 싶다 ㅋㅋㅋ 😂
