v-if와 v-show의 차이

Vue.js를 사용하면, 디렉티브를 사용한 경험이 있으실 거에요.요소를 조건에 따라 표시하거나 숨기는 디렉티브인 v-if와 v-show는 둘 다 비슷한 기능이라고 생각될 수 있겠지만, 렌더링 방식에서 차이가 있습니다. 그 차이점에 대해 알아봅시다. 1. v-ifv-if는 조건이 true일 때만 해당 요소를 DOM에 추가하고, false일 때는 DOM에서 제거해요.사용자 인증 상태에 따라 요소를 렌더링하는 등 자주 변경되지 않는 조건에 적합합니다.조건이 자주 변경될 경우, 성능이 떨어질 수 있어요. 요소가 추가되거나 제거될 때마다 렌더링 과정이 필요하기 때문입니다. 예를 들어 봅시다. 메시지 전환 보이는 메시지 숨겨진 메시지 isVisible: {{ isVisible }} 위 코..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 5.
• textsms

Grafana 설치 및 실행

Grafana를 설치해보고 실행해 봅시다! 1. 계정 생성우선 먼저, Grafana 공식 홈페이지에 들어가 무료 계정 생성 버튼을 클릭하여 계정을 생성해 봅시다.(Grafana 공식 홈페이지) 그러면 무료 계정을 만들거나 원하시는 방법으로 로그인을 해주세요. 그러면 url과 지역을 설정하게 되는 데, 현재 본인이 거주하고 있는 지역이 없다면, 가장 가까운 지역을 선택해 주세요.입력이 끝나면, Finish Setup 버튼을 클릭해 줍시다. 2. Grafana 설치그럼 이제 Grafana를 설치해 봅시다. (Grafana 설치 페이지)원하는 운영체제를 선택한 뒤, 하단의 Standalone Windows Binaries 밑에 Download the zip file 버튼을 클릭해 주세요. (저는 Window를..

• format_list_bulleted Back-End Study/Grafana
• · 2024. 11. 4.
• textsms

소프트웨어 버전 규칙

소프트웨어나 라이브러리, 프로젝트를 개발하다 보면, 버전을 어떻게 입력하고 업데이트를 해야 하나 고민한 경험이 있을 거에요.저 또한, 그런 고민을 하고 있기에 버전에 관한 규칙을 알 수 있는 소프트웨어 버전 규칙에 대해 알아봅시다! 1. 소프트웨어 버전 규칙소프트웨어 버전 규칙은 SemVer를 따릅니다. 이 때, SemVer는 Semantic Versioning의 줄임말로, SW의 호환성 및 변경 사항을 쉽게 파악할 수 있게 해주는 체계에요. 2. 버전 표기버전 표기는 보통 주버전(Major), 부버전(Minor), 수정버전(Patch)의 세 사지 숫자로 구성되며, 특정 조건에 따라 숫자가 증가해요.(ex: 1.5.9) 2-1. 주버전 (Major Version)주버전은 이전 버전과 호환되지 않는 큰 변..

• format_list_bulleted Computer Science
• · 2024. 11. 1.
• textsms

MySQL vs PostgreSQL

저는 처음 DBMS를 공부할 때, SQLyog로 MySQL을 공부했었어요. 하지만, 지금은 회사에서 DBeaver로 PostgreSQL을 공부하고 있습니다.문득, 그런 생각이 들더군요? MySQL과 PostgreSQL은 거의 비슷한 것 같은데, 둘 중 뭐가 더 좋은 것일까?그 궁금증을 해결하기 위해 둘의 차이점을 알아보았습니다. 1. ACID 준수PostgreSQL은 완전한 ACID 준수를 목표로 설계되었어요. 트랜잭션 처리와 데이터 무결성, 일관성 보장에 중점을 둡니다.또한, MVCC(다중 버전 동시성 제어)를 통해 높은 동시성을 제공해요.※ ACID : DB 트랜잭션의 신뢰성을 보장하는 네 가지 특성(Atomicity(원자성), Consistency(일관성), Isolation(고립성), Durabi..

• format_list_bulleted Back-End Study/DBMS
• · 2024. 10. 30.
• textsms

Event Bus

Vue에서 부모 자식 관계가 아닌 아예 동떨어져 있는 컴포넌트 끼리 통신을 하기 위해선 어떻게 해야 할까요?그럴 때 사용하는 것이 Event Bus입니다! 이것이 무엇인지 바로 알아봅시다. 1. Event BusEvent Bus란? 컴포넌트 간의 통신을 쉽게 하기 위해 사용되는 패턴이에요.이는 중앙 집중식의 이벤트 관리 시스템으로, 다양한 컴포넌트가 서로 데이터를 주고받거나 이벤트를 전송할 수 있도록 해요.그렇기에 부모-자식 관계가 없는 컴포넌트 사이에서 데이터를 전달 or 상호작용을 할 때 유용합니다. 2. Event Bus 생성Event Bus를 구현하기 위해 새 Vue 인스턴스를 생성합니다.src/event-bus.jsimport Vue from 'vue';export const EventBus =..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 10. 29.
• textsms

URL 파라미터 가져오기

JavaScript로 URL 파라미터를 가져온 후, 화면에 띄워 봅시다! 1. 화면 구성하기우선 먼저, html파일을 생성한 후, body태그 안에 다음과 같이 작성해 줍시다.getUrlParameter.html 2. 변수 지정그 다음 현재 URL을 불러오기 위해, 다음과 같이 입력해 줍시다.또한, obj라는 배열도 생성해 주세요!const obj = {}; // 파라미터 내용이 들어갈 변수const url = location.href; // 현재 URL 3. URL 파라미터 불러오기다음과 같이 입력하여, URL 파라미터를 불러오는 함수를 만들어 줍시다.paramObject(url)function paramObject(url) { const param = url.split('?')[1]; // ur..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 10. 28.
• textsms