GeehDev

[알고리즘] 알고리즘과 빅오 표기법

geehyun — Sun, 14 Sep 2025 15:55:59 +0900

[알고리즘] 알고리즘과 빅오 표기법

알고리즘

알고리즘이란

알고리즘이란 어떤 문제를 해결하기 위해 정해진 순서대로 수행하는 절차나 방법을 말한다.

무언가 목표를 갖고 해당 목표를 해결 또는 달성하기 위한 해결방법 그 자체를 말한다고 볼 수 있다.

어떤 알고리즘이 있을까

정렬 알고리즘 : 데이터를 오름차순/내림차순으로 정렬 알고리즘
ex ) 버블 정렬, 퀵정 정렬, 선택 정렬, 삽입 정렬, 합병 정렬, 힙 정렬, 기수 정렬 등
탐색 (검색) 알고리즘 : 원하는 값을 찾는 알고리즘
ex ) 선형 탐색, 이진 탐색, 깊이 우선 탐색(DFS), 너비 우선 탐색(BFS), 최소 신장 트리(MST)
최단 경로 알고리즘 : 목적지를 가기 위한 가장 빠른 경로를 찾는 알고리즘
ex ) 다익스트라, 플로이드
암호화 알고리즘 : 데이터를 안전하게 암호화 하는 알고리즘
ex ) RSA, AES

알고리즘의 특징

1) 명확성 : 모호하지 않고 명학하여 누구나 똑같이 실행할 수 있어야한다.

2) 유한성 : 반드시 종료(끝)조건이 있어야 한다. (무한 루프는 알고리즘이 아님)

3) 입력과 출력 : 최소 0개 이상의 입력이 있고, 반드시 출력(결과)가 나와야한다.

4) 효율성 : 같은 문제를 해결하더라도 더 빠르고 자원을 덜 쓰는게 효율적인 알고리즘 이다.

좋은 알고리즘이란?

위에서 봤다시피, 알고리즘이란 문제를 해결하기 위한 방법으로 동일한 문제를 해결함에 있어 더 빠르고 자원을 덜 쓰는 알고리즘이 효율적인 알고리즘, 즉 좋은 알고리즘이라 볼 수 있다.

우리는 효율적인 알고리즘을 적용하기 위해 시간 복잡도, 공간 복잡도를 고려하여 빅오표기법을 사용한다.

시간 복잡도

시간 복잡도란, 입력 크기 n이 커질 때 알고리즘이 실행되는데 걸리는 연산횟수를 수학적으로 표현한 것이다.

사실 실행시간은 실행 환경(CPU 성능, 메모리, 언어 등)에 따라 달라질 수 있기 때문에 공정한 비교를 위해 연산횟수를 시간복잡도의 기준으로 삼는다.

즉 알고리즘이 얼마나 빠른가를 뜻한다.

공간 복잡도

공간 복잡도간, 알고리즘이 실행되는 동안 사용되는 메모리의 양을 말한다.

고정 공간 : 코드, 변수, 상수 등 입력과는 무관한 고정적으로 차지하는 공간
가변 공간 : 입력 크기에 따라 변하는 메모르로 배열, 동적 할당, 재귀 스택 등

즉 알고리즘이 얼마나 메모리를 쓰는가를 뜻한다.

빅오 표기법 (Big- O Notation)

빅오 표기법은 알고리즘의 시간 복잡도와 공간 복잡도를 입력 크기 n에 따라 증가하는 정도(상한선) 으로 표현하는 표기법으로, 최악의 경우 얼마나 오래, 얼마나 많은 메모리를 사용하는가를 표현다.

//  표기 방식
O(...) 으로 표기

// n : 처리해야하는 데이터의 개수
// O(...) : 그 데이터가 늘어날 때 연산 횟수가 어떤 패턴으로 커지는지

사실 빅오 표기법 이외에도 시간 복잡도와 공간 복잡도를 표현할 수 있는 빅오메가, 빅세타 표기 법이 있다.

빅오메가(Big-Ω) : 알고리즘의 최선의 경우(하한) 시간 복잡도와 공간 복잡도를 표현하는 표기법
빅세타(Big-Θ) : 상한(O)과 하한(Ω)이 같은 경우 → 딱 맞는 성장률

왜 알고리즘의 성능을 표기할 때 빅오 표기법을 가장 많이 사용할까?

알고리즘을 성능을 말할 때 빅오 표기법을 가장 많이 사용되는데, 이느 입력 데이터가 어떤식으로 오든 최악의 경우를 고려해야 데이터의 편차와 상관없이 가장 안정적인 지표로 사용할 수 있기 때문이다.
즉 빅오 표기법은 "아무리 오래 걸려도 이 정도보다 나쁘진 않다" 라는 해당 알고리즘의 상한선을 볼 수 있는 지표이기 떄문이다.
=> 최선/평균은 입력 데이터에 따라 달라지지만, 최악은 항상 보장됨 → 안정적 지표

자주 사용하는 빅오 표기법

표기법	의미	입력 크기 n = 10 일때	대표적인 예시
O(1)	- 상수시간 - 입력 크기와 상관 없이 실행 시간이 항상 일정	1	배열 인덱스 접근, 해시 테이블 조회
O(log n)	- 로그 시간 - 입력 크기를 절반씩 줄이며 탐색	3	이진 탐색, 균형 트리 탐색
O(n)	- 선형 시간 - 입력 크기(n)에 비례	10	선형 탐색, 단순 반복문
O(n log n)	- 로그 선형 시간 - n번 반복 * log n 단계	약 33	퀵 정렬(평균), 병합 정렬, 힙 정렬
O(n²)	- 이차 시간 - 입력크기(n)의 제곱 으로 증가 - 중첩 반복문, 데이터 많아지면(n이 클수록) 급격히 느려짐	100	버블 정렬, 삽입 정렬, 선택 정렬
O(n³)	- 삼차 시간 - 삼중 반복문, 보틍 그래프 알고리즘에서 등장	1,000	플로이드-워셜(Floyd-Warshall)
O(2ⁿ)	- 지수시간 - 입력(n)이 커질 수록 실행시간이 폭발적으로 증가	1,024	재귀 피보나치, 부분집합 생성
O(n!)	-팩토리얼 시간 - 모든 경우의 수를 탐색 (최악)	3,628,800	외판원 문제(Brute Force), 순열 생성

O(1) ~ O(n log n) → 효율적이라 실무에서 자주 사용
O(n²) ~ O(n³) → 데이터가 작을 때만 사용 가능
O(2ⁿ), O(n!) → 거의 못 씀 (단순한 완전 탐색 수준)

마치며

알고리즘을 제대로 공부하기 전에 알고리즘이 무엇이고, 어떤게 좋은 알고리즘이며 알고리즘의 성능을 표현하는 빅오 표기법에 대해 알아봤다!

사실 빅오표기법이나 시간 복잡도, 공간 복잡도에 대해서는 더 자세히 깊이 들어갈 수 있지만 내가 공부하고 싶은건 어떤 알고리즘이 있고 구현은 어떤식으로 하고 어떤 상황에서 사용하면 좋을지 이므로 간단히만 알아봤다!

[정보처리기사] 합격 수기 (2025년 제 1회 정기 실기/2024년 제 1회 정기 필기)

geehyun — Mon, 8 Sep 2025 12:00:45 +0900

게으름으로 이제야 올리는 2025년 1회 정보처리기사 합격 수기....ㅎㅎ

[정보처리기사] 합격 수기 (2025년 제 1회 정기 실기/2024년 제 1회 정기 필기)

정보처리기사를 취득하려한 이유

지난 SQLD 합격 수기 글에도 작성하였지만, 저는 비전공자로써의 가장 부족한 점이 기반 지삭의 부족이라 생각하여 이를 보완하고자 하였고, 이왕이면 그 노력이 증명할 수 있는 형태였으면 좋겠다고 생각되어 아래 3개의 자격증 취득을 목표로 하고 있습니다.

정보처리기사 (2024.03.13 필기합격 / 2025.06.13 실기합격)
SQLD (2024.09.20 합격)
리눅스 마스터 2급 (예정)

이제 리눅스 마스터 2급만 남았군요...!

SQLD 합격수기가 궁금하다면?

[SQLD] 제 54회 합격 수기 (비전공자, 공부기간 1개월, 가채점 92점)

[SQLD] 제 54회 합격 수기 (비전공자, 공부기간 1개월, 가채점 92점)

우선 저의 배경부터 정리하자면,1. 비전공자 - 개발과 전혀 상관없는 무역학사 2. 다만, 대략 2년 7개월 간의 웹기획자 경력 有3. Java 풀스택 과정으로 국비 과정 수료 후 현 개발직무로 인턴 근무

geehyun.tistory.com

필기 접수와 합격

1. 필기 시험일정

필기의 경우 2024.01.23(화) 접수하여, 2024.02.17(토) 시험을 보게되었습니다.

2. 필기 공부방법

필기 시험준비는, 우선 이론 책을 이론을 전체적으로 암기하며 문제집에 수록된 문제를 푸는 방식으로 처음에는 진행하였으나,
이론의 양이 너무 많고 정보처리기사 필기의 경우 문제은행 방식으로 진행되어 시험에 출제되는 문제만 미친듯이 푸는 방식으로 변경하였습니다.
필기 기출문제를 제공해주는 CBT 사이트를 이용해서 준비하였고,

기출문제 CBT

최강 자격증 기출문제 전자문제집 CBT

전자문제집, CBT, 컴씨비티, 씨비티, 기사, 산업기사, 기능사, 컴활, 컴퓨터활용능력, 1급, 2급, 워드, 정보처리, 전기, 소방, 기계, 사무자동화, 정보기기, 제과, 제빵, 한국사, 공무원, 수능, 필기,

www.comcbt.com

위 당시 이용했던 CBT 사이트 링크를 첨부합니다.

공부기간은 한 달 정도는 이론서를 가볍게 읽고, 시험일 3일전 동안은 위 기출문제 CBT를 미친듯히 풀고 틀린문제에 대해서만 해당 이론 부분을 추가 학습하였습니다.

3. 필기 합격 TIP

제가 필기 시험을 보면서 느낀 합격 TIP은... 오로지 합격을 목적으로 한다면... 기출문제를 외울정도로 풀면 반드시 합격한다! 입니다!
저는 처음 시험 공부를 할 때 저의 목표가 최종적으로 자격증 취득이 목표라고는 하지만, 근본적인 목적은 저의 부족한 기반지식을 쌓기 위함이기 때문에 이론을 이해하려고 했습니다.... 그래서 기본서를 구매하여 이를 읽고 수록된 문제를 푸는 식으로 진행하였습니다만....

이론이 이해가 필요한 부분들도 있지만 대부분 암기가 필요한 형태
필기 시험에는 과락이 존재하기 때문에 우선순위 없이 통으로 암기하기에는 비효율적
방대한 이론 양에 비해 시험에 출제되는 부분은 비교적 한정되어 있음

위 이유로 인해 이론의 경우 다 한번에 암기하기 보다는 그냥 예고편 느낌으로 가볍게 읽고, 기출문제를 풀고 틀린 문제에 대한 이론에 대해서만 부분적으로 추가로 공부해보는 방식으로 전환하였습니다.

사람마다 암기과목에 강한 사람이 있고, 암기보다는 이해과목에 강한 사람이 있는데 저는 암기 과목은.......영....ㅎㅎ
혹시 주변에 정보처리기사를 준비하는 사람이 있고, 그 사람이 필기 합격 TIP을 묻는다면, 전 "기출문제 CBT를 미친듯이 돌려라" 라고 말씀드릴 것 같습니다 ㅎㅎ

실기 3수생이 되기까지...

1. 실기 시험일정

1차 : 2024-03-26 접수 / 2024.04.27(토) 시험
2차 : 2024-06-25 접수 / 2024.07.28(일) 시험
3차 : 2025-03-24 접수 / 2025.04.20(일) 시험 - 합격

2024.03.13 필기 합격을 확인하고 바로 이어서 실기시험을 신청하였습니다.....만....ㅎㅎㅎ
보시는대로 실기 3수생이 될 미래는 생각하지 못했었네요...!ㅎㅎ
어쩌다 3수생까지 되었는지... 뭐가 부족했는지에 대해서 나름대로 생각을 정리해 보겠습니다!

2. 실기 시험과 필기가 뭐가 그렇게 다르길래 3수생이 되었는지...

솔직히 말해서, 필기를 합격한 후 저는 다소 정보처리기사 라는 시험자체를 다소 얕보고 있었던것 같습니다. ㅎㅎ
위 필기 TIP 부분을 보면 느끼셨다시피, 필기의 경우 기출문제만 열심히 풀고 가면 문제은행 방식 특성 상 봤던 문제들이 계속 나오다보니 어느정도 쉽게 합격하실 수 있으실겁니다.

하지만, 실기는

객관식 문제가 아니라 주관식 단답형 위주의 문제 (정확한 답을 알아야 작성할 수 있음)
20문제 중 절반 정도 또는 그 이상이 코드 해석 문제
과락은 없지만 총 20문제 중 한 문제 당 배점이 5점이기 때문에, 12문제 이상 맞춰야 합격 커트라인

이러한 특징으로 인해 필기 시험에 비해 난이도가 급상승한다고 느껴졌습니다.
암기과목에 취약한 제가 느끼기에는 "주관식 단답형 위주의 문제" 라는 점이 가장 큰 어려움으로 느껴졌습니다.
객관식 문제의 경우 제가 이론을 다소 얕게 알고있어도 객관식에 보기를 보면서 답을 찾을 수 있지만 주관식 문제의 경우 제가 해당 문제의 답을 정확히 알고 있어야만 답을 작성할 수 있기에... 필기시험 정도의 난이도를 생각하고 간 저는 문제에 대한 답도 제대로 작성하지 못하고 참패를 하고 말았습니다 ㅠㅠ

2차 도전에서는 1차 도전에서 겪은 쓰디쓴 경험을 바탕으로 이론을 빠삭하게 공부하자는 생각을 하고 도전했습니다!....만!
그러기에는 이론의 양이 너무 많고 저는 너무나도 암기에 젬병이라 또다시 쓰디쓴 불합격을 경험하게되었네요...

위 두 번의 매운맛을 보고 아예 저는 전략을 바꾸게되었습니다.

3. 그렇다면 합격을 위해 어떤 전략을 사용했는가?

두 번의 고배를 겪고 살짝 흐린눈을 하고 지내다가 2025년 새해 목표로 진짜 이번이 마지막이다... 이번에 합격 못하면... 내 인생에 정보처리기사라는 자격증은 없는 자격증이다.... 라는 마음으로 다시 한번 도전하게 되었습니다.

앞서 두 번의 도전에서 패인을 저는 "암기는 쥐뿔도 못하면서 이론에 집착하느라 이론도 잃고, 코드 해석 문제도 다 잃었다" 라고 판단했습니다.
그래서 저는 제가 못하는 것을 잘하게 하는것보다 그나마 잘하는것에 걸어보자.... 즉 이론을 포기하고, 코드 해석문제에 모든걸 걸어보기로 하였습니다.

여태까지의 기출문제를 보면 코드해석(C언어, Java, Python) 문제가 절반 또는 절방 이상으로 구성되어 코드 해석 문제만 다 맞힐 수 있다면 일단 50점 ~ 55점 이상은 가져갈 수 있는 구조였습니다. 따라서 코드 해석 문제를 다 맞힌다면... 이론문제를 한 문제 또는 두 문제 정도만 더 맞히면 아슬아슬한 합격권이라는 점에 저는 모든걸 걸었습니다.

4. 코드해석 한 우물 파기, 그 공부 방법은?

저는 현재 1년차 병아리 자바 개발자로써, 어느정도 코드 해석은 가능하지만, 정처기 실기에서 나오는 코드 해석은 당연하게도 실무와는 다르기 때문에 시험을 위한 공부가 필요했습니다.

우선은 제가 앞선 2번의 실기 경험을 통해 어떤 점이 어려웠는지를 생각해봤습니다.

당연히 C언어! 그 중 구조체, 포인터
진수변환
파이썬만의 특이한 문법과 함수들
연산자 우선순위 등... (너무 햇갈려요 또륵)

위 내용 위주로 실기 문제집에서 해당 파트를 위주로 공부하였고, 공부한 내용을 바탕으로 저만의 요약집을 정리하였습니다.
요약집을 정리할 때는 GPT의 도움을 많이 받았습니다. (도움인지 싸움인지 ㅎ)

우당탕탕 정처기 실기 나만의 요약집 만들기 과정
약한 부분 위주로 정처기 실기 문제집을 푼다
→ 문제를 틀린다 → 해설집을 본다 → 이해가 가지 않는다
→ 문제를 찍어서 GPT에게 해설을 요구한다 → 답변을 받는다
→ GPT의 답은 완벽히 신뢰할 수 없으므로 질문해서 검증한다 → 관련 개념을 추가로 물어본다 → 정리한다 → 반복

그렇게 해서 만들어진 요약집을 갖고 기출 문제집을 미친듯이 풀면서 햇갈리는 개념은 바로 다시 요약집에 추가하는 식으로 공부했습니다.

요약집 일부! 부끄러우니 일부만 ㅎㅎㅎ

5. 그럼 이론은 영 버린것인가?

거의 영 버린쪽에 가깝긴 합니다만... 아무리 프로그래밍/SQL 쪽에 모든걸 걸었다고 하더라도 이론 문제를 싹 다 틀려버리면 합격점수를 받을 수 없기 때문에 아쉽게도 영 버릴 수는 없었습니다 ㅠㅠ
시험 전 날까지 실기만 파다가 시험 당일 아침에 한 2시간 정도 필기 시험때 문제집에 수록되어있던 요약집을 정독하고 또 GPT 선생님께 필기에 나올만한 주요 토픽을 정리 부탁하여 해당 내용에 대해서 달달달 외우고 시험에 들어갔습니다.

다행스럽게도 제가 공부한 부분에서 이론문제가 몇 문제 나와줘서 운이 좋았던 편 같습니다.
하지만 누가 시험 공부 이렇게 한다 그런다면 전.....매우 비추할 것 같습니다...
일단, 운의 영향이 너무 큽니다. 공부하시다보면 아시겠지만, 정처기의 경우 이론의 양이 정말 어마무시합니다. 당연하게도 저 처럼 공부하고 가면 제가 공부한 파트에서 출제 0% 일 수도 있기 때문에 가능한 그래도 전체적으로 한번 보시고 중요한 부분만 조금 더 공부하시는 방법을 추천 드립니다.

문제 난이도

필기의 경우 난이도 자체는 굳이 따지자면 쉬운 편이라고 생각합니다.
물론 모든 이론을 다 이해하고 정석적인 방법으로 시험을 본다면 조금 얘기가 다르지만 시험 합격을 목표로 공부하는 것이라면 넉넉하게 한 3일 잡고 CBT만 열심히 뺑뺑이 돌리면 어느정도 합격권이 보장된다고 보기 때문입니다.

실기의 경우는... 조금 들쑥날쑥하다고 생각합니다.
각 회차마다 난이도도 조금 다르고 필기처럼 문제은행식이 아니기 때문에 비슷한 문제도 꼭 있지만 매 회 진짜 기출문제집에서는 볼 수 없었던 신박한 친구들도 등장하는것 같습니다.
제가 합격한 2025년 1회의 경우 진수변환과 재귀함수 쪽 문제가 많이 출제되었고 이론보다는 프로그래밍 쪽 문제가 더 많은 경향을 보였습니다. 그래서 문제를 푸는 내내 "와 이거 쉽지않네? 계산기 안갖고왔으면 큰일날뻔;;" 이 상태였습니다!
따라서 실기는 솔직히 말하면 어느 정도 운이 필요하다고 생각됩니다.....

아니면 정말 공들여서 모든것을 마스터하고 가거나?

2025년도 제 1회 정보처리기사 실기 가답안 URL

온라인IT자격증의 시작 기사퍼스트로 대비하세요.

정보공유 >> 가답안 * 가답안 복원과 무관한 글은 사전 통보 없이 삭제하겠습니다.* 25년 1회 정보처리기사 실기 시험은 4월 20일(일) 오전 9:00 시행됩니다.시험 당일 가답안이 진행될 예정입니다. (

gisafirst.com

정처기 실기의 경우 시험이 종료된 후 여러 사람들의 기억력을 모아서 문제를 복원한 후 가답안(당연하게도 기억력에 의존하다보니 정확하지 않을 수 있습니다.)이 만들어집니다! 시험 후 참고하시면 좋을꺼 같아요!

드디어 합격

합격자 조회 화면

자격증 취득 내역!

지금 시간이 좀 지나서 점수를 확인할 수는 없지만 제 기억에 합격 커트라인이 60점 인데 61점으로 합격했던것으로 기억합니다.
아마도 프로그래밍 영역에서 부분 점수를 받았던 것으로 추측 됩니다.

선택과 집중으로 어떻게든 2025년 올해 목표였던 정보처리기사를 취득할 수 있었네요!
제 방식이 정답은 아니므로 혹시 정보처리기사를 준비하신다면 참고 정도만 해주시면 좋을 것 같습니다!

마치며

진짜 이번에 불합격 하면 정보처리기사 라는 저 글자 자체를 외면하려했는데, 다행히 이번 3번의 도전에서 합격하게되었네요.
좀 많이 우당탕탕인 수기이긴 하지만, 정보처리기사를 준비하시는 다른 분들께 도움이 될 수 있으면 좋겠네요!
문제집은 어떤게 좋을까 고민하실 수도 있는데, 저는 솔직히 다 거기서 거기인것 같습니다! 차이가 있으면 얼마나 있겠습니까 ㅎㅎ 그런 것 보다 내가 뭐가 약한지 뭐가 강한지 어떤 전략을 써야할지를 좀 더 고민해보는게 좀 더 유의미한 고민이 아닐까 생각합니다!

그리고 여러분 본인이 산수 마스터다 난 진수변환? 껌이다 재귀 머리속으로 돌리기? 껌이다 라고 하시더라... 계산기... 꼭 가져가세요... 생각보다 중간에 계산실수가 생각보다 많이 나옵니다... 계산실수 중간에 한번 잘못하면 답이 영 이상한 곳으로 가버리는 경우가 많아서... 부디.... 계산기라는 문물을 꼭 이용하시길.....⭐

너무너무 게을러서 합격 후 3개월 만에 쓰는 저의 수기를 읽어주셔서 감사합니다!
또 너무 늦지 않게 다른 글로 찾아오겠습니다! ㅎㅎ

모두모두 화이팅입니다!

[Vue3] 반응형 데이터 : ref() 와 reactive()

geehyun — Sat, 15 Mar 2025 21:17:52 +0900

[Vue3] 반응형 데이터 : ref() 와 reactive()

반응형 데이터

Vue에서 반응형 데이터(Reactivity) 란, 데이터가 변경될 때 자동으로 UI가 업데이트되는 데이터를 의미한다.
데이터가 변하거나 특정 조건이 되었을 때 직접 UI에 이를 적용해주던 기존 방식보다 훨씬 간편하게 UI를 조작 및 관리할 수 있다.

기존방식

<p> 이름 : <strong id="userNm"></strong> </p>
<input type="text" name="userNm" placeholder="이름을 입력하세요" /> 

<script>
  document.querySelector('input[name=userNm]').eventListener('input', ()=>{
      document.getElementById('userNm').innerText = this.value;
  });
</script>

Vue의 반응형 데이터 방식

<template>
    <p> 이름 : <strong id="userNm">{{ userNm }}</strong> </p>
    <input type="text" name="userNm" placeholder="이름을 입력하세요" v-model="userNm" /> 
</template>

<script setup lang="ts">
  import { ref } from "vue";
  const userNm = ref('');
</script>

Vue3에서는 이러한 반응형 데이터를 사용하는 대표적인 방법으로 ref(), reactive() 가 있다.

ref()

<template>
    <p>{{ count }}</p>
    <button @click="count.value++">+1</button>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  const count = ref(0);
</script>

reference 라는 의미로 반응형 데이터를 만들고, 해당 값을 참조할 수 있도록 해주는 함수
기본형, 객체, 배열 등의 모든 자료형을 감쌀 수 있다.
주로 기본형 타입을 담는데 유리하다.
생성 후 값에 접근할 때는 변수.value로 접근해줘야한다.
값 자체가 변경될 때, 객체 또는 배열에서 내부 값 또는 속성이 변경될 때 모두 감지할 수 있음

reactive()

<template>
    <p v-for="(item, id) of obj" :key="id">저의 {{id}} 은/는 {{item}} 입니다.</p>
</template>

<script setup lang="ts">
  import { reactive } from "vue";
  const obj = reactive({"이름": "geehdev", "직업": "developer", "취미": "game"});
</script>

ref와 마찬가지로 반응형 데이터를 만드는 함수로, 배열, 객체 등 객체의 반응형 상태관리에 유리하다.
생성 후 값에 접근할 때는 .value 없이 직접 접근이 가능하다.
값 내부 속성이 변경될 때 업데이트를 감지하며, 값 자체가 변경될 때는 반응성 성질을 잃는다.

ref() vs reactive()

모두 vue에서 반응형 데이터를 만들고, 반응형 상태관리를 할 수 있지만, 사용목적과 동작방식에 따라 차이점이 있다.

1. 사용 타입

ref(), reactive() 모두 모든 타입을 대입할 수는 있으나, 업데이트 감지 범위와 반응성 유지 여부가 달라 각 각 주로 사용되는 타입이 다르다.

ref() : 기본타입을 대입에 사용된다. (값 자체의 변경을 감지하기 때문)
reactive() : 배열, 객체 타입을 대입에 주로 사용된다. (값 내부 속성의 변화를 감지하기 때문)

예시

ref()

<!-- ref -->
<script setup lang="ts">
    const ref1 = ref('ref 입니다.');
    const ref2 = ref(12345);
    const ref3 = ref({'key1' : 'value1', 'key2' : 'value2'});
    const ref4 = ref([1,2,3,4,5,6,7]);
</script>

<template>
    <strong>1. 기본형</strong>
    <p>ref1 = {{ref1}}</p>
    <p>ref2 = {{ref2}}</p>
    <strong>2. 객체</strong>
    <p>{{ ref3 }}</p>
    <p v-for="(value, key) in ref3">ref3[{{ key }}] = {{ value }}</p>
    <strong>3. 배열</strong>
    <p>{{ ref4 }}</p>
    <p v-for="(item, idx) in ref4">ref4[{{ idx }}] = {{ item }}</p>
</template>

ref()의 사용 타입 예시 화면

reactive()

<!-- reactive -->
<script setup lang="ts">
    const reactive1 = reactive({"name" : "지현", "age" : 0, "arr": []});
    const reactive2 = reactive([1,2,3,4,5,6,7]);
    let reactive3 = reactive(0);        // 기본타입의 경우 대입은 가능하나, 값 변경될 시 감지 못함 => 반응형 데이터 특성을 잃음(아래 참고)
    let reactive4 = reactive("test");   // 기본타입의 경우 대입은 가능하나, 값 변경될 시 감지 못함 => 반응형 데이터 특성을 잃음(아래 참고)
</script>

<template>
    <p>{{ reactive1 }}</p>
    <p>{{ reactive2 }}</p>
    <p>{{ reactive3 }}</p>
    <p>{{ reactive4 }}</p>
</template>

Reactive()의 사용 타입 예시 화면

2. 업데이트 감지 범위와 반응성 유지 여부

ref()
1. 내부적으로 Object.defineProperty()를 사용하여 .value의 변경을 추적
2. 대입된 값 자체의 변경을 감지한다.
reactive()
1. Vue의 Proxy 기반으로 객체의 변화를 추적
2. 대입된 값 내부 속성의 변화를 감지한다.
3. 값 자체게 변경될 경우 반응성 성질을 잃고 변화를 감지하지 못하게된다. (기본형 타입에 사용하지 않는 이유)

예시

ref()

<!-- ref -->
<script setup lang="ts">
    let obj = ref({"name" : "지현", "age" : 0});
    const changeAgeOnly = (add:number) => {
      obj.value.age = obj.value.age + add;
    };
    const changeObj = (name:string, age:number) => {
      obj.value = ref({"newName" : name, "newAge" : age});
    }
</script>

<template>
    <p> obj = {{ obj }}</p>
    <strong>1. 값의 속성만 변경</strong>
    <button @click="changeAgeOnly(10)">나이 10살 더하기</button>	<!-- 업데이트 감지함 -->
    <strong>2. 값 자체를 변경</strong>
    <button @click="changeObj('새로운 지현', 200)">객체를 바꾸기</button> <!-- 업데이트 감지함 -->
</template>

ref() 업데이트 감지 범위 예시 - 값 내부 속성만 변경 시에도 업데이트 감지함.

ref() 업데이트 감지 범위 예시 - 값 자체를 변경 시에도 업데이트 감지함.

reactive()

<!-- reactive -->
<script setup lang="ts">
    const reactive1 = reactive({"name" : "지현", "age" : 0, "arr": []});
    const reactive2 = reactive([1,2,3,4,5,6,7]);
    let reactive3 = reactive(0);        // 기본타입의 경우 대입은 가능하나, 값 변경될 시 감지 못함 => 반응형 데이터 특성을 잃음(아래 참고)
    let reactive4 = reactive("test");   // 기본타입의 경우 대입은 가능하나, 값 변경될 시 감지 못함 => 반응형 데이터 특성을 잃음(아래 참고)

    const selectVar = ref('');
    const inputText = ref('');
    const changeReactive = (idx) => {
      if(idx === 1) {
        reactive1["name"] = '변경된 값';
        reactive1["age"] = '20';
        reactive1["etc"] = '기타';
        reactive1["arr"].push(1)
      }
      if(idx === 2) {
        reactive2.push(100);
      }
      if(idx === 3) {
        reactive3 = 'reactive3 변경';
      }
      if(idx === 4) {
        reactive4 = 'reactive4 변경';
      }
    };
</script>

<template>
    <p>{{ reactive1 }}</p>
    <p>{{ reactive2 }}</p>
    <p>{{ reactive3 }}</p>
    <p>{{ reactive4 }}</p>
    <button @click="changeReactive(1)">reactive1 값 변경</button>
    <button @click="changeReactive(2)">reactive2 값 변경</button>
    <button @click="changeReactive(3)">reactive3 값 변경</button>    <!-- 값이 변경되긴하나, 업데이트를 감지하지 못해 UI변화 없음 -->
    <button @click="changeReactive(4)">reactive4 값 변경</button>  <!-- 값이 변경되긴하나, 업데이트를 감지하지 못해 UI변화 없음 -->
</template>

reactive() 업데이트 감지 범위 예시 - 값 내부 속성 변경 시에 업데이트 감지함.

reactive() 업데이트 감지 범위 예시 - 값 자체가 변경될 시엔은 업데이트 감지 못함.

3. 데이터 접근 방식

ref()
1. 기본적으로 값에 접근할 때는 .value로 접근한다.
2. 단, template 내부에서는 Auto Unwrapping 으로 변수명으로 직접 접근한다.
reactive()
1. .value 없이 직접 접근한다.

예시

ref()

<script setup lang="ts">
    // ref : 3-1. template 내에서 값 접근 : Auto Unwrapping
    const count1 = ref(0);

    // ref : 3-2. template 외부 에서의 값 접근 : .value로 접근
    let count2 = ref(0);
    const add1UseValue = () => { count2.value++;};
    const add1NotUseValue = () => { count2++; };
</script>

<template>
    <!-- ref : 3-1. template 내에서 값 접근 : Auto Unwrapping -->
    <p>count = {{ count1 }}</p>
    <strong>1. 직접 접근</strong>
    <button @click="count1++">count1++</button>
    <strong>2. .value로 접근 => error 발생</strong>
    <button @click="count1.value++">count1.value++</button>

    <!-- ref : 3-2. template 외부 에서의 값 접근 : .value로 접근 -->
    <p>count = {{ count2 }}</p>
    <strong>1. 직접 접근 => 반응형 특성 잃음</strong>
    <button @click="add1NotUseValue()">add1NotUseValue</button>
    <strong>2. .value로 접근</strong>
    <button @click="add1UseValue()">add1UseValue</button>
</template>

ref() 데이터 접근 방식 예시 - template 내부 : 직접 접근 시 정상 작동

ref() 데이터 접근 방식 예시 - template 내부 : .value 사용 시 에러 발생

reactive()

<script setup lang="ts">
	 // reactive : 3. 어디서든 변수로 바로 접근
    const arr = reactive([1,2,3,4,5]);
    const addArr = ()=> {
        arr.push(arr.length + 1);
    }
</script>

<template>
	<!-- reactive : 3. 어디서든 변수로 바로 접근  -->
    <p v-for="item of arr">{{ item }}</p>
    <button @click="addArr">arr push</button>
</template>

reactive() 데이터 접근 방식 예시 - 어디서든 변수명으로 바로 접근 가능

4. 구조분해할당 처리 방식

기본적으로 ref(), reactive() 로 할당된 반응형 데이터를 구조분해할당할 경우 구조분해할당된 변수에서는 기존 반응형 성질을 잃게된다.
그러나 toRefs() 를 사용하여 구조분해할당한 변수도 ref 변수로 만들어 사용할 수 있다.

예시

ref()

<script setup lang="ts">
    // ref : 4. 구조분해할당 사용
    let cnt = 0;
    const refObj = ref({"name" : "지현", "age" : 0});
    let {name: objName, age: objAge} = refObj.value;                // 일반 변수로, 반응형 성질 없음
    let {name: objName2, age: objAge2} = toRefs(refObj.value);        // toRef()를 사용하여 ref 변수로 생성
    const changeObjName = () => {
      refObj.value["name"] = refObj.value["name"] + cnt;
      refObj.value["age"] = refObj.value["age"] + cnt;
      cnt ++;
    };
</script>

<template>
    <!-- ref : 4. 구조분해할당 사용 -->
    <p>refObj : {{ refObj }}</p>
    <p>objName : {{ objName }}</p> <p>objAge : {{ objAge }}</p>            <!-- 일반 데이터로 refObj 변경될 시 같이 변경 안 됨 -->
    <p>objName2 : {{ objName2 }}</p> <p>objAge2 : {{ objAge2 }}</p>        <!-- 반응형 데이터로 refObj 변경될 시 같이 변경 됨 -->
    <button @click="changeObjName">refObj 값 변경</button>
</template>

ref() 에서 구조분해할당 사용예시 - 기본적으로는 반응형 유지 X / toRefs() 사용 시 반응형 유지 가능

reactive()

<script setup lang="ts">
    // reactive : 4. 구조분해할당 사용
    let cnt2 = 0;
    const reactiveObj = reactive({"name" : "지현", "age" : 0});
    const {name : reactiveObjName, age: reactiveObjAge} = reactiveObj;                // 일반 변수로, 반응형 성질 없음
    const {name : reactiveObjName2, age:  reactiveObjAge2} = toRefs(reactiveObj);    // toRef()를 사용하여 ref 변수로 생성
    const changeReactiveObjName = () => {
      reactiveObj["name"] = reactiveObj["name"] + cnt2;
      reactiveObj["age"] = reactiveObj["age"] + cnt2;
      cnt2++;
    };
</script>

<template>
    <!-- reactive : 4. 구조분해할당 사용 -->
    <p>reactiveObj : {{ reactiveObj }}</p>
    <p>reactiveObjName {{ reactiveObjName }}</p> <p>reactiveObjAge {{ reactiveObjAge }}</p>            <!-- 일반 데이터로 refObj 변경될 시 같이 변경 안 됨 -->
    <p>reactiveObjName2 {{ reactiveObjName2 }}</p> <p>reactiveObjAge2 {{ reactiveObjAge2 }}</p>        <!-- 반응형 데이터로 refObj 변경될 시 같이 변경 됨 -->
    <button @click="changeReactiveObjName">reactiveObj 속성 값 변경</button>    
</template>

reactive() 에서 구조분해할당 사용예시 - 기본적으로는 반응형 유지 X / toRefs() 사용 시 반응형 유지 가능

요약

항목	ref()	reactive()
주 사용 타입	원시 타입 (`string`, `number`, `boolean`)	객체, 배열
반응성 감지 방식	`.value`의 변경을 감지 (`Object.defineProperty` 사용)	Proxy 기반으로 내부 속성 변경을 감지
값 변경 감지 여부	값 자체의 변경을 감지	내부 속성 변경을 감지하지만, 객체 자체를 변경하면 반응성을 잃음
템플릿 내부에서 접근 방식	`- 변수명으로 직접 접근 - .value로 접근 시 에러 발생 {{ 변수명 }}` (Auto Unwrapping 지원)	`변수명으로 직접 접근 ex : {{ 객체명 }}, {{ 객체명.속성 }}`
템플릿 외부에서 접근 방식	`.value`로 접근해야 함 (`refVar.value`)	`.value` 없이 직접 접근 가능
배열, 객체 사용 여부	가능하지만 `.value` 필요	`.value` 없이 바로 사용 가능
구조 분해 시 반응성 유지 여부	`const { x } = refObj.value;` → ❌ 반응성 깨짐 `const { x } = toRefs(refObj.value);` → ✅ 반응성 유지됨

마치며

vue에서 가장 강력한 기능인 반응형 데이터를 사용하는 기초적인 방식에 대해서 공부하고 정리해봤다.

정리하면서 ref와 reactive를 사용할 때 각각 정확히 어떤 상황에서 사용하는 것이 유리한 가에 초점을 두고 알아봤는데, ref의 경우 비교적 간단하게 기본형 타입에 대해 값을 바인딩 해줄때 사용하고, reacive는 객체, 배열을 담아서 사용할 때 유리하다고 생각된다.

[Vue3] Vue 템플릿 문법 (Mustache, Directive)

geehyun — Sun, 2 Mar 2025 01:08:05 +0900

[Vue3] Vue 템플릿 문법 (Mustache, Directive)

Vue 탬플릿 문법

탬플릿(Template)란 기본적으로 UI를 구성하는 틀로, 웹 개발에서는 HTML을 기반으로 화면을 구성하는 요소를 탬플릿이라 볼 수 있다.
Vue에서는 단순 정적 탬플릿이 아니라 데이터의 변화에 따라 동적으로 반응하여, 반응형 데이터를 바인딩할 수 있도록 설계되어 있다.

1. Mustache 문법

<p>{{ message }}</p>

{{}} 형식으로 작성하는 문법으로, 데이터를 바인딩할 때 쓰인다.
{{ 변수 }} 형식으로 작성하여 변수에 들어있는 데이터를 화면에 표시해주는 역할을 한다.

나 Mustache 라는걸 들어봤어요! 어디서 들었더라?
Mustache.js라는 탬플릿엔진에서 쓰이던 문법으로 원래는 HTML을 그리는 시점에 들어온 데이터를 바인딩하는 정적 데이터 바인딩 문법이었으나, Vue에서 이를 차용하여 반응형 데이터를 바인딩할 수 있도록 지원하는 Vue Mustache 문법을 제공한다.

특징

단방향 데이터 바인딩
- {{}} 안에 들어있는 변수의 데이터가 변경되면 자동으로 UI가 업데이트된다.
- 다만, 사용자가 값을 변경할 수는 없는 단방향 데이터 바인딩 방식.
자바스크립트 표현식 사용가능
- 다만 if/else, for와 같은 문법은 구현 불가

<p>{{ text.toUpperCase() }}</p>
<p>{{ count * 2 }}</p>

사용법

작성 코드

<script setup lang="ts">
import {ref} from "vue";

const name = ref('지현');
</script>

<template>
  <h1>Vue 탬플릿 문법</h1>

  <h2>1. Mustache </h2>
  <div>안녕하세요? {{ name }} 님! Vue 세상에 오신걸 환영합니다.</div>
</template>

출력 화면

mustache 문법 사용예시

2. 디렉티브(Directive)

Vue에서 HTML 요소를 조작하거나 HTML 요소의 속성을 조작할 수 있다.
v- 접두어로 시작하면 HTML 태그의 속성처럼 작성하여 사용한다. (thymeleaf 에서 th- 문법과 유사)

1) v-bind

HTML 속성 값을 동적으로 바인딩할 수 있다.
v-bind:속성이름="값" 또는 :속성이름="값" 의 형식으로 작성한다.

작성 코드

<script setup lang="ts">
    import { ref } from 'vue'
    const geeDevBlog = ref('https://geehyun.tistory.com/');
</script>
<template>
    <strong>1. 기본형</strong>
    <a v-bind:href="geeDevBlog">GeeDev 블로그에 놀러오세요 1</a>

    <strong>2. 단축형</strong>
    <a :href="geeDevBlog">GeeDev 블로그에 놀러오세요 2</a>
</template>

출력 화면

v-bind 문법 사용예시

2) v-if

입력된 조건이 true일 경우만 해당 태그를 렌더링 한다.
즉, 조건이 false일 경우 렌더링 된 HTML 문서상 아예 존재하지 않는다. (DOM 에서 아예 존재 X)
v-if="조건" 의 형식으로 사용되며, 조건에서 간단한 연산자나 함수를 사용할 수 있다.

작성 코드

<script setup lang="ts">
    import { ref } from 'vue'
    const cost1 = ref(5000);
    const cost2 = ref(20000);
</script>
<template>
    <p>{{cost1}} <span v-if="cost1 > 10000">만원 초과!!!</span><span v-else>만원 미초과!!!</span></p>
    <p>{{cost2}} <span v-if="cost2 > 10000">만원 초과!!!</span><span v-else>만원 미초과!!!</span></p>
</template>

출력 화면

v-if 문법 사용예시

3) v-show

입력된 조건이 true일 경우만 화면에 표시한다.
조건이 true든 false이든 렌더링은 하며, 다만, 조건이 false일 경우 display:none; 처리된다. (조건이 false 이더라도 DOM 에는 존재함)
그 외 사용법은 v-if와 동일하다.

작성코드

<script setup lang="ts">
    import { ref } from 'vue'
    const odd = ref(5);
</script>
<template>
    <p>{{odd}}는</p>
    <p v-show="odd % 2 != 0">홀수</p>
    <p v-show="odd % 2 == 0">짝수</p>
    <p>입니다.</p>
</template>

출력화면

v-show 문법 사용예시

4) v-for

배열이나 객체를 반복하여 작성한 요소를 자동으로 생성한다.
v-for="변수 in 배열(또는 객체)" 로 사용하거나, v-for="(변수, 인덱스변수) in 배열(또는 객체)"로 인덱스(또는 키)를 사용할 수 있다.
:key 로 해당 배열(또는 객체)의 고유의 식별자를 지정해 줄 수 있다.
- 식별자의 경우 객체의 key처럼 중복되지 않은 고유한 값을 사용해야 한다. (없으면 인덱스라도 사용 권장)
- vue가 해당 배열(또는 객체)의 데이터를 구분하는 고유한 식별자로 성능 최적화, 올바른 업데이트 등을 위해 사용하는 것이 좋다.

작성코드

<script setup lang="ts">
    import { ref } from 'vue'
    const nameArray = ref(['지현', '김아무개', '홍길동', '김철수', '김영희']);
    const nameObj = ref<Record<string, any>>({"name": "geehyun", "age": "5살", "gender" : "female"});
</script>
<template>
    <strong>1. for of 사용</strong>
    <p v-for="name of nameArray">저는 {{name}} 입니다.</p>

    <strong>2. for index 사용</strong>
    <p v-for="(item, index) of nameArray" :key="index">저는 {{index + 1}} 번째 이름 {{item}} 입니다.</p>
    <hr>
    <p v-for="(item, id) of nameObj" :key="id">저의 {{id}} 는 {{item}} 입니다.</p>
</template>

출력화면

v-for 문법 사용예시

5) v-model

양방향 데이터 바인딩을 제공한다.
input, textarea, select 등의 form 요소와 연결하여 사용자가 값을 입력(또는 선택) 할 시 자동으로 Vue 데이터도 변경되고, Vue 데이터가 변경되면 입력 필드의 값이 변경되는 양방향 데이터 바인딩 기능이다.

작성코드

<script setup lang="ts">
    const input = ref('입력 전');
</script>
<template>
    <input v-model="input" placeholder="이름을 입력하세요">
    <br>
    <p>저는 {{input}} 입니다.</p>
</template>

출력화면

v-model 문법 사용예시 (사용자 입력 전)

v-model 문법 사용예시 (사용자 입력 후)

6) v-on

각 이벤트 별 이벤트 핸들러를 등록할 수 있다.
v-on:이벤트명="값" 또는 @이벤트명="값"의 형태로 사용할 수 있다.

작성코드

<script setup lang="ts">
    const count1 = ref(0);
    const count2 = ref(0);
    const count3 = ref(0);
    const count4 = ref(0 as number);
    const inputNum = ref(0);
    const add1 = ()=>{count3.value++;};
    const addNum = (num:number)=>{count4.value+=num;};
</script>
<template>
    <strong>1. 기본형</strong>
    <button v-on:click="count1++">+1</button>
    <p>count1 : {{count1}}</p>

    <strong>2. 단축형</strong>
    <button @click="count2++">+1</button>
    <p>count2 : {{count2}}</p>

    <strong>3. 함수사용 : 인자없음</strong>
    <button @click="add1">add1</button>
    <p>count3 : {{count3}}</p>

    <strong>4. 함수사용 : 인자있음</strong>
    <input v-model="inputNum" type="number"></input>
    <button @click="addNum(inputNum)">+</button>
    <p>count4 : {{count4}}</p>
</template>

출력화면

v-on 문법 사용예시 (이벤트 발생 전)

v-on 문법 사용예시 (이벤트 발생 후)

7) v-html

HTML 태그가 포함된 문자열을 실제 HTML로 렌더링 할 수 있다. (JavaScript에서 innerHTML과 유사)
단, 사용 시 사용자 입력 값을 v-html로 바로 출력하는 것은 보완적으로 위험할 수 있으며, XSS 공격에 유의해야 한다.

작성코드

<script setup lang="ts">
    const htmlContents = ref(`<table style="border: 1px solid black"><tr><th>항목 1</th><td>항목2</td></tr><tr><td>내용 1</td><td>내용 2</td></tr></table>`);
</script>

<template>
    <strong> 1. v-html 로 넣었을 때</strong>
    <div v-html="htmlContents"></div>
    <strong v-pre> 2. {{}} 로 넣었을 때</strong>
    <div>{{htmlContents}}</div>
</template>

출력화면

v-html 문법 사용예시

8) v-text

내용을 텍스트로 삽입할 때 사용된다. (JavaScript에서 textContent와 유사)
HTML 또는 JavsScript 등 코드가 들어와도 텍스트 그대로 화면에 출력한다.

작성코드

<template>
    <strong> 1. v-text 로 넣었을 때</strong>
    <div v-text="htmlContents"></div>
    <strong v-pre> 2. {{}} 로 넣었을 때</strong>
    <div>{{htmlContents}}</div>
</template>

<script setup lang="ts">
    const htmlContents = ref(`<table style="border: 1px solid black"><tr><th>항목 1</th><td>항목2</td></tr><tr><td>내용 1</td><td>내용 2</td></tr></table>`);
</script>

출력화면

v-text 문법 사용예시

9) v-slot

slot이란 vue에서 부모 컴포넌트가 자식 컴포넌트의 특정 영역을 직접 정의하는 기능으로, v-slot으로 이러한 slot을 제어할 수 있다.
부모 컴포넌트에서 slot <template v-slot:슬릇명>으로 슬롯을 지정하고, 자식 컴포넌트에서 <slot name="슬릇이름"> 으로 사용할 수 있다.
<template v-slot:슬릇명> 또는 <template #슬릇명> 으로 사용할 수 있다. 또한, <template v-slot:default> 로 default로 설정한 slot에 대해서는 자식 컴포넌트에서 <slot>의 형식만으로도 사용할 수 있다.
또한, slot을 사용할 때 부모 컴포넌트는 자식 컴포넌트의 데이터를 받아 해당 데이터를 활용하여 해당 slot 내에서 사용할 수 있다. 이를 Scoped Slot 이라 한다.

작성코드

<!-- 부모 영역 : Parent.vue -->
<template>
    <ChildComponent>
        <template v-slot:default>
            <p>안녕 난 부모 영역이야! 이름 없는 slot 이지!</p>
        </template>
        <template v-slot:test1>
            <p>난 test1 라는 이름의 slot 이야. 기본형으로 사용했지 </p>
        </template>
        <template #test2>
            <p>난 test2 라는 이름의 slot 이야. 단축형으로 사용했어 </p>
        </template>
        <template #test3="{data}">
            <p>난 test3 라는 이름의 slot 이야. 아래는 자식 컴포넌트에서 받은 데이터로 출력한거야</p>
            <p v-for="(item, key) in data" :key="key">key : {{ key }} / item : {{ item }}</p>
        </template>
    </ChildComponent>
</template>

<!-- 자식 영역 : ChildComponent.vue -->
<template>
    <strong> 1. default slot 사용</strong>
    <slot></slot>
    <strong> 2. named slot 사용 : 기본형</strong>
    <slot name="test1"></slot>
    <strong> 3. named slot 사용 : 단축형</strong>
    <slot name="test2"></slot>
    <strong> 4. scoped slot 활용</strong>
    <slot name="test3" :data="childData"></slot>
</template>

출력화면

v-slot 문법 사용예시 (작성코드)

v-slot 문법 사용예시 (출력 내용)

10) v-cloak

Vue가 화면을 완전히 로드할 때까지 해당 태그를 아예 화면에서 보이지 않게 처리할 수 있게 할 수 있다.
네트워크 환경이 느리거나, 불러올 요소가 많은 경우 Vue가 화면을 완전히 렌더링 하기 전 {{변수}}와 같은 vue 문법들이 텍스트 그대로 화면에 표시되는 경우가 있다. 이를 방지하기 위해 v-cloak을 사용할 수 있다.
Vue가 화면을 완전히 렌더링 하기 전 v-cloak을 넣은 요소에 v-cloak HTML 속성에 추가하여 CSS Style 로 display:none 처리 또는 커스텀 로딩중 처리 등으로 사용할 수 있다. (v-cloak 속성 자체가 처리해 주는 게 아니기 때문에 별도 CSS 처리 필요)
즉 v-cloak 사용 시 렌더링 완료 전 v-cloak HTML 속성이 추가되며, 렌더링 완료 후 v-cloak HTML 속성이 제거된다.

작성코드

<script setup lang="ts">
    const message = ref('로딩 완료~');
</script>

<template>
    <div v-cloak>{{message}}</div>
</template>

<style>
    [v-cloak] {
        display: none;
    }
</style>

출력화면

v-cloak 문법 사용예시

v-slot 문법 사용예시 (로딩 완료 후 html 요소에 v-cloak 속성 없는 부분 확인)

해당 문법의 경우! 보이지 않는 걸 캡처하기 어려워 랜더링 된 상태만 확인

11) v-pre

해당 디렉티브 문법을 사용 시 해당 HTML 요소 하위에 있는 요소에서 Vue 탬플릿 문법을 해석하지 않도록 처리한다.
HTML 기본 태그 중 pre코드가 해당 태그 내 HTML 문법으로 작성된 내용도 HTML 문법으로 읽지 않고 텍스트 그대로 표시하는 것처럼, v-pre 도 {{}} 등의 Vue 문법을 해석하지 않고 텍스트 그대로 표시하게 한다.

작성코드

<script setup lang="ts">
    const mustache = ref('전 mustache 에요! 콧수염같이 생겨서 이름이 이렇답니다.');
</script>

<template>
    <strong> 1. v-pre 사용</strong>
    <div v-pre>{{mustache}}</div>
    <strong> 2. v-pre 미사용</strong>
    <div>{{mustache}}</div>
</template>

출력화면

v-pre 문법 사용예시

12) v-memo

Vue3에서 새로 추가된 기능이며, 캐싱을 이용해 성능을 최적화할 수 있는 기능이다.
v-memo 에 입력된 값 기준으로 데이터의 변경 여부를 판단하여, 해당 값이 변경되지 않으면 다시 렌더링 하지 않도록 한다.
배열, 객체 데이터에서 특정 항목 기준으로 변경 여부를 판단하고, 그 외 다른 값이 변경되는 것은 변경으로 보지 않도록 하여 불필요한 렌더링을 줄이고, 성능을 최적화할 수 있다.

작성코드

<script setup lang="ts">
    const count = ref(0);
    const memo = ref('초기 값');
</script>

<template>
    <strong> 1. v-memo 사용</strong>
    <p v-memo="[count]"> count : {{count}} / memo : {{memo}}</p>
    <!-- count 값이 변경될 때만 렌더링 되며, memo의 값만이 변경될 때는 렌더링 되지 않는다. -->

    <strong> 2. v-memo 미사용</strong>
    <p> count : {{count}} / memo : {{memo}}</p>
    <!-- count, memo 값 각각 변경될 때마다 렌더링 된다. -->

    <button @click="count++">1 증가</button>
    <button @click="memo+= '+' + count">메모 더하기</button>
</template>

출력화면

v-memo 문법 사용예시 (값 변경 전)

v-memo 문법 사용예시 (count 값 변경 => v-memo 사용/미사용 모두 같이 변경된 값으로 렌더링 됨.)

v-memo 문법 사용예시 (memo 값 변경 => v-memo 사용한경우 변경되지 않고, 미사용한 경우에만 변경 됨.)

마치며

vue 탬플릿 문법에 대해 공부해 봤는데, thymeleaf를 먼저 사용해 왔던 사람으로서 꽤나 thymeleaf 문법과 유사하다고 느껴졌다.

기존 HTML/CSS/JavaScript 로도 구현이 가능하지만, Vue를 이용한다면 더욱 편하게 사용할 수 있을 것 같다.

특히 v-memo와 v-slot 은 공부하면서 많이 신기했고 앞으로 공부할 Vue 컴포넌트와 함께 Vue 만의 특화된 기능으로 여러 가지 상황에서 활용할 수 있을 것 같다.

꽤나 흥미롭게 Vue 공부를 하고 있다.

[Vue3] Vue.js 소개 및 개발환경 셋팅

geehyun — Mon, 24 Feb 2025 23:14:44 +0900

[Vue3] Vue.js 소개 및 개발환경 셋팅

Vue.js란

개념

Vue.js란 Javascript 기반의 Frontend 프레임워크로, Progressive Framework 즉, 필요한 기능만 사용하면서 점진적으로 확장할 수 있는 유연한 프레임워크 이다.

특징

컴포넌트 기반 개발 : 컴포넌트 기반으로 재사용성이 뛰어나고 유지보수가 쉽다.
반응형 시스템 : 데이터가 변경되면 UI가 자동으로 업데이트 된다.
가볍고 빠름 : 경량화된 프레임워크로 가볍고 속도가 빠르다.
쉬운 학습곡선 : 다른 프론트앤드 프레임워크에 비해 초기 학습곡선이 완만하다 (HTML, CSS, JavaScript 기반)
Vue3에서 Composition API 추가 : 코드 구조를 더욱 모듈화하고 유지보수성을 높일 수 있다.
SPA(Single Page Application) : Vue Router와 함께 사용하면 단일 페이지 애플리케이션을 만들 수 있다.

Coposition API

Options API

기존 Vue2까지 사용하던 방식

data, methode, mounted 등으로 로직이 분리가 되고, 코드가 길어질 수록 유지보수가 어려워진다는 단점이 있었다.

// Options API 방식
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
},
mounted() {
console.log("컴포넌트가 마운트됨");
}
};
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
</template>

Composition API

Vue3에서 추가된 방식으로 현재 공식적으로 권장하는 방식

setup() 내에서 모든 로직 작성 가능하여 코드가 더 직관적이고, 재사용성이 높아졌다.

// Composition API 방식
<script setup>
import { ref, onMounted } from "vue";
const count = ref(0);
const increment = () => {
count.value++;
};
onMounted(() => {
console.log("컴포넌트가 마운트됨");
});
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
</template>

SPA / MPA

SPA

Single Page Application 으로 단일 페이지(주로, index.html 하나)만 두고 모든 화면을 동적으로 변경하여 관리하는 기법

서버에서 전체 페이지를 새로 로드하지 않고 필요한 부분만 JavaScript로 업데이트
비동기 데이터 로드 방식 사용
앱처럼 부드럽고 빠른 사용자 경험 제공 가능
프론트앤드 라우팅 (Vue Router, React Router 등)

MPA

Multi Page Application 으로 요청할 때마다 새로운 HTML 페이지를 서버에서 받아오는 전통적인 웹 방식

항목	SPA	MPA
페이지 로드	한 번 로딩 후, 동적변경	페이지 이동마다 새로 로딩
속도	초기로딩 속도는 다소 느리나, 이후 페이지 전환은 빠름(JS 실행 후 캐싱 이용)	페이지 이동마다 전체 HTML 을 새로 받아와야해서 다소 느릴 수 있음
SEO	어려운편	SEO 친화적

SSR / CSR

SSR

Server Side Rendering 으로 서버에서 페이지를 모두 랜더링하여 완성된 페이지를 클라이언트에 제공해주는 방식

CSR

Client Side Rendering 으로 클라이언트에서 페이지를 동적으로 그리는 방식

항목	CSR	SSR
랜더링 위치	클라이언트(브라우저)	서버
로딩 속도	초기 로딩속도는 느리나 이후 전환 빠름	초기 로딩속도는 빠르나, 페이지 이동 시마다 랜더링 할 경우 비교적 느릴 수 있음
SEO 친화성	낮음	높음
서버부하	부하 낮음	부하 증가 가능
네트워크의 영향	네트워크 속도 빠른환경에서 유리	영향적음
비고	-	SSR에서 첫 페이지 로딩 이후 CSR 방식으로 사용하는 Hydration 방식 이용가능)

왜 CSR 방식은 SEO 친화성이 느릴까?
CSR 방식은 HTML 내 태그를 비워두고 추후 해당페이지 랜더링 시 JavaScript를 통해 페이지를 랜더링 하는데, 구글 등 검색엔진이 사이트를 크롤링할 때는 JavaScript를 기본적으로 실행시키지 않기 때문에 검색엔진 최적화에 다소 어려움이 있다.

Vue.js React Angular

항목	Vue.js	React	Angular
언어	JavaScript(TypeScript지원)	JavaScript(JSX 사용)	TypeScript
컴포넌트 구조	SFC(Single File Component)	JSX 기반 컴포넌트	모듈 기반 컴포넌트
상태관리	`ref()`, `reactive()`, Pinia, Vuex	useState, useReducer, Redux	RxJs,NgRx
라우터	Vue Router	React Router	Angular Router
데이터 바인딩	양방향(v-model)지원	단방향	양방향(ngModel)지원
학습 난이도	쉬움	중간	어려움
적용 범위	소규모~대규모	대규모	대규모 엔터프라이즈급

개발환경 셋팅

1. Vite로 Vue3 설치 및 프로젝트 생성

Vue 프로젝트 빌드 도구에는 Vite 방식과 Vue CLI방식이 있는데, 더 최신 방식이고 Vue3 공식 권장도구인 Vite 방식을 사용하겠다.

# 사용법
# 아래 명령어를 vue 프로젝트를 만들 디렉토리로 이동하여 입력한다.
cd 프로젝트 만들 디렉토리
npm create vite@latest 프로젝트이름 --template vue

# 사용예시
cd D:/Study/vue
npm create vite@latest vue3-study --template vue

# 실제 사용 시 출력내용
PS C:\Use\wkdwlr> cd d:/Study/vue
PS D:\Study\vue> npm create vite@latest vue3-study --template vue
Need to install the following packages:
create-vite@6.2.0
Ok to proceed? (y) y


> npx
> create-vite vue3-study vue

√ Select a framework: » Vue
√ Select a variant: » Official Vue Starter ↗
Need to install the following packages:
create-vue@3.14.2
Ok to proceed? (y) y


> npx
> create-vue vue3-study


Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? » No

Scaffolding project in D:\Study\vue\vue3-study...

Done. Now run:

  cd vue3-study
  npm install
  npm run dev

2. IntelliJ 플러그인 설치

vue.js의 경우 간단하게 vsCode로 주로 사용하는 것 같지만, 저는 익숙한 IntelliJ로 작업할 예정이라 IntellJ를 사용한 방식으로 설명하겠습니다.

File - Settings... - Plugins - Marketplace - Vue.Js 검색 후 Install

IntelliJ에서 Vue.js 플러그인 설치

3. IntelliJ 에서 프로젝트 열기

File - Open - 방금 생성한 vue 프로젝트 디렉토리 열기

열었을 때 src 디렉토리 하위 .vue 파일이 vue파일이 아니라 일반파일로 보인다면?

위 3번에서 설치한 플러그인이 반영이 안된걸 수 있어서 IntelliJ 재기동 또는 해당 플러그인 삭제 후 재설치 필요

4. IntelliJ 에서 라이브러리 의존성 설치 및 개발서버 실행

intelliJ 에서 하단 터미널을 열어서 의존성 설치 및 개발서버 실행 (git bash 또는 shell script 여도 상관없음)

############ 의존성 설치
# 사용법
# 아래의 명령어를 방금 생성한 프로젝트 디렉토리로 이동 후 입력
cd 방금 만든 프로젝트 디렉토리
npm install

# 사용예시
cd ./vue3-study
npm install

# 실제 사용 시 출력내용
PS D:\Study\vue> cd .\vue3-study\
PS D:\Study\vue\vue3-study> npm install

added 311 packages, and audited 312 packages in 35s

78 packages are looking for funding
  run `npm fund` for details

11 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

############ 개발서버 실행
# 사용법
npm run dev

#사용예시
npm run dev

# 실제 사용 시 출력내용 
PS D:\Study\vue\vue3-study> npm run dev

> vue3-study@0.0.0 dev
> vite


  VITE v6.1.1  ready in 1359 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

5. Vue 프로젝트 기본 메인 화면 보기

브라우저를 열고 아래 주소를 입력하여 Vue 기본 메인 페이지가 잘 열리는지 확인한다.

http://localhost:5173/

vue 기본 메인페이지

마치며

자바 개발자로서 기본적으로 HTML, CSS, JavaScript, Jquery 와 JSP, Thymeleaf 정도만 사용하여 개발을 하면서 프론트앤드의 기술을 알아두고 싶어서 공부하기 시작하였다.
React와 Vue.js 중에 뭘 시작할지 고민을 많이 하였지만, 학습곡선이 비교적 완만하고 완전히 프론트앤드 개발자 보다는 풀스택 개발자들이 주로 쓴다고 여겨지는 Vue.js를 공부하기로 했다.

[티스토리] 게시글 내 목차 만들기

geehyun — Fri, 21 Feb 2025 14:57:35 +0900

[티스토리] 게시글 내 목차 만들기

개요

✅기능

게시글 내 h태그를 이용하여 목차를 자동 생성할 수 있고
각 각 목차를 클릭 시 해당 내용으로 이동하도록 (id와 a태그의 href="#아이디" 방식 사용)
현재 스킨이 반응형이기 때문에 그에 따라 목차도 반응형으로 구성 (접이식 목차 / 기본목차)

✅ 방식

게시글 작성 시 제목1, 제목2, 제목3 (h태그)를 사용하여 구현 예정
티스토리 내 스킨편집과 서식 기능을 이용해서 구현 예정 - html / css / js 작성

목차를 만드려는 이유

기존 velog에서 티스토리로 이사 오면서 여러 가지 차이점과, 각 각의 장단점을 느꼈었습니다.

그중 velog에서는 마크다운 문법으로 글을 작성하면 알아서 목차가 구성되는데, 티스토리의 경우 스킨에 따라 목차가 있을 수 있지만, 제가 택한 스킨에는 없어서 이번 기회에 추가해 보기로 했습니다.

Velog 에서 자동 생성되는 목차 : 클릭 시 해당 내용으로 이동 됨.

여러 가지 글들을 찾아봤지만, 그냥 티스토리 내 스킨편집 기능을 이용해 스스로 작업해보려고 합니다.(스스로 불러온 재앙...)

작업 진행

1. HTML작성

목차 HTML 을 작성합니다.
해당 HTML 목차는 티스토리 스킨편집에서 게시글 본문에 해당하는 위치를 확인하고 해당 위치에 넣어줄 예정

<!-- 목차 영역 made by GeehDev -->
<div id="indexArea" class="index-area">
    <!-- 목차 제목  made by GeehDev -->
    <h3 class="index-area-title">목차</h2>
    <!-- // 목차 제목 made by GeehDev -->

    <!-- 목차 내용 made by GeehDev -->
    <ul class="index-area-contents"></ul>
    <!-- // 목차 내용 made by GeehDev -->
</div>
<!-- // 목차 영역 made by GeehDev -->

2. CSS 작성

CSS는 저는 우선 간단하게 구성했습니다.

접이식 목차 (우측에 고정되어 있으면서 펼쳐서 보거나 접어놓거나 할 수 있도록)
기본 목차 (게시글 상단에 위치)

/* 목차 컨테이너 스타일 */
#indexArea {
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 10px 25px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: #fff;
  width: 400px;
  z-index: 100;
  font-size: 15px;
  position: fixed;
  top: 100px;
  right: -400px; /* 기본적으로 숨김 */
  transition: all 0.3s ease-in-out;
}

/* 열렸을 때의 상태 */
#indexArea.open {
  right: 10px; /* 나타나게 함 */
}

/* 목차 제목 */
#indexArea > .index-area-title {
  font-weight: bold;
}

/* 목차 구분선 */
#indexArea h4 {
  margin: 5px 0;
  padding: 0 5px;
  color: #b3b3b3;
}
#indexArea h4::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;
}

/* 목차 리스트 스타일 */
#indexArea ul {
  padding: 0;
}
#indexArea ul li {
  list-style-type: none;
  margin: 0;
  line-height: 1.8;
}

/* 목차 링크 스타일 */
#indexArea ul li a {
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
}
#indexArea ul li a:hover {
  color: #6bacce;
}
#indexArea ul li a.active {
  text-decoration: underline;
  color: #6bacce;
  font-weight: bold;
}

/* 활성화된 목차 항목 앞에 강조 바 */
#indexArea ul li a.active::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 5px;
  background-color: #6bacce;
  margin-right: 5px;
}

/* 깊이에 따른 들여쓰기 적용 */
#indexArea ul li.depth1 {
  font-weight: bold;
}
#indexArea ul li.depth2 {
  margin-left: 1.5em;
}
#indexArea ul li.depth3 {
  margin-left: 3em;
}

/* 목차 토글 버튼 */
.index-toggle-btn {
  position: fixed;
  top: 100px;
  right: 10px;
  background-color: #6bacce;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  z-index: 101;
  transition: all 0.3s ease-in-out;
}

.index-toggle-btn.hidden {
  right: -50px; /* 숨김 */
}

/* 반응형 설정 */
@media (max-width: 1500px) {
  #indexArea {
      position: relative;
      right: 0;
      top: 0;
      width: 100%;
      margin: 0 auto;
  }
  .index-toggle-btn {
      display: none;
  }
}

3. JS작성

페이지를 로딩하면서 작성한 게시글의 html을 읽어와서 h태그들을 목차로 생성해 줄 js를 작성해 줌
각 함수와 구조는 주석으로 작성해 놨습니다.

/**
 * IndexGenerator 모듈
 * 블로그 게시글에서 h1, h2, h3 태그를 찾아 목차를 자동으로 생성
 */
const IndexGenerator = (function() {
  const targetSelector = '#article-view > .contents_style';
  const targetHeading = ['h1', 'h2', 'h3'];
  let headings;
  
  /****************************************
   * 초기화 관련
   * - init                   : 모듈 초기화
   * - initField              : 필드 초기화
   * - gernerateComponets     : 컴포넌트 생성
   * - bindEvents             : 이벤트 바인딩
   ****************************************/
  const init = function() {
      initField();
      if(headings && headings.length > 0) {
          generateComponents();
          bindEvents();
      }
  };

  const initField = function() {
      headings = UTILS.getHeadings(targetSelector, targetHeading);
  };

  const generateComponents = function() {
      INDEX.gernerateIndex();
  };

  const bindEvents = function() {
      EVENTS.bindEvents();
  };

  /****************************************
   * UTIL 관련 메서드
   ****************************************/
  const UTILS = {
      /**
       * Heading 태그 가져오는 함수
       * @param {string} targetSelector - 헤딩을 검색할 대상 요소의 선택자 : 게시글 본문 선택자자
       * @param {Array<string>} targetHeading - 검색할 헤딩 태그 리스트 : h1, h2, h3
       * @returns {Array<Element>} - 찾은 헤딩 요소들의 배열
       */
      getHeadings: function(targetSelector, targetHeading) {
          let result = [];
          const contents = document.querySelector(targetSelector);
  
          if(contents) {
              const headingTags = contents.querySelectorAll(targetHeading.join(','));
              headingTags.forEach(el => result.push(el));
          }
          return result;
      },
      /**
       * 문자열 공란 체크 함수
      * @param {string} str - 문자열
      * @returns {boolean} - 공란일 경우 true, 공란이 아닐경우 false
       */
      isEmpty: function(str) {
          return !str || str.replace(/&nbsp;/g, '').trim().length === 0;
      },
      /**
       * heading 태그에 따라 depth 클래스 반환하는 함수
       * @param {string} tagName 
       * @returns {string} - 해당하는 depth 클래스명
       */
      getDepthClass: function(tagName) {
          switch(tagName) {
              case 'H1': return 'depth1';
              case 'H2': return 'depth2';
              case 'H3': return 'depth3';
              default: return 'depth1';
          }
      },
  };

  /****************************************
   * INDEX 관련 메서드
   ****************************************/
  const INDEX = {
      /**
       * 목차 생성 함수
       */
      gernerateIndex: function() {
          INDEX.makeIndexCustom();
          INDEX.makeIndexToggleBtn();
          INDEX.labelHeadings();
      },
      /**
       * 커스텀 목차 element 만들어서 indexArea에에 넣는 함수
       */
      makeIndexCustom: function() {
          const indexCustomEl = document.querySelector('#indexArea .index-area-contents');
          headings.forEach(el => {
              if(!UTILS.isEmpty(el.textContent)) {
                  let liEl = document.createElement('li');
                  let aEl = document.createElement('a');
                  
                  aEl.innerText = el.textContent.trim();
                  aEl.href = '#' + el.textContent.trim();
                  
                  liEl.classList.add(UTILS.getDepthClass(el.tagName));
                  liEl.appendChild(aEl);
                  indexCustomEl.appendChild(liEl);
              }
          });
      },
      /**
       * 목차 열기/닫기 토글 버튼 만드는 함수
       */
      makeIndexToggleBtn: function() {
          const toggleBtn = document.createElement('div');
          toggleBtn.classList.add('index-toggle-btn');
          toggleBtn.innerText = '< 목차 열기';
          document.body.appendChild(toggleBtn);
      },
      /** 
       * heading tag에 ID를 라벨링 함수 
       * */
      labelHeadings: function() {
          headings.forEach(el => {
              el.setAttribute('id', el.textContent.trim());
          });
      },
  };

  /****************************************
   * EVENT 관련 메서드
   ****************************************/
  const EVENTS = {
      /**
       * 이벤트 바인드
       */
      bindEvents: function() {
          const toggleBtn = document.querySelector('.index-toggle-btn');
          const indexArea = document.querySelector('#indexArea');
          const indexEl = document.querySelectorAll('#indexArea .index-area-contents a');
          toggleBtn.addEventListener('click', ()=>{EVENTS.toggleIndexOnOff(toggleBtn, indexArea);});
          window.addEventListener('resize', ()=>{EVENTS.checkScreenSize(toggleBtn, indexArea);});
          EVENTS.checkScreenSize(toggleBtn, indexArea);
          indexEl.forEach(el => {
              el.addEventListener('click', ()=>{EVENTS.highlightIndex(indexEl, el);});
          });
      },
      /**
       * 화면 사이즈 체크 함수
       * 1501 기준으로 접이식 목차, 그 보다 적을 경우는 기본 목차
       */
      checkScreenSize: function(toggleBtn, indexArea) {            
          if (window.innerWidth >= 1501) {
              indexArea.classList.remove('open');
              toggleBtn.classList.remove('hidden');
          } else {
              indexArea.classList.add('open');
              toggleBtn.classList.add('hidden');
          }
      },
      /**
       * 인덱스 목차 열고 닫는 함수
       */
      toggleIndexOnOff: function(toggleBtn, indexArea) {
          indexArea.classList.toggle('open');
          toggleBtn.innerText = indexArea.classList.contains('open') ? '> 목차 닫기' : '< 목차 열기';
      },
      /**
       * 선택된 요소 하이라이트 표시하는 함수수
       * @param {Array<Element>} indexEl - 인덱스 각 a 태그 element 리스트트
       * @param {element} el - 클릭된 element
       */
      highlightIndex: function(indexEl, el) {
          indexEl.forEach(other => {
              other.classList.remove('active');
          });
          el.classList.add('active');
      }
  };

  

  return {
      init: () => {init();}
  };
})();

// 페이지가 로드될 때 자동으로 IndexGenerator 초기화 실행
/**
* 문서가 완전히 로드된 후 IndexGenerator를 실행한다.
*/
document.addEventListener('DOMContentLoaded', IndexGenerator.init);

4. 블로그 관리에서 서식 입히기

블로그 관리 - 스킨편집 - html 편집 클릭하여 스킨을 편집할 수 있습니다.

1) html 추가하기

html 탭을 클릭하고 본인의 스킨의 html 구조에서 게시글 본문에 해당하는 곳을 찾습니다.
저의 경우는

<s_article_rep>

<s_permalink_article_rep>

<div class="area_view" id="article-view"> 내 였습니다.
해당 위치를 찾아서 해당 태그 내 치환자 위쪽으로 만들어둔 html을 넣습니다.

2) css, js 파일 넣기

파일업로드 탭을 클릭하여 [추가]버튼을 클릭해서 위에 만들어둔 css, js 파일을 업로드합니다.

2) css, js 포함시키기

다시 html 탭을 클릭해서 <head> 태그를 찾습니다.
<head>태그 가장 하위에 방금 업로드한 css, js 경로를 작성합니다.

완성된 모습

접이식 목차 - 펼친 상태

접이식 목차 - 펼친 상태

접이식 목차 - 접힌 상태

접이식 목차 - 접힌 상태

기복 목차

기본목차

마치며

velog에서 티스토리로 넘어오면서 스킨에 대해 거의 처음 건드려보는 건데 생각보다 직접 html, css, js를 건들 수 있어서 꽤나 재밌는 시간이었던 것 같습니다.

다만, 앞으로는 여러 금손님들이 만들어두신 여러 가지 좋은 스킨들을 활용하는 게 좋겠다고 생각합니다.

혹시라도....혹시라도 제 글을 보고 직접 작업하시는 분이 계신다면.... 저는 제 스킨에 맞게 css 설정등을 하였으니 이대로 쓰시기에는 아마 안 맞는 부분이 꽤나 있을 것 같습니다.

방식만 참고하시고.... 본인 스킨에 맞춰서 더 멋진 목차를 만드시고.... 저도 알려주셨으면 좋겠습니다.

[Spring boot] URL 또는 리소스 경로에 ;jsessionid 발생 시 해결방법

geehyun — Fri, 21 Feb 2025 14:16:44 +0900

[Spring boot] URL 또는 리소스 경로에 ;jsessionid 발생 시 해결방법

발생상황

최초 접속 시 CSS/JS/이미지 등 정적 리소스 파일을 불러오지 못하고 전부 깨지는 현상 발생
=> 개발자 도구 내 console 창에 각 리소스 파일 404 오류 발생
URI 경로를 체크하는 JS로직이 있었는데 URI 경로에 ;jsessionid 값이 붙어 정상적으로 처리하지 못함

원인

URL 경로에 ;jsessionid 값이 붙음
CSS/JS/이미지 경로 등 정적 리소스 경로에 ;jsessionid 값이 붙음

<link rel="stylesheet" href="/css/common.css;jsessionid=%5B%5B%~~~?v=20241209">

위와 같은 상황이 원인이었고, 이는 톰캣 등 특정 웹 컨테이너에서 브라우저 세션 체크를 위해, URL에 ;jsessionid를 포함해 리다이렉트 하기 때문에 발생 함

=> 이는 오류는 아니고, 브라우저에서 쿠키사용을 허용하는지 여부를 알 수 없기 때문에 최초 접속 시에 쿠키 + 위 URL에 ;jsessionid를 포함해 보내는 세션트랙킹 방식을 사용해서 발생한다. 간단한 설정을 통해 해제할 수 있음

해결방법

세션 체크를 쿠키로만 하도록 세션 트랙킹 방식을 제한하여 해결할 수 있음.

1. spring boot일 경우

# aplication.yml 일 경우
sever:
  servlet:
    session:
      tracking-mode: cookie #세션을 쿠키로만 추적

# aplication.properties 일 경우
sever.servlet.session.tracking-mode : cookie #세션을 쿠키로만 추적

2. spring일 경우

<!-- web.xml에 작성 -->
<session-config>
    <tracking-mode>COOKIE</tracking-mode>
</session-config>

3. 위 방법 모두 사용했는데 해결이 안 될 경우

브라우저가 쿠키를 차단하고 있을 가능성이 있음 → 브라우저 쿠키 설정 확인 필요
서버 설정에서 tracking-mode를 쿠키로 설정했는지 확인 필요

마치며

엄청 간단한 문제인데도 처음 겪으니 원인을 찾는 거부터 시간이 꽤나 소요되었다.
같은 문제를 겪으시는 분이 있다면 얼른 원인을 찾아서 본인 상황에 맞는 해결방법을 적용하실 수 있길 바랍니다.

[Spring boot] 스프링 vs 스프링 부트

geehyun — Sun, 12 Jan 2025 19:20:33 +0900

[spring boot] 스프링 vs 스프링 부트

Spring 이란

Spring의 핵심 가치
"애플리케이션 개발에 필요한 기반을 제공해서 개발자가 비스니스 로직 구현에만 집중할 수 있게끔 하는 것"

Spring은 Java 기반 애플리케이션 개발을 위한 프레임워크입니다.

프레임워크? 라이브러리?
프레임워크란 소프트웨어 개발에 필요한 기본적인 코드와 설계 패턴을 제공하여, 개발에 필요한 기능 및 규칙 등의 뼈대를 제공하여 더 효율적이고 체계적인 개발을 도와주는 도구 입니다.
라이브러리는 개발에 필요한 특정 기능을 제공해주는 도구로 개발자의 필요에 의해 라이브러리를 호출하여 사용할 수 있습니다.

프레임워크와 라이브러리의 가장 큰 차이점은 제어권이 누구에게 있냐가 있습니다.
- 라이브러리의 경우 개발자가 직접 해당 라이브러리를 호출하여 사용하는 반면
- 스프링에서는 객체를 개발자가 직접 생성하지 않고 객체의 생명주기를 스프링 컨테이너에 위임합니다.
즉, 제어의 역전(IoC: Inversion of Control)을 통해 프레임워크가 개발자의 코드를 호출하고 객체의 생명 주기를 관리합니다.

Spring은 다음과 같은 특징을 갖습니다.

경량화
필요한 기능만 선택적으로 사용할 수 있슴니다.
(필요한 모듈만 선택적으로 dependency에 추가하거나 XML, Java Congit 기반으로 설정 가능)

의존성 주입 (DI)
객체 생성을 직접하지 않고 스프링 컨테이너가 관리합니다.
이를 통해 코드 간 결합도를 낮추고 유연성과 재사용성을 높일 수 있습니다.

public class MyClass {
	public MyClass() {}
}


// 기존 방식
public class MyController {
	private MyClass myClass = new MyClass();
}

// 의존성 주입 방식 1 : 생성자를 통한 주입
@Controller
public class MyController {
	private MyClass myClass;
    @Autowired
    public MyController(MyClass myClass) {
        this.myClass = myClass;
    }
}

// 의존성 주입 방식 2 : 각각 필드 선언을 통한 의존성 주입
@Controller
public class MyController {
    @Autowired
    private MyClass myClass;
}

// 의존성 주입 방식 3 : @RequiredArgsContstructor을 통한 final 필드에 대한 자동 의존성 주입
@Controller
@RequiredArgsContstructor
public class MyController {
    private MyClass myClass;
}

// 의존성 주입 방식 4 : setter메서드를 이용한 방식
@Controller
public class MyController {
    private MyClass myClass;
    @Autowired
    public setMyClass(MyClass myClass) {
        this.myClass = myClass;
    }
}

관점 지향 프로그래밍 (AOP)
로직을 핵심기능 : 비즈니스 로직 과 부가기능 : 로깅, 보안, 트랜잭션 등 공통 기능 의 관점으로 구분하여
코드 중복을 줄이고 유지보수에 용이합니다.

AOP 로직 예시

다양한 모듈 제공
Spring MVC, Spring Data, Spring Security, Spring Batch, Spring Web 등의 다양한 기능을 모듈로 제공하고 있습니다.
스프링 프레임워크의 모듈 예시 이미지

Spring Boot 란

Spring boot 공식 사이트 문구
"스프링 부트를 이용하면 단독으로 실행 가능한 사용 수준의 스프링 기반 애플리케이션을 손쉽게 만들 수 있습니다."

Spring Boot는 이러한 Spring 프레임워크를 기반으로

설정 간소화(Auto-Configuration)
내장 tomcat 제공
단독 실행 가능한 JAR 파일 생성

으로 기존 Spring 의 단점을 보완한 프레임워크 입니다.

Spring 과 Spring Boot의 차이점 정리

1. 설정 방식의 차이

Spring의 경우 XML 기반 설정방식으로 초기 설정이 다소 복잡할 수 있습니다.

<!-- spring-config.xml -->
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans.xsd">

    <!-- Bean 설정 -->
    <bean id="myService" class="com.example.MyService">
        <property name="repository" ref="myRepository"/>
    </bean>

    <bean id="myRepository" class="com.example.MyRepository"/>
</beans>

Spring Boot의 경우 자동설정(Auto-Configuration)을 지원하여 프레임워크 자체에서 필요한 의존성을 자동으로 관리합니다.

// Spring Boot의 자동 설정
@SpringBootApplication
public class SpringBootApplication {
	public static void main(Stirng[] args) {
    	SpringBootApplication.run(SpringBootApplication.class, args);
    }
}

2. 의존성 관리

Spring에서는 개발에 필요한 각 모듈 별 의존성을 개발자가 직접 설정해야 합니다.

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.6</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>5.3.6</version>
</dependency>

반면, Spring Boot 에서는 spring-boot-starter 를 사용하여 의존성을 한번에 관리할 수 있습니다.

<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

3. 서버 의존성

Spring으로 웹 애플리케이션 개발을 하는 경우 tomcat 과 같은 외부 WAS(Web Applicaiton Server)가 필요하며, war파일로 빌드하여 배포합니다.

Spring Boot 의 웹 애플리케이션 개발을 할 때 내장 WAS를 포함합니다. 예를들어 spring-boot-starter-web 의존성 내에는 tomcat이 포함됩니다.

내장 tomcat

차이점 정리

구분	Spring	Spring Boot
설정방식	XML/Java Config 파일을 통한 다소 복잡한 설정 방식	자동설정(Auto-Configuration) 제공
서버	외부 WAS 필요	내장 WAS 제공
실행 파일	WAR	JAR
장/단점	장점 - 다양한 애플리케이션 아키턱처 지원 - 세밀한 설정 제어로 복잡한 비즈니스 로직 구현에 용이 - 커스터 마이징이 용이하고, 대규모 앤터프라이즈 프로젝트에 적합 단점 - 초기 설정이 복잡하고 시간이 많이 소요됨 - 학습 곡선이 가파름	장점 - 자동설정을 통해 빠른 개발 돌입 가능 - 내장 서버와 독립 적으로 실행가능한 JAR 파일을 이용하여 쉽게 배포 가능 - 학습 곡선이 비교적 완만함 단점 - 커스터 마이징 설정이 다소 복잡함 - 기존 Spring 프로젝트 보다 유연성일 떨어짐

참고

스프링 부트 핵심 가이드 - 스프링 부트를 활용한 애플리케이션 개발 실무 - 정지우 지음

위 책을 공부하며 작성합니다.

[MariaDB] 내장 함수① - 문자/시간/수치 관련

geehyun — Sun, 29 Sep 2024 19:31:31 +0900

velog에서 이관해온 글

함수

특정 기능을 수행하는 작은 프로그램으로 다양한 프로그래밍 언어에서 사용되는 개념입니다.
SQL에서도 해당 개념을 사용하며 다양한 내장 함수를 제공하고 있어 이를 이용할 수 있습니다.

함수명(인자, 인자,,,)

형식으로 사용할 수 있습니다.

인자로 넣어야하는 값들은 함수마다 다르니 아래의 MariaDB에서 주로 사용하는 함수 리스트를 보고 활용해보세요!

내장함수의 경우 양이 많아 두 개로 나눠서 작성했습니다.
➡️ MariaDB 내장 함수② - 제어흐름/정보 관련

문자 관련 함수

문자열을 다루는 내장 함수입니다! 가장 많이 사용됩니다.

문자열 자르기

NO	함수명	설명
1	`LEFT(문자열 \ 변수 \ 열, 문자수)`	- 문자열의 왼쪽부터 입력받은 문자 수 만큼 부분 문자열을 리턴합니다. - 주어진 문자열보다 큰 값의 문자수를 넣을 시 문자열 전체를 리턴합니다.
2	`RIGHT(문자열 \ 변수 \ 열, 문자수)`	- 문자열의 오른쪽부터 입력받은 문자 수 만큼 부분 문자열을 리턴합니다. - 주어진 문자열보다 큰 값의 문자수를 넣을 시 문자열 전체를 리턴합니다.
3	`MID(문자열 \ 변수 \ 열, 시작위치, 문자수)`	- 문자열에서 지정한 시작위치부터(시작위치 포함) 왼쪽으로 입력받은 문자 수 만큼 부분 문자열을 리턴합니다. - 다른 프로그래밍 언어와 다르게 MariaDB에서는 문자열 첫 시작점이 0이 아니라 1부터 시작합니다. - 주어진 문자열보다 큰 값의 문자수를 넣을 시 시작위치부터(시작위치 포함) 왼쪽의 남은 문자열 전체를 리턴합니다.
4	`SUBSTRING(문자열 \ 변수 \ 열, 시작위치, 문자수)`	- 문자열에서 지정한 시작위치부터(시작위치 포함) 왼쪽으로 입력받은 문자 수 만큼 부분 문자열을 리턴합니다. - 다른 프로그래밍 언어와 다르게 MariaDB에서는 문자열 첫 시작점이 0이 아니라 1부터 시작합니다. - 주어진 문자열보다 큰 값의 문자수를 넣을 시 시작위치부터(시작위치 포함) 왼쪽의 남은 문자열 전체를 리턴합니다.
5	`SUBSTR(문자열 \ 변수 \ 열, 시작위치, 문자수)`	- 문자열에서 지정한 시작위치부터(시작위치 포함) 왼쪽으로 입력받은 문자 수 만큼 부분 문자열을 리턴합니다. - 다른 프로그래밍 언어와 다르게 MariaDB에서는 문자열 첫 시작점이 0이 아니라 1부터 시작합니다. - 주어진 문자열보다 큰 값의 문자수를 넣을 시 시작위치부터(시작위치 포함) 왼쪽의 남은 문자열 전체를 리턴합니다.
6	`SUBSTRING_INDEX(문자열 \ 변수 \ 열, 구분문자, 개수)`	- 문자열의 왼쪽부터 입력받은 '구분문자'기준으로 잘라서 입력한 개수만큼 문자열을 리턴합니다. - 주어진 문자열보다 큰 값의 문자수를 넣을 시 문자열 전체를 리턴합니다.

-- 1. LEFT(문자열 | 변수 | 열, 문자수)  : 문자열의 왼쪽부터 입력받은 문자 수 만큼 부분 문자열을 리턴합니다.
-- 2. RIGHT(문자열 | 변수 | 열, 문자수) : 문자열의 오른쪽부터 입력받은 문자 수 만큼 부분 문자열을 리턴합니다.
# 주어진 문자열보다 큰 값의 문자수를 넣을 시 문자열 전체를 리턴합니다.
SELECT LEFT('나는 바보가 아니다', 5) AS result;                # result : '나는 바보'
SELECT LEFT('나는 바보가 아니다', 100) AS result;              # result : '나는 바보가 아니다'
SELECT RIGHT('나는 바보가 아니다', 3) AS result;               # result : '아니다'
SELECT RIGHT('나는 바보가 아니다', 100) AS result;             # result : '나는 바보가 아니다'

-- 3. MID(문자열 | 변수 | 열, 시작위치, 문자수) : 문자열에서 지정한 시작위치부터(시작위치 포함) 왼쪽으로 입력받은 문자 수 만큼 부분 문자열을 리턴합니다.
-- 4. SUBSTRING(문자열 | 변수 | 열, 시작위치, 문자수) : 동일
-- 5. SUBSTR(문자열 | 변수 | 열, 시작위치, 문자수) : 동일
# 다른 프로그래밍 언어와 다르게 MariaDB에서는 문자열 첫 시작점이 0이 아니라 1부터 시작합니다.
# 주어진 문자열보다 큰 값의 문자수를 넣을 시 시작위치부터(시작위치 포함) 왼쪽의 남은 문자열 전체를 리턴합니다.
SELECT MID('나는 바보가 아니다', 4, 2) AS result;              # result : '바보'
SELECT MID('나는 바보가 아니다', 4, 100) AS result;            # result : '나는 바보가 아니다'
SELECT SUBSTRING('나는 바보가 아니다', 4, 2) AS result;        # result : '바보'
SELECT SUBSTRING('나는 바보가 아니다', 4, 100) AS result;      # result : '나는 바보가 아니다'
SELECT SUBSTR('나는 바보가 아니다', 4, 2) AS result;           # result : '바보'
SELECT SUBSTR('나는 바보가 아니다', 4, 100) AS result;         # result : '나는 바보가 아니다'

-- 6. SUBSTRING_INDEX(문자열 | 변수 | 열, 구분문자, 개수) : 문자열의 왼쪽부터 입력받은 '구분문자'기준으로 잘라서 입력한 개수만큼 문자열을 리턴합니다.
# 주어진 문자열보다 큰 값의 문자수를 넣을 시 문자열 전체를 리턴합니다.
SELECT SUBSTRING_INDEX('www.naver.com', '.', 2) AS result;   # result : 'www.naver'
# '.'으로 짜른 후 두번째 나눠진 곳 까지 문자열로 리턴 (=> 두번쨰 구분자를 만나기 직전까지의 문자열 리턴)

문자열 내 위치 찾기

NO	함수명	설명
7	INSTR(문자열 \ 변수 \ 열, 부분 문자열)	- 문자열에서 입력받은 부분 문자열의 시작위치를 리턴해줍니다. - 해당 부분 문자열이 없다면 0을 반환합니다. - 해당 부분 문자열이 문자열 내 다수 있을 시 가장 처음 만나는 자리위치만 반환합니다.
8	POSITION(부분 문자열 IN 문자열 \ 변수 \ 열)	- 문자열에서 입력받은 부분 문자열의 시작위치를 리턴해줍니다. - 해당 부분 문자열이 없다면 0을 반환합니다. - 해당 부분 문자열이 문자열 내 다수 있을 시 가장 처음 만나는 자리위치만 반환합니다.
9	LOCATE(부분 문자열, 문자열 \ 변수 \ 열, (생략가능) 시작위치)	- 문자열에서 입력받은 부분 문자열의 시작위치를 리턴해줍니다. - 시작위치는 생략가능하며, 생략 시 문자의 첫번째위치부터 찾고, 지정해줄 시 입력한 위치부터 부분문자열을 찾습니다. - 해당 부분 문자열이 없다면 0을 반환합니다.
10	ELT(정수, 문자열 목록(값, 값2,,,))	- 주어진 문자열 목록에서 입력된 정수번째 값을 리턴해줍니다. - 주어진 값 리스트 보다 큰 정수가 들어오면 NULL이 반환됩니다.
11	FIELD(찾을 값, 문자열 목록(값1, 값2,,,))	- 주어진 문자열 목록에서 찾을 값의 위치를 반환해줍니다. - 주어진 값 리스트 보다 큰 정수가 들어오면 NULL이 반환됩니다.
12	FIELD_IN_SET(찾을 값, 문자열(문자열 내에서 콤마로 구분필요))	- 주어진 문자열 목록에서 찾을 값의 위치를 반환해줍니다. - 찾을 값과 콤마로 구분된 값이 완벽히 일치해야해서 콤마로 구분된 기준으로 띄어쓰기라도 하나 더 있으면 못찾습니다. - 콤마로 구분 안되어있어도 못찾습니다. - 찾을 값이 해당 문자열 내에 없을 경우 0을 반환합니다.

-- 7. INSTR(문자열 | 변수 | 열, 부분 문자열) : 문자열에서 입력받은 부분 문자열의 시작위치를 리턴해줍니다.
-- 8. POSITION(부분 문자열 IN 문자열 | 변수 | 열) : 위와 동일
# 해당 부분 문자열이 없다면 0을 반환합니다.
# 해당 부분 문자열이 문자열 내 다수 있을 시 가장 처음 만나는 자리위치만 반환합니다.
SELECT INSTR('010-0000-0000', '-');
SELECT POSITION('-' IN '010-0000-0000');

-- 9. LOCATE(부분 문자열, 문자열 | 변수 | 열, (생략가능) 시작위치) : 문자열에서 입력받은 부분 문자열의 시작위치를 리턴해줍니다.
# 시작위치는 생략가능하며, 생략 시 문자의 첫번째위치부터 찾고, 지정해줄 시 입력한 위치부터 부분문자열을 찾습니다.
# 해당 부분 문자열이 없다면 0을 반환합니다.
SELECT LOCATE('-', '010-0000-0000');    # 맨 처음자리 부터 찾음
SELECT LOCATE('-', '010-0000-0000', 5); # 5 번째 자리부터 찾음

-- 10. ELT(정수, 문자열 목록(값, 값2,,,)) : 주어진 문자열 목록에서 입력된 정수번째 값을 리턴해줍니다.
# 주어진 값 리스트 보다 큰 정수가 들어오면 NULL이 반환됩니다.
SELECT ELT(2, '월', '화', '수', '목', '금', '토'),  # '화' 반환
ELT(8, '월', '화', '수', '목', '금', '토');         # NULL 반환

-- 11. FIELD(찾을 값, 문자열 목록(값1, 값2,,,)) : 주어진 문자열 목록에서 찾을 값의 위치를 반환해줍니다.
# 주어진 값 리스트 보다 큰 정수가 들어오면 NULL이 반환됩니다.
select FIELD('수', '월', '화', '수', '목', '금', '토'); # 3 반환

-- 12. FIELD_IN_SET(찾을 값, 문자열(문자열 내에서 콤마로 구분필요)) : 콤마로 값이 구분되어있는 문자열 내에서 찾을 값이 콤마로 구분한 위치로 몇번째에 위치해있는지 반환합니다.
# 찾을 값과 콤마로 구분된 값이 완벽히 일치해야해서 콤마로 구분된 기준으로 띄어쓰기라도 하나 더 있으면 못찾습니다.
# 콤마로 구분 안되어있어도 못찾습니다.
# 찾을 값이 해당 문자열 내에 없을 경우 0을 반환합니다.
SELECT FIND_IN_SET('수', '월,화,수,목,금,토');      # 3 반환
SELECT FIND_IN_SET('수', '월, 화, 수, 목, 금, 토'); # 0 반환 : 띄어쓰기 들어가서 못찾음
SELECT FIND_IN_SET('수', '월화수목금토');           # 0 반환 : 콤마로 구분안되어있어서 못찾음

문자열 대소문자 변환 및 공백제거

NO	함수명	설명
13	`LCASE(문자열 \ 변수 \ 열)`	- 영문 문자열에 대해 소문자로 변환해줍니다.
14	`LOWER(문자열 \ 변수 \ 열)`	- 영문 문자열에 대해 소문자로 변환해줍니다.
15	`UCASE(문자열 \ 변수 \ 열)`	- 영문 문자열에 대해 대문자로 변환해줍니다.
16	`UPPER(문자열 \ 변수 \ 열)`	- 영문 문자열에 대해 대문자로 변환해줍니다.
17	`LTRIM(문자열 \ 변수 \ 열)`	- 문자열의 좌측 공백 제거
18	`RTRIM(문자열 \ 변수 \ 열)`	- 문자열의 우측 공백 제거
19	`TRIM(문자열 \ 변수 \ 열)`	- 문자열의 좌우 공백 제거 - 문자열 사이사이에 있는 공백은 제거하지 못합니다. (제거하려면 REPLACE 함수 이용필요)

-- 13. LCASE(문자열 | 변수 | 열) : 영문 문자열에 대해 소문자로 변환해줍니다.
-- 14. LOWER(문자열 | 변수 | 열) : 위와 동일                       
SELECT LCASE(TitlE), LOWER(TitlE);              # 반환 : title, title

-- 15. UCASE(문자열 | 변수 | 열) : 영문 문자열에 대해 대문자로 변환해줍니다.
-- 16. UPPER(문자열 | 변수 | 열) : 위와 동일
SELECT UCASE(TitlE), UPPER(TitlE);             # 반환 : TITLE, TITLE

-- 17. LTRIM(문자열 | 변수 | 열) : 문자열의 좌측 공백 제거
-- 18. RTRIM(문자열 | 변수 | 열) : 문자열의 우측 공백 제거
-- 19. TRIM(문자열 | 변수 | 열) : 문자열의 좌우 공백 제거
# 문자열 사이사이에 있는 공백은 제거하지 못합니다. (제거하려면 REPLACE 함수 이용필요)
SET @str = '       빈 문자열    ';
SELECT LTRIM(@str);                           # 반환 : 빈 문자열    
SELECT RTRIM(@str);                           # 반환 :        빈 문자열
SELECT TRIM(@str);                            # 반환 : 빈 문자열

문자열 길이 및 바이트 수

NO	함수명	설명
20	CHAR_LENGTH(문자열 \ 변수 \ 열)	- 문자열 내 문자수를 반환합니다. (공백포함)
21	CHARACTER_LENGTH(문자열 \ 변수 \ 열)	- 문자열 내 문자수를 반환합니다. (공백포함)
22	LENGTH(문자열 \ 변수 \ 열)	- 문자열의 바이트수를 반환합니다. - (MariaDB)한 글자 당 영문,숫자 1바이트 / 한글,한문 3바이트 / 이모지 4바이트
23	LENGTHB(문자열 \ 변수 \ 열)	- 문자열의 바이트수를 반환합니다. - (MariaDB)한 글자 당 영문,숫자 1바이트 / 한글,한문 3바이트 / 이모지 4바이트

-- 20. CHAR_LENGTH(문자열 | 변수 | 열) :  문자열 내 문자수를 반환합니다. (공백포함)
-- 21. CHARACTER_LENGTH(문자열 | 변수 | 열) : 위와 동일
SELECT CHAR_LENGTH('홍길동');                  # 반환 : 3
SELECT CHAR_LENGTH('Senior Engineer');        # 반환 : 15
SELECT CHAR_LENGTH('데이터베이스SQL\u2506');    # 반환 : 14
SELECT CHAR_LENGTH(' MariaDB');               # 반환 : 8
SELECT CHARACTER_LENGTH(' MariaDB');          # 반환 : 8  

-- 22. LENGTH(문자열 | 변수 | 열) : 문자열의 바이트수를 반환합니다.
-- 23. LENGTHB(문자열 | 변수 | 열) : 위와동일
# 한 글자 당 영문,숫자 1바이트 / 한글,한문 3바이트 / 이모지 4바이트
SELECT LENGTH('홍길동');                       # 반환 : 9
SELECT LENGTH('Senior Engineer');             # 반환 : 15
SELECT LENGTHB(' MariaDB');                   # 반환 : 8

문자열 결합

NO	함수명	설명
24	`CONCAT(문자열 \ 변수 \ 열, 문자열 \ 변수 \ 열,,,)`	-입력된 문자열을 합쳐서 하나의 문자열로 반환합니다.
25	`CONCAT_WS(구분문자, 문자열 \ 변수 \ 열, 문자열 \ 변수 \ 열,,,)`	- 입력된 문자열을 구분문자로 구분하여 하나의 문자열로 반환합니다.

-- 24. CONCAT(문자열 | 변수 | 열, 문자열 | 변수 | 열,,,) : 입력된 문자열을 합쳐서 하나의 문자열로 반환합니다.
# SQL에서는 '문자열 + 문자열'로 합칠 수 없어 CONCAT() 함수를 이용해야합니다.
SELECT CONCAT('문자열A', '문자열B');           # 반환 : 문자열A문자열B

-- 25. CONCAT_WS(구분문자, 문자열 | 변수 | 열, 문자열 | 변수 | 열,,,) : 입력된 문자열을 구분문자로 구분하여 하나의 문자열로 반환합니다.
SELECT CONCAT_WS('|','문자열A', '문자열B', '문자열C')     # 반환 : 문자열A | 문자열B | 문자열C

문자열 추가/삭제/교체/반전 및 공백함수

NO	함수명	설명
26	LPAD(문자열 \ 변수 \ 열, 길이, (생략가능) 패딩 문자열)	- 좌측으로 내가원하는 글자수만큼 되도록 특정문자로 채우는 함수 - 패딩 문자열 미입력 시 공백문자가 채워집니다. - 대상 문자열보다 짧은 길이 입력 시 해당 길이 만큼만 표시됩니다.
27	RPAD(문자열 \ 변수 \ 열, 길이, (생략가능) 패딩 문자열)	- 우측으로 내가원하는 글자수만큼 되도록 특정문자로 채우는 함수 - 패딩 문자열 미입력 시 공백문자가 채워집니다. - 대상 문자열보다 짧은 길이 입력 시 해당 길이 만큼만 표시됩니다.
28	INSERT(문자열 \ 변수 \ 열, 시작위치, 길이, 추가할 문자열)	- 문자열에서 시작위치부터 입력받은 개수만큼 삭제 후 입력받은 문자로 삽입한 결과를 반환합니다.
29	REPLACE(문자열 \ 변수 \ 열, 문자열1, 문자열2)	대상에서 문자열1을 찾아 문자열2로 교체합니다.
30	REPEAT(문자열 \ 변수 \ 열, 반복횟수)	- 주어진 문자열을 주어진 반복횟수만큼 반복한 문자열을 만들어 반환합니다.
31	REVERSE(문자열 \ 변수 \ 열)	- 문자열의 좌우 바꿉니다.
32	SPACE(숫자)	- 공백을 입력한 숫자 만큼 만들어 줍니다.

-- 26. LPAD(문자열 | 변수 | 열, 길이, (생략가능) 패딩 문자열) : 좌측으로 내가원하는 글자수만큼 되도록 특정문자로 채우는 함수
-- 27, RPAD(문자열 | 변수 | 열, 길이, (생략가능) 패딩 문자열) : 우측으로 내가원하는 글자수만큼 되도록 특정문자로 채우는 함수
# 패딩 문자열 미입력 시 공백문자가 채워집니다.
SELECT LPAD('문자열', 5);                      # 결과 :   문자열
SELECT LPAD('문자열', 5, '@');                 # 결과 : @@문자열
SELECT LPAD('문자열', 2, '@');                 # 결과 : 문자
SELECT RPAD('문자열', 5);                      # 결과 : 문자열  
SELECT RPAD('문자열', 5, '@');                 # 결과 : 문자열@@

-- 28. INSERT(문자열 | 변수 | 열, 시작위치, 길이, 추가할 문자열) : 문자열에서 시작위치부터 입력받은 개수만큼 삭제 후 입력받은 문자로 삽입한 결과를 반환합니다.
# INSERT문과 완전히 다른 내장함수
# 삭제만 하고싶을 때는 추가할 문자열에 '' 공백 입력하면 됩니다.
SELECT INSERT('열심히 살자!', 5,3,'해야지...');  # 결과 : 열심히 해야지...
SELECT INSERT('열심히 살자!', 5,3,'');          # 결과 : 열심히

-- 29. REPLACE(문자열 | 변수 | 열, 문자열1, 문자열2) : 대상에서 문자열1을 찾아 문자열2로 교체합니다.
# 문자열1은 대/소문자를 구분해서 찾습니다.
# 대상에서 문자열1을 없는 경우 대상을 원래 그대로 반환합니다.
SELECT REPLACE('나는 Babo다', 'Babo', '바보');  # 결과 : 나는 바보다
SELECT REPLACE('나는 Babo다', 'babo', '바보');  # 결과 : 나는 Babo다
SELECT REPLACE('나는 Babo다', 'Babo다', '');    # 결과 : 나는 

-- 30. REPEAT(문자열 | 변수 | 열, 반복횟수) : 주어진 문자열을 주어진 반복횟수만큼 반복한 문자열을 만들어 반환합니다.
SELECT REPEAT('바보',3);                       # 결과 : 바보바보바보

-- 31. REVERSE(문자열 | 변수 | 열) : 문자열의 좌우 바꿔 반환합니다.
SELECT REVERSE('나는 바보다!');                 # 결과 : !다보바 는나

-- 32. SPACE(숫자) : 공백을 입력한 숫자 만큼 만들어 줍니다.
SELECT SPACE(1);                              # 결과 : 
SELECT CONCAT('나는', SPACE(10), '바보다');     # 결과 : 나는          바보다

문자열로 변환 / 문자열을 변환

NO	함수명	설명
33	`FORMAT(수치형 데이터, 소수점 아래 자리수, (생략가능) 로케일)`	- 수치형 데이터를 출력을 위해 문자열 형식으로 반환합니다. - 문자열로 변환할 때 표시할 소수점 아래 자리수를 입력합니다. (바로 아래자리에서 반올림) - 로케일(지역)을 입력해서 해당 지역에 맞는 표시방법으로 표시할 수 있습니다.
34	`ASCII(문자열 \ 변수 \ 열)`	아스키코드로 변환 합니다. (문자 여러개 넣으면 처음 넣은 문자만 ASCII로 변환합니다.)
35	`CHR(숫자)`	입력된 숫자를 아스키모드로 간주하고 해당 아스키코드에 해당하는 문자로 변환해 줍니다.
36	`CHAR(숫자, 숫자,,,)`	- 입력된 숫자를 아스키모드로 간주하고 해당 아스키코드에 해당하는 문자로 변환해 줍니다. - ,(쉼표)로 구분해서 값을 여러개 넣을 수 있습니다.
37	`HEX(문자열 \ 변수 \ 열)`	- 문자를 헥사코드로 변환 합니다.
38	`UNHEX(헥사코드)`	- 헥사코드를 문자코드로 변환 합니다.

-- 33. FORMAT(수치형 데이터, 소수점 아래 자리수, (생략가능) 로케일) : 수치형 데이터를 출력을 위해 문자열 형식으로 반환합니다. 
# 문자열로 변환할 때 표시할 소수점 아래 자리수를 입력합니다. (바로 아래자리에서 반올림)
# 로케일(지역)을 입력해서 해당 지역에 맞는 표시방법으로 표시할 수 있습니다.
SELECT FORMAT(12345.6289, 2);           # 결과 : 12,345.63
SELECT FORMAT(12345.6289, 2, 'es_ES');  # 결과 : 12.345,63
#에스파냐는 12,345.00이 아니라 12.345,00입니다!

-- 34. ASCII(문자열 | 변수 | 열) : 아스키코드로 변환 (문자 여러개 넣으면 처음 넣은 문자만 ASCII로 변환함)
SELECT ASCII('A');                     # 결과 : 65
SELECT ASCII('a');                     # 결과 : 97

-- 35. CHR(숫자) : 입력된 숫자를 아스키모드로 간주하고 해당 아스키코드에 해당하는 문자로 변환해 줍니다.
-- 36. CHAR(숫자, 숫자,,,) : 위와 동일 단, 값을 여러개 넣을 수 있음! 그것만 다름
SELECT CHR(65), CHR(48);              # 결과 : A, 0
SELECT CHAR(65, 48, 66, 67);          # 결과 : A0BC

-- 37. HEX(문자열 | 변수 | 열) : 문자를 헥사코드로 변환 합니다.
-- 38. UNHEX(헥사코드) : 헥사코드를 문자코드로 변환 합니다.
SELECT HEX('AB');                     # 결과 : 4142 
SELECT UNHEX('4142');                 # 결과 : AB

728x90

형(TYPE) 변환

타입을 바꿔주는 함수입니다.

NO	함수명	설명
39	CAST(값 \ 변수 \ 열 AS 데이터유형)	입력된 인자를 입력한 데이터 유형으로 변경합니다.
40	CONVERT(값 \ 변수 \ 열, 데이터유형)	입력된 인자를 입력한 데이터 유형으로 변경합니다.

-- 39. CAST(값 | 변수 | 열 AS 데이터유형) : 입력된 인자를 입력한 데이터 유형으로 변경합니다.
-- 40. CONVERT(값 | 변수 | 열, 데이터유형) : 위와 동일
SELECT CAST(123 AS VARCHAR(20));          #반환 : 123
SELECT CONVERT(123,VARCHAR(20));          #반환 : 123
SELECT 123 + 123;                         #반환 : 243
SELECT CONCAT(CAST(123 AS VARCHAR(20)),CAST(123 AS VARCHAR(20)));    #반환 : 123123

명시적 형변환 vs 묵시적 형변환

명시적 형변환
위 처럼 CAST(), CONVERT() 함수 또는 타입에 따라 to_char(), DATE_FORMAT() 등으로 명시적으로 형변환을 하는 경우를 말합니다.
묵시적 형변환
상황에 따라 자동으로 데이터 형 변환이 이루어지는 것 입니다.

# 상황 1 : 문자열 내 숫자가 담겨있는 경우 수치형으로 자동 형변환되서 계산 됨
SELECT '100' + '200';                     # 결과 : 300
SELECT '100' = 100;                       # 결과 : 1(true)
# 자동 형변환 발생 안하려면 CONCAT으로 써야함
SELECT CONCAT('100', '200');              # 결과 : 100200 

# 상황 2 : 숫자 + 문자(문자로 시작하는)일때는 숫자가 아닌건 전부 0 취급 함(MariaDB, MySQL 특징)
SELECT 100 + 'A100', 200 + 'B300A';       # 결과 : 100, 200
SELECT 'A100' + 100 , 'B300A' + 200;      # 결과 : 100, 200
SELECT 100 * 'A100', 200 / 'B300A';       # 결과 : 0, NULL
SELECT 100 = 'A100', 200 = 'B300A';       # 결과 : 0(false), 0(false)

# 상황 3 : 숫자 + 문자(숫자로 시작하는)일 때는 문자에서 숫자 부분만 갖고와서 계산 함
SELECT 100 + '100A', 200 + '300BA';       # 결과 : 200, 500
SELECT '100A' + 100 , '300BA' + 200;      # 결과 : 200, 500
SELECT 100 * '100A', 200 / '300BA';       # 결과 : 1000, 0.6666(생략)
SELECT 100 = '100A', 200 = '300BA';       # 결과 : 1(true), 0(false) 

# 상황 4 : 시간/날짜 유형의 경우 수치형으로 변환되어 계산됩니다.
SELECT TIME'10:20:30' + 150;              # 결과 : 102180
SELECT TIME'10:20:30' + '문자';           # 결과 : 102030
SELECT DATE'24-02-20' + 150;             # 결과 : 20240370
SELECT DATE'24-02-20' + '문자';           # 결과 : 20240220

# 상황 5 : 수치형 중 FLOAT, DOUBLE형을 포함하는 경우 결과는 해당 형이 됩니다.
# 문자형 내 실수형이 있을 경우 DOUBLE형으로 자동 변환됩니다.
SELECT 2.2 / 3;                          # 결과 : 0.73333
SELECT '2.2' / 3;                        # 결과 : 0.73333333(생략)

날짜&시간 함수

날짜와 시간을 연산, 결과를 문자열로 반환하는 내장 함수 입니다.

날짜 연산

NO	함수명	설명
41	`ADDDATE(날짜 유형의 데이터, 증감숫자 \ INTERVAL 증감숫자 단위)`	특정날짜로 부터 증감숫자 만큼 양수면 더하고, 음수면 뺍니다.
42	`DATE_ADD(날짜 유형의 데이터, INTERVAL 증감숫자 단위)`	ADDDATE()와 동일하나 INTERVAL을 이용해서 작성해줘야 합니다.
43	`SUBDATE(날짜 유형의 데이터, 증감숫자 \ INTERVAL 증감숫자 단위)`	특정날짜로 부터 증감숫자 만큼 양수면 빼고, 음수면 더합니다.
44	`DATE_SUB(날짜 유형의 데이터, INTERVAL 증감숫자 단위)`	SUBDATE()와 동일하나 IINTERVAL을 이용해서 작성해줘야 합니다.

-- 41. ADDDATE(날짜 유형의 데이터, 증감숫자 | INTERVAL 증감숫자 단위) : 특정날짜로 부터 증감숫자 만큼 양수면 더하고, 음수면 뺍니다.
-- 42. DATE_ADD(날짜 유형의 데이터, INTERVAL 증감숫자 단위) : ADDDATE()와 동일하나 INTERVAL을 이용해서 작성해줘야 합니다.
SELECT ADDDATE('2024-02-18 20:48:00', 30);                 # 결과 : 2024-03-19 20:48:00
SELECT ADDDATE('2024-02-18 20:48:00', -30);                # 결과 : 2024-01-19 20:48:00
SELECT ADDDATE('2024-02-18 20:48:00', INTERVAL 2 MONTH);   # 결과 : 2024-04-18 20:48:00
SELECT ADDDATE('2024-02-18 20:48:00', INTERVAL 30 YEAR);   # 결과 : 2054-02-18 20:48:00
SELECT DATE_ADD('2024-02-18 20:48:00', INTERVAL 30 YEAR);  # 결과 : 2054-02-18 20:48:00

-- 43. SUBDATE(날짜 유형의 데이터, 증감숫자 | INTERVAL 증감숫자 단위) : 특정날짜로 부터 증감숫자 만큼 양수면 빼고, 음수면 더합니다.
-- 44. DATE_SUB(날짜 유형의 데이터, INTERVAL 증감숫자 단위) : SUBDATE()와 동일하나 IINTERVAL을 이용해서 작성해줘야 합니다.
SELECT SUBDATE('2024-02-18 20:48:00', 30);                 # 결과 : 2024-01-19 20:48:00
SELECT SUBDATE('2024-02-18 20:48:00', -30);                # 결과 : 2024-03-19 20:48:00
SELECT DATE_SUB('2024-02-18 20:48:00', INTERVAL 30 YEAR);  # 결과 : 1994-02-18 20:48:00

ADDDATE(), SUBDATE()...하나로도 더하기 빼기 다 할 수 있는데 왜 나눠져있을까?
둘 중하나로도 더하기 빼기 다 쓸 수 있지만, 함수명으로 해당 함수의 기능이 명시적으로 표현되어있어서 쿼리를 읽을 때 더 직관적으로 볼 수 있도록 사용하도록 하기 위함입니다.

INTERVAL 키워드 내 사용할 수 있는 단위
단위설명YEAR연도를 증감QUATRER분기 단위를 증감(3개월 단위)MONTH월을 증감WEEK주 단위로 증감DAY날 수를 증감HOUR시 단위를 증감MINUTE분 단위를 증감SECOND초 단위를 증감

단위 설명

YEAR 연도를 증감

QUATRER< 분기 단위를 증감 (3개월 단위)

MONTH 월을 증감

WEEK 주 단위를 증감

DAY 날 수를 증감

HOUR 시 단위를 증감

MINUTE 분 단위를 증감

SECOND 초 단위를 증감

현재 날짜/시간 구하기

NO	함수명	설명
45	NOW((생략가능)정확도)	- 로컬 시간에 맞춰 현재 날짜 및 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : YYYY-MM-DD HH:MM:SS
46	CURRENT_TIMESTAMP((생략가능)정확도)	- 로컬 시간에 맞춰 현재 날짜 및 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : YYYY-MM-DD HH:MM:SS
47	SYSDATE((생략가능)정확도)	-- 로컬 시간에 맞춰 현재 날짜 및 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : YYYY-MM-DD HH:MM:SS
48	LOCALTIME((생략가능)정확도)	- 로컬 시간에 맞춰 현재 날짜 및 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : YYYY-MM-DD HH:MM:SS
49	LOCALTIMESTAMP((생략가능)정확도)	- 로컬 시간에 맞춰 현재 날짜 및 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : YYYY-MM-DD HH:MM:SS
50	CURDATE()	- 로컬 시간에 맞춰 현재 날짜를 출력합니다. - 표시형식 : YYYY-MM-DD
51	CURRENT_DATE()	- 로컬 시간에 맞춰 현재 날짜를 출력합니다. - 표시형식 : YYYY-MM-DD
52	CURTIME((생략가능)정확도)	- 로컬 시간에 맞춰 현재 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : HH:MM:SS
53	CURRENT_TIME((생략가능)정확도)	- 로컬 시간에 맞춰 현재 시간을 출력합니다. - 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다. - 표시형식 : HH:MM:S

-- 45. NOW((생략가능)정확도) : 로컬 시간에 맞춰 현재 날짜 및 시간을 출력합니다. YYYY-MM-DD HH:MM:SS
-- 46. CURRENT_TIMESTAMP((생략가능)정확도) : 위와 동일
-- 47. SYSDATE((생략가능)정확도) : 위와 동일
-- 48. LOCALTIME((생략가능)정확도) : 위와 동일
-- 49. LOCALTIMESTAMP((생략가능)정확도) : 위와 동일
SELECT NOW();                 # 결과 : 2024-02-18 21:16:43
SELECT CURRENT_TIMESTAMP();   # 결과 : 2024-02-18 21:16:43
SELECT SYSDATE();             # 결과 : 2024-02-18 21:16:43
SELECT LOCALTIMESTAMP();      # 결과 : 2024-02-18 21:16:43
SELECT LOCALTIME();           # 결과 : 2024-02-18 21:16:43
# 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다.
SELECT NOW(2);                # 결과 : 2024-02-18 21:16:43.94
SELECT NOW(6);                # 결과 : 2024-02-18 21:16:43.947440

-- 50. CURDATE() : 로컬 시간에 맞춰 현재 날짜를 출력합니다. YYYY-MM-DD
-- 51. CURRENT_DATE() : 위와 동일
SELECT CURDATE();             # 결과 : 2024-02-18
SELECT CURRENT_DATE();        # 결과 : 2024-02-18

-- 52. CURTIME((생략가능)정확도) : 로컬 시간에 맞춰 현재 시간을 출력합니다. HH:MM:DD
-- 53. CURRENT_TIME((생략가능)정확도) : 위와 동일
SELECT CURTIME();             # 결과 : 21:27:50
SELECT CURRENT_TIME();        # 결과 : 21:27:50
# 정확도는 최대 6자리까지 입력할 수 있으며, 초 단위 이하의 시각을 표시할 수 있습니다.
SELECT CURTIME(2);            # 결과 : 21:27:50.83
SELECT CURTIME(6);            # 결과 : 21:27:50.837833

날짜에서 원하는 부분 추출

NO	함수명	설명
54	`YEAR(날짜형 데이터)`	- 날짜에서 연도 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
55	`MONTH(날짜형 데이터)`	- 날짜에서 월 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
56	`DAY(날짜형 데이터)`	- 날짜에서 일자 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
57	`HOUR(날짜/시간형 데이터)`	- 날짜/시간 데이터에서 시간 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
58	`MINUTE(날짜/시간형 데이터)`	- 날짜/시간 데이터에서 분 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
59	`SECOND(날짜/시간형 데이터)`	- 날짜/시간 데이터에서 초 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
60	`MICROSECOND(날짜/시간형 데이터)`	- 날짜/시간 데이터에서 밀리초 부분만 숫자형식으로 반환합니다. - 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요합니다.
61	`DATE(날짜/시간형 데이터)`	- 날짜/시간 데이터에서 날짜 부분만 문자열로 반환합니다. - 표시형식 : YYYY-MM-DD
62	`TIME(날짜/시간형 데이터)`	- 날짜/시간 데이터에서 시간 부분만 문자열로 반환합니다. - 표시형식 : HH:MM:SS

-- 54. YEAR(날짜형 데이터) : 날짜에서 연도 부분만 숫자형식으로 반환합니다.
-- 55. MONTH(날짜형 데이터) : 날짜에서 월 부분만 숫자형식으로 반환합니다.
-- 56. DAY(날짜형 데이터) : 날짜에서 일 부분만 숫자형식으로 반환합니다.
SELECT YEAR('2024-02-18 21:50:20');                     # 결과 : 2,024
SELECT MONTH('2024-02-18 21:50:20');                    # 결과 : 2
SELECT DAY('2024-02-18 21:50:20');                      # 결과 : 18
# 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요
SELECT CAST(YEAR('2024-02-18 21:50:20') as CHAR(4));    # 결과 : 2024

-- 57. HOUR(날짜/시간형 데이터) : 날짜/시간 데이터에서 시간 부분만 숫자형식으로 반환합니다.
-- 58. MINUTE(날짜/시간형 데이터) : 날짜/시간 데이터에서 분 부분만 숫자형식으로 반환합니다.
-- 59. SECOND(날짜/시간형 데이터) : 날짜/시간 데이터에서 초 부분만 숫자형식으로 반환합니다.
-- 60. MICROSECOND(날짜/시간형 데이터) : 날짜/시간 데이터에서 밀리초 부분만 숫자형식으로 반환합니다.
SELECT HOUR('2024-02-18 21:50:20');                     # 결과 : 21
SELECT MINUTE('2024-02-18 21:50:20');                   # 결과 : 50
SELECT SECOND('2024-02-18 21:50:20');                   # 결과 : 20
SELECT MICROSECOND('2024-02-18 21:50:20');              # 결과 : 0
# 숫자 형식으로 반환하기 때문에 문자열로 바꿔서 사용하려면 변환 작업 필요
SELECT CAST(HOUR('2024-02-18 21:50:20') AS VARCHAR(2)); # 결과 : 21

-- 61. DATE(날짜/시간형 데이터) : 날짜/시간 데이터에서 날짜 부분만 문자열로 반환합니다. YYYY-MM-DD
-- 62. TIME(날짜/시간형 데이터) : 날짜/시간 데이터에서 시간 부분만 문자열로 반환합니다. HH:MM:SS
SELECT DATE('2024-02-18 21:50:20');    # 결과 : 2024-02-18
SELECT TIME('2024-02-18 21:50:20');    # 결과 : 21:50:20

날짜 정보 확인하기

NO	함수명	설명
63	DAYOFYEAR(날짜형 데이터)	- 기준일이 해당년도가 시작되고 며칠이 지났는지 보여주는 함수
64	DAYOFMONTH(날짜형 데이터)	- 기준일이 해당월이 시작되고 며칠이 지났는지 보여주는 함수
65	DAYOFWEEK(날짜형 데이터)	- 기준일이 해당주가 시작되고 며칠이 지났는지 보여주는 함수 - 주의 경우 일요일부터 시작(1) ~ 토요일 종료(7)
66	MONTHNAME(날짜형 데이터)	- 기준일의 월 풀네임을 표시해줍니다.
67	LAST_DAY(날짜형 데이터)	- 주어진 날짜 데이터에 해당하는 달의 마지막 일자를 문자열로 반환합니다.
68	QUARTER(날짜형 데이터)	- 입력한 날짜가 몇번째 분기에 있는가를 보여주는 함수

-- 63. DAYOFYEAR(날짜형 데이터) : 기준일이 해당년도가 시작되고 며칠이 지났는지 보여주는 함수
-- 64. DAYOFMONTH(날짜형 데이터) : 기준일이 해당월이 시작되고 며칠이 지났는지 보여주는 함수
-- 65. DAYOFWEEK(날짜형 데이터) : 기준일이 해당주가 시작되고 며칠이 지났는지 보여주는 함수
# 주의 경우 일요일부터 시작(1) ~ 토요일 종료(7)
SELECT DAYOFYEAR('2024-02-18');     # 결과 : 49
SELECT DAYOFMONTH('2024-02-18');    # 결과 : 18
SELECT DAYOFWEEK('2024-02-18');     # 결과 : 1

-- 66. MONTHNAME(날짜형 데이터) : 기준일의 월 풀네임을 표시해줍니다.
SELECT MONTHNAME('2024-02-18');    # 결과 : Februrary

-- 67. LAST_DAY(날짜형 데이터) : 주어진 날짜 데이터에 해당하는 달의 마지막 일자를 문자열로 반환합니다.
SELECT LAST_DAY('2024-02-18');     # 결과 : 2024-02-29

-- 68. QUARTER : 입력한 날짜가 몇번째 분기에 있는가를 보여주는 함수
SELECT QUARTER('2024-10-01');      # 결과 : 4

두 날짜/시간 차이 구하기

NO	함수명	설명
69	`DATEDIFF(날짜형 데이터1, 날짜형 데이터2)`	- 첫번째 인자에서 두번째 인자를 빼서 날짜 차이 계산해주는 함수 - 두 인자의 표현식이 같아야합니다.
70	`TIMEDIFF(날짜시간 데이터1 \ 데이터1, 날짜시간 데이터2 \ 시간 데이터2)`	- 첫번째 인자에서 두번째 인자를 빼서 시간 차이 계산해주는 함수 - 두 인자의 표현식이 같아야하고, 두 인자 모두 시간이거나 둘다 날짜시간이어야합니다.

-- 63. DAYOFYEAR(날짜형 데이터) : 기준일이 해당년도가 시작되고 며칠이 지났는지 보여주는 함수
-- 64. DAYOFMONTH(날짜형 데이터) : 기준일이 해당월이 시작되고 며칠이 지났는지 보여주는 함수
-- 65. DAYOFWEEK(날짜형 데이터) : 기준일이 해당주가 시작되고 며칠이 지났는지 보여주는 함수
# 주의 경우 일요일부터 시작(1) ~ 토요일 종료(7)
SELECT DAYOFYEAR('2024-02-18');     # 결과 : 49
SELECT DAYOFMONTH('2024-02-18');    # 결과 : 18
SELECT DAYOFWEEK('2024-02-18');     # 결과 : 1

-- 66. MONTHNAME(날짜형 데이터) : 기준일의 월 풀네임을 표시해줍니다.
SELECT MONTHNAME('2024-02-18');    # 결과 : Februrary

-- 67. LAST_DAY(날짜형 데이터) : 주어진 날짜 데이터에 해당하는 달의 마지막 일자를 문자열로 반환합니다.
SELECT LAST_DAY('2024-02-18');     # 결과 : 2024-02-29

-- 68. QUARTER : 입력한 날짜가 몇번째 분기에 있는가를 보여주는 함수
SELECT QUARTER('2024-10-01');      # 결과 : 4

날짜데이터 생성

NO	함수명	설명
71	`MAKEDATE(년도 \ 날짜형 데이터, 일자)`	- 입력한 년도 또는 입력한 날짜의 년도가 시작하고 입력한 일자가 지난 시점을 계산해서 날짜를 반환해줍니다. - 날짜형 데이터를 넣을경우 해당 날짜로부터가 아니라 해당 날짜의 연도가 시작한 뒤로 부터로 계산된다는 점을 주의해야합니다.
72	`MAKETIME(시, 분, 초)`	- 입력한 시간, 분, 초로 시간을 만들어줍니다.

-- 71. MAKEDATE(년도 | 날짜형 데이터, 일자) : 입력한 년도 또는 입력한 날짜의 년도가 시작하고 입력한 일자가 지난 시점을 계산해서 날짜를 반환해줍니다.
-- 72. MAKETIME(시, 분, 초) : 입력한 시간, 분, 초로 시간을 만들어줍니다.
# MAKEDATE()에 날짜형 데이터를 넣을경우 해당 날짜로부터가 아니라 해당 날짜의 연도가 시작한뒤로부터로 계산된다는 점을 주의해야합니다.
SELECT MAKEDATE(2024, 60);          # 결과 : 2024-02-29
SELECT MAKEDATE('2024-02-18', 60);  # 결과 : 2024-02-29
SELECT MAKETIME(15, 35, 30);        # 결과 : 15:35:30

MAKEDATE()와 ADDDATE()
MAKEDATE() : 입력한 년도 또는 입력한 날짜의 년도가 시작하고 입력한 일자가 지난 시점을 계산해서 날짜를 반환해줍니다.
ADDDATE() : 특정날짜로 부터 증감숫자 만큼 양수면 더하고, 음수면 뺍니다.
위 두 함수의 경우 비슷한 용도로 사용할 수 있습니다.
다만, 날짜를 더한다의 개념이 조금 달라 그 부분을 주의해야합니다.
SELECT MAKEDATE(2024, 60);           # 결과 : 2024-02-29
SELECT ADDDATE('2024-01-01', 60);    # 결과 : 2024-03-01
SELECT ADDDATE('2024-01-01', 59);    # 결과 : 2024-02-29
# MAKEDATE의 경우 해당 년도로부터 입력한 일자만큼 지난 날짜를 반환해주고, 
# ADDDATE는 입력한 일자로 부터 입력한 일자를 더한 날짜를 반환해준다는 점이 다릅니다.

날짜 형식지정 출력

NO	함수명	설명
73	`DATE_FORMAT(날짜형 데이터, 형식문자, (생략가능) 로케일)`	- 입력된 날짜의 포맷을 지정해서 출력해줍니다. - 3번째 인자로 로케일을 작성할 경우 해당 나라에 맞는 날짜 형식으로 변환해줍니다.
74	`to_char(날짜유형의 데이터 \ 시간유형의 데이터, 형식 문자열)`	- 날짜/시간을 원하는 포맷으로 바꿔서 출력합니다. - 날짜/시간 관련 포맷은 아래 예시 부분 참고

-- 73. DATE_FORMAT(날짜형 데이터, 형식문자, (생략가능) 로케일) : 입력된 날짜의 포맷을 지정해서 출력해줍니다. 
# 3번째 인자로 로케일을 작성할 경우 해당 나라에 맞는 날짜 형식으로 변환해줍니다.
# 한국의 경우 'ko_KO'
SELECT DATE_FORMAT('2024-02-18', '%Y년 %b %d 일', 'ko_KR');   # 결과 : 2024년 2월 18일
SELECT DATE_FORMAT('2024-02-18', '%Y/%m/%d');                # 결과 : 2024/02/18

-- 74. to_char((날짜유형의 데이터 \ 시간유형의 데이터, 형식 문자열) : 날짜/시간을 원하는 포맷으로 바꿔서 출력합니다.
SELECT to_char('2024-02-18 19:23:00', 'YY-MM-DD');   # 결과 : 24-02-18
SELECT to_char('2024-02-18 19:23:00', 'DD-MONTH-YYYY (DY)');  # 결과 : 18-February-2024 (Sun)

to_char()에서 사용할 수 있는 날짜/시간 관련 형식문자

형식 설명 표시예시

YYYY - 연도를 4자리로 표현 2024

YYY - 연도를 3자리로 표현 024

YY - 연도를 2자리로 표현 24

RRRR - 연도를 4자리로 표현 2024

RR - 연도를 2자리로 표현 024

MM - 월을 두 자리 숫자로 표현 01 ~ 12

MON - 월 이름을 약자로 표현 Jan ~ Dec / 1월 ~ 12월

MONTH - 월 이름을 풀네임으로 표현 January ~ December / 일월 ~ 십이월

DD - 일을 두 자리 숫자로 표현 01 ~ 31

DY - 요일을 약자로 표현 Mon ~ Sun / 월 ~ 일

DAY - 요일을 풀네임으로 표현 Monday ~ Sunday / 월요일 ~ 일요일

HH, HH12 - 시간을 2자리로 12시간 단위로 표현 00 ~ 12

HH24 - 시간을 2자리로 24시간 단위로 표현 00 ~ 24

MI - 분을 2자리로 표현 00 ~ 59

SS - 초를 2자리로 표현 00 ~ 59

DATE_FORMAT()에서 사용할 수 있는 형식문자

형식 설명 표시예시

%Y - 연도를 4자리 숫자로 표현합니다. 2024

%y - 연도를 2자리 숫자로 표현합니다. 24

%X - 연도를 4자리 숫자로 표현합니다.
- 일요일을 한주의 시작으로 할 때 사용하며 %V와 함께 사용합니다. 2024

%x - 연도를 4자리 숫자로 표현합니다.
- 월요일을 한주의 시작으로 할 때 사용하며 %v와 함께 사용합니다. 2024

%b - 월 이름을 약자로 표현합니다. Jan ~ Dec / 1월 ~ 12월

%M - 월 이름을 풀네임으로 표현합니다. January ~ December / 일월 ~ 십이월

%m - 월을 2자리 숫자로 표현합니다. 01~12

%c - 월을 1~2자리 숫자로 표현합니다. 1~12

%U - 날짜의 주차를 2자리 숫자로 표현합니다.
- 일요일을 한주로 시작할 때 사용합니다. 01~53

%u - 날짜의 주차를 2자리 숫자로 표현합니다.
- 월요일을 한주로 시작할 때 사용합니다. 01~53

%V - 날짜의 주차를 2자리 숫자로 표현합니다.
- 일요일을 한주로 시작할 때 사용하며 %X와 함께 사용합니다. 01~53

%v - 날짜의 주차를 2자리 숫자로 표현합니다.
- 월요일을 한주로 시작할 때 사용합하며 %x와 함께 사용합니다. 01~53

%D - 일자를 서수의 형태로 표현 합니다. 1st, 2nd, 3rd, 4th,,,

%d - 일자를 2자리 숫자로 표현합니다. 01~31

%e - 일자를 1~2자리 숫자로 표현합니다. 1~31

%j - 해당 날짜가 해당 년도에서 몇 번째 날인지 3자리 숫자로 표현합니다. 001 ~ 365

%p - 오전이면 AM, 오후면 PM을 표현합니다. AM, PM

%r - 시간을 12시간 단위로 표현하고 뒤에 AM, PM까지 한번에 표시합니다. 07:00:00 AM

%T - 시간을 24시간 단위로 한번에 표현합니다. 19:00:00

%H - 시 단위를 24시간 범위의 2글자로 표현합니다. 00 ~ 23

%h - 시 단위를 12시간 범위의 2글자로 표현합니다. 00 ~ 12

%I - 시 단위를 12시간 범위의 2글자로 표현합니다. 00 ~ 12

%k - 시 단위를 24시간 범위의 1~2글자로 표현합니다. 0 ~ 23

%l - 시 단위를 12시간 범위의 1~2글자로 표현합니다. 0 ~ 12

%i - 분 단위를 2자리 숫자로 표현 합니다. 00 ~ 59

%S - 초 단위를 2자리 숫자로 표현 합니다. 00 ~ 59

%s - 초 단위를 2자리 숫자로 표현 합니다. 00 ~59

%f - 초 아래 단위를 6자리 숫자로 표현 합니다. 000000 ~ 999999

%a 요일 이름을 약자로 표현합니다. Mon ~ Sun / 월 ~ 일

%W 요일 이름을 풀네임으로 표현합니다. Monday ~ Sunday / 월요일 ~ 일요일

%w 요일을 숫자로 표시합니다. 0(일요일) ~ 6(토요일)

수치 함수

수치 데이터를 다루어 연산, 결과를 수치 데이터로 반환하는 함수

NO	함수명	설명
75	ABS(수치형 데이터)	- 입력한 수치 데이터의 절대값 반환 합니다.
76	SIGN(수치형 데이터)	- 주어진 수치형 데이터의 부호를 반환합니다. - 음수 : -1 / 0 : 0 / 양수 : 1
77	CEILING(수치형 데이터)	- 주어진 인자에서 주어진 실수보다 큰 정수 중 가장 작은 정수를 반환합니다. (정수로 만들기 위해 소수점을 올림처리)
78	CEIL(수치형 데이터)	- 주어진 인자에서 주어진 실수보다 큰 정수 중 가장 작은 정수를 반환합니다. (정수로 만들기 위해 소수점을 올림처리)
79	FLOOR(수치형 데이터)	- 주어진 인자에서 주어진 실수보다 작은 수 중 가장 큰 정수를 반환합니다. (정수로 만들기 위해 소수점을 버림처리)
80	TRUNCATE(수치형 데이터, 기준 소수점 자리)	- 첫번쨰 인자는 계산할 값, 두번째 인자는 기준 소수점 자리를 받아 주어진 값에서 기준자리 까지만 남기고 전부 버림처리 합니다.
81	ROUND(수치형 데이터, 기준 소수점 자리)	- 첫번째 인자는 계산할 값, 두번째 인자는 기준 소수점 자리를 받아 주어진 값에서 기준자리 아래에서 반올림합니다.
82	MOD(수치형 데이터1, 수치형 데이터2)	- 첫번째 인자에서 두번째 인자를 나눈 후 나머지를 반환합니다. - 수치형 데이터1 MOD 수치형 데이터2 로도 사용할 수 있습니다.
83	POW(수치형 데이터1, 수치형 데이터2)	- 첫번째 인자의 두번째 인자 제곱을 계산하여 반환해줍니다.
84	POWER(수치형 데이터1, 수치형 데이터2)	- 첫번째 인자의 두번째 인자 제곱을 계산하여 반환해줍니다.
85	SQRT(수치형 데이터)	- 입력된 값의 루트값을 계산하여 반환해 줍니다.
86	PI()	- 원주율
87	GREATEST(값1, 값2,,,)	- 인자 중 가장 큰 값을 구하는 함수 입니다. - 개별값을 콤마로 구분해서만 인자로 입력할 수 있습니다.
88	LEAST(값1, 값2,,,)	- 인자 중 가장 작은 값을 구하는 함수 - 개별값을 콤마로 구분해서만 인자로 입력할 수 있습니다.
89	DEGREES(수치형 데이터)	- 주어진 값을 라디안 값으로 간주하여 각도값으로 반환합니다.
90	RADIANS(수치형 데이터)	- 주어진 값을 각도로 간주하여 라디안값으로 반환합니다.
91	RAND((생략가능)숫자)	- 0~1에서 랜덤한 난수생성합니다. - 아무런 인자도 없이 실행시, 실행할 떄 마다 다른 난수가 생성됩니다. - 인자를 전달할 경우 해당 인자로 호출할 때는 처음 나온 난수 결과가 동일하게 나옵니다.

-- 75. ABS(수치형 데이터) : 입력한 수치 데이터의 절대값 반환 합니다.
SELECT ABS(-50);                 # 결과 : 50

-- 76. SIGN(수치형 데이터) : 주어진 수치형 데이터의 부호를 반환합니다. 
# 음수 : -1 / 0 : 0 / 양수 : 1
SELECT SIGN(-10);                # 결과 : -1
SELECT SIGN(0);                  # 결과 : 0
SELECT SIGN(100);                # 결과 : 1

-- 77. CEILING(수치형 데이터) : 주어진 인자에서 주어진 실수보다 큰 정수 중 가장 작은 정수를 반환합니다. (정수로 만들기 위해 소수점을 올림처리)
-- 78. CEIL(수치형 데이터) : 위와 동일
SELECT CEILING(70.89);          # 결과 : 71
SELECT CEILING(-70.89);         # 결과 : -70
SELECT CEIL(70.21);             # 결과 : 71
SELECT CEIL(-70.21);            # 결과 : -70

-- 79. FLOOR(수치형 데이터) : 주어진 인자에서 주어진 실수보다 작은 수 중 가장 큰 정수를 반환합니다. (정수로 만들기 위해 소수점을 버림처리)
SELECT FLOOR(70.89);           # 결과 : 70
SELECT FLOOR(-70.89);          # 결과 : -71

-- 80. TRUNCATE(수치형 데이터, 기준 소수점 자리) : 첫번쨰 인자는 계산할 값, 두번째 인자는 기준 소수점 자리를 받아 주어진 값에서 기준자리 까지만 남기고 전부 버림처리
SELECT TRUNCATE(70.89, 1);     # 결과 : 70.8
SELECT TRUNCATE(-70.89, 1);    # 결과 : -70.8

-- 81. ROUND(수치형 데이터, 기준 소수점 자리) : 첫번째 인자는 계산할 값, 두번째 인자는 기준 소수점 자리를 받아 주어진 값에서 기준자리 아래에서 반올림합니다.
SELECT ROUND(70.89, 1);        # 결과 : 70.9   
SELECT ROUND(-70.89, 1);       # 결과 : -70.9

-- 82. MOD(수치형 데이터1, 수치형 데이터2) : 첫번째 인자에서 두번째 인자를 나눈 후 나머지를 반환합니다. 
# 수치형 데이터1 MOD 수치형 데이터2 로도 사용할 수 있습니다.
SELECT MOD(7,4);              # 결과 : 3
SELECT 7 MOD 4;               # 결과 : 3

-- 83. POW(수치형 데이터1, 수치형 데이터2) : 첫번째 인자의 두번째 인자 제곱을 계산하여 반환해줍니다.
-- 84. POWER(수치형 데이터1, 수치형 데이터2) : 위와 동일
SELECT POW(2,3);             # 결과 : 8
SELECT POWER(2,3);           # 결과 : 8

-- 85. SQRT(수치형 데이터) : 입력된 값의 루트값을 계산하여 반환해 줍니다.
# 인자가 음수면 NULL을 반환해줍니다.
SELECT SQRT(9);             # 결과 : 3

-- 86. PI() : 원주율
SELECT PI();
SELECT PI() + 0.00000000000; # 원주율의 원하는 자리수까지 0.000....을 더해서 구할 수 있음

-- 87. GREATEST(값1, 값2,,,) : 가장 큰 값을 구하는 함수
-- 88. LEAST(값1, 값2,,,) : 가장 작은 값을 구하는 함수
# 콤마로 구분되어있는 개별 값이 들어올때만 쓸수있어서 MIN(), MAX()를 더 많이 활용합니다.
SELECT GREATEST(30, 10, 5, 40);   # 결과 : 40
SELECT LEAST(30, 10, 5, 40);      # 결과 : 5

-- 89. DEGREES(수치형 데이터) : 주어진 값을 라디안 값으로 간주하여 각도값으로 반환합니다.
-- 90. RADIANS(수치형 데이터) : 주어진 값을 각도로 간주하여 라디안값으로 반환합니다.
SELECT DEGREES(PI());             # 결과 : 180
SELECT RADIANS(180);              # 결과 : 3.14(생략)

-- 91. RAND((생략가능)숫자) : 0~1에서 랜덤한 난수생성합니다.
# 아무런 인자도 없이 실행시, 실행할 떄 마다 다른 난수가 생성됩니다.
# 인자를 전달할 경우 해당 인자로 호출할 때는 처음 나온 난수 결과가 동일하게 나옵니다.
SELECT RAND();                   # 결과 : 0.87(생략)
SELECT RAND();                   # 결과 : 0.18(생략)
SELECT RAND(1);                  # 결과 : 0.40(생략)
SELECT RAND(1);                  # 결과 : 0.40(생략)
# 실제 테스트해보면 위 값과는 다르나 같은 인자로 생성한 난수는 처음 나온 난수값으로 계속 동일하게 나오는것을 확인할 수 있을겁니다!

참고

MariaDB로 따라 하며 배우는 SQL프로그래밍 데이터베이스 기초에서 실무까지 - 나익수, 서연경 지음
위 책을 공부하며 작성하고 있습니다!

[MariaDB] 연산자

geehyun — Sun, 29 Sep 2024 19:02:59 +0900

velog에서 이관해온 글

연산자

SQL의 경우 산술연산자, 대입연산자, 비교연산자, 논리연산자, 등이 있습니다.

값 입력 시 주의할 점
숫자, 수치형 자료일 경우 값 자체를 입력해주면 되고, 수치형 자료가 아닐 경우 ''로 감싸줘야합니다.

# 수치형 자료 O
SELECT *
FROM tbl_member
WHERE mileage = 1000  
;
#수치형 자료 X
SELECT *
FROM tbl_member
WHERE memberId = 'gee1'    
;

수치형 자료도 '' 감싸줘도 되지만, 이럴 경우 DBMS가 자동으로 캐스팅해서 실행하므로 속도이슈가 발생할 수 있으므로 지양하는 것이 옳습니다.

산술연산자

SQL에서 산술연산자는 수치 연산에서만 사용되며, 문자열을 연결시키져줄 때는 concat() 등의 다양한 메서드로 이용해야 합니다.

연산자	형식	설명
+	op1 + op2	- op1과 op2를 더한 값을 반환합니다. - op1과 op2가 integer일 경우 값은 BIGINT로 반환됩니다. - op1과 op2에 부호가 없으면 반환되는 값에도 부호가 없습니다.
-	op1 - op2	- op1에서 op2를 뺀 값을 반환합니다. - op1과 op2가 integer일 경우 값은 BIGINT로 반환됩니다.
*	op1 * op2	- op1과 op2를 곱해줍니다. - op1과 op2가 integer일 경우 값은 BIGINT로 반환됩니다. - op1과 op2에 부호가 없으면 반환되는 값에도 부호가 없습니다.
/	op1 / op2	- op1을 op2를 나눗셈합니다. - 0이 들어갈 경우 null이 출력되거나 오류가 발생할 수 있습니다. - 나눗셈 계산의 경우 기본적으로 소수점 4자리까지 계산됩니다.
DIV	op1 DIV op2	- op1을 op2로 나눈 몫을 구합니다. - op2가 0일 경우 결과는 null이 나옵니다.
% MOD()	op1 % op2 MOD(op1,op2)	- op1을 op2로 나눈 후 나머지를 구합니다. - op2가 0일 경우 결과는 null입니다. - `%`와 `MOD` 결과는 같으나, `MOD()`의 경우 함수로 구분됩니다.

대입연산자

할당연산자로, 변수에 대입해줄 때와 select 문에서 대입해줄 때 사용하는 연산자가 다릅니다.

연산자	형식	설명
=	변수명/컬럼명 = 값	- 변수 또는 컬럼에 값을 할당합니다.
:=	변수명/컬럼명 = 값	- 변수 또는 컬럼에 값을 할당합니다. - select 문 내에서는 `=`이 아니라 `:=`로 사용해줘야합니다.

SQL 에서 변수 선언은 어떻게 할까?
-- 사용법
set @변수명 = 값;
set @변수명1 = 값1, @변수명2 = 값2;
--사용예시
SET @TEMP_ADDR = '', @SSN1 = '', @SSN2='';
SELECT @TEMP_ADDR := CONCAT(addr1, addr2), @SSN1 := LEFT(jumin, 6), @SSN2 := RIGHT(jumin,7)
FROM tbl_member;
변수를 선언 시에는 set키워드로 선언해줍니다. sql에서 변수는 @로 표시해주는 식으로 사용합니다.

비교연산자

비교 연산자의 경우 값을 비교해주는 경우 사용됩니다. where문 안에 주로 사용됩니다.

연산자	형식	설명
=	비교대상 = 값	- 비교대상을 값과 비교하여 완벽히 일치할 경우 1(true), 다를 경우 0(false)를 반환합니다. - 비교대상, 값 둘 중 하나라도 null일 경우 null을 반환합니다. - 문자 비교일 경우 대소문자를 구분하지 않습니다.
<=>	비교대상 <=> 값	- 비교대상을 값과 비교하여 완벽히 일치할 경우 1(true), 다를 경우 0(false)를 반환합니다. - 비교대상, 값 둘 하나가 null일 경우 0(false)를 반환하고 둘 다 null일 경우 1(true)를 반환합니다. - 문자 비교일 경우 대소문자를 구분하지 않습니다.
<> !=	비교대상 <> 값 비교대상 != 깂	- 비교대상을 값과 비교하여 일치하지 않을 경우 1(true), 일치할 경우 0(false)를 반환합니다. - 비교대상, 값 둘 중 하나라도 null일 경우 null을 반환합니다. - 문자 비교일 경우 대소문자를 구분하지 않습니다.
<	비교대상 < 값	- 비교대상이 값보다 작을 경우(같은경우 X) 1(true), 크거나 같을 경우 0(false)를 반환합니다.. - 비교대상, 값 둘 중 하나라도 null일 경우 null을 반환합니다.
>	비교대상 > 값	- 비교대상이 값보다 클 경우(같은경우 X) 1(true), 작거나 같을 경우 0(false)를 반환합니다.. - 비교대상, 값 둘 중 하나라도 null일 경우 null을 반환합니다.
<=	비교대상 <= 값	- 비교대상이 값보다 같거나 작을 경우 1(true), 클(같은경우 X) 경우 0(false)를 반환합니다.. - 비교대상, 값 둘 중 하나라도 null일 경우 null을 반환합니다.
>=	비교대상 >= 값	- 비교대상이 값보다 같거나 클 경우 1(true), 작을(같은경우 X) 경우 0(false)를 반환합니다.. - 비교대상, 값 둘 중 하나라도 null일 경우 null을 반환합니다.
`BETWEEN ... AND`	비교대상 BETWEEN 값1 AND 값2	- 비교대상이 값1보다 같거나 크고, 값2 보다는 같거나 작은경우 1(TRUE)를 반환, 그 외는 0(FALSE)를 반환합니다.
`IN`	비교대상 IN(값1, 값2,,,)	- 비교대상이 IN 괄호 안 값 중 하나라도 해당되면 1(TRUE) 모두 해당되지 않으면 0(FALSE)를 반환합니다.
`IS...`	대상 IS boolean_value	- boolean_value : TURE/FALSE/UNKNOWN이 올 수 있습니다. - 대상이 boolean_value로 입력한 값에 대해 맞으면 1, 아니면 0을 리턴합니다. - 예 : 1 IS TRUE, 0 IS FALSE, NULL IS UNKNOWN 결과 : 1, 1, 1
	대상 IS NULL	- 대상이 null이면 1, 아니면 0을 반환합니다.
	대상 IS NOT NULL	- 대상이 null이 아니면 1, 맞으면 0을 반환합니다.
LEAST	LEAST(값1, 값,,,)	- 나열된 값 중 가장 작은 값을 반환합니다.
LIKE	대상 LIKE '%'	- 대상에 특정문자가 포함된 값을 찾을 수 있습니다. - '%'는 와일드카드라고도 불리며 '%특정문자' : 특정문자로 끝나는 값 '특정문자%' : 특정문자로 시작하는 값 '%특정문자%' : 특정문자가 중간 어디든 포함되어있는 값 을 찾을 수 있습니다.

문자열에서 빈 값 체크는?
IS NULL / IS NOT NULL의 경우 수치형에서 사용할 수 있습니다.

# 문자열에서 NULL인경우 체크
WHERE 컬럼명 = "" OR 컬럼명 IS NULL
# 문자열에서 NULL이 아닌 경우 체크
WHERE 컬럼명 <> "" OR 컬럼명 IS NOT NULL
WHERE 컬럼명 != "" OR 컬럼명 IS NOT NULL   
# <>연산자와 != 연산자는 동일한 의미입니다.

논리연산자

논리연산자는 두 가지 이상의 조건을 확인할 수 있도록 만들 수 있습니다!

연산자	형식	설명
AND &&	조건1 AND 조건2 조건1 && 조건2	- 조건1과 조건2 모두 true일 경우 1(true)이고 아니면 0(false)를 반환합니다.
OR \|\|	조건1 OR 조건2 조건1 \|\| 조건2	- 조건1과 조건2 중 하나라도 true가 있을 경우 1(true)를 반환하고, 모두 false일 경우만 0(false)를 반환합니다.
XOR	조건1 XOR 조건2	- 조건1과 조건2 모두 true거나 모두 false일 때만 0(false)를 반환하고 하나라도 true일 경우 1(true)를 반환합니다.
NOT !	NOT 조건식 ! 조건식	- 해당 조건식이 1(true)일 때 0(false), 해당 조건식이 0(false)일 때 1(true)를 반환합니다.

연산자 우선선위

INTERVAL
BINARY, COLLATE
!
- (산술연산자 X, 단항연산자)
^
*, /, DIV, %, MOD
+, - (산술연산자 O)
>>, <<
&
|
=, <=>, <=, >=, <, >, <>, !=, IS, LIKE, REGEXP, IN
BETWEEN, CASE, WHEN, THEN, ELSE, END
NOT
&&, AND
XOR
||, OR
= (대입연산자)

연산자 우선순위를 변겨하고자 할 때
기본적으로 위 우선순위로 동작하며, 해당 우선순위가 아니라 먼저 계산이 필요한 경우 ()로 묶어서 먼저 계산하도록 지정해줄 수 있습니다!

연산자 우선순위 관련해서는 MariaDB 에서 더 자세한 내용을 확인할 수 있습니다.

참고

MariaDB로 따라 하며 배우는 SQL프로그래밍 데이터베이스 기초에서 실무까지 - 나익수, 서연경 지음
위 책을 공부하며 작성하고 있습니다!

단위	설명
`YEAR`	연도를 증감
`QUATRER`<	분기 단위를 증감 (3개월 단위)
`MONTH`	월을 증감
`WEEK`	주 단위를 증감
`DAY`	날 수를 증감
`HOUR`	시 단위를 증감
`MINUTE`	분 단위를 증감
`SECOND`	초 단위를 증감

형식	설명	표시예시
YYYY	- 연도를 4자리로 표현	2024
YYY	- 연도를 3자리로 표현	024
YY	- 연도를 2자리로 표현	24
RRRR	- 연도를 4자리로 표현	2024
RR	- 연도를 2자리로 표현	024
MM	- 월을 두 자리 숫자로 표현	01 ~ 12
MON	- 월 이름을 약자로 표현	Jan ~ Dec / 1월 ~ 12월
MONTH	- 월 이름을 풀네임으로 표현	January ~ December / 일월 ~ 십이월
DD	- 일을 두 자리 숫자로 표현	01 ~ 31
DY	- 요일을 약자로 표현	Mon ~ Sun / 월 ~ 일
DAY	- 요일을 풀네임으로 표현	Monday ~ Sunday / 월요일 ~ 일요일
HH, HH12	- 시간을 2자리로 12시간 단위로 표현	00 ~ 12
HH24	- 시간을 2자리로 24시간 단위로 표현	00 ~ 24
MI	- 분을 2자리로 표현	00 ~ 59
SS	- 초를 2자리로 표현	00 ~ 59