
🔍슬롯(Slot)이란? 슬롯은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구이다. (=기존 컴포넌트 재사용성을 높여줌) 컴포넌트에 콘텐츠 혹은 다른 컴포넌트를 또다른 방식으로 주입시킬 수 있는 방법 🔍슬롯 기본 예제 Slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 함. 부모 컴포넌트인 About.vue에 아래 코드를 작성 한다. 그럼 자식 코드의 slot 태그 위치에 해당 코드가 추가되어 로드된다. 만약 slot을 두 개 만들고 각기 다른 자리에 html 코드를 넣고 싶다면 slot에 이름을 붙여주면 된다. 그럼 header 이름을 가진 slot 태그에 해당 코드가 추가되며 만약 default로 지정할 경우 이름이 정해지지 않은 곳에 추가됨. 만약..

위와 같은 코드를 분석해 보면 거의 유사한 중복 코드가 작성되었다고 할 수 있다. 개발자는 언제나 간결하고 중복 없는 효율적인 코드가 필수이기 때문에 이런 경우 뷰 컴포넌트를 활용할 수 있다. 1. 컴포넌트란 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이다. 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 된다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다. 각각의 컴포넌트 간 데이터의 이동은 단방향 이동만 가능함. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때에는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식..

🤍싱글 페이지 애플리케이션(Single Page Application, SPA)이란? 서버로부터 매번 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 or 웹 사이트, 단일 페이지로 구성되어 있음. SPA에서 HTML, JS, CSS 등 모든 코드는 하나의 페이지로 불러오거나 적절한 자원들을 동적으로 불러들여 문서에 추가함. -> 사용자의 동작에 응답하는 방식 전통적인 웹 방식 : 새로운 페이지 요청 시마다 정적 리소스가 다운되고 전체 페이지를 다시 랜더링하는 방식을 사용. =>매번 새로고침이 발생되어 사용성이 떨어짐, 변경이 필요없는 부분까지 전체 페이지를 갱신하므로 비효율적임. 🤍SPA 특징 1. 라우팅 사용자가 태스크를 수행하기 위해 어떤..