vue7 [Vue] Vue.js LifeCycle 안녕하세요, BTC 블랙아웃입니다! 오늘은 Vue.js의 핵심 개념 중 하나인 컴포넌트 라이프사이클에 대해 자세히 알아보려고 합니다. Vue.js 애플리케이션에서 컴포넌트는 생성부터 소멸까지 여러 단계를 거치게 되며, 이 각 단계에서 Vue는 특정한 "라이프사이클 훅"을 제공합니다. 이러한 훅을 효과적으로 사용하면, 데이터 로딩, 애니메이션, 리소스 정리 등 다양한 작업을 "적절한 시점"에 수행할 수 있습니다. 1. Vue 컴포넌트 라이프사이클 이해 Vue 컴포넌트의 라이프사이클은 크게 생성(Creation), 마운트(Mounting), 업데이트(Updating), 소멸(Destruction)의 네 가지 주요 단계로 나뉩니다. 이 각 단계에서 Vue는 개발자가 특정 코드를 실행할 수 있도록 라이프사이클 .. 2023. 12. 7. Vue Router : 네비게이션 가드 여러분 베하! 오늘은 Vue router의 네비게이션 가드라는 것을 알아볼게요. 네비게이션 가드란? 명칭에서 느껴지는 것처럼 Vue.js 애플리케이션에서 라우터 네비게이션을 제어하기 위한 기능입니다. 쉽게 말해 Vue Router를 통해 특정 URL에 접근할 때 해당 URL의 접근 또는 탐색을 막는(보호하는) 방법을 말합니다. 또한 리디렉션을 도와주는 역할도 합니다. 네비게이션 가드를 잘 사용하면 특정 조건에 따라 라우팅을 허용하거나 막을 수 있습니다. 가드의 인자 to : 이동할 라우트 객체의 정보(객체) from : 이동하기 전 라우트 객체의 정보(객체) next : 다음 단계로 진행하기 위한 함수. 트리거 되는 탐색 가드별 정확히 한 번만 next를 호출해야 합니다. 그렇지 않으면 영원히 훅이 해결.. 2023. 12. 6. [Vue]Vue.js 컴포넌트 디자인 패턴 안녕하세요, BTC 블랙아웃입니다! Vue.js에서 컴포넌트는 애플리케이션 구축의 핵심 요소입니다. 오늘은 Vue.js에서 사용할 수 있는 다양한 컴포넌트 디자인 패턴을 알아보고, 이들이 애플리케이션의 유지 보수성과 확장성에 어떤 영향을 미치는지 살펴보겠습니다. 1. 컴포넌트 디자인 패턴이란? 컴포넌트 디자인 패턴은 Vue.js 컴포넌트를 설계하고 구현할 때 따르는 일련의 '베스트 프랙티스'입니다. 이러한 패턴을 활용하면 더 가독성 높고, 재사용 가능하며, 테스트하기 쉬운 코드를 작성할 수 있습니다. 2. 주요 컴포넌트 디자인 패턴 1) 단일 책임 컴포넌트 하나의 컴포넌트는 하나의 기능에만 초점을 맞춰야 합니다. 이는 코드의 가독성을 높이고, 재사용과 테스트를 용이하게 합니다. 2) 컴포넌트 조합 작은 .. 2023. 11. 24. [Vue] watch 속성과 옵션 베하! 여러분 오랜만에 Vue에 대해 알려드릴 일단고팀입니다! Vue 중에서 오늘 알려드릴 키워드는 바로~~ watch 오브젝트입니다!! Watch 속성 watch는 데이터의 변경을 감지해서 원하는 로직을 처리하기에 알맞은 속성입니다. 즉, 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용한 속성이 watch입니다. 예시를 들어보겠습니다. yes/no 질문을 물어보세요: {{ answer }} 위 예시는 question이라는 데이터를 입력할 수 있는 input칸이 있고, 해당 input칸에 무언가 작성하면 answer에 ‘입력을 기다리는 중…’ 이라는 값이 들어가게 작성한 예시입니다. 이러한 watch 속성에는 옵션도 존재합니다. 옵션 1 - deep 우.. 2023. 8. 28. [Vue] Vue Router Vue Router 사용 가이드 베하~! BTC 블랙아웃입니다!! 오늘은 Vue.js 애플리케이션에서 라우팅을 구현하기 위한 Vue Router 사용 가이드를 준비했습니다. Vue Router는 Vue.js 공식 라이브러리로, 페이지 간의 전환, 동적 라우팅, 중첩된 라우트 구조 등을 쉽게 구현할 수 있도록 도와줍니다. 지금부터 Vue Router의 기본적인 사용법과 주요 기능을 알아보겠습니다. 설치 및 설정 Vue Router를 사용하기 위해서는 먼저 설치와 설정을 진행해야 합니다. 아래의 명령어로 Vue Router를 설치합니다. npm install vue-router@3.0.7 저는 vue2를 사용중이기 때문에 3 버전을 사용했습니다. vue3을 사용하시는 경우 4버전을 install 해주세요. .. 2023. 7. 9. [Vue]Vuex 핵심 개념 베하~! BTC 블랙아웃입니다!!! 오늘은 이전 포스팅에 이어 Vuex의 핵심 개념을 자세히 알아보겠습니다! Vuex는 상태 관리 라이브러리로 다음과 같은 5가지 핵심 개념을 가지고 있습니다. State Getters Mutations Actions Modules Vuex 설치 및 개념은 이전 포스팅을 참고해주세요! https://btcd.tistory.com/1149 [Vue] Vuex 개념 및 설치 베하~! BTC 블랙아웃입니다!! Vue는 각 컴포넌트마다 상태(data)를 가질 수 있고 컴포넌트끼리 props를 이용해 상태를 전달할 수 있습니다. 그러나 이런 구조는 자식 컴포넌트들의 계층 구조가 복잡해 btcd.tistory.com 1. State 가장 먼저 Vuex의 State에 대해 알아봅시다... 2023. 6. 25. Front-End 란? 베하~~~안녕하세요 이번주도 돌아온 BETTER MONDAY 팀입니다. 가을이 와서 날씨가 아주 좋습니다!! 맨날 시원한 가을이였으면 좋겠네요 ㅎㅎ 저번주에는 자바스크립트를 간단하게 만들어보았는데요! 이번주는 이 자바스크립트로 할 수 있는 프론트엔드에 대해 알아보도록 하겠습니다. 시작해볼까요? 그럼 슈우우우웃~~~! Front-end 웹 사이트에서 사용자가 직접 상호작용하는 부분 사용자가 볼 수 있는 화면 사용자 인터페이스 User Interface Front-end 프레임워크 웹 응용 프로그램에서 사용자 인증, 렌더링 페이지, 데이터베이스 연결, 프로필, 양식화된 정보 피드 등 중복된 기능들의 논리를 작성한 도구 애플리케이션의 구조를 달성하는 데 도움을 주어 구성 세부 사항보다 기능에 집중할 수 있도록.. 2022. 9. 26. 이전 1 다음
