MVC 패턴

CS 공부를 하다보면, MVC 패턴에 대해 들어본 경험이 있으실 겁니다.이는 무엇이며, 어떠한 역할을 하는지 알아봅시다! 1. MVC 패턴MVC 패턴은 SW 디자인 패턴 중 하나로, 애플리케이션을 세 가지 주요 컴포넌트인 모델(Model), 뷰(View), 컨트롤러(Controller)로 분리하여, 구성하는 방법입니다.이 패턴은 애플리케이션의 유지보수와 확장을 쉽게 하고, 코드의 재사용성을 높이며, 역할을 분리하여 개발 효율성을 향상시키는 데 목적이 있습니다. 2. 컴포넌트그러면, 각 컴포넌트의 역할에 대해 알아봅시다. 1) 모델(Model)모델은 애플리케이션의 데이터와 비즈니스 로직을 담당해요.DB와의 상호작용, 데이터 검증, 데이터 처리 등의 작업을 수행합니다.뷰 or 컨트롤러에 의존하지 않으며, 데..

• format_list_bulleted Computer Science
• · 2024. 7. 7.
• textsms

Computed vs Watch

Vue.js에서 computed와 watch는 둘 다 반응형 데이터를 다루는 방법을 제공하지만, 그 목적과 사용 방식에 따라 차이가 존재해요.그 차이에 대해 알아봅시다! 1. ComputedComputed는 계산된 속성(Computed property)을 정의하는 데 목적을 두고 있어요.어떤 데이터의 변화에 따라 다른 데이터를 자동으로 갱신해야 할 때, 사용합니다.이 속성은 종속된 데이터가 변경되지 않는 한 캐시됩니다.캐싱(Caching) : 데이터 or 연산 결과를 일시적으로 저장하여, 나중에 동일한 데이터를 요청할 때, 다시 계산하거나 가져오는 대신 저장된 데이터를 빠르게 제공하는 기술 따라서 종속 데이터가 변경되지 않으면, 동일한 결과를 반환하며 성능 최적화에 유리합니다. computed.html ..

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

Props와 Events

Vue.js에서 컴포넌트 간의 통신 방식은 부모-자식 관계, 형제 관계, 전역 상태 관리 등을 통해 이루어진다고 해요.그러면 이제, 주요 컴포넌트 통신 방식에 대해 알아봅시다! 1. PropsProps는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 사용해요.자식 컴포넌트는 props 옵션을 사용하여, 부모로부터 전달된 데이터를 수신합니다.다음 코드와 같이 사용할 수 있어요. props.html -->  결과AppHeader안에 propsdata라는 속성으로 데이터 hi가 내려간 것을 확인할 수 있습니다. 이를 활용하여, 다음과 같이 여러 컴포넌트에 props 속성을 사용할 수 있습니다. -..

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

인터넷 동작 원리

1. 인터넷 동작 원리인터넷 동작 원리는 다음과 같습니다. 1) 패킷 스위칭패킷 설명은 인터넷(Internet)글 참조 2) IP 주소인터넷에서 각 기기는 고유 식별자인 IP 주소를 할당 받아요.IP 주소는 데이터 패킷을 보내고 받는 데 사용합니다.IP 주소 형식으로는 IPv4와 IPv6이 가장 널리 사용되는 형식입니다.IPv4(Internet Protocol Version 4)32비트로 표현되며, 4개의 8비트 숫자(옥텟)로 구성되어 있습니다. (0~255까지의 값을 가질 수 있어요.)한정된 숫자의 주소만 제공하므로, 이용 가능한 주소가 고갈되는 문제가 발생합니다.IPv6(Internet Protocol Version 6)128비트로 표현되며, 8개의 16진수 그룹으로 표시됩니다.새로운 보안 기능과 확..

• format_list_bulleted Computer Science
• · 2024. 7. 3.
• textsms

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

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

데이터 허브(Data Hub)란?

이번에 회사를 다니게 되면서 데이터 허브 관리 업무를 맡게 되었습니다.데이터 허브에 대해 무지한 저는 정리하면서 데이터 허브란 무엇인가에 대해 알아보고자 합니다!1. 데이터 허브(Data Hub)란?데이터 허브(Data Hub)란? 여러 소스에서 데이터를 수집, 저장, 관리, 통합, 분석하는 중앙화된 플랫폼 or 시스템을 의미합니다.이는 조직 내 다양한 데이터 소스를 연결하고 통합하여 일관된 데이터 접근성을 제공하며, 데이터 분석과 비즈니스 인텔리전스를 위한 기반을 제공합니다.비즈니스 인텔리전스(Business Intelligence, BI) : 조직의 의사결정을 돕기 위해 데이터를 수집, 저장, 분석, 시각화하는 프로세스와 기술의 집합 2. 주요 기능이제 주요 기능에 대해 알아봅시다!1) 데이터 수집 ..

• format_list_bulleted Computer Science
• · 2024. 7. 1.
• 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

앞으로의 계획

지금까지는 정의, 사용 방법 등 정보 중심의 글을 주로 작성해왔지만, 앞으로는 제가 개발하면서 겪은 문제점이나 흥미로운 주제를 공유하려고 합니다.같은 고민을 하고 있는 분들과 함께 고민해보자는 느낌으로 글을 작성할 예정입니다.물론, 그렇다고 정보 글을 아예 작성하지 않는 것은 아니에요.여전히 유용한 정보와 팁도 함께 제공할 것입니다.앞으로도 좋은 글로 찾아뵙겠습니다.많은 관심과 피드백 부탁드립니다!감사합니다!

• format_list_bulleted 잡다한 말
• · 2024. 6. 19.
• 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