전역 컴포넌트와 지역 컴포넌트의 차이

Vue.js에 대해 공부하던 중 전역 컴포넌트와 지역 컴포넌트에 대해 알게 되었습니다.이 두개의 컴포넌트가 어떤 차이가 있고 어떤 상황에 사용할 수 있는지 궁금하여, 더욱 자세히 알아보고자 해요! 1. 전역 컴포넌트(Global Components)전역 컴포넌트는 Vue 애플리케이션의 모든 인스턴스에서 사용할 수 있는 컴포넌트입니다.한 번 등록되면, 애플리케이션 어디서나 참조할 수 있어요.전역 컴포넌트는 여러 뷰 or 페이지에서 동일한 컴포넌트를 사용해야 할 때, 유리합니다.하지만, 너무 많은 전역 컴포넌트는 네임스페이스를 오염시킬 수 있으며, 애플리케이션의 초기 로딩 시간에 영향을 줄 수 있어요.. 전역 컴포넌트 등록 방법은 다음과 같습니다.Vue.component("컴포넌트 이름", 컴포넌트 내용);..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 2.
• textsms

MVVM 패턴

Vue.js를 공부하다가 MVVM 패턴에 대해 들어보신 적이 있으실 텐데요.MVVM 패턴이 무엇인지 알아봅시다! 1. MVVM 패턴MVVM 패턴은 Model-View-ViewModel 패턴이라고도 불립니다.이는 소프트웨어 아키텍처 디자인 패턴 중 하나로, 주로 GUI 애플리케이션 개발에서 사용됩니다.이 패턴은 코드의 유지보수성과 재사용성을 높이고, 테스트를 용이하게 하며, UI와 비즈니스 로직을 분리하는 데 도움을 줍니다. 2. 구성요소각 구성요소와 어떤 역할을 하는지에 대해 알아봅시다!1) Model(모델)Model은 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.DB, 웹 서비스와의 상호작용 등을 처리합니다.ViewModel에 의해 데이터가 변경되거나, 저장소로부터 데이터를 불러옵니다. 2) Vi..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 7. 2.
• textsms

웹팩(Webpack)이란?

vue를 공부하던 도중, 컴포넌트 기반 개발을 하고 있었습니다.컴포넌트가 늘어날수록 script도 같이 늘어나면서 코드가 너무 길어지는 문제가 발생했습니다.이를 해결하기 위해, 어떤 방법이 있을지 찾아보던 도중, 웹팩(Webpack)에 대해 알게 되었어요! 1. 웹팩(Webpack)웹팩(Webpack)은 JavaScript 애플리케이션을 위한 모듈 번들러(Module Bundler)입니다.많은 수의 JavaScript 파일을 관리하고, 최종적으로 배포 가능한 형태로 묶어주는 도구입니다.이를 사용하면, 여러 모듈과 자원을 하나 or 여러 파일로 번들링 할 수 있어요.※ 번들링(Bundling) : 여러 개의 파일 or 모듈을 하나의 파일로 묶는 과정 2. 설치그럼 일단, 설치를 해봅시다!설치를 하기 전에,..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 6. 29.
• textsms

리액트에서 타이핑 이벤트 만들기

요즘 리액트를 열심히 공부했는데, 포트폴리오도 리액트로 만들면 좋겠다 해서 리액트로 리메이크하고 있습니다.원래 포트폴리오 main 페이지에서 사용하는 타이핑 이벤트를 적용하고자 해요.일단 먼저, 어떻게 작용하는지 확인해봅시다! main.js// 타이핑 이벤트const firstContent = "안녕하세요! 저는 프론트엔드 개발자 전유빈입니다.";const firstText = document.querySelector(".text-1");let i = 0;function FirstTyping() { if (i  결과 다 되었으면, 이것을 이제 리액트로 변환해 봅시다! Typing.jsximport React from "react";// 타이핑 이벤트const firstContent = "안녕하세요! 저..

• format_list_bulleted Front-End Study/React
• · 2024. 6. 19.
• textsms

vite-plugin-next-router

프로젝트를 Vite로 만들기 시작했습니다.프로젝트 안에서 페이지 이동을 간편하게 하기 위해, React Router를 사용하려고 했는데, 흥미로운 플러그인을 발견했어요! 1. vite-plugin-next-router란?vite-plugin-next-router란? Vite와 Next.js를 결합하여, React 애플리케이션의 라우팅을 최적화하는 플러그인입니다.이는 Next.js의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 결합하는 역할을 해요.기존에 저는 , , 를 사용해, 동적 라우팅을 구성했었어요.하지만, 이 플러그인은 폴더명을 따라 자동으로 라우팅 되기에, 이 플러그인을 선택했습니다! 2. 설치방법[설치 홈페이지 바로가기(npm)]두 가지 값을 입력해서, 플러그인을 설치해 ..

• format_list_bulleted Front-End Study/Vite
• · 2024. 6. 17.
• textsms

CRA 대신 Vite를 선택한 이유

프로젝트를 만들고 있는 도중, React Router v7에 대한 발표 번역 글을 보게 되었습니다.그 글 중에 한 부분이 관심이 쏠리더군요?간단하게 요약하면, React Router는 Vite를 선호하며, Vite를 기반으로 개발할 계획이라고 하네요.Vite가 무엇인지 모르는 저는 CRA(Create React App)과 Vite 둘 중 하나를 고르기 전에, 둘 다 무엇이고, 어떤 차이가 있는지 알아보겠습니다! 1. CRA(Create Reate App)[CRA 공식 홈페이지 바로가기]CRA는 Zero-configuration 설정을 지향한다고 합니다.즉, 개발자가 설정 파일을 신경 쓰지 않고, 바로 React 프로젝트를 시작할 수 있도록 한다고 하네요! 또한, 웹팩(Webpack)을 사용하여, 애플리케..

• format_list_bulleted Front-End Study/Vite
• · 2024. 6. 17.
• textsms