A 테이블 - B 테이블 쿼리

A 테이블 - B 테이블A테이블과 B테이블에 같은 컬럼이 있을 때, A테이블의 값 중 B테이블의 값에서 없는 데이터만 나타내는 쿼리를 작성해봅시다. 일단, 각 테이블에 다음과 같은 데이터가 존재한다고 가정합시다.A테이블과일사과바나나배포도수박 B테이블과일사과배수박  그러면 A테이블 - B테이블을 어떻게 하면 될까요?크게 두가지 방법이 있습니다. 방법 1. NOT IN 사용NOT IN을 사용하여, B테이블에 없는 값을 가진 A테이블을 나타내 줍니다.쿼리는 다음과 같아요.(이 떄, name은 비교할 컬럼입니다.)SELECT *FROM AWHERE name NOT IN (SELECT name FROM B); 결과그러면 정상적으로 바나나와 포도만 나타나는 것을 확인할 수 있습니다. 방법 2. LEFT JOIN 사..

• format_list_bulleted Back-End Study/DBMS
• · 2024. 11. 20.
• textsms

created와 mounted의 차이점

Vue.js를 개발하다 보면, created와 mounted를 사용하는 경우가 있을 겁니다.이 둘은 Vue 컴포넌트 생명주기의 특정 단계에서 호출되는 훅인데요. 적절한 상황에 이 훅들을 사용할 수 있도록 created와 mounted의 차이점에 대해 알아봅시다. 1. createdcreated 훅은 Vue 컴포넌트가 생성된 직후에 호출됩니다.이는 컴포넌트의 데이터 옵션(data, computed, methods 등)가 초기화 된 상태에요.또한, DOM이 아직 준비되지 않은 상태에서 실행하기 때문에 아직 DOM에 접근할 수 없습니다.그렇기에 created 훅은 화면 렌더링과 관계없는 로직에 사용해야 해요. created는 Vue 컴포넌트가 생성되면 먼저 data, props, methods, compute..

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

문자열을 카멜 케이스로 변환하기

문자열을 카멜 케이스로 변환해 봅시다!저 같은 경우, URL 파라미터를 카멜 케이스로 변경해야 했어요.USER_NAME 같은 변수인데.. 이런 경우를 어퍼 스네이크 케이스라고 하더군요?일단 변환하기 전에 카멜 케이스랑 어퍼 케이스가 무엇인지 간략하게 알아봅시다. 1. 어퍼 스네이크 케이스(Upper Snake Case)어퍼 스네이크 케이스는 여러 단어를 연결할 때, 각 단어를 대문자로 쓰고, 단어 사이에 언더스코어(_)를 사용하는 표기법입니다.예를 들어, user name이라는 문장은 USER_NAME으로 되는 것이죠. 2. 카멜 케이스(Camel Case)카멜 케이스는 여러 단어를 연결할 때, 첫 단어는 소문자로 시작하고, 그 이후의 각 단어는 대문자로 시작하는 표기법입니다.얘를 들어, user nam..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 11. 15.
• textsms

Object.fromEntries()

문자열에 있는 내용들을 변수의 키로 지정하는 방법이 존재합니다.바로 Object.fromEntries( )입니다. 이는 주어진 배열에서 키-값 쌍을 기반으로 새로운 객체를 생성하는 JavaScript 메서드에요.이 메서드는 ES2019(ES10)에서 도입되었습니다. 바로 사용해봅시다!처음에 key로 사용할 문자열 변수를 생성해 줍시다.const abc = 'a, b, c'; 그 다음 이 문자열을 배열로 만들어 줘야겠죠.abc 변수를 쉼표로 분리하여, 배열로 변환해 줍시다.const keys = abc.split(', ').map(key => key.trim());이렇게 하면, {a, b, c}인 배열이 생성이 됩니다. 이제 이 배열을 사용하여, param이라는 객체를 생성해 줍시다.이 때, Object...

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 11. 14.
• textsms

computed와 methods의 차이

Vue.js에서 자주 쓰이는 computed와 methods를 들어본 적이 있을겁니다.가끔 이 둘 중에서 무엇을 사용해야 할 지 헷갈리는 경우가 있더군요.그래서 정확하게 알고 사용하기 위해 이 둘의 차이가 무엇인 지 알아봅시다. 1. computed (계산 속성)computed는 특정 값이 다른 데이터에 의존해 계산될 때, 사용됩니다.종속된 데이터가 변경될 때에만 계산이 되는 거에요.Vue는 computed 속성을 캐시하기 때문에, 관련된 데이터가 변경되지 않는 한 계산된 값을 재사용해요. 이를 통해 Vue 컴포넌트의 상태에 따라 동적으로 변하는 값을 쉽게 관리하여 성능을 최적화할 수 있어요. 예를 들어봅시다.export default { data() { return { firstName..

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

router-link와 router-view

Vue.js에도 라우터 기능이 존재합니다. 라우터 기능을 담당하는 컴포넌트는 바로 router-link와 router-view입니다.이 둘은 Vue.js에서 라우터를 사용하여, SPA(Single Page Application)를 구현할 때 사용해요.※ SPA(Single Page Application) : 한 페이지 내에서 URL과 데이터만 변경하며, 화면을 동적으로 갱신하는 웹 애플리케이션 하지만, 이 컴포넌트들을 사용하려면, Vue Router를 설치해야 합니다.(저는 npm을 사용했어요.)npm install vue-router 바로 자세히 알아봅시다. 1. router-linkrouter-link는 Vue Router와 함께 동작하여, 페이지간의 탐색을 쉽게 만들어 줘요.이는 태그 같이 사용자가..

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

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