JavaScript/Vue

Vue.js 알아보기 - Virutal DOM(가상 DOM), DOM 톺아보기

What is Documnet Object Model(DOM) Document Object Model(이하, DOM)은 HTML과 XML 문서를 위한 API(Application Programming Interface)다. 여기서 각각의 Document, Object, 그리고 Model에 대해 알아보는 것도 좋다고 생각한다. Document : 말 그대로 책, 칼럼 등등을 포함한 정보의 구조화라고 볼 수 있지만, 개발자에게 있어서 Document는 웹 페이지의 이름일 것이다. 개발자에게 있어 DOM은 웹페이지 재료를 위한 모델이라고 볼 수 있다. 그리고 이러한 재료를 Object라고 부른다. Object : 웹 페이지 재료이다. 여기에는 다양한 재료들이 있다. 내용 : 문서, 비디오, 이미지 등등을 포함..

2023. 1. 10. 10:52

JavaScript/Vue

Vue.js 알아보기 - Component, Vue 3 컴포넌트 만들기

What is, and Why we use Component? 먼저 컴포넌트에 대해서 이야기해봐야 겠다. 컴포넌트는 마치 하나의 Instance라고 할 수 있으며, 템플릿을 여러 파로 자를 수 있는 거의 유일한 방법이다. 또한 코드의 재사용성을 높여주는 하나의 방법이라고도 할 수 있다. 일단은 Vue의 Single File Component(SFC)에 대해 이야기해보겠다. Vue의 SFC는 이미 완벽한 유저 인터페이스 단위로, HTML 마크업과 상호작용을 위한 스크립트 그리고 표현을 위한 스타일로 이루어져있다. 추상적인 레벨에서 SFC는 다음과 같은 섹션으로 이루어져 있다. Template Script Style 내가 짠 코드 중에 다음과 같은 코드 부분을 예시로 들어서 이야기해 보겠다. Back Doo..

2023. 1. 9. 23:36

JavaScript/Vue

Vue.js 알아보기 - MVVM 패턴, MVC 패턴 그리고 그 외

What is MVC? MVC에 대해서 들어보신 분은 많을 것이다. Model-View-Controller의 약자로 보통 Spring에서 쓰던 패턴이다. 간단하게 여기서 MVC 패턴에 대해 설명하고 가면 다음과 같다. Model : 일반적인 MVC 패턴에서는 비즈니스와 도메인 로직을 표방하며 데이터베이스를 포함하고 있을 수 있다. View : 정보를 유저에게 보여주는 역할을 한다. Controller : 중간자 역할을 한다. 모델로 부터 받은 데이터를 변환 및 모으고, 이벤트에 대해 적절하게 라우팅 및 변환을 하여 View에게 전달한다. 많은 웹 프레임워크들이 이 MVC패턴을 자유롭게 변형해서 사용한다. 이러한 MVC패턴은 다음과 같이 동작한다. User의 액션이 Controller에 들어온다. Cont..

2023. 1. 9. 21:19