리제

Web Front 4: 하이퍼링크 · 입력양식(form) 태그

리제 — Thu, 16 Jul 2026 09:11:11 +0900

하이퍼링크 관련 태그 (a)

<a> 태그는 클릭하면 연결된 곳으로 이동시키는, 웹의 가장 핵심적인 기능

속성	설명	예시
href	이동할 링크 경로	href="<https://naver.com>"
target	어느 탭에서 열지 지정	_self(기본) / _blank(새 탭)

하이퍼링크 : 페이지 내 이동 (id)

같은 페이지 안에서 특정 위치로 점프할 수 있습니다. (식별자 이동)

이동할 목적지에 id 속성을 부여 (id는 한 페이지에 오직 1개)
<a href="#아이디">로 그 위치로 이동

입력양식 기본 : input / label

<input> 태그는 사용자에게 값을 입력받는 칸(텍스트 상자, 체크박스 등)을 만듬

함수 목록

태그	설명
<input>	값을 입력받는 요소 (type에 따라 모양이 달라짐)
<label>	입력 요소를 설명하는 글
<button>	클릭 버튼

label을 쓰는 이유

label로 설명을 연결하면 글자를 클릭해도 해당 입력칸이 선택되어 사용성·접근성이 좋아짐.

폼(form) 관련 태그

<form>은 사용자가 입력한 값을 서버로 전송하는 영역을 정의
form 안의 submit 버튼을 누르면, 내부 input 값들이 한꺼번에 서버로 전송

속성설명

속성	설명
action	입력값을 전송할 서버 경로
method	전송 방식 (get 기본 / post)

Web Server 3: MVC 패턴과 Servlet,JDBC 연동

리제 — Wed, 15 Jul 2026 12:08:29 +0900

전체 흐름

브라우저 요청 → Servlet(Controller)
Servlet → DAO 호출
DAO → SQL 실행 → 결과를 DTO(또는 DTO 리스트)로 변환해서 반환
Servlet → 받은 DTO를 request에 담아서 JSP(View)로 forward
JSP → DTO 꺼내서 화면 출력

JSP는 request에 담긴 데이터를 꺼내서 뿌리기만 한다. SQL이 뭐였는지 알 필요 없다.

왜 이렇게 나누는지 — 핵심은 하나

수정할 때 건드리는 파일이 하나로 좁혀진다.

SQL 쿼리가 바뀜 → DAO만 수정
화면 디자인이 바뀜 → JSP만 수정
요청 처리 로직이 바뀜 → Servlet만 수정

지금 하나의 서블릿에 다 몰아넣으면, 화면 태그 하나 고치다가 SQL 코드까지 스크롤해서 지나가야 하고, 실수로 SQL을 건드릴 위험도 생긴다. MVC는 이걸 물리적으로 파일을 나눠서 그 실수 자체를 구조적으로 막는 방식이다.

지금 배우는 게 잘 안 풀려도 이 구조 자체는 패턴만 이해하면 나머지는 다 이 틀에 데이터만 갈아끼우는 거라, 한 번 손에 익으면 반복 작업이 된다.

Web Front 2: HTML 기초

리제 — Tue, 14 Jul 2026 14:01:19 +0900

HTML

HTML(HyperText Markup Language)은 웹 문서의 구조와 의미를 정의하는 마크업 언어

태그(Tag) 를 사용해 콘텐츠에 의미를 부여
브라우저는 태그를 해석해 화면에 구조화된 문서를 그려줌

태그의 기본 형태

<태그명>내용</태그명> : 시작 태그 + 내용 + 종료 태그 (한 쌍)
<br>, <hr>, <img> : 종료 태그가 없는 단독 태그도 존재

존재하지 않는 태그를 써도 에러가 나지 않는다.
HTML은 모르는 태그(<h7> 등)를 만나면 멈추지 않고 무시한 채 표현 가능한 부분만 그린다.

태그	역할	비고
<!DOCTYPE html>	HTML5 문서 선언	문서 맨 위 1줄
<html lang="ko">	문서 전체 영역 / 언어 지정	가장 바깥 태그
<head>	문서 정보 영역	화면에 안 보임
<meta charset="UTF-8">	문자 인코딩 지정	없으면 한글 깨짐
<title>	브라우저 탭 제목	즐겨찾기 이름
<body>	실제 콘텐츠 영역	화면에 보임

태그	설명	특징
<h1> ~ <h6>	제목 태그	숫자가 클수록 글자가 작아짐
<hr>	수평선	단독 태그
<br>	줄바꿈	단독 태그

숫자는 크기가 아니라 '위계'

h1은 페이지 대제목,

h2는 소제목... 처럼 중요도(문서 구조) 를 나타냅니다. 단순히 글자를 크게 만들고 싶다고

h1을 남발하지 않는다. <h6>? 이딴거 하지마라

글자 관련 태그 : 문단 (p vs pre)

문단을 나누는 태그는 <p>와 <pre> 두 가지가 있고, 줄바꿈·공백 처리 방식이 다릅니다.

구분	<p>	<pre>
줄바꿈	무시됨 → <br> 필요	입력한 그대로 적용
공백	여러 칸도 1칸으로	입력한 그대로 적용

Web Front 3: HTML 표 · 미디어 · 영역 태그

리제 — Tue, 14 Jul 2026 09:08:22 +0900

표(Table)는 웹 문서에서 자료를 행과 열로 정리할 때 사용

행(row) 과 열(column) 로 구성되며, 둘이 만나는 지점을 셀(cell)

함수 목록

태그 설명 비고

<table>	표 전체 영역	border 속성으로 테두리
<tr>	한 행(table row)	가로 한 줄
<th>	제목 셀(table header)	굵게 + 가운데 정렬
<td>	일반 셀(table data)	실제 데이터
<caption>	표 제목	table 바로 안에 작성

표의 구조 이해하기table(전체) → tr(행) → 그 안에 th/td(셀) 순으로 중첩
셀(th/td)은 반드시 행(tr) 안에 들어가야 한다!

표 : 셀 병합 (colspan / rowspan)

셀 태그(th, td)의 속성으로 여러 칸을 하나로 합칠 수 있다

함수 목록

속성 설명 예시

속성	설명	예시
colspan="n"	n개의 열을 가로로 병합	colspan="2"
rowspan="n"	n개의 행을 세로로 병합	rowspan="2"

예제

⚠️ 병합한 만큼 셀을 빼야 한다.

colspan="2"로 두 칸을 합쳤다면 그 행에서는td를 하나 적게 작성해야 칸 수가 맞다.

\rowspan으로 아래 행까지 자리를 차지한 경우, 아래 행에서는 그 칸을 생략한다.

표 : 구조화 태그 (thead / tbody)

표의 제목 영역과 본문 영역을 구분해 구조를 명확히 하는 것이 중요

thead/tbody는 화면상 큰 차이가 없어 보여도, 문서 구조를 명확히 하고 스타일·정렬·접근성에 도움을 줌.

미디어 관련 태그 : 이미지 (img)

이미지를 화면에 삽입하는 태그입니다. 단독 태그

함수 목록

속성	설명
src	불러올 이미지의 경로 (필수)
alt	이미지를 못 불러올 때 표시할 대체 텍스트
width	가로 길이 (px 또는 %)
height	세로 길이 (px 또는 %)

width / height 단위

단위	특징
px (고정)	화면 크기와 상관없이 이미지 크기 고정
% (가변)	부모 요소/화면 크기에 따라 이미지 크기가 변함

alt 속성을 꼭 작성

경로가 틀리거나 이미지를 못 불러올 때 대체 텍스트로 표시됩

시각장애인용 스크린리더가 이미지를 읽어주는 설명문이 된다. (접근성·SEO에 중요)

영역 관련 태그 : div vs span

div와 span은 영역을 묶는 용도의 태그로, 두 가지 큰 차이가 있다.

함수 목록

태그 분류 줄바꿈 영역 지정 방식

태그	분류	줄바꿈	영역 지정 방식
<div>	블럭 요소	발생함 (다음 줄로)	사각형 박스로 영역 차지
<span>	인라인 요소	발생 안 함 (옆으로)	내용(content) 크기만큼만 차지

iframe

웹 문서 안에 다른 웹페이지를 삽입하는 태그 (인라인 요소)

속성	설명
src	삽입할 페이지/영상의 경로
width / height	표시 영역 크기
frameborder	테두리 (0이면 없음)

유튜브 영상은 유튜브의 공유 → 퍼가기(Embed) 에서 제공하는iframe코드를 그대로 붙여 넣으면 된다.

Web Server 1: Servlet 기초와 웹 애플리케이션 구조

리제 — Fri, 10 Jul 2026 12:21:40 +0900

1️⃣ 웹 서버(Web Server)와 WAS의 차이

웹 서버(Web Server)

클라이언트(브라우저)의 요청을 받아 정적인 자원(HTML, CSS, JS, 이미지)을 응답해주는 서버
대표: Apache, Nginx

WAS

WAS(Web Application Server)

정적 자원뿐 아니라 동적인 처리(DB 조회, 로직 실행 후 결과 생성)가 가능한 서버
내부에 서블릿 컨테이너를 가지고 있어서 Servlet, JSP 코드를 실행할 수 있음
대표: Tomcat, JBoss, WebLogic

브라우저

     │
     ▼

WAS
(Tomcat)

     │
     ▼

Servlet 실행

     │
     ▼

DB 조회

     │
     ▼

결과 생성

     │
     ▼

브라우저 응답

✔ 프로그램을 실행해서 새로운 결과를 만든다.

예)

로그인

회원가입

게시글 조회

상품검색

2️⃣ 왜 Servlet이 필요한가?

브라우저에서

로그인 버튼 클릭

↓

브라우저

↓

Tomcat(WAS)

↓

Servlet

↓

DB 조회

↓

Servlet

↓

Tomcat

↓

브라우저

Servlet이 중간 관리자 역할을 한다.

3️⃣ 실제 요청 흐름

① 브라우저

"로그인 해주세요"

        │

        ▼

② Tomcat(WAS)

요청 받음

        │

        ▼

③ Servlet 호출

LoginServlet

        │

        ▼

④ JDBC

        │

        ▼

⑤ Database

회원 확인

        │

        ▼

⑥ 결과 반환

        │

        ▼

⑦ 브라우저 화면 출력

4️⃣ Servlet이 없으면?

Servlet이 해야 하는 일은 엄청 많다.

HTTP 요청 읽기

↓

GET인가?

POST인가?

↓

URL 확인

↓

Body 읽기

↓

파라미터 분리

↓

비즈니스 로직 실행

↓

응답 생성

개발자가 전부 직접 구현해야 한다.

하지만 Servlet을 사용하면

HTTP 처리

↓

Servlet이 자동

↓

개발자는

회원조회

상품조회

게시글등록

만 구현

하면 된다.

5️⃣ HttpServletRequest와 HttpServletResponse

Tomcat은 요청이 들어오면

브라우저 요청

↓

Tomcat

↓

HttpServletRequest 생성

HttpServletResponse 생성

↓

Servlet 호출

Servlet에서는

protected void doGet(
        HttpServletRequest request,
        HttpServletResponse response)

이처럼 이미 만들어진 객체를 사용하기만 하면 된다.

예를 들어

/login?id=apple

이면

String id = request.getParameter("id");

한 줄이면 끝난다.

6️⃣ Servlet Container란?

Tomcat 안에는

Tomcat

┌──────────────────┐
│ ServletContainer │
└──────────────────┘

가 들어있다.

얘가

Servlet 생성

↓

Servlet 호출

↓

Servlet 종료

↓

메모리 관리

를 모두 담당한다.

즉

개발자는

new LoginServlet();

을 거의 하지 않는다.

Tomcat이 대신 만들어준다.

7️⃣ Servlet은 하나만 만들어진다 (Singleton)

브라우저 A

       │

브라우저 B

       │

브라우저 C

       │

       ▼

하나의 LoginServlet

모든 사용자가

같은 Servlet 객체를 사용한다.

그래서

private int count;

같은 공유 변수는 매우 조심해야 한다.

8️⃣ 동시 요청은 어떻게 처리할까?

브라우저 여러 명이 동시에 접속한다.

A 사용자

B 사용자

C 사용자

D 사용자

↓

Tomcat

↓

Thread Pool

[Thread1]

[Thread2]

[Thread3]

[Thread4]

↓

같은 Servlet

↓

즉

사용자마다

Servlet이 생기는 것이 아니라

Thread가 하나씩 생긴다.

⭐ 한 장으로 정리

브라우저

      │

      ▼

Web Server
(정적 파일)

      │

      ▼

Tomcat(WAS)

      │

      ▼

Servlet Container

      │

      ▼

Servlet

      │

      ▼

JDBC

      │

      ▼

Database

      │

      ▼

결과 생성

      │

      ▼

브라우저

기억해야 할 핵심

Web Server → HTML, CSS, JS, 이미지 같은 정적 파일 제공
WAS(Tomcat) → Java 코드를 실행하여 동적 페이지 생성
Servlet → 클라이언트 요청을 받아 비즈니스 로직을 수행하는 Java 클래스
Servlet Container → Servlet의 생성, 호출, 소멸을 관리
Thread Pool → 여러 사용자의 요청을 동시에 처리하며, 개발자가 멀티스레드를 직접 관리할 필요가 없도록 해준다.

구분 GET POST

데이터 위치	URL 쿼리스트링에 노출 (?name=값)	HTTP Body에 담김 (노출 안 됨)
데이터 크기	제한적	상대적으로 자유로움
용도	조회, 검색 등	로그인, 회원가입 등 민감한 데이터
담당 메서드	doGet()	doPost()

Web Server 8: Spring MVC 구조와 요청·응답 처리

리제 — Thu, 9 Jul 2026 16:50:10 +0900

가지고 있는 잉크차트

리제 — Wed, 8 Jul 2026 09:04:39 +0900

다 쓰려면 마셔야 한다

Web Server 1: JDBC 기초와 데이터베이스 연동

리제 — Tue, 7 Jul 2026 14:32:42 +0900

JDBC(Java Database Connectivity)

자바 애플리케이션에서 데이터베이스에 접속해 SQL을 실행할 수 있게 해주는 표준 API
자바 진영에서 만든 인터페이스 모음이며, 실제 동작은 각 DBMS 벤더가 제공하는 드라이버(구현체)가 담당
즉 개발자는 MySQL이든 Oracle이든 동일한 JDBC 인터페이스(Connection, Statement, ResultSet 등)로 코드를 작성하고, DB 종류만 바뀌면 드라이버만 교체하면 됨 → DB 독립적인 코드 작성이 가능

JDBC의 핵심 흐름

드라이버 로딩
Connection(연결) 획득
Statement(SQL 실행 객체) 생성
SQL 실행
결과(ResultSet) 처리
자원 반납(close)

핵심 구조 [Java 애플리케이션] │ (JDBC API 호출) ▼ [JDBC Driver (벤더별 구현체)] │ ▼ [Database (MySQL, Oracle 등)] ✔️ 정리 Java는 DB를 직접 모름 → JDBC를 통해 요청 JDBC Driver가 DB 언어로 “번역” DB가 실행 후 결과 반환

Statement (위험 + 단순)

String sql = "SELECT * FROM user WHERE id = '" + input + "'";

문자열 그대로 실행
사용자 입력이 SQL 문법으로 섞임
❌ SQL Injection 취약

PreparedStatement (안전 + 효율)

String sql = "SELECT * FROM user WHERE id = ?";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1, input);

? = 자리표시자
값은 “데이터”로만 처리됨
✔ SQL Injection 방지
✔ SQL 미리 컴파일 → 반복 실행 빠름

핵심 개념: “커서(cursor)”

초기 상태:

[ before first ]
     ↓
[ row1 ]
[ row2 ]
[ row3 ]

처음엔 데이터가 아니라 “이전 위치”에 있음

rs.next() 동작

rs.next() 호출 → row1로 이동 → true
rs.next() 호출 → row2로 이동 → true
rs.next() 호출 → row3로 이동 → true
rs.next() 호출 → 없음 → false

실제 코드 흐름

ResultSet rs = ps.executeQuery();

while(rs.next()) {
    System.out.println(rs.getString("name"));
}

✔️ 의미

next() = “다음 줄로 이동하면서 데이터 존재 여부 체크”
true → 데이터 있음
false → 끝

한 줄 정리

JDBC = “Java ↔ DB 통역사”
PreparedStatement = “보안 + 성능 둘 다 잡은 방식”
ResultSet = “커서를 움직이며 한 줄씩 읽는 구조”

2️⃣ close()를 하면?

Connection 생성

↓

Statement 생성

↓

ResultSet 생성

↓

사용 완료

↓

close()

그러면

ResultSet 반납

↓

Statement 반납

↓

Connection 반납

↓

다른 프로그램이 재사용 가능

마치

도서관 책

빌림  

↓

읽음

↓

반납

↓

다른 사람이 사용

와 똑같다.

3️⃣ try-with-resources의 원리

기존 방식

Connection conn = DriverManager.getConnection(...);

try {

    // 작업

} finally {

    conn.close();
}

항상

finally에서
직접 close()

를 써야 했다.

하지만 Java7부터는

try (
    Connection conn = DriverManager.getConnection(...);
    PreparedStatement pstmt = conn.prepareStatement(sql);
    ResultSet rs = pstmt.executeQuery();
) {

    // 작업

}

이렇게 쓰면

try 블록 종료

↓

자동 close()

된다.

4️⃣ 자동으로 닫히는 순서

가장 중요한 부분이다.

생성 순서

Connection
      │
      ▼
PreparedStatement
      │
      ▼
ResultSet

작업이 끝나면

반대로 닫힌다.

close()

ResultSet
      ▲
      │
PreparedStatement
      ▲
      │
Connection

즉

생성

Connection
    ↓
Statement
    ↓
ResultSet

──────────────

자동 close

ResultSet
    ↑
Statement
    ↑
Connection

"나중에 만든 것부터 먼저 닫는다(LIFO, Last In First Out)"라고 기억하면 된다.

5️⃣ 왜 반대로 닫을까?

예를 들어

Connection
 └── Statement
       └── ResultSet

처럼 서로 연결되어 있다.

만약

Connection부터 닫아버리면

↓

Statement가 사용할 대상이 없어짐

↓

ResultSet도 사용할 수 없음

그래서

ResultSet 사용 종료

↓

Statement 종료

↓

마지막으로 Connection 종료

순서가 가장 안전하다.

⭐ 시험에서 자주 나오는 핵심

객체역할반드시 close()?

Connection	DB 연결	✅
Statement / PreparedStatement	SQL 실행	✅
ResultSet	조회 결과 저장	✅

try-with-resources를 사용하면

try (
    Connection conn = ...
    PreparedStatement pstmt = ...
    ResultSet rs = ...
) {
    // 작업
}

✔ finally에서 close()를 직접 작성하지 않아도 된다.

✔ 자동으로 ResultSet → PreparedStatement → Connection 순으로 close()가 호출된다.

이 흐름만 이해하면 JDBC의 자원 관리 개념은 거의 다 잡았다고 볼 수 있다.

7: Spring

리제 — Tue, 7 Jul 2026 14:26:18 +0900

집을 짓는다고 생각해 보자.

Java → 벽돌과 철근 같은 건축 재료
Spring → 집을 쉽게 지을 수 있도록 만든 건축 공법 ( 개발을 위한 '판(틀)'을 미리 만들어 놓은 프레임워크)
Spring Boot → 기본 집이 이미 지어진 조립식 주택
Maven → 필요한 자재를 자동으로 주문하는 시스템
Spring Initializr → 집의 기본 설계도를 만들어 주는 사이트

Java만 사용하면 개발자가

URL 처리
객체 생성
DB 연결
예외 처리
로그 관리
요청과 응답 처리

등을 전부 직접 만들어야 한다.

하지만 Spring에서는 이미 이런 구조가 준비되어 있다.

브라우저
│
▼
Controller ← 요청을 받음
│
▼
Service ← 비즈니스 로직 처리
│
▼
Repository ← DB 접근
│
▼ Database

Maven이란 무엇인가

기존의 방식과 비교

이전에는 MySQL 드라이버 jar 파일을 직접 다운로드해서 lib 폴더에 넣고 Build Path에 등록했음
라이브러리가 하나둘 늘어나면(JDBC 드라이버, JSTL, Lombok, Spring 관련 수십 개 라이브러리...) 이 작업을 전부 수동으로 하기는 매우 비효율적

Maven의 역할

빌드 도구 + 의존성 관리 도구: 프로젝트에 필요한 라이브러리 목록을 pom.xml이라는 설정 파일에 "선언"만 하면, Maven이 인터넷(Maven Central 저장소)에서 자동으로 다운로드하고 프로젝트에 연결해줌
Day1처럼 jar를 직접 찾아 다운로드하고 Build Path에 등록하는 과정이 전부 생략됨

쿠키(Cookie) / 세션(Session)

리제 — Fri, 3 Jul 2026 16:49:57 +0900

쿠키란

서버가 클라이언트(브라우저)에게 전달해서 클라이언트 측에 저장하는 작은 데이터 조각
이후 요청마다 브라우저가 자동으로 서버에 함께 전송함
로그인 유지, 최근 본 상품 등에 활용 (단, 보안에 민감한 정보는 저장 지양)

쿠키 생성

세션(Session)

쿠키와 달리 데이터가 서버 측에 저장되고, 클라이언트에는 세션을 식별할 수 있는 JSESSIONID만 쿠키로 전달됨
로그인 상태 유지처럼 민감하거나 용량이 큰 데이터를 다룰 때 쿠키보다 안전

세션 값 꺼내기 / 종료

구분	쿠키	세션
저장 위치	클라이언트(브라우저)	서버
보안	상대적으로 취약	상대적으로 안전
용량	작음 (문자열 위주)	서버 메모리 허용 범위 내 자유로움
만료	직접 설정한 시간	서버 설정 타임아웃 또는 invalidate()

웹 서버 & WAS

리제 — Fri, 3 Jul 2026 16:46:01 +0900

웹 서버(Web Server)란

클라이언트(브라우저)의 요청을 받아 정적인 자원(HTML, CSS, JS, 이미지)을 응답해주는 서버
대표: Apache, Nginx

WAS(Web Application Server)란

정적 자원뿐 아니라 동적인 처리(DB 조회, 로직 실행 후 결과 생성)가 가능한 서버
내부에 서블릿 컨테이너를 가지고 있어서 Servlet, JSP 코드를 실행할 수 있음
대표: Tomcat, JBoss, WebLogic

Servlet이란

Server + Applet의 합성어로 JAVA언어를 이용하여 사용자의 요청을 받아 처리하고 그 결과를 다시 사용자에게 전송하는 역할의 Class파일을 말함. 즉 웹에서 동적인 페이지를 java로 구현한 서버 측 프로그램이다.

HttpServlet 클래스를 상속받아 작성하며, 서블릿 컨테이너(Tomcat)가 이 객체를 생성/호출/소멸시킴

서블릿의 역할은?

was에서 클라이언트의 요청을 받았을 때 처리해줘야하는 업무는 다음과 같다.

서버 TCP/IP 연결 대기, 소켓 연결
HTTP 요청 메시지를 파싱해서 읽기
POST 방식, /save URL 인지
Content-Type 확인
HTTP 메시지 바디 내용 피싱
username, age 데이터를 사용할 수 있게 파싱
저장 프로세스 실행
비즈니스 로직 실행
HTTP 응답 메시지 생성
TCP/IP에 응답 전달, 소켓 종료

하지만 이중에 실질적으로 서버에서 처리해줘야하는 의미있는 동작은 데이터베이스와 연결되는 비즈니스로직을 실행하는 부분이다.

나머지 동작들은 http표준에따라 요청을 받아 응답을 내려주기위한 작업이다.

이때 서블릿을 사용하면 서블릿 객체는 특정 url에 맵핑되는 서블릿을 통해 HTTP 요청 정보를 편리하게 사용할 수 있는 HttpServletRequest와 HTTP 응답 정보를 편리하게 제공할 수 있는 HttpServletResponse를 만들어 준다.

이는 개발자가 http스펙을 사용할 때 비즈니스로직만 구현할 수 있도록 돕는다.

HTTP 요청, 응답 흐름

HTTP 요청시

WAS는 Request, Response 객체를 새로 만들어서 서블릿 객체 호출
개발자는 HttpServletRequest객체에서 HTTP 요청 정보를 편리하게 꺼내서 사용
개발자는 HttpServletResponse객체에 HTTP 응답 정보를 편리하게 입력
WAS는 Response 객체에 담겨있는 내용으로 HTTP 응답 정보를 생성

서블릿컨테이너란?

톰캣처럼 서블릿을 지원하는 WAS에서 서블릿의 생명주기를 관리하는 것을 서블릿컨테이너라고 한다. 모든 서블릿 객체는 싱글톤으로 관리되어 최초 로딩 시점에 생성되고, 모든 클라이언트 요청은 동일한 인스턴스를 재활용한다. 이를 통해 효율성을 높이지만, 공유 변수를 사용할 때는 주의가 필요하다. JSP는 서블릿으로 변환되어 실행되며, 서블릿 컨테이너는 동시 요청을 위한 멀티 쓰레드 처리를 지원한다.

어떻게 동시요청을 처리할까?

애플리케이션 코드를 하나하나 순차적으로 실행하는 개념인 쓰레드를 통해 동시요청을 처리하며, 톰캣은 요청마다 하나의 쓰레드를 만들어 여러요청을 동시에 처리하는 병행처리를 지원한다

다만 요청시마다 쓰레드를 생성하는 경우 쓰레드가 제한없이 생길 수 있어 리소스(cpu, 메모리)의 한계를 넘을 수 있다.

또한 쓰레드를 생성하고 삭제하는데 필요한 비용은 매우 높다. 그래서 쓰레드 풀을 만들어 쓰레드를 관리한다. 고로 WAS를 사용하면 멀티쓰레드를 개발자가 신경쓰지 않아도 된다.

쓰레드 풀이란?

쓰레드를 사용후 삭제하지않고 보관하고 관리하는 공간.
쓰레드를 생성가능한 최대치를 생성한 후 필요할 때마다 꺼내서 사용하고 반납한다.
모든 쓰레드가 사용중이여서 더이상 사용가능한 쓰레드가 없다면 이후 요청은 거절하거나 특정시간만큼 대기하도록 설정할 수 있다.
쓰레드를 생성하고 종료하는 비용을 절감할 수 있고, 빠르게 사용가능하며, 많은 요청이 들어와도 쓰레드의 갯수가 초과생성되는 것을 막아줄 수 있다.
WAS는 사용하는 컴퓨터 스펙에 맞춰 쓰레드의 갯수를 적절하게 설정해줘야한다.

Servlet 생명주기

컨테이너가 관리하는 3단계

init() : 최초 요청이 들어올 때 딱 한 번만 호출 (서블릿 객체 생성 및 초기화)
service() : 요청이 들어올 때마다 호출 → 내부적으로 HTTP 메서드(GET/POST 등)에 따라 doGet/doPost로 자동 분기
destroy() : 서버가 종료되거나 서블릿이 컨테이너에서 내려갈 때 딱 한 번만 호출 (자원 정리)

핵심 포인트: Servlet은 싱글톤처럼 동작

서블릿 객체는 요청마다 새로 생성되는 게 아니라 최초 1개만 생성되어 재사용됨
따라서 서블릿 클래스에 인스턴스 변수(필드)를 두면 모든 사용자가 그 값을 공유하게 되어 위험함

JDBC(Java Database Connectivity)

리제 — Fri, 3 Jul 2026 16:41:08 +0900

자바 애플리케이션에서 데이터베이스에 접속해 SQL을 실행할 수 있게 해주는 표준 API
자바 진영에서 만든 인터페이스 모음이며, 실제 동작은 각 DBMS 벤더가 제공하는 드라이버(구현체)가 담당
즉 개발자는 MySQL이든 Oracle이든 동일한 JDBC 인터페이스(Connection, Statement, ResultSet 등)로 코드를 작성하고, DB 종류만 바뀌면 드라이버만 교체하면 됨 → DB 독립적인 코드 작성이 가능

JDBC의 핵심 흐름

드라이버 로딩
Connection(연결) 획득
Statement(SQL 실행 객체) 생성
SQL 실행
결과(ResultSet) 처리
자원 반납(close)

접속 정보(JDBC URL) 구조

server계정으로 접속

Connection 얻기 (DriverManager)

드라이버 로딩 (JDBC 4.0 이후 생략 가능)

과거에는 Class.forName("com.mysql.cj.jdbc.Driver")로 드라이버를 명시적으로 로딩해야 했음
→ JDBC 4.0부터는 드라이버가 서비스 등록 방식(SPI)을 지원해서 생략 가능함.

DriverManager.getConnection()

try-with-resources

사용 → 블록이 끝나면 Connection이 자동으로 close() 됨 (자원 반납 실수 방지)

[javaScript] 9.클로저(Closure)

리제 — Fri, 3 Jul 2026 16:20:16 +0900

개념 클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합을 의미한다. 함수가 선언될 당시의 외부 변수들을 함수 내부에서 기억하고, 함수가 호출된 이후에도 해당 변수에 접근할 수 있게 하는 메커니즘이다.

기능

상태 유지: 특정 함수의 실행이 종료되어도 변수의 값을 유지해야 할 때 활용한다.
정보 은닉(캡슐화): 외부에서 직접 접근할 수 없는 내부 변수를 생성하여 의도치 않은 변경을 방지한다.

예시: 상태 유지

2. 모듈 패턴 (Module Pattern)

개념 모듈 패턴은 클로저를 활용하여 객체의 속성과 메서드 중 일부를 비공개(private)로 만들고, 필요한 부분만 공개(public)하는 기법이다. 자바스크립트에서 객체지향의 캡슐화를 구현하기 위한 전통적인 방법이다.

기능

데이터 은닉: 전역 변수의 사용을 억제하고, 내부 변수에 대한 직접적인 접근을 차단한다.
인터페이스 제공: 공개된 메서드를 통해서만 내부 데이터를 조작하도록 하여 데이터 무결성을 유지한다.

예시: 데이터 은닉

3. 클로저의 주요 활용 사례

콜백 및 이벤트 핸들러

비동기 처리나 이벤트 구동 환경에서 특정 시점의 환경을 기억해야 할 때 사용된다.

예시: 이벤트 핸들러 (한 번만 실행)

함수형 프로그래밍에서의 활용

고차 함수(Higher-Order Function)를 구현하여, 특정 환경이 고정된 새로운 함수를 생성하는 데 유리하다.

요약 및 핵심

이 개념들의 근간은 독립된 렉시컬 환경에 있다. 클로저는 외부 함수가 생명주기를 다해도 내부 함수가 해당 환경을 참조하고 있기 때문에 메모리에서 해제되지 않으며, 이 특성을 이용해 개발자는 데이터의 안전한 보호와 상태 관리라는 강력한 기능을 구현할 수 있다.

HTML/CSS/JS- 웹페이지 제작 과제

리제 — Fri, 3 Jul 2026 14:17:21 +0900

과제 목표

지금까지 배운 HTML · CSS · JavaScript로 하나의 완성된 웹사이트를 직접 만들고,

이를 GitHub에 배포하여 누구나 접속할 수 있는 URL로 공개합니다. 마지막으로 블로그에 제작 과정을 정리해 공유합니다.

배운 개념(DOM 조작, 이벤트, 정규표현식, 웹 스토리지 등)을 실제 기능으로 구현해본다.
Git과 GitHub Pages를 이용한 정적 사이트 배포 흐름을 경험한다.
개발 과정을 글로 정리하며 회고하는 습관을 기른다.

(발표스크립트 - 존댓말)

무엇을 만들까

이번 프로젝트에서 가장 어려웠던 점은 코드를 작성하는 것보다 방향을 정하는 일이었습니다.

처음 목표는 단순했습니다.

'상담을 받고 싶어지는 홈페이지를 만들자.'

하지만 며칠 동안 직접 만들고, 수정하고, 다시 만드는 과정을 반복하면서 목표가 조금씩 달라지기 시작했습니다.

결국 제가 만들고 싶었던 것은 상담이나 교육을 홍보하는 홈페이지가 아니었습니다.

만약 타로에 흥미가 생겨 스스로 리딩을 해보고 싶은 사람이 있다면,

그 사람이 '나에게 어떤 상담 스타일이 잘 맞는지'를 자연스럽게 발견할 수 있는 사이트를 만들고 싶었습니다.

물론 이렇게 생각할 수도 있습니다.

"저는 상담에 관심이 없는데요?"

하지만 우리는 생각보다 많은 상담 속에서 살아갑니다.

친구와의 고민 상담, 진로 상담, 병원 상담, 취업 상담처럼, 자의든 타의든 상담은 우리의 일상에 늘 존재합니다.

저는 상담을 '대화의 심화 버전'이라고 생각합니다.

대화를 잘하는 사람은 상대의 이야기를 잘 듣는 사람이고,

상담을 잘하는 사람은 그 이야기를 바탕으로 문제를 이해하고, 해결의 방향을 제시하며, 공감과 위로를 전합니다.

또한 대화의 시작부터 끝까지 상대의 상태를 세심하게 살피며 만족도를 높이는 과정이라고 생각합니다.

저는 이런 상담의 철학을 조금 더 많은 사람들이 자연스럽게 접했으면 좋겠다는 마음이 있었습니다.

그래서 이번 프로젝트에서는 소르지낙을 홍보하거나 교육 커리큘럼을 소개하는 것을 가장 앞세우지 않았습니다.

오히려 우연히 방문한 사용자가

"어? 나는 이런 상담 스타일이 잘 맞는 사람이구나."

혹은

"이런 방식이라면 나도 누군가를 잘 이해하고 도울 수 있겠는데?"

라는 작은 발견 하나를 얻어 갈 수 있는 웹사이트를 만들고 싶었습니다.

그래서 가장 먼저 한 일은 레이아웃을 손으로 직접 그려보는 것이었습니다.

웹툰을 읽듯 천천히 아래로 스크롤하면서 이야기를 따라가는 구조를 떠올렸고,

사용자가 콘텐츠를 소비하는 것이 아니라 하나의 경험을 하는 웹사이트를 만들고 싶었습니다.

자신의 상담 스타일

처음에는 9가지 풍경을 모티프로 한 리딩 스타일을 기획했습니다.

숲, 호수, 새벽, 별처럼 각각의 풍경에 상담의 특징을 담아 사용자의 성향을 표현하는 방식이었습니다.

하지만 실제로 구현해 보니 한 가지 문제가 있었습니다.

각 스타일이 어떤 차이가 있는지, 서로 얼마나 비슷하거나 다른지 한눈에 이해하기 어려웠습니다.

즉, 정보는 있었지만 구조가 보이지 않았습니다.

그래서 사용자에게 더 직관적인 방법을 고민했고, 떠올린 것이 색조 화장품 상세페이지에서 자주 사용하는 컬러 스펙트럼 차트였습니다.

화장품이 색의 위치만으로도 서로의 차이를 직관적으로 보여주듯,

저도 상담 스타일을 하나의 좌표 위에 배치하면 사용자들이 자신의 위치와 다른 스타일과의 관계를 훨씬 쉽게 이해할 수 있을 것이라고 생각했습니다.

그래서 기존의 풍경 컨셉은 유지하면서도, 각 스타일을 2차원 좌표계에 배치했습니다.

예를 들어 이성에서 감성, 분석에서 공감과 같은 두 개의 축을 기준으로 표현하니,

단순히 "당신은 숲 타입입니다."에서 끝나는 것이 아니라,

"나는 이쪽에 위치하고, 저 스타일과는 이런 차이가 있구나."를 한눈에 이해할 수 있는 구조가 되었습니다.

이 과정을 통해 사용자에게 결과를 전달하는 방식도 훨씬 직관적으로 개선할 수 있었습니다.

사실 이런 형태의 차트는 상담사에게는 꼭 필요한 도구라고 생각합니다.

6각형의 성향 도표든, XY축 좌표든 자신의 상담 스타일을 객관적으로 이해하는 데 큰 도움이 됩니다.

그래서 저도 처음에는 이런 차트를 이미지 형태로 제작해 보았습니다.

인쇄물이나 교재로 본다면 충분히 읽기 쉽고 활용하기 좋은 자료였습니다.

하지만 모바일 화면에 올려보니 생각이 달라졌습니다.

정보가 너무 많아 보였고, 작은 화면에서는 오히려 복잡하고 피곤하게 느껴졌습니다.

무엇보다 저는 사용자 입장에서 한 가지 질문을 던졌습니다.

'과연 누가 타로 상담 사이트에 들어와서 공부를 하고 싶어 할까?'

대부분의 사용자는 배우러 오는 것이 아니라, 재미와 호기심으로 자신의 결과를 빠르게 확인하고 싶어 합니다.

그래서 복잡한 설명을 줄이고, 필요한 정보만 직관적으로 보여주는 방향으로 다시 설계했습니다.

결과적으로 상담사에게 필요한 전문성은 내부 로직에 담고, 사용자가 마주하는 화면은 최대한 단순하고 가볍게 만드는 것이 이번 프로젝트의 중요한 디자인 원칙이 되었습니다.

최종 완성본

가장 마음에 드는 부분

데이터를 객체로 관리한 것

① 먼저 좌표를 저장한다.

② showLandscape()가 호출

사용자가

③ moveUserMarker()

그리고 마지막에

를 호출한다.

이 함수가 바로 사람 이모지가 따라다니는 핵심이다.

marker.style.left = "42%"; marker.style.top = "78%"; 가 실행되면서 사람이모지가 따라다니기 시작한다.

이때 css는 .user-marker{ position:absolute; } 으로 해놔야한다.

④ transition 효과적으로 사용하기

이런 식으로 데이터를 한 번만 정의해 두면, 0.45초 걸려서 따라다니며 이동하는 것같은 효과를 준다.

transition하나로 디테일이 달라지는 것이다. 만약 생략하면 이모지는 갑자기 순간이동한 것처럼 모션된다.

⑤ 버튼 색도 상호작용하기

이렇게 하면 클릭하면 이모지가 빛나서 선택이 되었다는 것을 사용자가 명확하게 알게된다.

이렇게 코드를 짜놓으면 데이터만 수정하면 화면 전체가 자동으로 따라오기 때문에 나중에 내용이 추가되더라도 js를 따로 수정할 필요가 없다. 유지보수가 쉬워지기 때문에 작은 프로젝트부터 이런식으로 코드를 짜는 습관을 드려놓으면 좋을 듯 하다.

어려웠던 점과 해결 과정

처음에는 인스타그램, 유튜브, 카카오채널, 상담 후기, 강남 랭킹 1위 인증처럼 제가 가진 신뢰 요소를 최대한 많이 보여주려고 했습니다.

하지만 화면을 계속 채워 넣을수록 오히려 '열심히 증명하려는 홈페이지'처럼 느껴졌습니다.

방문자가 자연스럽게 콘텐츠를 경험하기보다, 정보를 억지로 나열한 인상을 주고 있다는 생각이 들었습니다.

반대로 다른 친구들의 과제를 보니, 한 화면 안에서 다양한 기능을 구현하며 과제의 목적에 충실한 웹사이트를 만들고 있었습니다.

저는 게임이나 화려한 인터랙션보다는 시각적인 분위기와 감성에 집중하고 있었기 때문에,

'혹시 겉만 그럴싸하고 내용은 없는 웹이 되는 건 아닐까?'라는 고민도 했습니다.

고민끝에

<웹으로 표현한 소르지낙의 퍼소나 에세이> 를 만들자라는 결론이 나왔습니다.

사용자가 스크롤을 내리며 상담자의 생각과 철학을 하나씩 경험하는 인터랙티브 에세이(Interactive Essay)를 만들고 싶었습니다.

그래서 기능도 단순히 많이 넣는 것이 아니라, 하나의 경험을 완성하기 위한 도구로 사용했습니다.

Hero 영역은 CSS 애니메이션으로 첫인상을 만들었고,
스크롤 등장 효과는 Intersection Observer를 활용해 자연스러운 흐름을 구현했습니다.
카드 선택은 DOM 조작으로 인터랙션을 만들었고,
상담 스타일 좌표는 JavaScript 이벤트로 사용자의 선택에 따라 변화하도록 구현했습니다.
풍경별 설명은 객체(Object)를 활용해 데이터를 관리했습니다.

이처럼 수업에서 배운 기술들을 하나씩 활용했지만, 목표는 기능을 보여주는 것이 아니라 하나의 이야기를 전달하는 것이었습니다.

이번 프로젝트를 통해 가장 크게 느낀 점은,

웹은 단순히 정보를 전달하는 공간이 아니라, 한 사람의 생각과 태도, 그리고 철학까지도 표현할 수 있는 매체라는 것입니다.

그리고 좋은 웹사이트는 기능이 많아서 완성되는 것이 아니라,

방문자가 무엇을 느끼고 어떤 경험을 하고 돌아가는지를 고민하는 순간부터 완성되기 시작한다는 것을 배울 수 있었습니다.

작은 회고

쓰려다가 만 이미지들.. 슬라이드 형식으로 사진이 옆으로 움직였으면 좋겠다 싶어서 만들어봤는데,

기존의 디자인과 너무 어울리지 않아 쓰지 못했다.

나를 계속 발전하게 만드는 수강생과 내담자분들을 마음깊이 사랑한다.

나는 내가 타로를 하지 않았다면 ,평생 내가 잘 할수 있는게 아무것도 없다고 생각하고 살뻔했다.

https://ss-1324.github.io/tarot22/

소르지낙 슈룹 마음연구소

Sorginak Reading 당신이 고른 카드는지금의 마음을 비춥니다. 카드 한 장을 고르고,그 카드에서 가장 먼저 느껴지는 감각을 선택해보세요. 마음이 끌리는 카드를 선택하세요. Your Reading Style 당신의

ss-1324.github.io

수고했다. thak u , next

[javaScript] 8. 스코프(Scope)

리제 — Tue, 30 Jun 2026 15:47:16 +0900

스코프(Scope)는 변수나 함수가 어디서부터 어디까지 '영향력을 행사할 수 있는가'를 결정하는 영역.

개발자가 변수를 선언할 때, 이 변수가 어디서 읽히고 쓰일지 제어하는 핵심 메커니즘이다.

기능적인 관점에서 핵심 내용을 정리해 드립니다.

1. 스코프의 핵심 기능: "변수 탐색 규칙"

자바스크립트 엔진이 변수를 찾을 때 사용하는 스코프 체인(Scope Chain) 기능을 이해해야 한다.

탐색 순서: 자기 자신의 영역(내부) → 부모 영역(외부) → 최상위 영역(전역) 순으로 거슬러 올라간다.
기능적 장점: 변수 이름이 겹쳐도 스코프마다 다른 값을 가질 수 있어, 코드 여기저기서 변수명을 고민할 필요를 덜어줌.

2. 스코프의 3가지 핵심 종류

① 전역 스코프 (Global Scope)

영역: 파일 어디서나 접근 가능
기능: 어플리케이션 전반에서 공유해야 하는 설정 값 등을 보관
주의: 너무 많은 변수를 전역에 두면 이름 충돌과 관리의 어려움이 발생

② 함수 스코프 (Function Scope - var)

영역: 함수 안에서 선언된 변수는 함수 밖으로 나갈 수 없다.
기능: 함수 단위로 데이터를 캡슐화
단점: var는 if나 for 같은 블록 {}를 무시하고 오직 함수만 경계로 삼는다. 이 때문에 개발자가 의도치 않게 전역 변수를 덮어쓰는 사고가 자주 발생한다.

③ 블록 스코프 (Block Scope - let, const)

영역: { } 중괄호 내부에서만 유효
기능: if, for, while 등 모든 {}를 독립적인 영역으로 취급.
장점: 데이터를 더 좁은 범위에 가둘 수 있어 훨씬 안전

3. 렉시컬 스코프 (Lexical Scope)

자바스크립트가 스코프를 결정하는 방식.

기능: 함수를 "어디서 호출했느냐"가 아니라 "어디에 정의했느냐"에 따라 접근 권한이 결정된다.
중요성: 코드를 작성하는 시점(Lexical)에 스코프가 이미 고정되므로, 나중에 함수가 어디서 실행되든 정의된 위치의 데이터를 참조

4. 실전 비교: var vs let/const

// var는 함수 스코프라 'for' 블록을 나가도 살아남음
var i = 1000;
for(var i=0; i<10; i++) {}
console.log(i); // 10 (이미 전역 i가 덮어써짐) // let은 블록 스코프라 'for' 블록 안에서만 동작함
let j = 1000;
for(let j=0; j<10; j++) {}
console.log(j); // 1000 (전역 j는 안전함)

[javaScript] 7.호이스팅

리제 — Mon, 29 Jun 2026 15:19:57 +0900

호이스팅(Hoisting)은

자바스크립트 엔진이 코드를 실행하기 전,

변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 현상을 말한다.

실제로 코드가 위로 이동하는 것이 아니라, 자바스크립트 엔진이 코드 실행 전에 변수와 함수를 메모리에 먼저 등록해두기 때문에 발생하는 논리적인 현상이다.

1. var 변수 호이스팅

var로 선언된 변수는 호이스팅 시 undefined로 초기화된다.

그래서 선언 전에도 에러 없이 출력은 되지만, 값은 아직 정해지지 않은 상태

console.log(score); // undefined (에러가 나지 않음!)
var score = 80;
console.log(score); // 80

2. let / const 변수 호이스팅

let과 const도 호이스팅은 발생하지만, var와 달리 초기화가 되지 않는다.

선언 라인에 도달하기 전까지는 TDZ(Temporal Dead Zone, 일시적 사각지대)에 갇혀 있어서 접근하려고 하면 에러가 발생

// console.log(age); // ReferenceError: Cannot access 'age' before initialization
let age = 20;

3. 함수 호이스팅

함수 선언문(Function Declaration): 통째로 호이스팅되어, 선언 전에도 호출 가능
함수 표현식(Function Expression): 변수에 할당된 함수는 변수 호이스팅 규칙을 따른다.

// 함수 선언문: 호이스팅 O
hello(); // "안녕!" (호출 가능)
function hello() { console.log("안녕!"); }

// 함수 표현식: 호이스팅 X (변수 규칙)
// hi(); // ReferenceError
const hi = function() { console.log("반가워!"); };

호이스팅을 어떻게 바라봐야 할까?

구분	호이스팅 발생 여부	특징
var	O	선언 전 접근 시 undefined
let / const	O	선언 전 접근 시 에러 발생 (TDZ)
함수 선언문	O	선언 전 호출 가능

요악 : var 사용을 피하고 let, const를 사용하자!

/*
    호이스팅
    js엔진은 코드 실행 전에 모든 변수, 함수를 전부 상위로 가져와 선언함.
    
    - 선언이 아래에 있어도 위로 끌어올려진 것처럼 보임.
    - 변수가 이동하는게 아니라 선언만 먼저 되는 것.
*/

// 선언 전에 접근해도 에러가 아니라 undefuned값이 나옴.
console.log("선언 전 : " + name1);
var name1 = "jiwon";
console.log("선언 후 : " + name1);

// let/const : 호이스팅은 되지만 TDZ
// 일시적으로 선언코드 전까지는 TDZ에 기록해서 접근할 수 없게함.

//console.log(name3);
const name2 = "지수";
let name3 = "지민";
console.log(name2, name3);

//함수도 호이스팅 대상
//전체함수가 먼저 등록되므로 선언전에 호출 가능.
hello();
function hello(){
    console.log("안녕하세요.");
}

// 익명함수를 만들고 변수에 할당해도 변수의 호이스팅 규칙상 선언전 사용 x
// bye();
const bye = function(){
    console.log("잘가요");
}

[resources] 6_정규표현식.html

리제 — Mon, 29 Jun 2026 12:16:26 +0900

정규 표현식(Regular Expression)

은 문자열에서 특정 패턴을 찾거나, 확인하거나, 수정하기 위한 강력한 도구이다.

프로그래밍 세계에서 사용하는 문자열 검사기라 할 수 있다.

1. 왜 필요한가?

만약 당신이 수천 개의 데이터 중에서 '이메일 형식'인 것만 골라내야 한다고 가정하면 상당히 피곤해진다.

if문으로 일일이 "@"이 있는지, "."이 있는지 확인하려면 코드가 매우 복잡해진다

정규 표현식을 사용하면 복잡한 규칙을 한 줄의 짧은 코드로 정의할 수 있어 간편하다.

이메일 형식 확인: test@email.com (맞음), test-email (틀림)
전화번호 형식 확인: 010-1234-5678 (맞음), 01012345678 (형식 다름)
비밀번호 복잡도 체크: 대문자 1개 이상, 숫자 포함 등

2. 기본적인 구성 요소 (문법)

정규식은 기호들의 조합으로 이루어진다.

주요 기호 몇 가지만 알아도 웬만한 패턴은 읽을 수 있다.

^: 문자열의 시작
$: 문자열의 끝
[a-z]: 영어 소문자 범위
[0-9]: 숫자 범위
+: 바로 앞의 패턴이 한 번 이상 반복됨
*: 바로 앞의 패턴이 0번 이상 반복됨
?: 바로 앞의 패턴이 0번 또는 1번 존재함
{2,}: 바로 앞의 패턴이 2번 이상 반복됨

3. 정규식 활용 예시

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

^[a-zA-Z0-9._%+-]+: 아이디 부분(영문/숫자/특수문자 조합)으로 시작한다.
@: 반드시 @가 중간에 포함된다.
[a-zA-Z0-9.-]+: 도메인 이름이 온다.
\.: 반드시 점(.)이 포함된다.
[a-zA-Z]{2,}$: 마지막은 2자 이상의 영문자로 끝난다.

4.연습문제

아이디@도메인.상위도메인 형태가 맞는지 검사 후

//area4에 올바른 이메일 형식 / 이메일 형식이 아닙니다. 라는 답이 나오게 만들어보기

function checkEamil(){

}

JavaScript

상세 설명

정규 표현식 (/^[...]$/):
- ^: 문자열의 시작을 의
- [a-zA-Z0-9._%+-]+: 아이디 부분. 영문자, 숫자, 점, 밑줄 등을 허용
- @: 중간에 반드시 @가 있어야 한다.
- [a-zA-Z0-9.-]+: 도메인
- \.: 도메인 뒤에 점(.)이 반드시 있어야 한다.
- [a-zA-Z]{2,}: 상위 도메인입니다. 영문자로 최소 2자 이상
- $: 문자열의 끝을 의미
.test() 메서드:
- 정규식에서 제공하는 함수로, 우리가 입력한 email 문자열이 위 패턴과 일치하면 true를, 아니면 false를 반환.
area4.innerHTML:
- document.getElementById("area4")를 통해 HTML 문서 내의 area4라는 id를 가진 영역을 찾고, 원하는 메시지를 텍스트로 넣어준다.

[javaScript] 6. 함수 /오버로딩(Overloading) / Rest 파라미터 (...args)

리제 — Fri, 26 Jun 2026 17:47:37 +0900

자바스크립트에서 함수는 단순한 '코드 묶음'을 넘어,

프로그래밍 언어의 모든 권한을 가진 '일급 객체(First-Class Object)'로 대우받는다.

선언적 함수(function declaration)
함수 표현식(익명 함수를 변수에 할당)

함수가 '일급 객체'라는 것의 의미

다른 프로그래밍 언어와 달리, 자바스크립트에서 함수는 일반 변수나 숫자처럼 취급된다.

변수에 담을 수 있다 : 함수를 이름표(변수)에 붙여 저장할 수 있다.

2. 오버로딩(Overloading) 미지원

다른 언어(Java 등)에서는 같은 이름의 함수라도 인자의 개수나 타입이 다르면 다른 함수로 취급한다.

자바스크립트는 이를 지원하지 않음.

같은 이름으로 여러 번 선언하면, 맨 마지막에 정의한 함수가 이전의 함수를 덮어쓴다.

3. arguments 객체의 활용

자바스크립트는 오버로딩을 지원하지 않는 대신, 함수 내부에서 arguments라는 특별한 주머니를 제공하여 유연성을 확보한다.

arguments: 함수에 전달된 모든 인자가 순서대로 담겨 있는 유사 배열(Array-like Object)
활용: 함수 선언 시 인자를 정해놓지 않아도, 들어온 모든 인자를 직접 다룰 수 있다.

4. 현대적 대안: Rest 파라미터 (...args)

최신 자바스크립트(ES6+)에서는 arguments 대신 Rest 파라미터(...)를 사용한다.

이는 실제 배열로 변환되므로 훨씬 강력하고 다루기 쉽다.

요약

일급 객체: 함수는 값이다. 변수에 넣고, 전달하고, 반환할 수 있다.
오버로딩 불가: 이름이 같으면 뒤에 선언된 것이 앞의 것을 덮어버린다.
유연성 확보: arguments(과거 방식)나 Rest 파라미터(최신 방식)를 통해, 인자가 몇 개가 들어오든 함수가 스스로 처리하도록 만들 수 있다.

[javaScript] 5.반복문

리제 — Fri, 26 Jun 2026 17:36:46 +0900

1. 횟수가 정해진 반복: for 문

반복의 시작과 끝, 증가 폭을 한곳에 모아 관리한다.

용도: "1부터 7까지 반복해라"처럼 딱 정해진 횟수만큼 돌릴 때 가장 깔끔
동작: i=1로 시작해 i<=7까지 i++(1씩 증가)하며 코드를 실행

2. 조건이 중요한 반복: while 문

조건식 하나만 체크하며, 그 조건이 true인 동안 무한히 반복합

용도: 반복 횟수를 미리 알 수 없을 때(예: 특정 값이 나올 때까지 계속) 유용
주의: 안에서 i++처럼 변수를 직접 수정해주지 않으면 조건이 항상 참이 되어 프로그램이 멈추지 않는 '무한 루프'에 빠질 수 있다.

3. 무조건 한 번은 실행: do-while 문

조건과 상관없이 코드 블록을 무조건 최소 한 번은 실행한 뒤, 그 후에 조건을 검사

용도: "사용자에게 입력을 먼저 받고(실행), 값이 맞는지 확인(조건 검사)"해야 하는 상황에 최적

4. 흐름 제어: break와 continue

반복 중간에 상황에 따라 흐름을 바꾸는 '제어 장치'

continue: "이번 회차는 건너뛰고 다음 회차로 넘어가라." (위 코드에서 5일 때 로그가 안 찍히는 이유)
break: "반복문을 아예 완전히 끝내버려라." (위 코드에서 8을 만나는 순간 반복이 종료되는 이유)

5. 데이터 순회(순서대로 훑기): for...of와 for...in

객체나 배열처럼 여러 데이터가 묶여 있는 자료구조를 훑을 때 사용

for...of (값 순회): 배열의 값(Value) 자체가 중요할 때 씀

members 배열의 "최지원", "김수민"... 이라는 실제 데이터를 하나씩 꺼내온다.

for...in (키 순회): 객체의 키(Key, 속성 이름)를 순회할 때 사용.
- std 객체의 name, java, db라는 이름표를 꺼내온다.
- 참고: 배열에 for...in을 쓰면 배열의 인덱스(0, 1, 2...)를 꺼내오는데, 일반적인 배열 순회에는 for...of나 forEach을 권장

반복문	언제 사용하는가?
for	반복 횟수를 명확히 알 때
while	횟수보다 특정 조건이 중요할 때
do-while	일단 한 번은 반드시 실행해야 할 때
for...of	배열의 값들을 하나씩 다루고 싶을 때
for...in	객체의 키(속성)들을 하나씩 확인하고 싶을 때

[javaScript] 4. 조건문

리제 — Fri, 26 Jun 2026 17:30:43 +0900

1. if / else if / else 문

조건이 '참(Truthy)'인 경우에만 해당 블록을 실행한다.

범위 처리: score >= 90, score >= 80 처럼 특정 범위의 값을 비교할 때 가장 강력하다.
데이터 평가: if(name) 처럼 작성하면, 자바스크립트는 name을 불린(Boolean) 값으로 자동 변환된다.
- 빈 문자열 ""은 Falsy이므로 else 블록("이름 없음")이 실행.
- 문자열이 조금이라도 들어있으면 Truthy가 되어 "이름 있음"이 실행.

2. switch 문

하나의 값을 여러 케이스(case)와 엄격하게 비교(===)할 때 사용

동작 방식: day라는 변수에 담긴 값과 일치하는 case를 찾는다.
break의 중요성: break를 만나면 switch 문 전체를 즉시 빠져나간다. 만약 break가 없다면 아래의 case까지 멈추지 않고 계속 실행되는데, 이를 fall-through(낙하)라고 한다
fall-through의 활용: 계절 예시처럼 case 12, 1, 2를 묶어서 "겨울"로 처리하는 것은 매우 효율적인 문법 활용이다.

3. 삼항 연산자 (? :)

if-else 문을 한 줄로 압축한 형태입니다. 결과값을 바로 변수에 할당하거나 출력할 때 유용합니다.

구조: 조건 ? 참일_때_값 : 거짓일_때_값
팩트: age >= 19가 true면 "성인", false면 "미성년"을 반환합니다.
사용 권장: 로직이 단순한 경우에만 사용하세요. 복잡한 로직을 삼항 연산자로 한 줄에 다 쓰면 가독성이 떨어져 유지보수가 힘들어집니다.

요약: 언제 무엇을 쓸까?

구분	추천 상황	특징
if 문	범위 비교, Truthy/Falsy 판별	가장 범용적이고 유연함
switch 문	고정된 값 비교	가독성이 좋고 fall-through 활용 가능
삼항 연산자	간단한 값 결정	코드가 매우 간결해짐

[javaScript] 2. 변수와 자료형 / 호이스팅(Hoisting) /연산자

리제 — Wed, 24 Jun 2026 16:19:44 +0900

변수와 자료형

동적 타입 언어

JS는 변수의 타입을 명시적으로 지정하지 않음
실행 중에 값에 따라서 자동으로 타입이 결정됨

이해가 잘 안가니까 좀 더 쉽게 설명하자면

1. 재할당 (값 바꾸기)

let으로 만든 변수는 이름표(변수명)는 그대로 두고, 그 안에 담긴 내용물(값)만 바꿔치기할 수 있다. 이것이 재할당

예시: name2라는 이름의 통에 처음에는 "최지원"을 담았다가, 나중에 "김수민"으로 바꿔 넣는 것과 같다. 통 이름은 그대로 name2 유지
코드

let name2 = "최지원"; // 통 만들기
name2 = "김수민"; // 내용물만 바꿈 (성공)

2. 재선언 (중복 만들기)

반면 재선언은 같은 이름으로 똑같은 이름표를 또 만드는 행위.

자바스크립트는 이를 "이름이 겹쳐서 누가 진짜인지 헷갈리니까 안 돼!"라며 막아버리는 것

예시: 이미 name2라는 통이 있는데, "똑같이 name2라고 이름 붙인 통을 또 만들어줘!"라고 하면 프로그램이 고장남.

let name2 = "최지원";
let name2 = "김수민"; // 에러 발생! (이미 이 이름을 가진 변수가 있는데 또 만들려고 하니 차단)

요약하자면

재할당(name2 = "김수민"): 이미 있는 통의 내용물을 바꾸는 것 (가능).
재선언(let name2 = "김수민"): 같은 이름의 통을 또 하나 더 만들려고 하는 것 (불가능).

3.네이밍 규칙

영어를 사용하며 문자와 숫자 모두 사용 가능
특수문자는 언더스코어(_)와 달러($)만 사용 가능
숫자로 시작하면 안 됨
키워드를 변수명으로 사용하면 안 됨
변수명·함수명 → camelCase / class·id 속성명 → kebab-case

4.자료형 (Data Type)

여섯 개의 원시 타입과 한 개의 Object 타입이 있음
- 원시: Number, String, Boolean, undefined, null, Symbol
- Object: Object, Array, Function …

< 호이스팅(Hoisting)은 처음 접하면 매우 혼란스러운 이유?>

'끌어올려진다'는 말 때문에 코드가 물리적으로 이동한다고 생각하기 쉽지만,

사실은 자바스크립트 엔진이 코드를 실행하기 전 단계에서 발생하는 '사전 작업'이라고 이해하는 것이 가장 정확하다.

1. 호이스팅이 발생하는 이유

자바스크립트 엔진은 코드를 한 줄씩 실행하기 전에,

먼저 전체 코드를 훑으면서 var, let, const, function으로 선언된 변수나 함수를 찾아서 미리 '기억(메모리 등록)'해 둔다.

이 작업 때문에 코드 실행 시점에서는 선언문이 마치 위로 올라가 있는 것처럼 동작하게 되는 것.

2. 왜 var는 안 쓰고 let, const를 쓰나?

이 둘의 호이스팅 방식이 다르기 때문

var의 경우 (예측 불가능)

var는 선언과 동시에 undefined라는 값으로 초기화까지 해버린다.

이러면 개발자가 실수로 변수를 선언하기 전에 사용해도 에러가 안 나서 나중에 큰 버그가 됩니다.

let, const의 경우 (안전함)

let과 const도 호이스팅은 된다.

하지만 선언문 위치에 도달하기 전까지 "이 변수는 존재하지만 아직 사용할 수 없다"라는 상태(TDZ, 일시적 사각지대)에 가둔다.

이 덕분에 변수를 선언하기 전에 쓰려고 하면 바로 에러를 띄워주어, 개발자가 실수를 바로 잡을 수 있게 해줌

3. "선언만 끌어올리고 할당은 그대로 남는다"는 의미

이 부분이 가장 중요한데, 선언(변수의 이름만 만드는 것)과 할당(값을 넣는 것)을 분리해서 봐본다.

컴퓨터가 읽을 때는 실제로 이렇게 바뀐 것처럼 작동

요약

호이스팅: 코드를 실행하기 전 엔진이 선언문을 먼저 읽어 메모리에 등록하는 것.
var: 선언과 함께 undefined로 초기화까지 해버려서, 선언 전에도 값이 있는 것처럼 보여 위험함.
let/const: 호이스팅은 되지만 초기화는 안 해줌. 따라서 선언 전에 쓰면 에러가 나서 안전함.

처음 배우실 때는 "선언문(let, const, function)은 무조건 코드 가장 위쪽에서 작성하는 습관을 들이자"고 생각하면 호이스팅으로 인한 문제를 완벽히 피할 수 있다.

var의 문제점:
- 선언 전 참조: 에러 없이 undefined가 출력되어 버그를 찾기 어렵게 만든다.
- 재선언 가능: 같은 이름으로 변수를 다시 만들어도 에러가 나지 않아 큰 혼란을 준다.
let / const 의 장점:
- TDZ(Temporal Dead Zone): 변수 선언문이 실행되기 전까지는 변수에 접근하는 것을 철저히 막는다.
- 덕분에 "변수를 선언하지 않고 사용했다"는 사실을 바로 알 수 있어 매우 안전
- 재선언 불가: 같은 이름으로 변수를 다시 만들려고 하면 즉시 에러를 띄워 실수를 방지

연산자는 거듭제곱(Exponentiation)을 계산하는 것

연산자	명칭	예시	결과
+	더하기	10 + 3	13
-	빼기	10 - 3	7
*	곱하기	10 * 3	30
/	나누기	10 / 3	3.333...
%	나머지	10 % 3	1
**	거듭제곱	2 ** 10	1024

비교 연산자

두 개의 값(피연산자)을 비교하여 그 결과가 참(true)인지 거짓(false)인지를 판별하는 연산자

조건문이나 반복문에서 특정 조건을 검사할 때 주로 사용된다.

연산자	의미	설명
==	동등 연산자	두 값이 같은지 비교 (타입이 다르면 변환 후 비교)
===	일치 연산자	두 값과 타입이 모두 같은지 비교 (권장)
!=	부등 연산자	두 값이 다른지 비교 (타입이 다르면 변환 후 비교)
!==	불일치 연산자	두 값 또는 타입이 다른지 비교
>	크다	왼쪽 값이 오른쪽 값보다 큰지 확인
<	작다	왼쪽 값이 오른쪽 값보다 작은지 확인
>=	크거나 같다	왼쪽 값이 오른쪽 값보다 크거나 같은지 확인
<=	작거나 같다	왼쪽 값이 오른쪽 값보다 작거나 같은지 확인

핵심 주의사항: == vs ===

자바스크립트에서 값을 비교할 때는 === (일치 연산자)를 사용하는 것이 좋다.

==는 비교 과정에서 자바스크립트가 자동으로 타입을 변환(Type Coercion)하기 때문에 예기치 않은 결과가 발생할 수 있기 때문

console.log(5 == '5'); // true (타입은 다르지만 값만 비교)
console.log(5 === '5'); // false (값은 같지만 타입이 숫자와 문자열로 다름)
console.log(0 == false); // true
console.log(0 === false); // false

비교 연산의 결과는 항상 불리언(Boolean) 데이터 타입인 true 또는 false로 반환된다.

[javascript] 1. JS개요와 실행 환경 /메서드 오버로딩(Method Overloading)

리제 — Wed, 24 Jun 2026 14:32:49 +0900

크립트 언어와 자바스크립트

스크립트 언어란?

프로그램의 동작을 사용자의 요구사항에 맞게 수행되도록 해주는 용도
비교적 유연하게 동작하여 쉽게 사용이 가능

자바스크립트란

웹 브라우저에서 사용되는 인터프리터 방식의 스크립트 언어
브라우저에 엔진(V8)이 탑재되어 있어 별도의 컴파일 없이 동작
인터프리터 방식: 코드를 한 줄씩 읽어가며 바로 실행하는 방식
- 실시간으로 텍스트를 분석해서 실행 → 문법 오류가 있으면 런타임 시점에 알려줌

웹의 3요소에서 JS의 역할

HTML: 웹 문서의 큰 틀을 잡을 때 사용 (DOM Tree 구성)
CSS: HTML로 구성된 DOM에 다양한 스타일 속성을 부여
JS: 웹 문서에서 이벤트가 발생했을 때 실행할 기능을 정의 → HTML로 구성된 DOM을 편집

js를 웹에서 사용하는 방법

inline(인라인): 태그 내에서 간단한 소스코드를 작성해서 실행되게 하는 방법
internal(내부): HTML 문서 내에 소스코드를 작성해서 실행되게 하는 방법
external(외부): 별도의 .js 파일로 소스코드를 작성해서 가져다가 실행되게 하는 방법

inline

표현법: <태그 on이벤트명="해당 요소의 이벤트 발생시 실행할 코드">

internal

<script> 태그 영역 안에 소스코드를 작성
<script> 태그는 head, body 어디에서건 사용 가능

external

외부의 .js 파일을 생성해서 따로 js 코드를 작성
head 영역에서 <script src="./sample.js"></script>로 연결

메서드 오버로딩(Method Overloading)은

자바와 같은 객체지향 언어에서 같은 이름의 메서드를 여러 개 정의하는 것을 의미.

단순히 이름만 같다고 되는 것이 아니라, 반드시 아래의 조건을 충족해야 한다.

메서드 오버로딩의 필수 조건

메서드 오버로딩이 성립하려면 메서드 이름은 같아야 하며, 파라미터(매개변수)의 구성이 달라야한다.

파라미터의 개수가 달라야 한다.
파라미터의 타입(자료형)이 달라야 한다.
파라미터의 순서가 달라야 한다.

주의: 리턴 타입(반환형)만 다른 것은 오버로딩 조건이 아닙니다. 리턴 타입은 메서드 호출 시 어떤 메서드를 실행할지 결정하는 데 영향을 주지 않기 때문

프로그래밍에서 스코프(Scope)란

'변수나 함수에 접근할 수 있는 범위'를 의미한다.

쉽게 말해, "어디서 이 변수를 가져다 쓸 수 있는가?"를 결정하는 영역

스코프를 이해하면 프로그램 안에서 변수 이름이 겹쳐도 서로 충돌하지 않는 이유를 알 수 있다.

1. 전역 스코프 (Global Scope)

코드의 가장 바깥쪽에 선언된 변수. 파일 전체 어디서든 참조할 수 있다.

JavaScript

let globalName = "전역 변수";

function print() {
    console.log(globalName); // 함수 안에서도 잘 동작함
}

2. 지역 스코프 (Local/Block Scope)

특정 코드 블록({ }) 안에서만 유효한 변수. 블록 밖에서는 이 변수를 절대 부를 수 없다.

JavaScript

function localFunction() {
    let localName = "지역 변수";
    console.log(localName); // 함수 안에서는 가능
}

// console.log(localName); // 에러! 함수 밖에서는 접근 불가

스코프의 핵심 규칙

안쪽에서 바깥쪽으로: 안쪽 스코프는 바깥쪽 스코프의 변수를 사용할 수 있다. 하지만 반대로, 바깥쪽 스코프에서는 안쪽 스코프의 변수를 사용할 수 없다.
가까운 것이 우선: 변수 이름이 겹친다면, 현재 내가 있는 곳에서 가장 가까운 스코프에 정의된 변수를 먼저 사용한다.

JavaScript

let name = "바깥쪽";

function outer() {
    let name = "안쪽"; // 바깥쪽 name을 가림 (Shadowing)
    console.log(name); // "안쪽" 출력
}

왜 스코프가 중요한가요?

이름 충돌 방지: 스코프가 없다면 모든 변수 이름을 다 다르게 지어야 해서 코딩이 매우 힘들어짐
메모리 절약: 사용이 끝난 지역 변수는 해당 스코프를 벗어나는 순간 메모리에서 해제될 수 있어 효율적
보안: 외부에서 접근하면 안 되는 중요한 데이터를 특정 스코프 안에 가두어 보호할 수 있디/

자바스크립트 학습 중에 let과 const가 블록 레벨 스코프(중괄호 { } 단위)를 따른다는 점은 매우 중요. 변수가 선언된 중괄호 밖으로는 나갈 수 없다고 생각하면 된다.

[JavaScript] 3. 형변환

리제 — Wed, 24 Jun 2026 12:09:58 +0900

자바스크립트의 '묵시적 형변환(Implicit Type Conversion)'은 프로그래밍 언어가 데이터 타입을 자동으로 바꾸어 계산하는 아주 편리하지만 주의해야 할 기능이다.

1. 덧셈(+) 연산자: "문자열이 깡패다"

자바스크립트에서 + 연산자는 문자열이 하나라도 섞이면, 숫자를 문자열로 바꿔서 이어 붙여버린다. 이를 '문자열 연결'이라 한다.

console.log(1 + "1");
- 숫자 1과 문자열 "1"이 만났다. 자바스크립트는 숫자 1을 문자열 "1"로 변환한 뒤, 두 문자열을 붙인다.
- 결과: "11" (문자열)
console.log("5" + 3);
- 문자열 "5"와 숫자 3이 만났다. 역시 숫자 3을 문자열 "3"으로 변환하여 이어 붙인다.
- 결과: "53" (문자열)

2. 뺄셈(-), 곱셈(*), 나눗셈(/) 연산자: "숫자가 우선이다"

덧셈과 달리, 뺄셈이나 곱셈은 문자열로 계산할 수 없기 때문에, 자바스크립트는 문자열을 숫자로 바꿔서 수학 계산을 시도한다.

console.log(1 - "1");
- 문자열 "1"을 숫자 1로 변환, 1 - 1을 계산
- 결과: 0 (숫자)
console.log("5" * "2");
- 문자열 "5"와 "2"를 각각 숫자 5와 2로 변환,. 5 * 2를 계산
- 결과: 10 (숫자)

3. 마지막 문제: true - "20"

. 자바스크립트에서 true는 숫자 1로, false는 0으로 취급

console.log(true - "20");
- true는 숫자 1로 변환
- "20"은 숫자 20으로 변환됩
- 결과: 1 - 20이 되어 -19가 출력

요약하자면

+: "문자열이 하나라도 있으면 다 문자열로 합치자!"
-, *, /: "수학 계산을 해야 하니 일단 다 숫자로 바꿔보자!"

<명시적 형변환>

명시적(Explicit) 형변환은 말 그대로 "내가 직접 타입을 바꾸겠어!"라고 개발자가 코드로 의도를 명확하게 드러내는 것이다.

'암묵적 형변환'이 JS 엔진이 몰래(자동으로) 바꾸는 것이라면, 명시적 형변환은 함수나 기호를 사용해 개발자가 강제로 형식을 지정하는 것입으로 이해하면 된다.

예시로 보는 명시적 형변환의 이유

1. Number("123")

의도: "이 문자열 데이터를 반드시 숫자로 처리하겠다."
이유: typeof를 찍어보면 확실히 string이었던 값이 number로 바뀜. 연산 시 에러를 방지하기 위해 사용

2. parseInt("12px")

의도: "이 문자열 앞부분에 있는 숫자만 추출해서 정수(Integer)로 쓰겠다."
이유: "12px"라는 문자열에서 숫자 12만 쏙 뽑아내어 계산에 쓰고 싶을 때 사용합니다. Number("12px")를 쓰면 NaN(Not a Number, 숫자가 아님)이 나오는데, parseInt를 쓰면 똑똑하게 숫자만 골라줌.

3. String(123)

의도: "숫자 123을 화면에 보여주기 위해 문자열로 바꾸겠다."
이유: 숫자를 그대로 쓰면 안 되고, 다른 글자와 합치거나 HTML에 텍스트로 넣어야 할 때 명확하게 문자열로 변환

4. Boolean(0)

의도: "숫자 0을 참(true)인가 거짓(false)인가 하는 논리값으로 변환하겠다."
이유: JS에서 0은 false로 취급됩니다. 이를 명시적으로 확인하고 싶을 때 사용

5. !!"hello" (이중 부정)

의도: "문자열을 확실한 true/false 값으로 바꾸겠다."
이유:
- ! (부정): "hello"는 참인데 부정(!)하면 false가 됨
- !! (이중 부정): false를 다시 부정하면 true가 됨
- 즉, 어떤 데이터든 !!를 붙이면 그 데이터가 "참 같은 값(truthy)"인지 "거짓 같은 값(falsy)"인지 확실하게 true나 false로 바꿔주는 트릭

<암묵적 형변환(Implicit Type Conversion)>

은 자바스크립트 엔진이 개발자의 의도와 상관없이 "데이터의 형식이 맞지 않으니,

연산이 가능하도록 알아서 타입을 바꾸자!"라고 판단하여 자동으로 처리하는 과정.

이를 '타입 강제 변환(Type Coercion)'이라고도 부르는데,. 핵심은 '연산자'에 따라 자바스크립트가 어떤 전략을 취하느냐다.

1. + 연산자: "문자열이 우선이야"

+ 연산자는 덧셈도 하지만 문자열을 이어 붙이는(연결) 역할도한다.

자바스크립트는 둘 중 하나라도 문자열이 있으면, 나머지 하나도 문자열로 바꿔서 연결하는 것을 우선으로 한다.

1 + "1" → 1을 문자열 "1"로 변환 → "1" + "1" = "11"
true + "1" → true를 문자열 "true"로 변환 → "true" + "1" = "true1"

2. -, *, / 연산자: "숫자가 우선이야" (앞에도 강조했지만...)

이 연산자들은 오직 수학적 계산만을 위해 존재한다. 따라서 문자열이 섞여 있어도 일단 숫자로 변환하려고 시도한다.

"5" * 2 → "5"를 숫자 5로 변환 → 5 * 2 = 10
"10" - 5 → "10"을 숫자 10으로 변환 → 10 - 5 = 5

3. 논리 평가 (if, &&, ||): "참인지 거짓인지가 중요해"

if 문이나 논리 연산자(&&, ||) 안에서는 데이터의 값이 '참 같은 값(Truthy)'인지 '거짓 같은 값(Falsy)'인지가 중요하다. 그래서 모든 데이터를 불린(Boolean) 타입으로 평가한다.

Falsy한 값 (거짓으로 평가되는 것들): 0, "" (빈 문자열), null, undefined, NaN, false
Truthy한 값: 위를 제외한 나머지 전부 (심지어 "0" 같은 문자열도 참)

왜 암묵적 형변환을 조심해야 할까?

자바스크립트 엔진이 똑똑하게 변환해주지만, 때로는 개발자의 예상을 벗어나는 결과를 냄.

[] + 1의 결과는 무엇일까요? 배열을 비우면 ""(빈 문자열)이 되어 "1"이 됨.
null + 1은 어떻게 될까요? null을 0으로 변환하여 1이 됨

암묵적 형변환은 편리하지만, "내가 의도하지 않은 결과"를 낳을 위험이 큼

그래서 코드의 안전성을 위해서는 최대한 Number(), String() 등을 사용해 명시적으로 타입을 변환하는 것이 좋다.

<1 + "1"이 "11"인 이유>

자바스크립트에서 + 연산자는 두 가지 의미가 있다.

숫자 더하기: $1 + 2 = 3$
문자열 연결: "안녕" + "하세요" = "안녕하세요"

그런데 +의 한쪽이라도 문자열(String)이 있으면, 자바스크립트는 다른 한쪽도 문자열로 바꿔서 "연결"해 버림

"1"은 문자열이므로, 앞에 있는 1도 문자열 "1"로 바뀐다.
결과적으로 "1" + "1"이 되어 "11"이 된다.

< "5" * 2가 10인 이유>

*(곱하기), -(빼기), /(나누기) 연산자는 오직 숫자 계산을 위해서만 존재합니다. 따라서 문자열 "5"가 섞여 있어도 자바스크립트는 "아, 이건 곱하기를 해야 하니까 문자열을 숫자로 바꿔야겠다!"라고 판단

"5"를 숫자 5로 자동 변환
$5 \times 2 = 10$

< true + 1이 2인 이유>

자바스크립트에서 불린(Boolean) 타입은 숫자와 계산될 때 true는 1로, false는 0으로 변환되는 약속

true는 1로 바꿘다.
$1 + 1 = 2$가 됨

한눈에 정리하는 규칙

상황	변환 방식	이유
+ 연산자	문자열 우선	문자열과 만나면 무조건 '연결'
*, -, /	숫자 우선	계산을 하려면 무조건 '숫자'여야 함
true	1로 변환	불린이 숫자와 계산될 때의 약속

처음엔 당황스럽겠지만, 이는 "사용자가 어떤 데이터를 넣든 에러를 내지 않고 최대한 결과를 만들어내겠다"는

자바스크립트의 철학 때문이다.

하지만 이런 암묵적 형변환은 코드가 커지면 버그의 원인이 되기도 한다고,

그래서 실무에서는 보통 Number("5") * 2처럼 명시적으로 타입을 바꾸는 것을 더 권장한다고 한다.

CSS 코드와 웹사이트의 구조

리제 — Wed, 24 Jun 2026 12:07:17 +0900

1. 초기화 및 기본 설정 (Reset & Base)

모든 브라우저는 기본 스타일을 가지고 있어서, 이를 초기화해야 원하는 대로 디자인할 수 있다.

*{ margin: 0; padding: 0; box-sizing: border-box; }: 모든 요소의 기본 여백을 없애고, 테두리까지 포함해서 크기를 계산하도록 설정. (레이아웃 설계의 필수)
body{ ... }: 페이지 전체의 기본 글꼴, 색상, 배경색을 지정.
a{ text-decoration: none; color: inherit; }: 링크의 밑줄을 없애고, 색상은 부모 요소의 색상을 그대로 따라가게 함
img{ max-width: 100%; display: block; }: 이미지가 부모 영역보다 커져서 튀어나가는 것을 방지합니다.

2. 레이아웃의 틀 (Wrapper & Header)

.wrapper{ max-width: 1120px; margin: 0 auto; }: 사이트 콘텐츠를 화면 중앙에 1120px 너비로 고정하여 배치
.header{ display: flex; justify-content: space-between; ... }: 로고, 검색창, 메뉴를 가로로 배치하고 양쪽 끝으로 밀어내어 균형을 맞춤
.search{ flex: 1; ... }: 검색창이 헤더의 남은 공간을 알아서 차지하도록 설정

3. 내비게이션 & 드롭다운 (Navigation)

.nav .submenu{ position: absolute; ... opacity: 0; visibility: hidden; }: 서브 메뉴를 기본적으로 숨겨두었다가, 마우스를 올렸을 때 나타나도록 함
.nav > ul > li:hover .submenu{ opacity: 1; ... }: 마우스를 올렸을 때 서브 메뉴를 부드럽게 나타나게 함

4. 메인 컨텐츠 (Flex & Grid)

정렬

.main{ display: flex; gap: 24px; }: 메인 영역을 왼쪽(Section)과 오른쪽(Aside)으로 나눔
.main .section{ flex: 7; } .main .aside{ flex: 3; }: 전체 화면을 10:3 비율로 나누어 왼쪽을 훨씬 넓게 씀.
.cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }: 카드 3개를 가로로 똑같은 크기(1fr)로 3등분하여 정렬

5. 컴포넌트 세부 디자인 (Banner & Card & Login)

.banner{ background: linear-gradient(...); }: 단색이 아닌 그라데이션 색상을 사용하여 세련된 느낌을 준다.
.notice{ display: flex; align-items: center; }: 공지사항 아이콘과 텍스트를 수평으로 정렬.
.box{ border: 1px solid gainsboro; border-radius: 12px; }: 모서리가 둥근 테두리 박스를 만들어 강조.
.login input, .login button{ ... }: 로그인 폼의 높이, 테두리, 여백을 설정하여 버튼과 입력창을 보기 좋게 만든다.

학습 포인트

Flexbox: 메뉴나 헤더처럼 한 줄로 정렬할 때 (display: flex)
Grid: 카드 목록처럼 여러 줄로 정렬할 때 (display: grid)

자유 실습 - 내가 만들고 싶은 단일 페이지 사이트 만들기

리제 — Mon, 22 Jun 2026 17:40:20 +0900

실습 개요

이번엔 따라 치는 실습이 아닙니다. 평소에 만들어 보고 싶었던 사이트를 직접 기획하고, 그동안 배운 박스 모델·flex 영역 분할·시맨틱 구조를 적용해 한 페이지로 완성하는 것이 목표입니다.

예제를 따라 칠 때는 쉬워 보여도, 빈 화면에서 직접 짜 보면 약한 부분이 분명히 드러납니다. 바로 그 지점에서 실력이 늡니다.
화려함보다 완성을 우선하세요. 한 화면을 끝까지 다듬는 편이 여러 페이지를 절반씩 만들다 마는 것보다 훨씬 많이 남습니다.

실습 조건

HTML · CSS만 사용 - JavaScript는 아직 배우지 않았으므로, 클릭 동작 같은 기능이 필요 없는 형태로 만듭니다.(이미 알고계신분들은 사용하셔도 됩니다.)
js없이 만들때는 정보를 보여주는(읽는) 사이트가 적합합니다. (소개형 · 안내형 · 목록형)

내가 평소 만들고 싶었던 사이트는 https://stdict.korean.go.kr/main/main.do

국립국어원 표준국어대사전

이 누리집은 대한민국 공식 전자정부 누리집입니다.

stdict.korean.go.kr

이다.

평소 잘 이용하고는 하지만, 다지인이 조금 아쉽고 평면적이었다.

어차피 내가 모든 기능을 다 만들어야하는 것도 아니고 , 한장짜리 멈춰있는 단일 페이지를 만드는 것이기 때문에

대문만 그럴듯하게 만들면 될 것같아서. 최대한 단순하면서도, 기본 틀은 다 맞춰있는,

세련됐다고 할 수는 없지만, ux부분에서 크게 하자가 없는 이 사이트를 기본으로 정했다.

아마 다른 친구들은 날고 기겠지...진짜 반응형 홈페이지를 만들고 난리나겠지 뭐..

벗...

나의 목표는 오로지 나다..!!

다른 달팽이들 신경쓰지 말아야지.

F12 로 살짝본 코드

국립국어원 표준국어대사전 사이트의 구조를 벤치마킹하여, 자개(Mother-of-pearl) 컨셉의 단일 페이지 웹사이트를 구현하기 위한 가이드를 정리해보았다.

1. 시맨틱 구조 설계 (HTML)

박스 모델을 활용하여 화면을 논리적으로 분할

<header>: 제목 및 로고 (자개 질감의 로고 이미지 혹은 텍스트)
<nav>: 검색 메뉴 레이아웃 (검색창과 메뉴바 형태)
<main>: 핵심 콘텐츠 (단어 검색 결과 예시 등)
<section>: 추가 정보 또는 목록 (가독성을 위한 카드형 레이아웃)
<footer>: 저작권 및 안내 사항

2. 디자인 및 레이아웃 (CSS)

자개 느낌과 한국적 미를 살리기 위한 주요 스타일링 포인트입

배경 및 색상:
- background-color: #000000; (검은색 바탕) - > 너무 어두우면 텍스쳐가 있는 이미지를 바탕에 깔아볼까한다.
- 자개 느낌은 linear-gradient와 background-clip: text를 활용한 텍스트 효과로 구현 가능하다고 제미니가...
Flexbox 활용:
- display: flex;를 사용하여 내비게이션 바와 콘텐츠 영역을 정렬
- justify-content: space-between; 등으로 탁트인 레이아웃
박스 모델:
- padding, margin, border를 활용해 요소 간의 적절한 여백을 확보하여 가독성을 높이자

1차

1차로 만들어본 기본 뼈대.

여기서 하나씩 수정을 해볼것인데,

맨 먼저 오른쪽 상단에 있는 들어가기 | 회원가입 | 일러두기 색을 변경하고 싶었다.

선생님이 말씀하신대로 제미나이에게 코드 전체를 맡기지 않고

'특정부분을 수정하고 싶은데, 어디가서 어떻게 수정하면 되는지'를 물어보고,

알려주면 내가 스스로 조금씩 고치면서 공부를 해나갔다.

참고사항을 친절하게 알려준 덕분에 주요 팁들도 놓치지 않을 수 있었다.

색상 코드: #333 대신 원하는 색상의 16진수 코드(예: #4a4a4a, #0056b3)를 입력하면된다.
위치: style2.css 파일 안이라면 어디든 괜찮지만, 가독성을 위해 기존의 .user-menu 스타일 근처에 배치하는 것이 좋다.

2차 수정

이쯤에서 또 제미니한테 어떻게 하면 좋을지 물어봤다.

친절히 알려주고 있지만 레고 조각들을 일부 건내는 것과 같아서,

아예 전체적인 지도가 머리 속에서 잘 그려지지 않는 나에게는 , 이미 작성된 코드 어느부분에 추가 코드를 넣어야 하는지도 어려웠다.

영아가 너무 어릴때는 블록쌓기 놀이 조차도 보호자가 순서를 생각해서 하나씩 건내주는 것이 좋다.

그래야 결과물이 나오고, 애가 울지 않는다.

나도 안울고 싶어서 제미니한테 많이 물어봤다.

/* 1. 공통/초기화 (Reset): 전체 페이지에 영향을 주는 스타일 */
body { ... }
/* 2. 레이아웃 (Layout): 크게 크게 구획을 나누는 스타일 */
header, main, footer { ... }
/* 3. 섹션별 상세 스타일 (Component): 헤더 내부, 알립니다 섹션 내부 */

/* 3-1. Header 상세 */
.top-util { ... }
.main-header{ ... }
.search-wrap { ... }

/* 3-2. Main 상세 */
.notice-section { ... }
.notice-header { ... }
.notice-list { ... }

/* 3-3. Footer 상세 */
footer { ... }

이렇게 큰 틀로 이해시켜줬다. 고맙소....

3차 수정.. 기괴하다...백룸같다...

계속 수정을 해도 바뀌지 않는다면, 연결이 잘 안되어있을 가능성이 있다.

연결이 처음에는 되었다가 끊긴거라면,

더블체크를 하지않고, 코드를 모두 ai에게 짜달라고 요구하고 복붙을 했을 경우가 있다.

피드백을 받고, 그 수정안을 또 ai한테 보여주면서 멋대로 바꾸지 못하도록 해야하고, 오타도 같이 수정해 나가야 한다는 것을 배웠다.

내가 최종적으로 완성한 화면이다.

원래는 이 그림을 뒤에 배경처럼 깔고싶은데, 표준국어대사전 로고를 캡쳐로 만든 상태라 이질적인 화면이 되어버린다.

효과적으로 사용하지 못해 아쉽다.

Visual Studio Code 실습문제 톺아보기

리제 — Mon, 22 Jun 2026 11:57:20 +0900

<nav class="navbar"> <div class="logo">MyPortfolio</div>
<ul class="menu"> <li>홈</li>
</ul>
</nav>

<header class="hero"> <h1>안녕하세요, CSS를 배우는 중입니다</h1>
</header>
<section> <h2 class="section-title">프로필</h2>
<div class="profile-card"> <span class="badge">NEW</span><h3>최지원</h3>
</div>
</section>

① 왜 <header>, <section>, <nav> 태그를 쓰나요?

이것들은 '시맨틱 태그(Semantic Tags)'입니다. 브라우저에게 "이 부분은 메뉴야", "이 부분은 본문이야"라고 의미를 전달합니다.

단순히 <div>로만 도배하는 것보다 검색 엔진이 내 페이지를 더 잘 이해하게 도와줍니다.

② 왜 position: relative와 absolute를 쓰나요?

relative (상대적 위치): "나를 기준으로 자식을 배치하겠다"라는 선언입니다. .profile-card에 설정된 이유입니다.
absolute (절대적 위치): "가장 가까운 relative 부모를 기준으로 위치를 잡겠다"입니다. 덕분에 NEW 뱃지가 카드 밖으로 나가지 않고 정확히 카드 내부 우측 상단에 고정됩니다.

③ 왜 display: flex를 자주 쓰나요?

justify-content: 요소들을 가로로 어디에 둘지 정합니다 (중앙, 양 끝 등).
gap: 요소들 사이의 간격을 한 줄로 깔끔하게 처리합니다.
flex-wrap: 화면이 좁아지면 아래로 넘길지 말지 결정합니다.

<!DOCTYPE html>
<html lang="ko"> <head>
    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 종합 실습 (문제)</title>

    <link rel="preconnect" href="
https://fonts.googleapis.com
">
    <link rel="preconnect" href="
https://fonts.gstatic.com
" crossorigin>
    <link href="
https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap
" rel="stylesheet">

    <style>
        /* [전체 초기화] 모든 요소의 기본 마진/패딩을 0으로 없애고 크기 계산을 border 포함으로 통일합니다. */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* [본문 스타일] 전체 폰트 적용, 배경색 지정 및 상단 고정 메뉴를 고려해 위쪽 여백을 줍니다. */
        body {
            font-family: "Noto Sans KR", sans-serif;
            background: #f0f0f0;
            color: black;
            padding-top: 55px;
            line-height: 1.6;
        }

        /* [리스트 초기화] ul, ol 태그의 기본 불렛 포인트(점)를 제거합니다. */
        ul, ol {
            list-style: none;
        }

        /* [네비게이션 바] 화면 상단에 고정하며, Flexbox를 사용하여 요소들을 양옆으로 배치합니다. */
        .navbar {
            position: fixed; /* 스크롤해도 화면 상단에 고정됩니다. */
            top: 0;
            left: 0;
            width: 100%;
            height: 55px;
            background: #2c3e50;
            border-bottom: 3px solid white;
            display: flex; /* 자식 요소들을 가로로 나열합니다. */
            justify-content: space-between; /* 로고와 메뉴 사이를 최대한 벌립니다. */
            padding: 0 24px;
            align-items: center; /* 세로 중앙 정렬을 합니다. */
            color: white;
        }

        /* [메뉴 목록] 메뉴 항목들을 가로로 배치하고 gap으로 간격을 줍니다. */
        .menu {
            display: flex;
            gap: 20px;
        }

        /* [메뉴 아이템] 마우스 커서를 올렸을 때의 변화(transition)를 설정합니다. */
        .menu li {
            cursor: pointer;
            transition: all 0.1s ease;
        }

        /* [메뉴 Hover] 마우스가 올라가면 살짝 작아지고 글씨가 굵어집니다. */
        .menu li:hover {
            scale: calc(0.98);
            font-weight: 600;
        }

        /* [배너] 페이지 상단 제목과 부제목을 중앙 정렬합니다. */
        .hero {
            text-align: center;
            color: white;
            background: #4a90d9;
            padding: 55px 0;
        }

        .hero h1 {
            font-size: 30px;
            margin-bottom: 10px;
        }

        /* [섹션 타이틀] 각 구역의 제목을 중앙에 배치하고 여백을 줍니다. */
        .section-title {
            text-align: center;
            margin: 30px 0;
        }

        /* [프로필 카드] 박스 모델로 카드를 만들고, 자식 요소 배치를 위해 position을 relative로 설정합니다. */
        .profile-card {
            width: 300px;
            background: white;
            margin: 0 auto; /* 좌우 마진 자동 적용으로 중앙 정렬 */
            padding: 24px;
            border: 1px solid #e4e4e4;
            border-radius: 8px;
            position: relative; /* 자식의 absolute 위치 배치의 기준점(기준점 생성) */
        }

        /* [뱃지] 부모 카드 내 우측 상단에 절대 위치로 배치합니다. */
        .badge {
            position: absolute; /* 부모(profile-card)를 기준으로 위치 */
            right: 10px;
            top: 10px;
            background: #e74c3c;
            color: white;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
        }

        /* [기술 스택 컨테이너] Flexbox를 이용해 카드를 가로로 나열하고 줄바꿈(wrap)을 허용합니다. */
        .cards {
            display: flex;
            justify-content: center;
            flex-wrap: wrap; /* 화면이 좁아지면 다음 줄로 넘어갑니다. */
            gap: 20px;
        }

        /* [카드 스타일] 각 카드의 크기와 테두리, 그림자(box-shadow)를 지정합니다. */
        .card {
            width: 240px;
            padding: 24px;
            background: white;
            border: 1px solid #e4e4e4;
            border-radius: 8px;
            box-shadow: 0 2px 4px #e4e4e4;
        }

        /* [선택자 연습 - 후손 선택자] .relation 내부의 모든 p 태그 적용 */
        .relation p {
            color: purple;
        }

        /* [선택자 연습 - 자식 선택자] .relation 바로 아래의 span 태그만 적용 */
        .relation > span {
            color: orange;
            font-weight: bold;
        }

        /* [선택자 연습 - ID 선택자] 특정 ID를 가진 요소만 적용 */
        #special {
            background: #fff3cd;
            padding: 12px;
        }

        /* [미디어 쿼리 - 반응형] 가로폭 768px 이하에서 레이아웃을 세로로 변경합니다. */
        @media (max-width: 768px) {
            .cards {
                flex-direction: column; /* 세로 정렬 */
                align-items: center;
            }
            .menu {
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">...</nav>
    <header class="hero">...</header>
    <section>프로필...</section>
    <section>기술 스택...</section>
    <section>선택자 연습...</section>
</body>
</html>

[CSS] "소수는 어렵고 배수는 쉽다" 는 무슨 뜻일까? / Relation 이해하기

리제 — Mon, 22 Jun 2026 10:20:06 +0900

CSS 수치(px, em, rem 등)를 다룰 때 계산의 효율성과 유지보수를 말하는 것.

소수가 어려운 이유: 13.333px, 17.4px처럼 소수점이 생기면 브라우저가 화면을 그릴 때 '렌더링 오차'가 발생해. 아주 미세하게 선이 뭉개지거나, 1px 차이로 레이아웃이 미묘하게 어긋나는 현상이 생긴다.
배수가 쉬운 이유 (8점 그리드 시스템): 실무에서는 보통 8의 배수(8, 16, 24, 32, 40, 48...)로 간격을 설정하도록 되어있다..
- 일관성: 모든 요소의 간격이 8의 배수로 통일되면 디자인이 규칙적이고 정돈돼 보인다.
- 계산: 8, 16, 24는 암산하기 쉽고, 화면을 절반으로 나누거나 1/4로 나눌 때도 소수점 없이 딱 떨어져서 레이아웃이 깨지지 않는다.

즉, "배수를 쓰면 계산이 직관적이라 실수가 줄어들고, 브라우저가 화면을 그릴 때도 정확하다"

코딩에서의 3가지 핵심 관계

HTML 구조는 가계도와 비슷하다. 부모, 자식, 형제 관계라고 표현하는 것이 보통

부모-자식 관계 (Parent-Child)
- 태그를 감싸고 있는 상위 태그가 '부모', 그 안에 들어있는 하위 태그가 '자식'
- 예: <body> 안에 <div>가 있다면, body는 부모, div는 자식
조상-후손 관계 (Ancestor-Descendant)
- 부모의 부모, 그 부모의 부모까지 포함한 더 넓은 범위의 상위를 '조상', 그 아래에 있는 모든 태그를 '후손'이라고 부른다.
- 예: <body> 안에 <div>가 있고, 그 <div> 안에 <p>가 있다면, body는 <p>의 조상이고, <p>는 body의 후손이다.
형제 관계 (Sibling)
- 같은 부모를 둔 태그들끼리는 서로 '형제'
- 예: <ul> 안에 <li>가 여러 개 있다면, 이 <li>들은 서로 형제 관계

CSS에서 특정 태그만 골라 스타일을 입히고 싶을 때, 이 관계(Relation)를 정확히 지정해야 하기 때문

div > p (자식 선택자): div의 바로 아래에 있는 p 태그만 선택.
div p (후손 선택자): div 안에 있는 모든 p 태그(깊이와 상관없이)를 선택.

[Web Front]웹 구조에 시각적 표현을 입히는 언어 CSS

리제 — Mon, 22 Jun 2026 09:11:42 +0900

CSS(Cascading Style Sheets)

HTML 문서에 시각적 표현(스타일) 을 입히는 언어이다.

HTML이 문서의 뼈대(구조)를 정의한다면, CSS는 그 위에 색상, 글꼴, 간격, 레이아웃, 애니메이션 등을 더해 사용자가 보기 편한 화면을 만든다.
이름의 Cascading은 여러 스타일 규칙이 겹쳤을 때, 우선순위와 소스의 선언 순서에 따라 최종적으로 적용되는 방식을 의미한다.
즉, CSS는 웹사이트를 단순한 텍스트 구조에서 완성된 디자인 화면으로 바꿔주는 역할을 한다.

CSS 적용 방법 3가지

인라인 스타일
- HTML 태그의 style 속성 안에 직접 작성하는 방식
- 장점: 간단한 테스트나 특정 요소에만 바로 적용 가능
- 단점: 코드가 지저분해지고 유지보수 어려움
- 예시: 버튼 하나의 글자색만 급하게 바꿀 때 사용
- → <button style="color:red;">삭제</button>
내부 스타일(Internal)
- <head> 안의 <style> 태그에 작성하여 문서 전체에 적용
- 장점: 한 문서 안에서 빠르게 스타일링 가능
- 단점: 여러 HTML 파일에 동일한 스타일을 적용하기 어려움
- 예시: 단일 페이지 과제에서 제목 색상, 본문 폰트를 지정할 때
외부 스타일(External)
- 별도의 .css 파일을 만들고 <link> 태그로 HTML과 연결
- 장점: 여러 페이지에서 재사용 가능, 유지보수와 협업에 유리
- 단점: 파일을 따로 관리해야 함
- 예시: 회사 웹사이트 전체에 통일된 색상/레이아웃을 적용할 때

→ 실무에서는 외부 스타일 방식을 가장 많이 사용한다.

CSS 적용 방법 3가지

인라인 스타일
- HTML 태그의 style 속성 안에 직접 작성하는 방식
- 장점: 간단한 테스트나 특정 요소에만 바로 적용 가능
- 단점: 코드가 지저분해지고 유지보수 어려움
- 예시: 버튼 하나의 글자색만 급하게 바꿀 때 사용
- → <button style="color:red;">삭제</button>
내부 스타일(Internal)
- <head> 안의 <style> 태그에 작성하여 문서 전체에 적용
- 장점: 한 문서 안에서 빠르게 스타일링 가능
- 단점: 여러 HTML 파일에 동일한 스타일을 적용하기 어려움
- 예시: 단일 페이지 과제에서 제목 색상, 본문 폰트를 지정할 때
외부 스타일(External)
- 별도의 .css 파일을 만들고 <link> 태그로 HTML과 연결
- 장점: 여러 페이지에서 재사용 가능, 유지보수와 협업에 유리
- 단점: 파일을 따로 관리해야 함
- 예시: 회사 웹사이트 전체에 통일된 색상/레이아웃을 적용할 때

→ 실무에서는 외부 스타일 방식을 가장 많이 사용한다.

선택자와 우선순위

선택자(Selector)

: 어떤 HTML 요소에 스타일을 적용할지를 알려주는 규칙.

예: 태그 선택자(p), 클래스 선택자(.box), 아이디 선택자(#main), 속성 선택자([type=text]), 가상 클래스(:hover) 등

우선순위 규칙

: 같은 요소에 여러 스타일이 겹칠 경우, 더 높은 우선순위를 가진 규칙이 적용된다.

인라인 스타일(태그 안 직접 작성) → 가장 강력
ID 선택자 → 특정 요소 1개만 지정할 수 있어 강함
클래스 / 속성 / 가상 클래스 선택자 → 중간 정도
태그 선택자 → 낮음
전체 선택자(*) → 가장 약함

→ 동일한 수준의 선택자가 충돌하면, 나중에 작성된 스타일이 최종적으로 적용된다.

!important: 모든 우선순위를 무시하고 강제로 적용하는 규칙.

하지만 유지보수성이 크게 떨어지고 다른 개발자와 협업 시 혼란을 주므로 꼭 필요한 경우에만 사용해야 한다.

상속과 캐스케이딩

상속: 글꼴, 색상 등 텍스트 관련 속성은 하위 요소에 전달된다.
비상속: 레이아웃 관련 속성(마진, 보더, 크기 등)은 기본적으로 상속되지 않는다.
캐스케이딩: 여러 규칙이 겹칠 때 우선순위 → 소스 순서에 따라 최종 결과가 정해진다.

박스 모델(Box Model)

모든 HTML 요소는 사각형 박스로 표현된다.
구조: 콘텐츠(content) → 패딩(padding) → 보더(border) → 마진(margin).
실제 요소 크기를 계산할 때, 이 네 가지를 모두 고려해야 한다.
유지보수 편의를 위해 보통 box-sizing을 전체 요소에 통일한다.

단위와 색상

단위(Unit)

절대 단위
- px : 화면의 실제 픽셀을 기준으로 한 고정 크기.
- 장점: 결과가 예측 가능 → 버튼, 아이콘 같은 고정 크기 요소에 자주 사용.
- 단점: 화면 크기·해상도가 달라져도 크기가 변하지 않음.
상대 단위
- % : 부모 요소 크기를 기준으로 비율 적용.
- em : 부모 요소의 글꼴 크기를 기준으로 배율 적용.
- rem : 문서의 최상위(html) 글꼴 크기를 기준으로 배율 적용 → 실무에서 가장 많이 사용 (일관된 글자 크기와 간격 유지 가능).
- vw / vh : 화면(viewport)의 너비/높이를 기준으로 퍼센트 적용 → 화면 전체 배경, 반응형 레이아웃에 활용.

색상(Color)

표현 방식
- HEX(16진수) : #RRGGBB 형태 → 웹에서 가장 흔히 사용됨.
- RGB : rgb(255, 0, 0) 형태, 빨강/초록/파랑 값 지정.
- HSL : 색상(Hue), 채도(Saturation), 명도(Lightness)로 지정 → 색조를 조절하기 편리.
투명도(Alpha 값)
- rgba, hsla 등 알파 채널을 추가해 불투명도(0~1) 지정 가능.
- 예: 버튼 호버 시 살짝 반투명한 배경, 오버레이 효과에 활용.

레이아웃

display
- 요소가 화면에 배치되는 기본 방식을 결정하는 속성.
- block은 줄바꿈이 되는 큰 덩어리(예: <div>), inline은 한 줄 안에 이어 붙는 요소(예: <span>).
- 최신 웹에서는 flex와 grid가 주로 사용되며, 복잡한 레이아웃을 효율적으로 구현할 수 있다.
position
- 요소를 문서 내에서 배치하는 방식.
- static(기본 흐름), relative(자기 위치 기준 이동), absolute(상위 기준 위치 고정), fixed(브라우저 화면 고정), sticky(스크롤에 따라 상대/고정 혼합).
- 예: 상단 네비게이션 고정, 버튼에 뱃지 표시 등 다양한 UI에서 활용.
float
- 원래는 텍스트 주위에 이미지를 배치하기 위한 속성이었음.
- 과거에는 레이아웃 구현(컬럼 구조 등)에도 자주 쓰였지만, 현재는 Flexbox와 Grid 등장으로 제한적 용도(이미지 배치 등) 에만 사용된다.
Flexbox (Flexible Box)
- 1차원(가로 혹은 세로 방향) 레이아웃에 강력.
- 수평/수직 정렬, 요소 간 간격 조정, 공간 분배가 간단해짐.
- 예: 네비게이션 메뉴, 버튼 그룹, 카드 나열 등.
Grid
- 2차원(행과 열 동시에) 레이아웃을 관리.
- 복잡한 페이지 구조(헤더/사이드바/메인/푸터 등)를 체계적으로 배치 가능.
- 예: 대시보드, 갤러리, 잡지형 레이아웃.

[Web Front 2] HTML 기초

리제 — Thu, 18 Jun 2026 17:11:05 +0900

HTML 문서의 기본 구조

모든 HTML 문서는 머리(head) + 몸(body) 구조로 이루어져 있다.

구성 요소

<!DOCTYPE html>	HTML5 문서 선언	문서 맨 위 1줄
<html lang="ko">	문서 전체 영역 / 언어 지정	가장 바깥 태그
<head>	문서 정보 영역	화면에 안 보임
<meta charset="UTF-8">	문자 인코딩 지정	없으면 한글 깨짐
<title>	브라우저 탭 제목	즐겨찾기 이름
<body>	실제 콘텐츠 영역	화면에 보임

head vs bodyhead는 무대 뒤(설정), body는 무대 위(관객이 보는 것)라고 이해하면 쉽다.
우리가 작성하는 대부분의 태그는 body 안에 들어간다.

글자 관련 태그 : 제목과 구분

함수 목록

태그 설명 특징

태그	설명	특징
<h1> ~ <h6>	제목 태그	숫자가 클수록 글자가 작아짐
<hr>	수평선	단독 태그
<br>	줄바꿈	단독 태그

숫자는 크기가 아니라 위계가 중요
h1은 페이지 대제목, h2는 소제목...처럼 중요도(문서 구조) 를 나타낸다.
단순히 글자를 많이 넣기 위해 h1을 너무 남발하지 않도록 주의해야 한다.

글자 관련 태그 : 문단 (p vs pre)

문단을 나누는 태그는 <p>와 <pre> 두 가지가 있고,

줄 바꿈·공백 처리 방식이 다르다.

구분	<p>	<pre>
줄바꿈	무시됨 → <br> 필요	입력한 그대로 적용
공백	여러 칸도 1칸으로	입력한 그대로 적용

예제

HTML은 공백과 줄 바꿈을 무시
코드에서 줄을 여러 번 바꾸거나 공백을 여러 칸 넣어도 화면에는 공백 1칸으로만 나옴.
그래서 p 안에서는 <br>(줄 바꿈)와  (공백)가 필요하다.

글자 관련 태그 : 엔티티 코드

<, >, & 같은 기호는 태그 문법에 쓰이는 특수문자라서 그대로 못 쓰고 엔티티 코드로 표현한다.

함수 목록

코드	출력	의미
	(공백)	공백 1칸 강제 삽입
<	<	부등호 열기 (less than)
>	>	부등호 닫기 (greater than)
&	&	앰퍼샌드

글자 관련 태그 : 텍스트 서식

<b>	굵게	단순 굵게 (의미 X)
<strong>	굵게	중요성 강조 (의미 O)
<i>	기울임	단순 기울임 (의미 X)
<em>	기울임	강조 (의미 O)
<mark>	형광펜	하이라이트
<u>	밑줄	underline
<s>	취소선	strike
<sub>	아래첨자	H₂O
<sup>	윗첨자	x²

예제

b vs strong, i vs em의 차이
화면에 보이는 모양은 같지만 의미(시맨틱)가 다르다

b·i → 그냥 모양만 (굵게/기울임)

strong·em → "중요하다 / 강조한다"는 의미까지 포함 → 검색엔진·스크린리더가 다르게 인식

모양이 같다고 아무거나 쓰지 말고 의미에 맞는 태그를 고르는 습관이 중요

⚠️ 태그 중첩 시 닫는 순서 주의
여는 순서의 역순으로 닫아야 한다.
<strong><em>... </em></strong> (O) / </strong></em> (X)

목록 관련 태그

목록은 <li>(목록 아이템)를 <ul> 또는 <ol>로 감싸서 만든다.

함수 목록

태그	설명	표식
<ul>	순서 없는 목록 (Unordered List)	● 점
<ol>	순서 있는 목록 (Ordered List)	1, 2, 3 번호
<li>	목록 아이템 (List Item)	ul/ol 안에 위치

ul / ol 기본

ol 주요 속성

type	번호 형식 (1 A a I i)	type="A" → A, B, C
start	시작 번호 지정	start="5" → 5부터
reversed	역순 정렬	큰 수 → 작은 수

⚠️ 중첩 위치 주의
자식 <ul>은 반드시 부모 <li> 안쪽에 넣어야 한다.
<li> 바깥에 두면 구조가 깨짐.

[Web Front 1] 웹을 구성하는 기본구조 HTML

리제 — Thu, 18 Jun 2026 16:40:10 +0900

visual studio code에서 프로그램을 설치하기

인터넷과 웹의 차이

구분	인터넷 (Internet)	웹 (World Wide Web)
정의	전 세계를 연결하는 네트워크망	인터넷 기반의 정보 공유 서비스
역할	데이터 전달을 위한 하드웨어적 기반	정보를 시각적으로 보여주는 소프트웨어적 수단
구성 요소	케이블, 라우터, 서버, IP 주소	HTML, CSS, HTTP 프로토콜, 브라우저
관점	거대한 인프라(길)	그 위에서 이용하는 서비스(택배)

1. 웹의 처리 과정: 데이터의 왕복

웹은 요청과 응답이라는 단순하지만 강력한 규칙으로 돌아간다.

Request (요청): 사용자가 브라우저 주소창에 주소를 입력하면, 브라우저가 서버에게 "이 주소의 데이터를 보내라" 명령
Response (응답): 서버는 요청받은 데이터를 찾아서, 브라우저가 읽을 수 있는 HTML 문서 형태로 다시 보내줌.
Rendering (해석 및 출력): 브라우저는 받은 HTML 코드를 해석해서 우리가 눈으로 볼 수 있는 화면(웹사이트)으로 그려냄.

2. 웹의 핵심 특징

웹은 단순히 글을 읽는 곳을 넘어, 복합적인 데이터 교환 환경을 제공한다.

HTTP 기반: 데이터를 주고받을 때 서로 약속된 통신 규격인 HTTP(HyperText Transfer Protocol)를 사용한다.
멀티미디어 통합: 텍스트뿐만 아니라 그래픽, 오디오, 비디오 등 다양한 매체를 하나의 문서 안에서 통합하여 제공한다.
다양한 환경 적응: 사용자의 기기(스마트폰, 태블릿, PC) 환경에 맞춰 화면이 변하는 반응형(Responsive) 설계가 기본이다.

3. 웹의 3요소: HTML이 하는 일

요소	역할	비유
HTML	구조(Structure)	건물의 철근과 뼈대
CSS	디자인(Style)	벽지, 인테리어, 페인트
JS	기능(Behavior)	전기 배선, 자동문, 엘리베이터

HTML은 웹의 뼈대

브라우저에게 "이것은 제목(Heading)이다", "이것은 본문(Paragraph)이다", "여기에 이미지를 넣어라"라고 알려주는 지도와 같다.

하이퍼링크 관련 태그 (a)

<a> 태그는 클릭하면 연결된 곳으로 이동시키는, 웹의 가장 핵심적인 기능

href	이동할 링크 경로	href="<https://naver.com>"
target	어느 탭에서 열지 지정	_self(기본) / _blank(새 탭)

<a href="./01_글자 관련태그. html"> 글자 관련 태그로 이동 </a>

<a href="https://www.naver.com" target="_blank">네이버 (새 탭)</a>


<a href="https://www.naver.com">
<img src="./images/sample.jpg" alt="네이버로 이동">
</a>

target 속성

_self : 현재 탭에서 이동 (기본값)

_blank : 새 탭에서 열기 (외부 사이트로 보낼 때 자주 사용)

하이퍼링크: 페이지 내 이동 (id 활용)

웹 페이지가 길어질 때, 특정 위치로 즉시 이동하는 기능. 핵심은 '식별자(ID)'를 이용한 표식이다.

원리:
1. 목적지에 id="이름" 속성을 붙여 고유한 주소를 만든다.
2. 이동 버튼에 href="#이름"을 설정하여 그 주소를 가리킨다.
중요 규칙: id는 한 페이지 내에서 유일(Unique) 해야 합니다. 주민등록번호처럼 한 명에게만 부여되는 식별자

<h3 id="main">맨 위 영역</h3>

<a href="#main">맨 위로 이동</a>

긴 문서에서 "목차 → 본문", "맨 아래 → 맨 위로 가기" 같은 이동에 활용한다.

href="#아이디"처럼 앞에 #을 붙이는 것이 중요

2. 입력 양식: input / label / button

사용자와 시스템이 대화하는 통로

① 핵심 요소 정리

태그	역할
<input>	데이터를 입력받는 실질적인 칸 (텍스트, 비밀번호, 버튼 등)
<label>	입력칸에 이름을 붙이는 설명문 (UX 편의성 향상)
<button>	사용자가 의도적인 동작을 수행할 때 누르는 제어 장치

아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>


<label>
<input type="radio" name="gender" checked> 남
</label>
<label>
<input type="radio" name="gender"> 여
</label>

<input type="button" value="회원가입">
<button>취소</button>

② label 사용의 이유

<label>로 <input>을 감싸면,

사용자가 입력칸의 작은 사각형을 정확히 클릭하지 않아도 글자(라벨)만 클릭해도 입력칸이 활성화됨.

모바일 환경에서 매우 중요한 사용자 경험(UX) 요소

label로 설명을 연결하면 글자를 클릭해도 해당 입력칸이 선택되어 사용성·접근성이 좋아진다.

③ input vs button

<input type="button">: 과거부터 사용된 방식. value 속성으로 버튼의 텍스트를 정함.
<button>: 최신 방식이며, 태그 사이에 텍스트나 아이콘을 자유롭게 넣을 수 있어 디자인적으로 훨씬 유연한다.

사양(斜陽) 산업인 '책', 출판사들은 왜 계속 찍어낼까?

리제 — Thu, 18 Jun 2026 15:03:23 +0900

책이라는 것은 가장 오래된 인류의 컨텐츠라는 것이다.

오래된 역사로 보장되어있는 안정성과 지속성이 계속 다른 컨텐츠에 등장으로 타격을 받기 하지만

완전히 사라지지는 않을 것이다.

책과 완벽히 같은 내용을 담은 다른 콘텐츠를 소비했을 때, 특히 무형 데이터로 접했다면

인간이 가진 진화적·감각적 본능이 형태가 없는 디지털 기술을 따라가지 못해 발생하는 인지적 갭(Gap)이 생긴다.

이를 뇌과학, 심리학에서는 감각의 부재라고 하는데

인간은 수백만 년 동안 손으로 만지고, 무게를 느끼고, 눈으로 위치를 확인하며 '소유'를 인지해 왔기에 , 종이의 질감, 책장을 넘기는 소리, 특유의 나무 냄새(후각), 묵직한 무게감 등 오감을 자극한다. 뇌는 이 감각 자극을 통해 "이 물건은 내 것"이라는 실질적인 소유감을 느낀다. 다만, 영상매체를 비롯한 e-book은 매끈한 스크린을 스와이프 하는 하나로 모든 감각이 통일되어 느끼게 된다.

전자기기에 수백 권의 책이 들어가 있어도 무게는 늘어나지 않고, 냄새도 없으며, 물리적 실체가 없다. 뇌 입장에서는 픽셀의 변화일 뿐이라 '소유했다'는 실감이 나지 않는 괴리가 생기게 되는 것이다.

또한 이런 무형 콘텐츠는 공간적 박탈이 일어난다.

앱을 켜고 폴더를 클릭해 들어가야만 비로소 화면이 보인다. 화면을 끄면 내 스마트폰이나 리더기 속 데이터는 완전히 은폐되는 것이다.. 내 공간을 채우는 인테리어적 효과나 정체성 전시가 불가능하기 때문에 소장 욕구가 충족되지 않는다.

이는 소유권이라는 만족도를 크게 떨어트리며 '진짜 내 것이 아니다'라는 불안을 자극한다.

그리고 이런 소유권에 대한 불안감도 타당성이 있다. 우리는 E-book을 '구매'했다고 생각하지만, 사실은 '플랫폼이 제공하는 열람 권한(라이선스)을 대여'한 것에 가깝다. 만약 해당 서점이 망하거나 계약이 종료되면 내가 돈을 주고 산 책이 서재에서 사라질 수 있는 연결성 데이터다. 타인에게 중고로 팔 수도, 마음대로 선물할 수도 없으니 '생색'도 불가능하다.

인간이 아무리 편리함을 추구하는 디지털 시대에 살고 있어도, 수만 년간 물리적 물성을 만지며 살아온 DNA가 남아있기 때문에 이 두 영역 사이의 괴리는 좁혀지기 어렵다. 석양 사업이라 불리는 종이책이 인쇄를 멈추지 않는 가장 강력한 이유가 바로 이 괴리 속에 있다.

[SQL] SQL재사용 프로시저 ( Stored Procedure )

리제 — Wed, 17 Jun 2026 17:31:38 +0900

데이터베이스에서 프로시저(Stored Procedure)란

, 여러 개의 SQL 문장을 하나의 함수처럼 묶어서 데이터베이스에 저장해두고 필요할 때마다 호출하여 실행하는 객체를 말한다.

매번 길고 복잡한 쿼리를 타이핑하는 대신, "이름표를 붙여둔 쿼리 묶음"이다.

1. 프로시저의 핵심 특징

모듈화: 복잡한 비즈니스 로직을 하나로 묶어 관리가 편함.
성능 향상: 처음 실행될 때 데이터베이스가 쿼리를 분석하고 최적화(컴파일)해두기 때문에, 반복 실행 시 일반 쿼리보다 빠름
보안 및 권한 관리: 사용자에게 테이블을 직접 보여주지 않고 프로시저만 실행할 수 있는 권한을 부여하여 데이터 접근을 제어할 수 있다.
네트워크 트래픽 감소: 클라이언트에서 여러 번 쿼리를 요청할 필요 없이, 프로시저 이름만 부르면 서버 내부에서 모든 처리가 끝나므로 데이터 전송량이 줄어든다.

재사용성	한 번 만들어두면 CALL로 반복 호출 가능
성능	SQL이 서버에 미리 컴파일되어 실행 속도 향상
유지보수	로직을 DB에 모아두어 관리 편리

DELIMITER // -- 쿼리 구분자를 임시로 변경합니다.
CREATE PROCEDURE InsertEmployee(
IN p_name VARCHAR(50),
IN p_dept_id VARCHAR(10)

)
BEGIN
INSERT INTO EMPLOYEE (EMP_NAME, DEPT_CODE)
VALUES (p_name, p_dept_id);
END //
DELIMITER ; -- 다시 구분자를 원래대로 돌립니다.

이렇게 저장해두면, 나중에 한줄로 실행가능

CALL InsertEmployee('홍길동', 'D1');

함수(Function)와 차이

함수(Function): 반드시 결과값(Return)을 반환해야 하며, SELECT 문 안에서 호출할 수 있다.
프로시저(Procedure): 결과값을 반환할 수도 있고 안 할 수도 있으며, SELECT 문 내부가 아닌 CALL 명령어를 통해 실행합니다. 더 복잡한 로직(데이터 수정, 삭제 등) 처리에 특화되어 있다.\\1. 구분자(DELIMITER) 변경의 이유

<구분자(DELIMITER) 변경의 이유>

프로시저의 핵심은 BEGIN과 END 사이에 여러 줄의 SQL 문을 담는 것

문제점: MySQL은 기본적으로 ;(세미콜론)을 만나면 "여기까지가 하나의 명령어다"라고 판단하고 즉시 실행한다,

프로시저 내부의 SQL 문장 뒤에도 당연히 ;이 들어가야 하는데, 이 때문에 프로시저가 완성되기도 전에 실행되는 오류가 발생.

해결책: DELIMITER $$를 통해 "이제부터는 $$를 만날 때까지는 실행하지 말고 하나의 덩어리로 봐라"고 데이터베이스에 명령을 내리는 것.

마무리: 프로시저 작성이 끝나면 DELIMITER ;로 돌아와서, 다시 평소처럼 ;을 문장의 끝으로 사용하도록 설정합니다.

① 생성 (CREATE PROCEDURE)

프로시저의 이름과 로직을 정의함
BEGIN과 END는 프로시저 실행 영역의 시작과 끝을 나타내는 블록.
이 안에 작성된 SQL 문들이 CALL을 통해 호출될 때마다 순차적으로 실행된다.

② 실행 (CALL)

저장된 프로시저를 호출.
CALL 명령어는 데이터베이스 엔진이 저장해둔 프로시저 로직을 불러와 실행하도록 트리거 역할을 함.

③ 삭제 (DROP PROCEDURE)

저장된 프로시저를 삭제.
IF EXISTS를 사용하는 이유는 해당 프로시저가 이미 없는 상태에서 삭제 명령을 내릴 경우 발생하는 오류를 방지하기 위함이다.

단계	명령어	역할	핵심 포인트
1. 생성	CREATE PROCEDURE	데이터베이스에 로직 저장	DELIMITER로 구분자를 재정의해야 함
2. 실행	CALL	저장된 로직 호출 및 수행	언제든 필요할 때 호출 가능
3. 삭제	DROP PROCEDURE	데이터베이스에서 로직 제거	IF EXISTS로 안전하게 삭제 권장

-- 기본 프로시저

-- 1. 시작전 구분자 변경 ; -> //
delimiter //

-- 2. 프로시저 생성
create procedure pro_all_emp()
begin
-- 내부에서 자유롭게 sql문을 사용
    select emp_id, emp_name, dept_code, salary
    from employee;
end //

-- 3. 생성 후 구분자 변경 // -> ;
delimiter ;

-- 저장된 프로시저 호출 방법
-- call 프로시저명()
call pro_all_emp();

drop procedure if exists pro_all_emp;

/*
매개변수가 있는 프로시저
    외부에서 값을 전달받아 쿼리에 사용하는 방법
*/

delimiter //

create procedure pro_sal_raise(
in p_dept_code varchar(3),
    in p_raise_rate decimal(3,2)
)
begin
update employee
      set salary = salary * (1 + p_raise_rate)
where dept_code = p_dept_code;

    select emp_name, dept_code, salary
    from employee
    where dept_code = p_dept_code;
end//

delimiter ;

select emp_name, dept_code, salary
    from employee;

-- D5부서의 사원들의 급여를 10%인상
call pro_sal_raise('D5', 0.1);

/*
반환값이 있는 프로시저
*/

delimiter //

create procedure pro_emp_count(
in p_dept_code varchar(3),
    out p_emp_count int
)
begin
select count(*)
    into p_emp_count
    from employee
    where dept_code = p_dept_code;
end//

delimiter ;

-- 반환값을 받아줄 변수는 @+변수명으로 넘겨준다
call pro_emp_count('D5', @res_count);

select @res_count as 'dept_emp_count';

/*
제어문(if ~ then ~ else) 활용
*/

-- 사원의 사번을 전달받아
-- 보너스를 지급받는 사원인지 아닌지 확인후
-- 보너스를 받는 사람이면 ~~~사원의 보너스율은 ~입니다.
-- 보너스를 받지 않는 사람이면 ~~사원은 보너스 지급대상이 아닙니다.
delimiter //

create procedure pro_check_bouns(
in p_emp_id varchar(3)
)
begin
-- 프로시저 내부에서 사용할 지역변수는 declare로 선언가능
declare v_bonus decimal(3,2);
    declare v_emp_name varchar(20);

select emp_name, bonus
    into v_emp_name, v_bonus
    from employee
    where emp_id = p_emp_id;

    if v_bonus is null
then select concat(v_emp_name, '사원은 보너스 지급대상이 아닙니다.') as result;
    else
select concat(v_emp_name, '사원의 보너스율은 ', v_bonus, '입니다') as result;
end if;
    /*
if 조건
then 조건만족시 실행할 코드
else
불만족시 실행할 코드
end if;
    */
end//

delimiter ;

call pro_check_bouns('200');
call pro_check_bouns('201');
call pro_check_bouns('209');

/*
프로시저 반복문(while)
*/

create table if not exists test_loop_tb(
id int auto_increment primary key,
    memo varchar(50)
);

-- 내가원하는 숫자를 입력하면 그 숫자만큼 더미데이터를 넣어주는 프로시저
delimiter //

create procedure pro_insert_dummy(
in p_count int
)
begin
-- 반복에 사용할 변수 생성
    declare v_count int default 1;

    -- 반복문을 통해서 p_count만큰 더미데이터를 추가
    while v_count <= p_count do

-- 반복해서 실행할 코드
insert into test_loop_tb(memo)
        values(concat('더미데이터 : ', v_count));

        -- 반복종료를 위한 증감식
        set v_count = v_count + 1;
    end while; -- 반복문 종료

    /*
while 조건 do
반복할 코드
end while;
    */

    select concat(p_count, '개의 더미데이터 추가 완료') as msg;
end//

delimiter ;

call pro_insert_dummy(100);
select * from test_loop_tb;

/*
프로시저를 예외처리, 트랜잭션과 함께 사용하는 경우가 많음
    프로시저 도중 에러가 발생하면 전부 롤백하거나 커밋.

    예외처리
declare 처리방식 handler for 예외조건
    begin
-- 예외발생시 실행할 대체쿼리
    end;

    처리방식 : exit(종료), continue(에러가 발생한 다음줄부터 다시 시작)
    예외조건 : sqlexception(sql오류), sqlwarning(오류는아닌 경고수준), not found(결과값없음)
*/

delimiter //

create procedure pro_safe_transfer()
begin
-- 만약 db에러(sqlexception)가 발생하면 특정 코드를 실행하고 종료.(exit)
    declare exit handler for sqlexception
    begin
rollback;
        select '오류가 발생해서 모두 rollback함' as msg;
end;

    -- 트랜잭션 시작
    start transaction;

    delete from employee where emp_id = '200';
    insert into department values('D999', '에러관리부', 'L1'); -- 에러발생

    commit;
    select '모든 작업 완료 후 commit' as msg;
end//

drop

delimiter ;

call pro_safe_transfer();

select * from employee where emp_id = '200';

[SQL] 가상테이블 VIEW

리제 — Tue, 16 Jun 2026 16:41:29 +0900

VIEW는 복잡한 SELECT문을 하나의 이름으로 저장해두고, 마치 테이블처럼 조회할 수 있는 가상 테이블.

실제 데이터를 저장하지 않는다. 뷰를 조회하면 내부에 저장된 SELECT가 실행

복잡한 쿼리를 반복 작성할 필요 없이, 뷰 이름 하나로 간편하게 재사용

재사용성	복잡한 JOIN 쿼리를 반복 작성하지 않음	3개 테이블 JOIN을 뷰로 저장
보안	민감한 컬럼을 숨기고 필요한 것만 노출	주민번호, 급여 제외 후 뷰 제공
추상화	사용자에게 간결한 데이터 구조 제공	개발팀에 필요한 정보만 뷰로 정리
유지보수	쿼리 수정 시 뷰만 변경하면 전체 반영	기준이 바뀌면 뷰 정의만 수정

VIEW는 자주 쓰는 검색 조건을 즐겨찾기 해두는 것과 비슷
매번 복잡한 쿼리를 처음부터 작성하는 대신, 한 번 정의해두고 이름만 호출하면 됨.

복잡한 JOIN 쿼리를 VIEW로 정의

-- 매번 이렇게 긴 쿼리를 작성해야하는 수고를 계속하는건 비효율적이다.
SELECT e.emp_id, e.emp_name, d.dept_title, e.salary, n.national_name
FROM employee e
JOIN department d ON e.dept_code = d.dept_id
JOIN location l ON d.location_id = l.local_code
JOIN national n ON l.national_code = n.national_code
WHERE n.national_name = '한국';

수정 및 삭제

VIEW 수정 — CREATE OR REPLACE VIEW

기존 뷰를 수정할 때 CREATE OR REPLACE VIEW를 사용. 뷰가 없으면 새로 생성되고, 있으면 덮어씀

VIEW 삭제 : DROP VIEW

VIEW 목록 확인

뷰 컬럼에 별칭이 필수인 경우

VIEW의 SELECT에 산술식, 함수식, 집계 함수 등이 포함되면 컬럼 이름이 자동 생성되지 않으므로 반드시 별칭(alias)을 지정

별칭 지정하는 법은 2가지

방법 1. SELECT 절에서 AS로 별칭 지정

방법 2. 뷰 이름 뒤에 컬럼명 나열

구조 이해: 인라인 뷰는 SELECT 결과물을 하나의 임시 테이블(V)로 취급하는 것

따라서 SELECT * FROM (인라인 뷰 쿼리) V WHERE 조건 형식을 기억하기 편하다.

1. 각 키워드의 역할 구분

키워드	주요 사용 위치	역할
IN	WHERE	특정 값들의 목록 중 하나와 일치하는지 확인
AS	SELECT, FROM	컬럼이나 테이블에 별칭(Alias)을 부여
ON	JOIN	두 테이블을 연결할 조건(연결고리)을 지정
INTO	INSERT	데이터를 넣을 대상 테이블을 지정

2. 왜 WHERE 뒤에 나머지는 올 수 없나요?

AS (별칭): SELECT 컬럼명 AS 별칭 또는 FROM 테이블명 AS 별칭 처럼 이름을 지어주는 역할을 합니다. WHERE는 데이터를 거르는 역할이지 이름을 짓는 곳이 아닙니다.
ON (연결 조건): JOIN 문법에서 "어떤 기준으로 테이블을 붙일까?"를 정하는 전용 키워드입니다. WHERE는 이미 붙여진 테이블에서 행을 필터링하는 곳이므로 용도가 다릅니다.
INTO (대상 지정): 데이터를 새로 넣을 때 사용하는 INSERT INTO 구문의 일부입니다. 데이터를 조회하거나 필터링하는 WHERE와는 함께 쓰이지 않습니다.

3. 잘못된 사용 예시 vs 올바른 예시

❌ 잘못된 예시:
- WHERE emp_id INTO 300; (X) -> INSERT 구문에서 쓰는 단어입니다.
- WHERE emp_id ON 300; (X) -> JOIN에서 쓰는 단어입니다.
- WHERE emp_name AS '김철수'; (X) -> SELECT에서 쓰는 단어입니다.
✅ 올바른 예시 (WHERE 절):
- WHERE emp_id IN (100, 200, 300); (O)
- WHERE emp_name = '김철수'; (O)

요약

WHERE는 "어떤 데이터를 가져올 것인가?"를 결정하는 필터입니다. AS, ON, INTO는 각각 이름 지정, 테이블 연결, 데이터 삽입이라는 다른 목적을 가진 명령어들이기 때문에 WHERE 절 안에 들어갈 수 없습니다.

이제 이 키워드들이 서로 다른 구문에서 사용된다는 점이 이해되시나요? 각 명령어의 '소속'을 기억하시면 쿼리 작성 시 실수를 크게 줄일 수 있습니다.

[SQL] 데이터제어와 트랜잭션 DCL, TCL

리제 — Tue, 16 Jun 2026 15:46:29 +0900

DCL (Data Control Language)

사용자의 데이터베이스 접근 권한을 부여(GRANT)하거나 회수(REVOKE) 하는 명령어

누가 (DB 사용자가) 어떤 객체에 (테이블, 뷰 등) 무엇을 할 수 있는지 제어
대표 명령어: GRANT, REVOKE

권한의 종류

글로벌 권한	서버 전체에 대한 관리 권한	사용자 생성, DB 생성, 복제 등
데이터베이스 권한	특정 DB에 대한 권한	특정 DB의 테이블 생성·삭제
테이블 권한	특정 테이블에 대한 조회/조작 권한	SELECT, INSERT, UPDATE, DELETE

TCL ( Transaction Control Language )

하나 이상의 DML 명령을 묶어서 일괄 처리할 수 있도록 제어하는 명령어

트랜잭션(Transaction)이란?

하나의 논리적인 작업 단위.
: "A가 B에게 10만 원 이체" = 출금(UPDATE) + 입금(UPDATE) → 둘 다 성공하거나, 둘 다 취소되어야 한다

TCL 주요 명령어명령어 설명

COMMIT	변경사항을 확정하고 DB에 영구 반영
ROLLBACK	변경사항을 취소하고 이전 상태로 복원
SAVEPOINT 이름	중간 저장 지점을 지정
ROLLBACK TO 이름	지정한 SAVEPOINT 지점까지만 되돌리기

MySQL의 AUTOCOMMIT ⭐ 핵심적 차이

MySQL은 기본적으로 AUTOCOMMIT이 ON이 디폴트값이다.

DML 하나를 실행하면 자동으로 COMMIT이 되기 때문에, 트랜잭션 실습을 하려면 반드시 AUTOCOMMIT을 끄거나

START TRANSACTION을 사용해야한다.

트랜잭션을 사용하는 2가지 방법

1. AUTOCOMMIT 을 끄는 법

2. START TRANSACTION 사용(권장)

DDL과 트랜잭션의 관계

⚠️ DDL 실행 시 자동으로 COMMIT이 발생. CREATE, ALTER, DROP, TRUNCATE 등 DDL문은 실행 즉시 암묵적 COMMIT(Implicit Commit) 이 발생. 따라서 진행 중인 트랜잭션이 있다면 DDL 실행 전에 COMMIT 또는 ROLLBACK을 먼저 해야 한다.

트랜잭션의 4대 속성 (ACID)

속성 이름 설명

A	원자성 (Atomicity)	트랜잭션 내 모든 작업은 전부 성공하거나 전부 취소
C	일관성 (Consistency)	트랜잭션 전후 데이터 무결성과 제약조건을 항상 만족
I	독립성 (Isolation)	동시 실행되는 트랜잭션은 서로 영향을 주지 않음
D	지속성 (Durability)	COMMIT된 결과는 시스템 장애가 발생해도 영구 보존

은행 이체 예시로 복습 A 계좌에서 B 계좌로 10만 원 이체 시:

원자성: A 출금 + B 입금이 둘 다 성공하거나, 둘 다 취소

일관성: 이체 전후 A+B 총액은 동일

독립성: 다른 사람의 이체가 이 거래를 방해하지 않음

지속성: 이체 완료 후 서버가 꺼져도 데이터는 보존

[SQL]데이터베이스 정의어 DDL /SELECT SUBQUERY

리제 — Mon, 15 Jun 2026 16:34:36 +0900

DDL - CREATE, ALTER, DROP

DDL이란?

DDL(Data Definition Language, 데이터 정의어)은 데이터베이스에서 테이블, 뷰, 인덱스 등 객체의 구조를 정의·변경·삭제할 때 사용하는 SQL 명령어입니다.

데이터(값)가 아닌 구조(틀) 를 정의하는 언어입니다.
실행 즉시 자동 커밋(Auto Commit) 이 발생하므로 ROLLBACK이 불가능합니다.

명령어 역할

CREATE	새 객체(테이블 등) 생성
ALTER	기존 객체 구조 변경
DROP	객체 완전 삭제
TRUNCATE	테이블 데이터 전체 삭제 (구조는 유지)

⚠️ DDL은 ROLLBACK이 안 된다 DML(INSERT, UPDATE, DELETE)은 ROLLBACK으로 되돌릴 수 있지만, DDL(CREATE, ALTER, DROP)은 실행 즉시 확정되므로 신중하게 실행해야 한다.

데이터베이스 제약조건(Constraint) 요약표

제약조건	의미	특징
NOT NULL	빈칸 금지	값이 반드시 입력되어야 함
UNIQUE	중복 금지	데이터 값이 유일해야 함 (중복 불가)
CHECK	조건 검사	입력되는 값의 범위를 제한함
PRIMARY KEY	행 고유 식별자	NOT NULL + UNIQUE (대표 번호)
FOREIGN KEY	다른 테이블 참조	다른 테이블과의 관계(연결고리)를 생성

< 데이터 타입 선택 기준 >

테이블을 만들 때 가장 중요한 것은 데이터를 어떤 '형태'로 저장할지 정하는 것

INT (Integer): 정수형 숫자 (예: 회원번호, 나이)
VARCHAR(n) (Variable Character): 길이가 변하는 문자열. n은 저장할 수 있는 최대 길이 (예: 아이디, 이름, 이메일)
DATETIME: 날짜와 시간을 동시에 저장할 때 사용. (예: 생성일, 수정일)

<제약조건 (Constraints) - "데이터 품질 관리" >

단순히 그릇을 만드는 것보다 중요한 것이 '잘못된 데이터가 들어오지 못하게 막는 것'

테이블 설계 시 팁

PK(기본키)는 항상 정할 것: 어떤 데이터를 유일하게 식별할지(보통 번호) 지정해야 나중에 데이터를 찾거나 수정하기 편하다
NOT NULL을 적극 활용할 것: 이름이나 아이디처럼 꼭 있어야 하는 컬럼에는 NOT NULL을 걸어서 데이터 누락을 방지.
최적의 사이즈 설정: VARCHAR(5000)처럼 무조건 크게 잡으면 메모리를 낭비합니다. 들어올 데이터의 예상 크기보다 약간 여유 있게 잡는 것이 좋다.

비교(CHAR vs VARCHAR):

CHAR(30): 5글자만 넣어도 무조건 30만큼의 공간을 다 차지 (고정 길이)
VARCHAR(30): 5글자만 넣으면 5글자만큼의 공간만 차지 (가변 길이)
VARCHAR는 글자 길이에 따라 저장 공간을 알아서 조절하는 똑똑한 자료형
VARCHAR(n)에서 n은 '최대 글자 수'를 의미

제약조건의 특징과 사용하는 이유

제약조건	비유	설명
NOT NULL	"빈칸 금지"	이름이나 이메일처럼 꼭 채워야 하는 칸에 빈 값을 넣지 못하게 한다.
UNIQUE	"중복 금지"	아이디나 전화번호처럼 고유해야 하는 정보가 똑같은 게 두 번 들어오지 못하게 한다.
CHECK	"조건 필터"	나이는 0보다 커야 한다거나, 성별은 '남' 아니면 '여'여야 한다는 식의 범위를 정한다.
PRIMARY KEY	"주민등록번호"	테이블 내에서 이 행을 유일하게 찾아낼 수 있는 '대표 번호'. (NULL 불가 + 중복 불가)
FOREIGN KEY	"연결고리"	테이블의 데이터가 다른 테이블에 실제로 존재하는지 확인하여 관계를 맺는다

데이터 무결성(Data Integrity) 보장: 잘못된 데이터(예: 나이가 -5살, 이름이 없음)가 들어오는 것을 원천 차단
데이터 신뢰도 상승: 데이터가 규칙에 맞게 저장되어 있으므로, 나중에 데이터를 조회하거나 분석할 때 정확한 결과가 나옴
실수 방지: 데이터베이스 시스템이 직접 규칙을 검사하므로, 사람이 입력할 때 발생하는 실수를 자동으로 잡아줌

서브쿼리 (Subquery)

서브쿼리(Subquery)란, SQL문 안에 포함된 또 다른 SELECT 문

메인 쿼리가 데이터를 구할 때, 서브쿼리는 필요한 값을 보조적으로 제공하는 역할
한 번에 해결 안 되는 문제 해결: "평균보다 많이 받는 사람"을 찾으려면, 일단 '평균'을 먼저 계산해야 합니다. 계산한 결과가 나와야 필터링을 할 수 있죠. 이 단계적 처리를 가능하게 해준다.
복잡한 코드의 단순화: 만약 서브쿼리가 없다면, 평균을 구하는 쿼리를 따로 실행해서 그 값을 메모장에 적어두고, 다시 그 값을 메인 쿼리에 직접 입력해야 한다. 서브쿼리는 이 과정을 한 줄로 처리해 준다.

메인 쿼리가 하기 복잡하거나 모르는 정보를 먼저 처리해서 답을 가져다주는 역할을 하는 것이 바로 서브쿼리

상세 설명

CREATE TABLE TB_DEPT: TB_DEPT라는 이름의 새로운 테이블을 만드는 명령어
DEPT_CD INT PRIMARY KEY:
- 정수형은 INT 사용
- 기본키(Primary Key)는 테이블의 각 행을 유일하게 식별하는 기준이 되므로 PRIMARY KEY 제약조건을 붙인다.
DEPT_NAME VARCHAR(30) NOT NULL:
- 가변 문자열은 VARCHAR를 사용합니다. 30은 최대 길이를 의미
- 값이 반드시 존재해야 하므로 NOT NULL 제약조건을 추가

참고: 데이터베이스 엔진(MySQL 등)에 따라

SELECT 컬럼명
FROM 테이블명
WHERE 컬럼명 비교연산자 (
    SELECT 컬럼명       -- 서브쿼리 (괄호 안)
    FROM 테이블명
    WHERE 조건
);

[강릉] 독서하기 좋은 곳 : 한길서가

리제 — Sat, 13 Jun 2026 10:02:28 +0900

네이버 지도엔 한길서가라고 쳐도 나오지 않는다.
왜일까.
대신 테라로사 로 검색하면 나온다.

[네이버지도]
테라로사 경포호수점
강원 강릉시 난설헌로 145
https://naver.me/5yhxVx9E

네이버지도

테라로사 경포호수점

map.naver.com

이곳은 강릉 테라로사 경포호수점인데 한길사와 콜라보를 한 곳이다. 2019년부터 운영하고 있으며,
3층 공간은 한길사 책으로만 꾸며져 있다.
커피를 마시며 책도 읽 을 수 있고,도서 구매도 가능.

왜 한길서가는 이렇게 멋지게 지어놓고
홈페이지나 인스타 관리는 안하는 걸까.
인스타는 계정자체가 없어서 갔다온 후기만 많은 곳

비가 왔다.
그럼 모든 색들이 더 선명해지지.
해가 들어 젖은 테이블을 말리기 시작했다

압도적인 스케일, 권위가 느껴지는 책장을 등지고 태연하게 커피를 만들고 있는 바리스타들.
메뉴가 생각보다 많았다. 선물용으로 포장되어있는 원두도 있었다.

층과 층을 오고갈때 인테리어들이 바뀐다.

여긴 서점

식물관련 책들이 많다.
이런곳에가면 굿즈같은 것들을 종종 파는데
여기는 그렇게 임펙트 있는 굿즈들이 없어서 사지는 않았다. 깔

아늑한 공간처럼 꾸며놓았지만, 확실히 상업적인 곳
그럼에도 나쁘지 않았고, 두어시간 책만 보며 재미있게 놀았다.
내가 읽은 책은

영원한 천국…
아쉽게도 정유정 작가 책중에서 제일 실망스러웠다.
제목이 내용에 비해 거창하고 극중 캐릭터가
매력을 다 못보여주고 끝난느낌.
그치만 ‘새’가 등장하는 작품은 그냥 다 좋다.
그래서 ? 이 책도 분위기 합격 ㅎㅎ

[SQL] 서브쿼리 ( Subquery )

리제 — Fri, 12 Jun 2026 18:04:41 +0900

서브쿼리Subquery

SQL문 안에 포함된 또 다른 SELECT 문

메인 쿼리가 데이터를 구할 때, 서브쿼리는 필요한 값을 보조적으로 제공하는 역할
WHERE, FROM, HAVING, SELECT 절 어디서든 사용가능
실행 흐름: 서브쿼리가 먼저 실행되고, 그 결과가 메인 쿼리에 전달

서브쿼리의 종류 (결과값의 형태에 따른 분류)

서브쿼리는 반환되는 결과값의 행(row) 수와 열(column) 수에 따라 크게 3가지로 나뉠 수 있다.

분류	결과 형태	특징 및 사용법
단일행 서브쿼리	1행 1열	결과값이 딱 하나 =, >, < 등 일반 비교 연산자 사용 가능
다중행 서브쿼리	N행 1열	결과값이 여러 행. IN, ANY, ALL, EXISTS 등 집합 연산자 사용 필수
다중열 서브쿼리	N행 N열	결과값이 여러 행과 여러 열. 주로 여러 컬럼을 동시에 비교할 때 사용

쿼리 실행 논리 순서 (단계별 풀이)

문제 : 직급이 '과장'인 사원들 중 어느 한 명의 급여보다라도 더 많이 받는 '대리' 사원 조회

1단계: 서브쿼리 실행 (비교 대상 확보)
(SELECT salary FROM employee JOIN job USING (job_code) WHERE job_name = '과장')
메인 쿼리를 실행하기 전에, 먼저 괄호 안의 서브쿼리가 실행

2단계: 메인 테이블 로드 및 조인 (FROM & JOIN)
FROM employee JOIN job USING (job_code)
employee 테이블과 job 테이블을 job_code를 기준으로 합침

3단계: 1차 필터링 (WHERE - 메인 조건)
WHERE job_name = '대리'
합쳐진 전체 사원 데이터 중에서 직급이 '대리'인 사람만 남기고 나머지는 모두 버린다

4단계: 2차 필터링 및 조건 비교 (AND salary > ANY)
AND salary > ANY (...)
3단계에서 남은 '대리'들의 급여를 하나씩 꺼내어, 1단계에서 확보한 '과장' 급여 리스트와 비교

작동 원리: ANY는 "과장들의 급여 중 어느 하나보다만 크면 참(True)"으로 판단
즉, 과장 급여들 중 가장 작은 값보다만 크면 조건이 성립

5단계: 최종 결과 출력 (SELECT)
SELECT emp_name, job_name, salary
위 조건들을 모두 통과한(과장들 중 최소 급여를 받는 사람보다 많은 급여를 받는 대리들) 행들만 골라내어
최종적으로 이름, 직급명, 급여를 화면에 보여준다.

답:
select emp_name, job_name, salary

from employee

join job using(job_code)

where job_name = '대리'

  and salary > any (select salary

from employee

join job using (job_code)

where job_name = '과장');

<실습>

Q. 노옹철 사원과 같은 부서에 속한 사원을 조회

-- 1. 메인 쿼리에서 가져올 대상 컬럼 선택

SELECT emp_name, dept_code

-- 2. 데이터가 담긴 원본 테이블 지정

FROM employee

-- 3. 조건 지정 (부서 코드가 '노옹철의 부서'와 같은 행만 필터링)

WHERE dept_code = ( -- 4. 서브쿼리가 먼저 실행되어 노옹철의 부서 코드를 찾아옴

SELECT dept_code

FROM employee

WHERE emp_name = '노옹철' );

Q. 직급이 '과장'인 사원들 중 어느 한 명의 급여보다라도 더 많이 받는 '대리' 사원의 사원명, 직급명, 급여를 조회하시오.

select emp_name, job_name, salary ---1. 최종적으로 출력할 정보들을 명시
from employee
join job using(job_code) ---2. 데이터 원본 테이블에 없음으로 job에서 코드를 쓸거다
where job_name = '대리' -- 조회하려는 메인 대상인 '대리' 사원들을 필터링
and salary > any (select salary ----- AND를 사용해 추가 필터 조건을 붙였고,

------ ANY 연산자를 사용하여 '과장들의 급여 중 어느 하나라도'라는 비교 범위를 명시
from employee
join job using (job_code)
where job_name = '과장'); ---- 서브쿼리 내부에서 비교의 기준이 되는 '과장'들의 급여 데이터만 뽑아내겠다

-- 회사 전체 사원의 평균 급여보다 같거나 많은 급여를 받는 사원들의 사번, 사원명, 급여를 조회하시오

select emp_no, enp_namem salary

from employee

join

[SQL] - join : 관계를 활용한 데이터 조회

리제 — Thu, 11 Jun 2026 17:39:50 +0900

테이블 간의 연관 관계는 데이터베이스 설계의 핵심

1:1 관계 (One-to-One)

한 레코드는 다른 테이블의 한 레코드와만 연결, 논리적으로 서로 하나의 값만 가질 수 있음
드물지만 보안, 성능 등을 위해 테이블을 나누는 경우 사용함

한쪽 테이블의 데이터 1건이 다른 쪽 테이블의 데이터 1건과 정확히 1대1로 대응되는 관계

EMPLOYEEEMP_DETAIL

EMP_ID (PK)	EMP_ID (PK, FK)
EMP_NAME	ADDRESS

원래는 한 테이블에 다 넣어도 되지만, '보안'이나 '성능' 때문에 억지로 분리하는 경우가 많다

사원 테이블(EMPLOYEE)에는 '이름'처럼 자주 조회하는 정보를 두고, 사원 상세 정보(EMP_DETAIL)에는 '주민번호', '급여'처럼 민감하거나 조회 빈도가 낮은 정보를 따로 보관하는 식

특징: EMP_DETAIL 테이블의 EMP_ID는 자기 자신의 PK(기본키)이면서 동시에 EMPLOYEE 테이블을 가리키는 FK(외래키) 역할을 한다.

1:N 관계 (One-to-Many) - 가장 일반적!

한 레코드는 다른 테이블의 여러 레코드와 연결
대부분의 JOIN은 이 구조를 기반으로 설계됨

N:M 관계 (Many-to-Many)

여러 레코드가 여러 레코드와 연결
일반적으로 서로 FK를 가질 수 없는 관계로 중간에 연결 테이블(Junction Table)을 둬서 구현함.

예시

[SQL] 관계형 데이터베이스 (RDB: SQL)/ 비관계형 데이터베이스 (NoSQL)

리제 — Thu, 11 Jun 2026 17:26:35 +0900

1. 관계형 데이터베이스 (RDB: SQL)

"규칙이 확실하고, 데이터의 무결성이 중요한 곳"

RDB는 데이터를 엑셀의 '표'처럼 저장합니다. 데이터의 구조(스키마)가 매우 엄격하며, 데이터 간의 연결고리를 중요하게 생각한다.

핵심 개념: ACID 원칙

데이터의 정확성을 보장하기 위한 4가지 약속

Atomicity(원자성): 한 번에 처리되거나, 아예 안 되거나 (중간은 없다).
Consistency(일관성): 규칙에 어긋난 데이터는 저장될 수 없다.
Isolation(고립성): 여러 작업이 동시에 일어나도 서로 방해하지 않는다.
Durability(지속성): 한 번 저장된 결과는 영원히 기록된다.

2. 비관계형 데이터베이스 (NoSQL)

"유연하고 빠르며, 대량의 데이터를 다루는 곳"

데이터의 형태가 수시로 바뀌거나, 너무 방대해서 테이블 구조로 묶기 힘들 때 사용

정해진 형식 없이 자유롭게 데이터를 담는다

대표적인 4가지 형태

문서형(Document): JSON 파일처럼 데이터를 통째로 저장 (예: MongoDB)
키-값형(Key-Value): 딕셔너리처럼 빠르게 데이터를 찾음 (예: Redis)
열지향(Column-Family): 방대한 데이터를 컬럼 단위로 나눠서 저장 (예: Cassandra)
그래프형(Graph): 데이터 간의 관계를 노드로 연결 (예: Neo4j)

3. 한눈에 보는 비교 (RDB vs NoSQL)

비교 항목	RDB (SQL)	NoSQL
핵심 가치	정확성	유연성 & 속도
저장 방식	표 (테이블)	문서, 키-값, 그래프 등
스키마	엄격함 (고정)	자유로움 (유연)
확장성	수직적 (성능 강화)	수평적 (서버 증설)
대표 분야	금융, 결제, 시스템 관리	SNS, 실시간 데이터, 로그

요약: 무엇을 선택해야 할까?

RDB가 정답인 경우: "데이터가 서로 복잡하게 연결되어 있고, 돈이나 개인정보처럼 틀리면 큰일 나는 작업" (예: 은행 시스템, 쇼핑몰 결제)

NoSQL이 정답인 경우: "데이터의 구조가 자주 바뀌고, 너무 빠르게 늘어나서 실시간으로 처리해야 하는 작업" (예: 좋아요 횟수, 로그 분석, 친구 추천 시스템)

결국 "데이터의 성격이 무엇인가?"가 기술을 선택하는 가장 중요한 기준이 된다.

데이터의 정확함이 최우선인지, 아니면 수만 명의 접속자를 감당할 유연함이 우선인지 고민해보는 것이 좋다.

[SQL] GROUP BY, HAVING

리제 — Thu, 11 Jun 2026 11:43:18 +0900

GROUP BY

GROUP BY는 특정 컬럼 값을 기준으로 행들을 그룹화하고

각 그룹에 대해 SUM, AVG, COUNT 같은 집계 함수를 적용할 수 있게 해주는 절은 데이터를 그룹 단위로 묶고 그 그룹에 대해 필터링을 할 때 사용하는 SQL의 핵심 구문이다.

간단히 비유하자면, GROUP BY는 흩어진 데이터를 분류하는 '상자'이고, HAVING은 그 상자들 중에서 특정 조건에 맞는 것만 골라내는 '검수 작업'

1. GROUP BY: 데이터를 그룹으로 묶기

GROUP BY는 테이블의 행들을 특정 컬럼을 기준으로 나누어, 각 그룹별로 계산(집계)할 수 있게 한다.

용도: 부서별 급여 합계, 직급별 사원 수, 성별 평균 점수 등 그룹 통계 산출.
주의사항: SELECT 절에 오는 컬럼은 반드시 GROUP BY에 포함되어 있거나, SUM(), COUNT() 같은 집계 함수에 감싸져 있어야 한다. ~~여기서 실수가 많이 일어나는 부분이다.~~

2. HAVING: 그룹화된 결과 필터링하기

HAVING은 GROUP BY로 묶인 결과에 조건을 걸어 데이터를 걸러낸다.

WHERE와 비슷해 보이지만, 적용 시점에서 차이가 난다.

WHERE: 그룹을 만들기 전에, 개별 행(row) 하나하나를 걸러냄.
HAVING: 그룹을 만든 후에, 집계된 결과(결과물)를 걸러냄.

SELECT dept_code, SUM(salary) AS "부서별 급여합"
FROM employee
GROUP BY dept_code -- 1. 부서별로 그룹을 묶음
HAVING SUM(salary) >= 10000000; -- 2. 합계가 1000만 원 이상인 그룹만 남김

쉽게 이해하기 사원 명단 전체에서 "부서별 평균 급여"를 구하고 싶다면?
→ 먼저 부서별로 줄을 세운 다음 (GROUP BY), 각 줄의 평균을 계산 (AVG)하는 것

기본 문법

SELECT 그룹기준컬럼, 집계함수
FROM 테이블명
GROUP BY 그룹기준컬럼;

WHERE: 그룹화하기 전, 불필요한 개별 데이터를 삭제
GROUP BY: 남은 데이터를 그룹으로 분류
HAVING: 그룹화된 결과 중 조건에 맞지 않는 그룹 삭제
ORDER BY: 정렬
SELECT: 그룹기준컬럼 : 어떤 테이블에서 가져올지 결정
FROM: 테이블 명

요약 비교

특징	WHERE	HAVING
적용 시점	그룹화(GROUP BY) 전	그룹화 후
대상	개별 행 (Row)	그룹화된 결과 (Group)
사용 여부	필수 아님	GROUP BY가 있을 때만 사용

[SQL] 함수(Function) 이해 및 활용

리제 — Wed, 10 Jun 2026 17:39:46 +0900

함수(Function)

함수(Function)는 입력값(인자)을 받아 계산 또는 가공하여 결과값을 반환하는 SQL 도구

SELECT문에서 데이터를 가공, 변환, 요약, 계산할 때 자주 사용됨
반복되는 처리 로직을 함수 하나로 간결하게 표현할 수 있다

전달된 컬럼값을 읽어서 함수(기능)를 실행한 결과를 반환
- 단일행함수 : N개의 값을 읽어서 N개의 결과값을 반환(행마다 실행 결과를 반환)
- 그룹함수 : N개의 값을 읽어서 1개의 결과값을 반환(그룹별로 함수 실행 결과를 반환)

단일행 함수 vs 그룹 함수 비교

구분	단일행 함수 (Scalar Function)	그룹 함수 (Aggregate Function)
처리 대상	데이터 행(Row) 하나하나	데이터의 집합(Group) 전체
결과 반환	입력한 행의 개수와 동일한 결과	집계된 그룹의 개수만큼 결과 반환
주요 사례	UPPER, SUBSTRING, IFNULL, DATEDIFF	SUM, AVG, COUNT, MAX, MIN
WHERE 절 사용	가능	불가능 (HAVING 사용 필요)

함수의 용도

문자열·숫자·날짜 데이터 가공 및 변환
NULL 값 처리
여러 행을 하나의 값으로 집계 (합계, 평균 등)

SUBSTRING(데이터, 시작위치, 추출할길이)

데이터: 대상이 되는 컬럼이나 문자열
시작위치: 몇 번째 글자부터 시작할 것인가
추출할길이: 총 몇 글자를 가져올 것인

SUBSTRING('900101-1234567', 1, 6) 라고 한다면 답은 900101

SQL 함수의 분류

함수 종류 설명 특징

단일행 함수	행 하나에 적용되어 결과 하나를 반환	SELECT, WHERE, ORDER BY 어디서든 사용 가능
그룹 함수	여러 행을 묶어 집계한 결과 하나를 반환	주로 GROUP BY와 함께 사용

SQL에서 IS NULL은 컬럼에 저장된 값이 정말로 아무것도 없는 상태(NULL)인지 확인하는 조건식

' = ' 대신 ' IS NULL ' 을 쓰는 이유

데이터베이스에서 NULL은 '값 없음'을 나타내기 때문에, 컴퓨터는 NULL이 정확히 어떤 값인지 알지 못한다.

따라서 "이 값이 NULL과 같은가?"를 물어볼 때,

일반적인 등호(=) 연산자를 쓰면 결과가 항상 False(혹은 알 수 없음)로 나온다.

이런 논리적 오류를 방지하기 위해 특별히 IS 연산자를 사용한다.

실무 활용 예시

직원 데이터 테이블(Employees)에서 전화번호가 등록되지 않은(NULL인) 직원을 찾고 싶다면 다음과 같이 작성.

요약 비교

표현식	결과	이유
WHERE col = NULL	사용 불가	NULL은 어떤 값과도 '='로 비교할 수 없음
WHERE col IS NULL	사용 가능	NULL 상태인 데이터를 정확히 식별

DATE_FORMAT 주요 형식 코드

형식 의미 예시

%Y	4자리 연도	2025
%y	2자리 연도	25
%m	2자리 월 (01~12)	06
%d	2자리 일 (01~31)	09
%H	24시간 형식 시	14
%i	분	30
%s	초	00
%W	요일 전체 이름	Monday

TRUNCATE 함수

숫자를 지정한 위치에서 가차 없이 잘라버리는(버림) 함수

핵심은 '어디를 기준으로 자를 것인가'를 결정하는 숫자(위치값)입니다.

기본 원칙은 0을 소수점 바로 뒤로 생각하시면 됩니다.

위치값(자릿수) 규칙

양수(1, 2, ...): 소수점 아래 자릿수를 보존합니다. (나머지는 다 버림)
0: 소수점 아래를 모두 버리고 정수만 남깁니다.
음수(-1, -2, ...): 소수점 왼쪽, 즉 정수 부분을 버립니다.

예시 분석 (123.456)

코드	위치	결과	설명
truncate(123.456, 0)	0	123	소수점 아래는 다 버리고 123만 남음
truncate(123.456, 1)	1	123.4	소수점 첫째 자리까지만 남기고 나머지는 버림
truncate(123.456, -1)	-1	120	일의 자리를 버리고 십의 자리까지 표시

그룹 함수 (집계 함수)

여러 행의 값을 하나로 요약(집계) 하여 단일 결과를 반환합니다. GROUP BY와 함께 쓰면 그룹별 집계가 가능합니다.

함수 목록

실행 순서를 알아야 하는 이유

WHERE에서 COUNT(*) 같은 집계 함수를 쓸 수 없는 이유 → WHERE는 GROUP BY 전에 실행되기 때문

HAVING에서 SELECT의 별칭을 쓸 수 없는 이유 → HAVING은 SELECT보다 먼저 실행되기 때문

오늘 선생님의 한마디

"완벽하게 만들 생각보다는 서비스를 실행 하는 것을 목적으로 하라. "

[SQL] select (조회) , WHERE(필터링)

리제 — Wed, 10 Jun 2026 17:20:47 +0900

SQL은엑셀을 다루는 것과 비슷하지만 좀 더 정교화되어있고,

선택적으로 원하는 것들을 조회하는 것에 특화되어있다.

'테이블'에서 데이터를 다룬다.

데이터 조회하기 (SELECT)

테이블은 행(Row)과 열(Column)로 구성

기능	SQL 예시	설명
전체 조회	SELECT * FROM job;	테이블의 모든 컬럼을 조회
부분 조회	SELECT emp_name, email FROM employee;	필요한 특정 컬럼만 골라서 조회
데이터 결합	SELECT CONCAT(name, '님') FROM employee;	여러 값을 하나로 합쳐서 조회
중복 제거	SELECT DISTINCT dept_code FROM employee;	중복된 값은 한 번씩만 출력

별칭(Alias) 활용 : AS를 사용
NULL 값 처리: 데이터가 비어있는 NULL은 연산 시 주의가 필요합니다. IFNULL(bonus, 0)을 사용해 NULL을 0으로 바꿔주면 계산 오류를 방지할 수 있다.
날짜 연산: DATEDIFF(now(), hire_date)를 사용하면 오늘을 기준으로 근무 기간 등을 계산할 수 있다.

WHERE (조건에 맞는 데이터만 가져오기)

조건 유형	SQL 예시	설명
비교 연산	WHERE salary >= 4000000;	400만원 이상인 사원만 조회
범위 연산	WHERE salary BETWEEN 350 AND 600;	350~600만원 사이인 사원
목록 연산	WHERE dept_code IN ('D6', 'D8');	특정 부서 코드에 포함된 사원
패턴 검색	WHERE emp_name LIKE '전%';	'전'씨 성을 가진 모든 사원

주의할 점

NULL 값 판별 : * 데이터베이스에서 NULL은 '값 없음'을 의미하므로 = NULL로 비교할 수 X.

반드시 IS NULL 또는 IS NOT NULL을 사용해야 한다.

IN

IN 연산자는 "여러 조건을 일일이 나열하지 않고, 리스트(목록) 안에 포함되어 있는지 확인"할 때 사용한다.

부서 코드가 'D6', 'D8', 'D5' 중 하나인 사원을 찾을 때, OR 연산자를 사용하면 다음과 같이 코드가 길어진다.

WHERE dept_code = 'd6' OR dept_code = 'd8' OR dept_code = 'd5';

IN 넣기(뽀로롱~)

↓

WHERE dept_code IN ('d6', 'd8', 'd5');

하지만 IN 연산자를 사용하면 괄호 () 안에 포함하고 싶은 값들을 쉼표로 구분하여 한 번에 나열이 가능

주의할 점

데이터 타입 일치: 괄호 안에 넣는 값들은 컬럼의 데이터 타입과 일치해야 한다. (문자열 컬럼이면 작은따옴표 ' ' 필수, 숫자 컬럼이면 숫자 그대로)
부정 표현: 만약 특정 값들을 제외하고 싶다면 NOT IN ('d6', 'd8', 'd5')처럼 앞에 NOT을 붙인다.

SQL의 패턴 매칭 연산자: LIKE

LIKE 연산자는 데이터베이스 내의 문자열 데이터 중, 사용자가 지정한 특정 패턴과 일치하는 항목을 추출하고자 할 때 활용하는 도구이다. 이는 정확한 값의 일치 여부를 판단하는 동등 비교 연산자(=)와 달리, 데이터의 구성 형태를 추론하여 검색하는 방식.

1. 퍼센트 기호 (%)

퍼센트 기호는 '0글자 이상의 모든 문자'를 의미.

예시: LIKE '전%'
- '전'으로 시작하는 모든 문자열을 추출
예시: LIKE '%하'
- '하'로 끝나는 모든 문자열을 추출
예시: LIKE '%하%'
- 위치에 상관없이 '하'라는 문자가 포함된 모든 문자열을 추출

2. 언더바 기호 (_)

언더바 기호는 '정확히 1글자'의 임의 문자를 의미

예시: LIKE '전_'
- '전'으로 시작하며 전체 길이가 2글자인 문자열을 추출
예시: LIKE '_하_'
- 두 번째 글자가 '하'인 3글자 문자열을 추출

[SQL] 선언형 언어 / 함수( function)

리제 — Tue, 9 Jun 2026 18:43:59 +0900

SQL 핵심용어

https://www.notion.so/Python-Elasticsearch-35d435fcbd9d802290eedd6bd4ee3757?p=37a435fcbd9d807eade8f9c5a642714f&pm=s

MySQL 핵심 용어 | Notion

데이터 저장의 기본 구조

www.notion.so

선언형 언어

절차형 언어 (JAVA 등)는 데이터 처리를 위해 단계별 명령을 직접 설계해야하지만, SQL은 데이터베이스 시스템이 가장 효율적인 방법을 알아서 찾을 것이라 가정하고 '무엇을 얻고싶은지'만 정의한 상태

테이블

    - 데이터베이스에서 데이터를 저장하는 기본 개념
    - 행(Row)과 열(Column)로 구성된 데이터 집합
      row : 각각의 데이터
      column : 테이블에 저장되는 속성

=> 테이블은 여러 컬럼으로 구성되고, 각 컬럼은 테이블이 표현하는 데이터의 세부적인 속성을 나타냄.

    <select>
    select 컬럼명1, 컬럼명2...
    from 테이블명
    [where 조건]
    [order by 정렬기준]

SQL은 내부 엔젠이 어떤 인덱스를 탈지, 어떤 순서로 데이터를 읽을지를 스스로 결정.

사용자는 데이터의 상태와 조건만 선언하면 된다.

SQL 함수는 데이터를 내 입맛에 맞게 '가공'하는 도구.

은 데이터를 조회할 때 글자를 바꾸거나, 자르거나, 합치는 작업을 수행

1. 모양을 바꾸는 함수 (대소문자)

UPPER(str) / LOWER(str): 글자 전체를 대문자나 소문자로 바꾼다.

예: UPPER('hello') -> 'HELLO'
실무 사용: 사용자가 대소문자를 섞어서 검색해도 동일한 결과를 찾을 때 사용

2. 크기와 위치를 찾는 함수

LENGTH(str) / CHAR_LENGTH(str): 문자열의 길이를 숫자로 반환.
INSTR(str, substr): 특정 글자가 문자열의 몇 번째에 있는지 위치(숫자)를 알려준다.
- 예: INSTR('apple', 'p') -> 2 (첫 번째 'p'의 위치)

3. 글자를 자르고 합치는 함수

CONCAT(str1, str2): 두 글자를 이어 붙인다. (데이터베이스에 따라 || 기호를 쓰기도 함.)

SUBSTRING(str, pos, len)
: 원하는 위치부터 원하는 길이만큼만 잘라냄

예: SUBSTRING('20260611', 1, 4) -> '2026' (연도만 추출)

4. 정리하는 함수 (공백 및 치환)

TRIM(str) / LTRIM(str) / RTRIM(str): 글자 앞뒤의 쓸데없는 공백을 지워준다.
REPLACE(str, from, to): 문자열 안의 특정 글자를 다른 글자로 바꾼다.
- 예: REPLACE('010-1234-5678', '-', '') -> '01012345678' (하이픈 제거)

5. 자리를 맞추는 함수 (채움)

LPAD(str, len, pad) / RPAD(str, len, pad): 글자 길이가 일정하지 않을 때, 빈 공간을 특정 문자로 채워 길이를 맞춥니다.
- 예: LPAD('1', 3, '0') -> '001' (보고서 출력 시 자릿수 맞추기에 유용)

함수의 용도

문자열·숫자·날짜 데이터 가공 및 변환
NULL 값 처리
여러 행을 하나의 값으로 집계 (합계, 평균 등)

관계형 데이터베이스(RDB)

모든 데이터를 테이블(표) 형태로 저장하고,

테이블 간의 관계(Relation) 를 통해 데이터의 연결성과 정합성을 유지하는 데이터베이스

엑셀은 데이터를 그냥 나열하는 '파일'이지만, RDB는 데이터를 '구조적으로 관리'.

이 구조를 만드는 핵심이 바로 기본키(Primary Key)와 외래키(Foreign Key)라는 개념이다.

기본키(Primary Key, PK): 테이블에서 "너 누구야?"라고 물었을 때, 딱 한 사람만 지목할 수 있는 고유한 값. (예: 회원번호)
외래키(Foreign Key, FK): 다른 테이블에 있는 사람을 가리키는 '링크'

[이해를 돕는 예시]

여기 '회원' 테이블과 '주문' 테이블이 있다

회원 테이블 (PK: 회원번호)
- 1번, 홍길동, 서울
- 2번, 김철수, 부산
주문 테이블 (PK: 주문번호, FK: 회원번호)
- 101번, 사과, 1번 회원
- 102번, 배, 1번 회원
- 103번, 포도, 2번 회원

만약 홍길동(1번)이 이사를 가서 주소를 수정해야 한다면? RDB는 회원 테이블의 주소만 딱 한 번 수정하면 된다.

주문 테이블은 그냥 '1번 회원'을 계속 가리키고 있기 때문. 엑셀처럼 모든 주문 내역을 뒤져서 홍길동의 주소를 일일이 바꿀 필요가 X. 이것이 바로 데이터가 꼬이지 않게 유지하는 '데이터 적합성'이라고 한다.

핵심 구성 요소

테이블 (Table)	데이터를 저장하는 기본 단위 (= 엑셀 시트)	users, orders, products
행 (Row)	하나의 레코드, 실제 데이터 1건	홍길동, hong@example.com, 25
열 (Column)	데이터의 속성(항목)	name, email, age
기본키 (PK)	각 행을 고유하게 식별하는 값	user_id = 1, 2, 3...
외래키 (FK)	다른 테이블의 기본키를 참조하는 값	orders.user_id → users.id

SQL의 주요 특징

선언형 언어	무엇을 할지만 작성하면, 어떻게 처리할지는 DB가 결정	SELECT name FROM users
표준 언어	ANSI/ISO 표준 → MySQL, Oracle, PostgreSQL 모두 사용 가능	대부분의 문법이 DB 간 호환
DDL	데이터 구조(테이블) 정의	CREATE, ALTER, DROP
DML	데이터 조작 (조회·입력·수정·삭제)	SELECT, INSERT, UPDATE, DELETE
DCL	접근 권한 제어	GRANT, REVOKE
TCL	트랜잭션 제어	COMMIT, ROLLBACK

트랜잭션(Transaction)

데이터베이스의 상태를 변화시키기 위해 수행하는 작업의 단위.

단순히 하나의 쿼리문이 아니라, 여러 작업을 하나로 묶어 처리할 때 사용

원자성 (Atomicity): 트랜잭션 내의 모든 작업은 반드시 모두 성공하거나, 모두 실패해야 한다. 하나라도 실패하면 전체가 취소됩니다.
일관성 (Consistency): 트랜잭션이 완료되면 데이터베이스는 언제나 일관된 상태를 유지해야 한다.
격리성 (Isolation): 트랜잭션 수행 중에는 다른 트랜잭션의 작업이 끼어들지 못하도록 독립성을 보장해야한다.
지속성 (Durability): 성공적으로 완료된 트랜잭션의 결과는 영구적으로 데이터베이스에 반영되어야 한다.

쉽게 말해, 계좌 이체를 할 때 '내 계좌에서 돈이 빠지는 작업'과 '상대 계좌에 돈이 들어가는 작업'은 하나의 트랜잭션으로 묶여야 한다. 둘 중 하나만 성공하면 데이터에 오류가 생기기 때문.

<연습문제>

use tdb;

-- 1. 이름이 '연'으로 끝나는 사원들의 사원명, 입사일 조회
select emp_name, hire_date
from employee
where emp_name like '%연';

-- 2. 전화번호 처음 3자리가 010이 아닌 사원들의 사원명, 전화번호 조회
select emp_name, phone
from employee
where phone not like '010%';

-- 3. 이름에 '하'가 포함되어있고 급여가 240만원 이상인 사원들의 사원명, 급여 조회
select emp_name, salary
from employee
where emp_name like '%하%' and salary >= 2400000;

-- 4. 부서(DEPARTMENT) 테이블에서 해외영업부서인 부서들의 부서코드, 부서명 조회
select dept_id, dept_title
from department
where dept_title like '해외영업%';

-- 5. 사수(MANAGER)가 없고 부서배치도 받지 않은 사원들의 사원명, 사번, 부서코드 조회
select emp_name, emp_id, dept_code
from employee
where manager_id is null and dept_code is null;

-- 6. 연봉(급여 * 12)이 3천만원 이상이고 보너스를 받지 않는 사원들의 사번, 사원명, 급여, 보너스 조회
select emp_id, emp_name, salary, bonus
from employee
where (salary * 12) >= 30000000 and bonus is null;

-- 7. 입사일이 '1995-01-01' 이상이고 부서배치를 받지 않은 사원들의 사번, 사원명, 입사일, 부서코드 조회
select emp_id, emp_name, hire_date, dept_code
from employee
where hire_date >= '1995-01-01' and dept_code is null;

-- 8. 급여가 200만원 이상 500만원 이하이면서 입사일이 '2001-01-01' 이상이고 보너스를 받지 않는 사원 조회
select *
from employee
where salary between 2000000 and 5000000
  and hire_date >= '2001-01-01'
  and bonus is null;

-- 9. 보너스를 포함한 연봉((SALARY + (SALARY * BONUS)) * 12)이 NULL이 아니고 이름에 '하'가 포함된 사원 조회
select * from employee
where ((SALARY + (SALARY * BONUS)) * 12) is not null
and emp_name like '%하%';

-- 10. 사원명(이름)이 '이'로 시작하거나 '연'으로 끝나는 사원들의 사번, 사원명 조회
select emp_id, emp_name
from employee
where emp_name like '이%' or emp_name like '%연';

-- 11. 부서코드가 'D1', 'D2', 'D3' 중 하나이면서, 사수(MANAGER)가 배정되어 있는 사원들의 사원명, 직급코드, 부서코드, 관리자사번 조회
select emp_name, job_code, dept_code, manager_id
from employee
where dept_code in ('d1', 'd2', 'd3')
  and manager_id is not null;

-- 12. 급여가 250만 원 이상 350만 원 이하인 사원 중에서, 직급코드(JOB_CODE)가 'J3'가 아닌 사원들의 사원명, 급여, 직급코드 조회
select emp_name, salary, job_code
from employee
where salary between 2500000 and 3500000
  and job_code != 'j3';

-- 13. 2000년 1월 1일 이전에 입사한 사원들의 사원명, 입사일, 실수령 월급(기본급 + 보너스 금액) 조회
-- (단, 보너스가 없는 사원은 0으로 계산할 것)
select emp_name, hire_date, salary + (salary * ifnull(bonus, 0)) as 실수령금
from employee
where hire_date < '2000-01-01';

-- 14. 전화번호 중간에 '666'이 포함되고, 부서코드가 'D9' 또는 'D6'인 사원들의 사원명, 전화번호, 부서코드 조회
select emp_name, phone, dept_code
from employee
where phone like '%666%'
  and dept_code in ('d9', 'd6');

-- 15. 이메일(EMAIL) 주소에 'kh.co.kr'이 포함된 사원들 중, 급여가 300만원 이상인 사원들의 사원명, 이메일, 급여를 조회
select emp_name, email, salary
from employee
where email like '%kh.co.kr%'
  and salary >= 3000000;

[책 추천] 유발 하라리 - 넥서스

리제 — Mon, 8 Jun 2026 18:54:29 +0900

오랜만에 읽는 유발하라리의 책 #넥서스 #Nexus
표지의 비둘기가 무슨 뜻인지 궁금하지 않은가?

비둘기는 인류 역사에서 아주 오랫동안 가장 빠르고
효율적인 정보 전달 매개체 역할을 했다.

인류가 생존과 권력을 위해 정보를
연결하기 시작했던 가장 원초적인 ’넥서스‘인 셈이다.

저자는 비둘기로 대변되는 과거의 순수한 정보 네트워크가, 어떻게 현대에 이르러 인류를 위협하는 거대하고 통제 불가능한 AI 넥서스로 진화했는지를 극적으로 대비시키기 위해 이 상징을 사용한 것이다.

비둘기가 현대의 인터넷을 거쳐, 미래의 AI(알고리즘)라는 새로운 넥서스로 이어지는 과정과 그 위험성을 경고하는 메세지를 담고 있는 이책은,

자기 교정 능력의 상실이 얼마나 위험한지 경고한다.
과거 비둘기가 나르는 편지는 인간이 쓰고 인간이 검검할 수 있었다.
정보에 오류가 있으면 인간이 수정하는 스스로 교정 하는 시스템이 있었다,

하지만 지금의 AI와 알고리즘은 인간의 통제를 벗어나 스스로 정보를 생산하고 연결망을 확장하고 있다.

우리는 무엇을 위해
무엇을 내어주고 있는가

[잉크] 페리스 휠 프레스 - 스윗 허니듀

리제 — Mon, 8 Jun 2026 18:51:07 +0900

캐나다브랜드 페리스 휠 프레스
향수병같은 이쁜 디자인과 과감한 색으로 유명한 브랜드다.

딥펜과 같이 샀는데
딥펜은 … 불만족이다.. 유격이 문제가 있는지
무척 흔들리고 잉크를 생각보다 많이 품지못해서
유리펜이 차라리 낫다.

마개있는 잉크는 첨본다.

발색샷!

메론 속살 색! 매우 이쁘다!
어린 녹차잎같기도

종이 발색을 해봤다.
왕의길이나 녹차랑 비교했는 때 확실히 명도가 높고 맑다.

Java 미니 프로젝트 제작 과제

리제 — Sat, 6 Jun 2026 18:37:12 +0900

주제 : 공간 밀집도를 고려한 퍼스널 향수 큐레이션 서비스

서울과 같은 대도시에서 우리는 필연적으로 타인과 밀접한 거리에서 살아갑니다.

한국에서 유독 '비누 향' 향수가 큰 사랑을 받는 이유는 바로 이 밀집된 환경 때문이라고 생각합니다. 비누 향은 타인에게 '위생적이고 관리된 상태'라는 신뢰를 주며, 가장 안전하고 배려 깊은 에티켓으로 기능하기 때문입니다. 저는 여기서 한 걸음 더 나아가, 위생적인 에티켓을 넘어 나만의 향기로운 취향을 타인에게도 안전하게 전달할 방법을 고민해 보았습니다.

기존의 향수 추천 서비스들은 향조, 분위기, 혹은 이미지라는 감성적 요소에만 집중해 왔습니다.

하지만 저는 여기에 '타인에 대한 배려'라는 새로운 기준을 더했습니다. 우리가 향수 때문에 불쾌감을 느꼈던 순간을 떠올려 보면,

대개 '원치 않는 향기를 강제적으로 맡아야 하는 상황', 특히 출퇴근길과 같은 밀집된 공간에서 발생하는 불편함이었습니다.

향수는 발향력과 지속성이라는 두 가지 고유한 속성을 갖습니다.보통 발향력이 좋은 향이 지속성도 좋지만 항상 그렇지는 않습니다. 어떤 향수는 지속력은 좋지만 내 몸 주변에 응축되어 머무르기도 하거든요. 저는 이 발향력과 지속성의 차이를 생활공간의 밀집도와 연결하여 데이터를 설계했습니다.

사용자가 머무는 환경에 따라 가장 적합한 향을 선택할 수 있도록 리스트를 구조화하였고, 이를 통해 취향과 배려가 공존하는 향기 큐레이션을 구현하고자 했습니다.
사용자 경험(UX)을 중요하게 생각하기 때문에 단순 과제로 그치지 않고, 실전에서 쓸 수 있도록 계속 디벨롭을 할 예정입니다.

~~---여기까지는 대본이라 존댓말.~~

밀집도 기준은

출퇴근 지옥철을 혼잡

착석 가능한 버스 안을 여유

도보를 쾌적으로 잡았다.

혼잡한 지하철에는 퍼스널스페이스라는 말이 무색할 정도로 타인과 밀착될 수밖에 없는 공간이기 때문에 지속력과 발향력이 낮은 이른바 현관컷 향수들로 지정했고,

착석이 가능한 정도의 여유있는 버스 안에서는 어느 정도 공간이 확보되기에 지속력은 좋으나 발향력이 아쉬운 향수들을 선택했다.

밀집도가 쾌적한 야외공간에서 출퇴근을 하는 사람들을 위해 지속력과 발향력 모두 우수한 문신템 향수들을 설정했다.

바닐라, 머스크,레더같이 호불호가 강한 향수는 일부러 배제했다.

THIS IS A LIST ( 최종 아님 )

계절	이동수단	테토	에겐
봄	지하철	메종 마르지엘라 레플리카 프롬 더 가든	킬리안 뱀부하모니
	버스	크리드 어벤투스	니샤네 우롱차 엑스트레
	도보	크리드 실버마운틴	바이레도 블랑쉬
여름	지하철	돌체 앤 가바나 라이트 블루	조 말론 우드 세이지 앤 씨 솔트
	버스	톰 포드 네롤리 포르토피노	메종 프란시스 커정 아라로즈
	도보	메종 프란시스 커정 724	킬리안 선키스드 가데스
가을	지하철	바이레도 슈퍼 시더	딥디크 필로시코스
	버스	딥티크 탐 다오	바이레도 로즈 오브 노 맨즈 랜드
	도보	에르메스 테르 데르메스	딥티크 플레르 드 뽀
겨울	지하철	퍼퓸 드 말리 레이튼	구찌 티얼스 프롬 더 문
	버스	지방시 젠틀맨 리저브 프리베	바이레도 모하비 고스트
	도보	킬리안 엔젤스 쉐어	샤넬 꼬로망델

전체적으로 니치 향수의 고급스러움은 유지하되, 지나치게 파격적이거나 호불호가 극명하게 갈리는 향들은 절제하고 대중적인 선호도가 높은 향수들 위주로 균형을 맞추기위해 여러번 수정을 거쳤다.

숨어있는 레더향과 앰보록산 향조를 찾아 여러번 바꿔서 최대한 호불호가 없는 향수들로 결정했다.

에겐(Egen) 무드: 본능을 자극하는 우아함

조 말론 우드 세이지 앤 씨 솔트: 바다 내음 가득한 해안가에서 느끼는 자유롭고 청량한 휴식.
메종 프란시스 커정 아라로즈: 아침 이슬을 머금은 장미 꽃다발을 품에 안은 듯한 순수함.
킬리안 선키스드 가데스: 황금빛 햇살 아래 꽃들이 만개한, 매혹적이고 호화로운 여름의 정점.
킬리안 뱀부하모니: 안개 낀 대나무 숲을 거니는 듯한 정갈하고 맑은 초록빛의 정수.
니샤네 우롱차 엑스트레: 쌉싸름한 찻잎이 은은하게 번져나가는, 차분하고 깊은 사색의 향기.
바이레도 블랑쉬: 방금 세탁한 하얀 린넨에서 느껴지는 가장 깨끗하고 순수한 살냄새.
딥티크 필로시코스: 무화과 열매의 달콤함과 갓 벤 나뭇가지의 싱그러움이 어우러진 여름날의 산책.
바이레도 로즈 오브 노 맨즈 랜드: 서늘한 바람 속에서도 꺾이지 않는, 지적이고 고결한 장미의 품격.
딥티크 플레르 드 뽀: 살결과 하나 되어 더 깊고 포근하게 스며드는, 사람을 끌어당기는 치명적인 살냄새.
구찌 티얼스 프롬 더 문: 달빛이 내려앉은 정원을 거니는 듯한 맑고 신비로운 꽃들의 합창.
바이레도 모하비 고스트: 차가운 공기 속에서도 은은하게 피어나는 세련되고 따스한 머스크의 위로.
샤넬 꼬로망델: 시대를 초월한 깊이감과 압도적인 고급스러움으로 존재감을 완성하는 우아함.

테토(Teto) 무드: 경계를 허무는 강렬한 존재감

돌체 앤 가바나 라이트 블루: 지중해의 뜨거운 태양과 시원한 바다가 조화된, 시트러스의 폭발적인 생기.
톰 포드 네롤리 포르토피노: 이탈리아 리비에라의 여름, 찰나의 순간을 포착한 눈부신 청량감.
메종 프란시스 커정 724: 현대 도시의 에너지를 담아낸, 막 샤워를 마친 듯한 모던하고 깨끗한 향.
메종 마르지엘라 프롬 더 가든: 흙내음이 섞인 갓 수확한 채소의 싱그러움이 전하는 자연의 순수함.
크리드 어벤투스: 정상을 향해 달리는 승리자의 자신감을 담은, 압도적인 카리스마의 정점.
크리드 실버마운틴: 눈 덮인 만년설 산맥의 서늘하고 맑은 공기를 머금은 듯한 차가운 깨끗함.
바이레도 슈퍼 시더: 잘 깎아 놓은 연필심처럼 정갈하고 차분하게 마음을 가다듬어주는 나무 향.
딥티크 탐 다오: 오래된 사찰의 숲길을 걷는 듯한, 영혼을 감싸는 부드러운 우디의 깊이.
에르메스 테르 데르메스: 흙과 나무, 대지의 생명력을 고스란히 담아낸 세련된 남성미의 완성.
퍼퓸 드 말리 레이튼: 바닐라와 라벤더가 엮어내는 관능적이고 따뜻한 밤의 유혹.
지방시 젠틀맨 리저브 프리베: 위스키의 깊고 중후한 풍미가 빚어낸 성숙한 남자의 여유.
킬리안 엔젤스 쉐어: 최고급 코냑에서 영감을 얻은, 거부할 수 없이 치명적인 달콤함의 유혹.

1. Perfume (데이터 모델)

데이터 모델은 처음 설정하고 거의 바꾸지 않았다.

2. PerfumeLogic.java (로직 처리)

변수 매칭 및 로직 처리 기준표

변수명	의미	데이터 타입	분류	값 (매칭 값)
g	Mood (성별/무드)	int	대분류	1: 에겐(여성), 2: 테토(남성)
s	Temperature (기온)	int	중분류	1: 25℃초과, 2: 19~25℃, 3: 11~18℃, 4: 10℃이하
t	Density (공간 밀집도)	int	소분류

변수매칭이 계속 바뀌었다. 시즌을 나타내는 S는 계절보다는 기온을 직접 입력하도록 바꾸었고,

성별은 무드로 바꾸어서 어쩌고 저쩌고 했다.

3. Main

콘솔에 보여지는 부분이기때문에 디자인 요소에 신경을 썼다.

좀 더 완성도를 높이고자 if choice 문을 더 했는데

오류가 자꾸 떴다.

↓

System.out.print("향기로운 하루를 보내시겠어요? (1.네 / 2.다른 향으로): ");

if (choice == 1) break;

그 윗줄에

int choice = sc.nextInt(); 를 넣어 choice변수를 정의해주니 컴파일 에러가 해결되었다.

이 선언이 있어야 if(choice ==1) 이 먹혔다.

history 를 " " 아무것도 없는 빈 상태로 셋팅

while루프 밖에 두었다. 실수로 안에다 넣으면 루프가 돌때마다 이전 기록이 사라지기 때문이다.

밖에 두어야 프로그램이 끝날 때까지 데이터를 쌓을 수 있다.

좀 더 참여형이면서 전문적인 느낌을 내고 싶어서 기온을 입력하는 방식을 추가했다.

if( temp <=10) s= 4; 기온이 10도 이하면 겨울

else if(temp <=18) s=3; 15도 이하면 가을

int t =0;

이거 계속 빼먹는데 중요하다.

초기화 과정으로서, 나중에 if문에서 사용자의 입력값을 넣기위해 일단 0으로 비워두고 시작하는것. 이걸 까먹으면 컴파일에러가 발생한다.

<기술적 설계 논리 >

일단 나는 코딩에 코자도 모르고 이번에 수업을 들은 초초초초초보기 때문에

수업에서 배운 IF 문 원툴로 코드를 짰다.

로직의 모듈화: 관심사 분리

프로그램의 유지보수성과 확장성을 위해서 역할을 명확히 분리했다.

Main 클래스는 사용자와의 입출력만을 담당하고, PerfumeLogic클래스는 향수 추천 로직만 담당하도록 설계하였다.

향후 추천 향수가 늘어나더라도 입출력 로직을 건드리지 않고, 이 클래스만 수정하면 되기 때문에 시스템 안정성을 확보했다.

추천 로직은 성별 -> 계절 -> 이동수단으로 이어지는 계층적 트리 구조를 따른다.

이를 위해 각 변수의 조합에 따라 유일한 향수를 결정하는 모델로 if-else-if문이 가장 간단하고 결과도출이 빠르고 효율적이라고 판단했다.

마지막으로 데이터의 정합성을 위해 res변수를 활용한 방어적 프로그램을 적용했는데,

모든 조건문을 거치고도 일치하는 데이터가 없으면 '해당 조건의 향수가 없습니다'라고 뜨도록 초기값을 설정했다.

테스트 중에 한번도 이 문장이 콘솔에서 뜬 적은 없지만, 또 혹시 모르니까... 프로그램이 예기치 못한 입력값에 의해 멈추는 것을 방지하고, 사용자에게 항상 유효한 응답을 전달하도록 설계했다.

완성도를 위한 욕심 추가

사용자가 향수를 추천받은 뒤, 그 아래에 덧붙여서 상호작용을 유도하는 메시지를 넣어보았다. "다른 사람들은 이런 향을 썼어요"라는 문구는 소셜 프루프(Social Proof) 효과를 톡톡히 한다. 사람들은 자신의 선택이 틀리지 않았음을 확인받고 싶어 하니까,

Main을 고치는건 일이 안큰데, PerfumeLogic 수정이 좀 까다로웠다.

기존에 name과 desc로만 관리하던 구조를 MainName,sub1,sub2추가한 형태로 확장했다.

✨ 기온 및 공간 밀집도별 향수 큐레이션

기온	공간 밀집도	테토 (남성 무드)	에겐 (여성 무드)
25℃ 초과	고밀도 (지하철)	돌체 앤 가바나 라이트 블루 (서브: 724, 네롤리)	조 말론 우드 세이지 앤 씨 솔트 (서브: 아쿠아, 도손)
	중밀도 (버스)	톰 포드 네롤리 포르토피노 (서브: 어벤투스, 724)	메종 프란시스 커정 아라로즈 (서브: 레드 로즈, 오 로즈)
	저밀도 (도보)	메종 프란시스 커정 724 (서브: 실버마운틴, 어벤투스)	킬리안 선키스드 가데스 (서브: 브론즈 가디스, 솔레이 블랑)
19℃ ~ 25℃	고밀도 (지하철)	메종 마르지엘라 프롬 더 가든 (서브: 실버마운틴, 어벤투스)	킬리안 뱀부하모니 (서브: 화이트 티, 오 드 민떼)
	중밀도 (버스)	크리드 어벤투스 (서브: 실버마운틴, 가든)	니샤네 우롱차 엑스트레 (서브: 우롱 앙피니, 인플로레센스)
	저밀도 (도보)	크리드 실버마운틴 (서브: 어벤투스, 가든)	바이레도 블랑쉬 (서브: 프리지아, 레이지 선데이)
11℃ ~ 18℃	고밀도 (지하철)	바이레도 슈퍼 시더 (서브: 탐 다오, 테르 데르메스)	딥티크 필로시코스 (서브: 피그 앤 로터스, 피그)
	중밀도 (버스)	딥티크 탐 다오 (서브: 슈퍼 시더, 테르 데르메스)	바이레도 로즈 오브 노 맨즈 랜드 (서브: 롬브르 단 로, 립스틱 로즈)
	저밀도 (도보)	에르메스 테르 데르메스 (서브: 탐 다오, 슈퍼 시더)	딥티크 플레르 드 뽀 (서브: 모하비 고스트, 미르 앤 통카)
10℃ 이하	고밀도 (지하철)	퍼퓸 드 말리 레이튼 (서브: 리저브 프리베, 엔젤스 쉐어)	구찌 티얼스 프롬 더 문 (서브: 플레르 드 뽀, 라 튤립)
	중밀도 (버스)	지방시 젠틀맨 리저브 프리베 (서브: 레이튼, 엔젤스 쉐어)	바이레도 모하비 고스트 (서브: 우드 세이지, 위스퍼)
	저밀도 (도보)	킬리안 엔젤스 쉐어 (서브: 레이튼, 리저브 프리베)	샤넬 꼬로망델 (서브: 보이, 화이트 스웨이드)

다시 표를 만들어 정리하고 코드를 작성했다.

if (t == 1) { name = "킬리안 뱀부하모니";

desc = "대나무 숲의 청량함과 신선함이 느껴지는 동양적인 향수입니다.";

sub1 = "조 말론 화이트 티";

sub2 = "딥티크 오 드 민떼";

}

코드 조건문 (if-else-if-else)을 사용하여, 사용자의 환경(t)에 따라 각기 다른 향수 정보(변수값)을 결정하는 과정이다.

if (t == 1):
- t가 1(지하철/고밀도 상황)일 때 실행
- name = "...": 추천할 향수의 이름을 결정
- desc = "...": 이 향수가 어떤 향인지 알려주는 설명 글
- sub1 = "...", sub2 = "...": 사용자가 메인 향수를 마음에 안 들어 할 경우를 대비한 대안 향수(서브)들을 제시
else if (t == 2):
- t가 1이 아닌데, 만약 2(버스/중밀도 상황)라면 이 내용을 실행
- 마찬가지로 상황에 딱 맞는 이름, 설명, 서브 향수를 새로 세팅
else:
- t가 1도 아니고 2도 아닌 경우(도보/저밀도 상황)를 의미
- 그 외의 나머지 상황에 맞는 정보를 세팅
- 이 방식은 "데이터 선택형 구조"로 코드를 실행하는 중간에 계산을 하는 것이 아니라, 상황에 맞는 '정답지'를 미리 준비해두고 사용자의 입력(t)에 따라 정답을 골라내는 방식이다.

문제의식 : IF문이 반복될 수록 코드가 지저분해진다.

멀미날 것같은 if문의 지옥... 가독성을 잡기위해 swith문을 활용해서 훨씬 깔끔하고 구조적으로 수정해보았다.

어려웠던 점: 처음에는 추천 로직이 단순했지만, 성별/계절/이동수단의 경우의 수가 많아지면서 코드가 복잡했다. 그래서 t를 써 데이터의 개수가 가변적이고, 순차적으로 데이터를 조회하고 관리하기에 적합한 ArrayList를 사용했다. 또한 if-else문을 계층적으로 설계하여 논리 오류를 줄였고, ArrayList의 removeIf나 forEach 같은 메서드를 찾아보며 코드를 간결하게 수정했다. 에러가 발생했을 때는 변수의 스코프와 입력 버퍼를 확인하며 디버깅했다.

새롭게 알게된 점

객체 지향 프로그래밍에서 클래스를 역할별로 나누는 것의 중요성을 체감. 데이터, 로직, 실행부를 분리하니 유지보수가 훨씬 쉬웠다. 또한, 컬렉션 프레임워크가 데이터를 관리하는 데 얼마나 강력한지 직접 코드를 적어보니 실감했다.

소감 (이자 심정...)

https://www.youtube.com/watch?v=tjBATXGdUT8

0:37초부터..

아니 코드를 고치면 int안에 설명글을 추가할게 생기고, 추가하면 콘솔에 오류뜨고, 재민이한테 물어보고 고치면, 또 설명글 사라져 있고,,그거 수정하고 질문지 위치 좀 수정하면 또 오류뜨고, 그거 고치면 int 안에 \n 문장 다 사라져있고...

천재금붕어 재민이랑 그냥 시민 김리원의 힘든싸움이었다.

package com.kh.Test;

public class PerfumeLogic {

public String getPerfume(int g, int s, int t) {

// g=1(에겐/여성), g=2(테토/남성)

return (g == 1) ? getEgenPerfume(s, t) : getTetoPerfume(s, t);

}

private String getEgenPerfume(int s, int t) {

String name = "", desc = "", sub1 = "", sub2 = "";

switch (s) {

case 1: // 에겐 여름

if (t == 1) { name = "조 말론 우드 세이지 앤 씨 솔트"; desc = "거친 파도가 빚어낸 소금기 섞인 바닷바람과 세이지의 흙내음이 어우러진 \n 세상의 틀을 벗어난 가장 자유로운 영혼의 향기"; sub1 = "아쿠아 디 파르마 피코 디 아말피"; sub2 = "딥티크 도 손"; }

else if (t == 2) { name = "메종 프란시스 커정 아라로즈"; desc = "꾸밈없는 첫사랑의 설렘을 닮은 싱그러운 장미 향이 당신을 감싸 안는\n 세상에서 가장 순수하고 고결한 장미의 정수"; sub1 = "조 말론 레드 로즈"; sub2 = "딥티크 오 로즈"; }

else { name = "킬리안 선키스드 가데스"; desc = "지평선 끝에서 내려온 태양의 온기를 머금은 꽃들의 합창\n 한 번의 분사로 일상을 찬란한 휴양지의 여신으로 탈바꿈시키는 향의 마스터피스"; sub1 = "에스티로더 브론즈 가디스"; sub2 = "톰포드 솔레이 블랑"; }

break;

case 2: // 에겐 봄

if (t == 1) { name = "킬리안 뱀부하모니"; desc = "안개 낀 고요한 대나무 숲을 거니는 듯한\n 영혼까지 맑아지는 투명하고 신선한 초록빛의 정"; sub1 = "조 말론 화이트 티"; sub2 = "딥티크 오 드 민떼"; }

else if (t == 2) { name = "니샤네 우롱차 엑스트레"; desc = "쌉싸름한 찻잎의 깊은 향취가 공기 중에 안개처럼 번져나가는 \n 당신의 하루를 차분하고 깊은 사색의 시간으로 이끄는 니치 향수의 정수"; sub1 = "아틀리에 코롱 우롱 앙피니"; sub2 = "바이레도 인플로레센스"; }

else { name = "바이레도 블랑쉬"; desc = "방금 세탁을 마친 하얀 린넨 위로 내려앉은 햇살처럼 \n 세상에서 가장 투명하고 순수한 살냄새의 결정체"; sub1 = "산타마리아 노벨라 프리지아"; sub2 = "메종 마르지엘라 레이지 선데이 모닝"; }

break;

case 3: // 에겐 가을

if (t == 1) { name = "딥티크 필로시코스"; desc = "무화과나무의 뿌리부터 열매까지 한 병에 담아낸 깊고 선명한 향취 \n 피부에 닿는 순간 주변을 자연의 고요함으로 물들이는 독보적인 향기"; sub1 = "조 말론 피그 앤 로터스"; sub2 = "조르지오 아르마니 피그"; }

else if (t == 2) { name = "바이레도 로즈 오브 노 맨즈 랜드"; desc = "황량한 전쟁터에서도 피어나는 장미처럼\n 가장 힘든 순간 당신의 곁을 지켜주는 숭고하고도 강인한 위로의 향기"; sub1 = "딥티크 롬브르 단 로"; sub2 = "프레데릭 말 립스틱 로즈"; }

else { name = "딥티크 플레르 드 뽀"; desc = "피부에 닿는 순간 밀착되어 완성되는 섬세한 향의 결 \n 시간이 지날수록 당신의 본연의 향과 어우러져 가장 우아하고 고혹적인 존재감을 드러냅니다"; sub1 = "바이레도 모하비 고스트"; sub2 = "조 말론 미르 앤 통카"; }

break;

case 4: // 에겐 겨울

if (t == 1) { name = "구찌 티얼스 프롬 더 문"; desc = "달빛이 맺힌 꽃들의 부드러운 속삭임\n 밤의 정원에서 마주하는 듯한 신비롭고 매혹적인 향의 조화가\n 당신의 존재를 특별하게 완성합니다"; sub1 = "딥티크 플레르 드 뽀"; sub2 = "바이레도 라 튤립"; }

else if (t == 2) { name = "바이레도 모하비 고스트"; desc = "황량한 모하비 사막 속에서 피어난 강인하고도 아름다운 꽃의 생명력\n 당신의 살결 위에서 신비롭게 번져나가는 이국적인 자연의 찬가"; sub1 = "조 말론 우드 세이지 앤 씨 솔트"; sub2 = "메종 마르지엘라 위스퍼 인 더 라이브러리"; }

else { name = "샤넬 꼬로망델"; desc = "피부 위에서 부드러운 우디 노트와 패출리의 깊은 울림이 섞여드는\n 당신의 일상에 품격 있는 무게감을 더해줄 압도적인 오리엔탈의 기록"; sub1 = "샤넬 보이"; sub2 = "톰포드 화이트 스웨이드"; }

break;

}

return formatResult(name, desc, sub1, sub2);

}

private String getTetoPerfume(int s, int t) {

String name = "", desc = "", sub1 = "", sub2 = "";

switch (s) {

case 1: // 테토 여름

if (t == 1) { name = "돌체 앤 가바나 라이트 블루"; desc = "한 번의 분사로 펼쳐지는 이탈리아 해안가의 여유 \n 차가운 바닷바람을 맞으며 거니는 듯한 시원하고 산뜻한 해방감을 선사합니다"; sub1 = "메종 프란시스 커정 724"; sub2 = "톰 포드 네롤리 포르토피노"; }

else if (t == 2) { name = "톰 포드 네롤리 포르토피노"; desc = "상쾌한 네롤리 꽃향기가 여름날의 청량함을 더해줍니다."; sub1 = "크리드 어벤투스"; sub2 = "메종 프란시스 커정 724"; }

else { name = "메종 프란시스 커정 724"; desc = "거대한 메트로폴리스의 역동적인 리듬을 담아낸 \n 맑고 투명하면서도 압도적인 존재감을 발산하는 현대적인 서명"; sub1 = "크리드 실버마운틴"; sub2 = "크리드 어벤투스"; }

break;

case 2: // 테토 봄

if (t == 1) { name = "메종 마르지엘라 프롬 더 가든"; desc = "태양 아래 갓 수확한 토마토 잎의 알싸하고 푸릇한 향기\n 흙의 촉촉함이 어우러져 평온한 오후의 정원을 그대로 옮겨 놓은 듯한 생생한 자연의 기록"; sub1 = "크리드 실버마운틴"; sub2 = "크리드 어벤투스"; }

else if (t == 2) { name = "크리드 어벤투스"; desc = "폭발적인 에너지가 느껴지는 신선함 뒤로 숨겨진 묵직한 카리스마 \n 당신의 존재감을 세상에 각인시킬 완벽한 마스터피스"; sub1 = "크리드 실버마운틴"; sub2 = "메종 마르지엘라 가든"; }

else { name = "크리드 실버마운틴"; desc = "알프스 산맥의 만년설을 녹여낸 듯한 투명하고 서늘한 향기\n 도시의 열기를 단번에 식혀줄 압도적인 청량함의 결정체"; sub1 = "크리드 어벤투스"; sub2 = "메종 마르지엘라 가든"; }

break;

case 3: // 테토 가을

if (t == 1) { name = "바이레도 슈퍼 시더"; desc = "나무본연의 깊고 따스한 향취에 현대적인 감각을 더한 향\n 불필요한 장식을 덜어내고 \n오직 시더우드의 맑고 단단한 결만을 투명하게"; sub1 = "딥티크 탐 다오"; sub2 = "에르메스 테르 데르메스"; }

else if (t == 2) { name = "딥티크 탐 다오"; desc = "인도차이나의 울창한 숲속\n 안개 낀 사원을 거니는 듯한 샌달우드의 깊고 신비로운 향취가 \n 당신의 공간을 차분한 고요함으로 채웁니다"; sub1 = "바이레도 슈퍼 시더"; sub2 = "에르메스 테르 데르메스"; }

else { name = "에르메스 테르 데르메스"; desc = "태고의 흙 내음과 하늘의 기운이 조화를 이룬 \n 대지를 딛고 선 남자의 강인한 서사가 담긴 독보적인 향기"; sub1 = "딥티크 탐 다오"; sub2 = "바이레도 슈퍼 시더"; }

break;

case 4: // 테토 겨울

if (t == 1) { name = "퍼퓸 드 말리 레이튼"; desc = "세련된 스파이스와 달콤한 바닐라의 조화로 완성된 \n 당신의 존재감을 압도적으로 각인시킬 치명적인 향의 미학."; sub1 = "지방시 리저브 프리베"; sub2 = "킬리안 엔젤스 쉐어"; }

else if (t == 2) { name = "지방시 젠틀맨 리저브 프리베"; desc = "한 모금 머금은 위스키처럼 짙고도 감미로운 \n 존재만으로도 주변을 매료시키는 성숙한 남자의 깊은 비밀"; sub1 = "레이튼"; sub2 = "엔젤스 쉐어"; }

else { name = "킬리안 엔젤스 쉐어"; desc = "황금빛 코냑 한 방울이 살결 위에 떨어져 피어나는 \n 한 번 맡으면 잊을 수 없는 짙은 관능의 마스터피스"; sub1 = "퍼퓸 드 말리 레이튼"; sub2 = "지방시 리저브 프리베"; }

break;

}

return formatResult(name, desc, sub1, sub2);

}

private String formatResult(String name, String desc, String sub1, String sub2) {

return "✨ [오늘의 메인 추천]\n " + name + "\n " + desc + "\n\n" +

" 매니저의 한마디: 같은 무드를 좋아하시는 분들이 이 향수도 많이 찾으셨어요!\n\n" +

" [비슷한 취향의 다른 선택]\n 1. " + sub1 + "\n 2. " + sub2;

}

[잉크] 세일러 - 지기 (知己) みをしれる(미오시레루)

리제 — Sat, 6 Jun 2026 12:29:58 +0900

뒤에 휴지 발색까지 다 지기이다.
휴지에서 노란테가 더 많이 보인다.

유사한 색들 모아서 발색샷!

세일러(Sailor)의 일본 지역 한정 잉크 시리즈 중 하나인 'STAs 오리지널 잉크'

STAs는 일본 시즈오카현의 유명 문구점 연합(Shizuoka Stationery Association)을 뜻한다.

이 시리즈는 일본의 고전 문학이나 지역의 아름다운 정취를 테마로 잉크를 출시하는 것으로 유명하다는데 나는 이번에 알았지…

그중에서도 다섯번째 시리즈 지기는 저의 최애 잉크중 하나

알 지(知) + 자기 기(己): 자기 자신을 알아주는 사람

단순한 지인을 넘어, 내 마음과 속사정, 그리고 진정한 가치를 깊이 이해해 주는 절친한 친구를 이르는 말인데,
흔히 '지기지우(知己之友)'라고도 부르며,
'선비는 자신을 알아주는 사람(지기)을 위해 목숨을 바친다'라고도 한다.
그때나 지금이나 다들 '나를 진정으로 알아주는 자'에 대한 욕망은 여전한가 보다
최근에 [멋진 신세계]드라마에서 지기라는 말이 언급이 되길래 더욱 반가웠다.

장점: 매혹적인 색감과 시각적 즐거움

독보적인 테와 농담 표현: 딥펜(특히 글라스펜) 사용 시 잉크 본연의 아름다운 농담(그라데이션)과 매력적인 테를 풍부하게 즐길 수 있음
반전 매력의 색 변화: 펜을 닦아낸 휴지에서 사르르 피어나는 노란색 테가 마치 봄 꽃을 연상시키며, 극적인 시각적 재미를 준다
펄 없이도 풍부한 색채: 관리하기 까다로운 펄(글리터)이 들어있지 않음에도 불구하고, 색 자체가 깊고 다채로워 질리지 않는 매력
짐승 용량: 50ml라는 넉넉한 용량 덕분에 잔여량 걱정 없이 마음껏 시필하고 필사할 수 있음!!

단점: 높은 진입 장벽과 부담감

과한 용량의 부담: 50ml는 잉크를 자주 바꾸는 사용자나 가볍게 경험해 보고 싶은 사람에게는 다소 부담스러운 대용량
극악의 접근성: 본품 자체를 구하기가 매우 힘들고 귀함. 직구도 어렵고..
소분 구매의 어려움: 양이 많아 소분(나눔) 형태로 먼저 찍먹해보고 싶어도, 소분 매물마저 구하기가 까다로워 진입 장벽이 높다

사진에서는 지기가 더 연해버이지만 실제로 발색은 라일락 마이에나가 더 연함

펜입해서 발색!

휴지 발색에서
밑에 있는것이 지기

[Class-13] 제네릭 / 컬렉션

리제 — Thu, 4 Jun 2026 14:32:15 +0900

자바 [JAVA] - Comparable 과 Comparator의 이해

아마 이 글을 찾아 오신 분들 대개는 Comparable과 Comparator의 차이가 무엇인지 모르거나 궁금해서 찾아오셨을 것이다. 사실 알고보면 두 개는 그렇게 어렵지 않으나 아무래도 자바를 학습하면서 객

st-lab.tistory.com

~~선생님 블로그.~~

~~이해할 때 까지 읽는다.~~

◆ 제네릭 이전 코드의 문제점: "타입 안전성의 붕괴"

제네릭 코드는 아무거나 다 담을 수 있는 장점이 될 수 있지만, 동시에 "무엇이 담겨 있는지 확인할 방법이 없다"는 치명적인 약점이 있다.

1. 프로그래머의 실수 시나리오

// 제네릭이 없는 List (Object를 저장함)
List list = new ArrayList();

// 프로그래머는 당연히 Human 객체만 들어있을 것이라 가정하고 코드를 짬
list.add(new Human("이무진", 25));
list.add(new Human("이창섭", 30));

// 실수 발생: 실수로 Human 객체가 아닌 String 문자열을 넣어버림
list.add("임재현");

2. 컴파일러의 태도

컴파일 과정: 컴파일러는 list.add("임재현"); 구문을 볼 때 "어, ArrayList는 Object를 담는 곳이네? 문자열(String)도 Object의 자식이니까 허용!"이라고 판단.
결과: 오류(Error)가 전혀 발생하지 않는다. 컴파일러는 프로그래머가 실수로 다른 타입을 넣었는지 전혀 알지 못함

3. 런타임(실행 시)의 재앙

문제는 데이터를 꺼낼 때 발생한다. 프로그래머는 리스트에 Human만 있다고 믿고 강제 형변환(Casting)을 시도.

for (int i = 0; i < list.size(); i++) {
    //   프로그래머: "여긴 다 Human 객체야!"
    Human h = (Human) list.get(i); 
    System.out.println(h.getName());
}

결과: 리스트에 들어있던 String 객체를 Human으로 강제 형변환하려는 순간, ClassCastException이라는 런타임 오류가 발생하며 프로그램이 그 자리에서 강제 종료.

◆ 핵심 차이점: "컴파일 vs 런타임"

구분	제네릭 이전 (Object 관리)	제네릭 이후 (<Human> 명시)
타입 확인 시점	런타임 (프로그램 실행 중)	컴파일 (코드 작성 및 빌드 중)
오류 발견	실행 중에 터져서 프로그램 멈춤	코드를 짜는 중에 빨간 줄로 경고함
안전성	매우 낮음 (실수 방지 불가)	매우 높음 (실수 즉시 수정 가능)

◆ 제네릭이 해결하는 방식 (실수 원천 차단)

만약 List<Human> list = new ArrayList<>();라고 제네릭을 명시했다면 어떤 일이 생길까.

List<Human> list = new ArrayList<>();
list.add(new Human("이무진", 25));

// ❌ 컴파일러의 강력한 제재
// "Human 타입만 들어올 수 있는데, 왜 String을 넣으려 해?"
list.add("임재현"); //   여기서 즉시 컴파일 에러 발생!

요약하자면:

제네릭은 컴파일러가 "작성한 코드가 타입 측면에서 완벽한지 미리 검사"하게 함으로써, 프로그래머의 사소한 실수(다른 타입 입력)를 즉시 수정 가능한 상태로 잡아주는 것

자바 컬렉션 프레임워크는 데이터를 효율적으로 관리하려고 만든 '데이터 보관소' 모음임. 상황에 따라 골라 쓸 수 있게 도구들이 정리되어 있음.

1. 컬렉션 프레임워크 핵심

자바에서 데이터를 담는 인터페이스들이야. 크게 세 가지(Set, List, Queue)와 독립적인 Map이 있음. 다들 제네릭(<E>)을 써서 원하는 자료형만 딱 담을 수 있게 구현되어 있음.

2. Set 인터페이스와 HashSet

Set은 '중복 없는 주머니'라고 생각하면 됨.

순서 없음: 넣은 순서대로 나오지 않음.
중복 불가: 같은 데이터를 또 넣으려고 하면 거부함.

Java

Set<String> set = new HashSet<>();
set.add("Toy");
set.add("Box");
set.add("Robot");
set.add("Box"); // 이미 있어서 추가 안 됨
// 결과적으로 데이터는 3개만 남음

3. "그렇다면 동일 인스턴스의 기준은?"

Set이 중복을 판별하려면 '이게 같은 데이터인지' 알아야 함.

기본 클래스(String 등): 자바가 이미 같은지 비교하는 법을 알고 있어서 문제없음.
직접 만든 클래스(Human 등): 자바가 모름. 그래서 우리가 직접 equals()랑 hashCode()를 재정의해서 알려줘야 함.

hashCode(): 데이터를 담을 때 해시값(주소표) 생성.
equals(): 해시값이 같을 때, 실제 내용물이 같은지 1:1 비교.

1. 해시 알고리즘의 핵심 개념

해시(Hash) 알고리즘은 데이터를 빠르게 찾기 위해 데이터를 분류해 놓는 기술

쉽게 말해 '도서관의 분류 체계'와 비슷

분류 대상: 3, 5, 7, 12, 25, 31
분류 규칙(해시 함수): num % 3 (숫자를 3으로 나눈 나머지)

데이터를 3으로 나눈 나머지에 따라 방(연산결과)을 0, 1, 2번으로 나눴음.

연산결과 0: 3(3%3=0), 12(12%3=0)
연산결과 1: 7(7%3=1), 25(25%3=1), 31(31%3=1)
연산결과 2: 5(5%3=2)

2. 왜 이렇게 분류함? (속도 때문)

만약 데이터를 섞어놓고 "25가 있니?"라고 물어보면, 무식하게 하나씩 다 뒤져야 함. 하지만 위처럼 분류를 해놓으면?

"25 찾으려면? 25 % 3 = 1이니까 연산결과 1번 방만 뒤지면 됨."
나머지 0번 방과 2번 방은 아예 쳐다볼 필요도 없음. 이게 탐색 속도가 미친 듯이 빨라지는 이유임.

3. 자바의 hashCode() 메서드

자바의 Object 클래스에 있는 hashCode()는 바로 이 역할을 함.

우리가 HashSet에 객체를 넣으면, 자바는 그 객체의 hashCode()를 호출해서 "이 녀석은 몇 번 바구니에 담을까?"를 결정함.
그리고 나서 equals()를 호출해 "혹시 이 바구니에 똑같은 내용물 가진 놈이 이미 있나?"를 확인해서 중복을 걸러내는 것임.

요약하자면:

hashCode(): 데이터를 담을 바구니 주소를 정하는 '분류 알고리즘'
equals(): 바구니 안에서 진짜 같은지 확인하는 '검증 알고리즘'

[Class-12] 기본 API

리제 — Tue, 2 Jun 2026 18:41:21 +0900

원시 타입과 객체 타입의 메모리 구조

원시 타입 (int, boolean, char 등): 변수 상자 안에 진짜 실제 데이터 값이 알맹이로 직접 들어감. 메모리의 스택(Stack) 영역만 사용하며 null을 가질 수 없음.
객체 타입 (String, Book, 배열 등): 진짜 데이터 본체는 힙(Heap) 메모리 창고에 따로 생성됨. 변수 상자 안에는 그 본체가 있는 창고의 주소(화살표)만 저장됨. 연결된 본체가 없을 때 null 상태가 됨.

날짜 API: Date vs LocalDateTime

java.util.Date: 연도 계산 시 1900을 빼야 하고 월 계산 시 1을 빼야 해서 연산이 매우 불편함. 내부 값을 임의로 바꿀 수 있어(setter 존재) 데이터 오염에 취약함. 현재는 사용을 권장하지 않음(deprecated).
java.time.LocalDateTime: 자바 8부터 도입된 표준임. 입력한 숫자 그대로 연도와 월을 인식하며, 내부 값을 바꿀 수 없는 불변 객체라 멀티스레드 환경이나 아키텍처 설계상 매우 안전함.

String의 불변성과 상수풀(String Pool)

자바에서 String은 일반적인 객체들과 완전히 다른 방식으로 메모리를 관리함.

[Class -11] 상속 / 예외처리 / 입출력(OI)

리제 — Mon, 1 Jun 2026 16:31:53 +0900

◆ 상속의 기본적인 특성과 특징

상속은 기존 클래스(부모)의 변수와 메서드를 새로운 클래스(자식)가 물려받아 그대로 사용하거나 기능을 확장하는 매커니즘임.

키워드: extends (확장하다) 기호를 사용하여 구현함.
적용 범위: 부모의 멤버 중 private 지시자가 붙은 변수나 메서드는 상속은 되지만 자식이 직접 접근할 수 없음. 또한 생성자는 상속 대상에서 완전히 제외됨.
이점: 이미 검증된 코드를 재사용하므로 중복 코드가 획기적으로 줄어들고, 유지보수가 쉬워지며 프로그램의 확장성이 극대화됨.

◆ 모든 클래스의 조상: Object 클래스 후손

자바에서 개발자가 만드는 모든 클래스는 별도로 extends를 적지 않아도 무조건 java.lang.Object 클래스를 자동으로 상속받도록 설계되어 있음.

최상위 조상: 모든 클래스는 최하위 후손이며, Object가 제공하는 기본 메서드들을 물려받아 사용할 수 있음.
주요 물려받는 메서드:
- toString(): 객체의 텍스트 표현(주소값 또는 데이터)을 반환함.
- equals(Object obj): 두 객체가 메모리상에서 동일한지 비교함.

◆ 단일 상속 vs 다중 상속

단일 상속 (자바의 표준 규칙): 자바는 클래스 간의 다중 상속을 절대 허용하지 않음. 즉, class Child extends Father, Mother와 같이 두 개 이상의 부모를 동시에 지정할 수 없음.
이유 (다이아몬드 문제 방지): 만약 두 부모 클래스에 이름이 똑같은 메서드가 존재할 경우, 자식 객체가 어떤 부모의 메서드를 실행해야 할지 컴퓨터 시스템이 판단할 수 없는 모호성이 발생하기 때문임.
해결책: 다중 상속의 효과를 내기 위해 자바는 인터페이스(Interface)라는 특수 구조를 제공함.

◆ 생성자 호출 관계 파악

자식 객체를 생성할 때, 메모리(Heap) 내부에서는 자식 혼자 태어나지 않음. 반드시 부모 객체가 먼저 생성된 후 자식 객체가 그 겉을 감싸며 결합하는 아키텍처를 가짐.

실행 순서: 자식 생성자가 호출되면, 내부적으로 부모 생성자가 먼저 완벽하게 실행을 끝낸 뒤 자식 생성자의 나머지 본문 코드가 가동됨.

◆ super() 와 super 의 차이점

이름은 비슷하지만 메모리를 제어하는 용도가 완전히 다름.

① super() : 부모의 생성자 호출 명령

자식 생성자 내부에서 부모의 생성자를 강제로 가동시키는 메서드 형태의 명령어임.
규칙: 자식 생성자 본문에서 반드시 첫 줄에만 위치해야 함. 생략하면 컴파일러가 부모의 기본 생성자를 부르는 super();를 자동으로 맨 첫 줄에 삽입함.

② super : 부모 객체의 메모리 주소록(참조 변수)

자식 클래스 내부에서 내 변수와 부모의 변수 이름이 중복되어 충돌할 때, 부모의 자원을 콕 집어서 가리키는 키워드임.
this가 현재 나 자신의 메모리 주소를 뜻한다면, super는 내 부모 방의 주소를 의미함.

◆ 상속이 도움이 되는 상황의 예시

상황: 회사에서 '정직원' 관리 프로그램과 '알바생' 관리 프로그램을 따로 구축해야 하는 경우.
상속 미적용 시: 두 클래스 모두에 이름, 나이, 사원번호, 입사일 등 똑같은 변수와 출력 메서드를 중복해서 타이핑해야 함.
상속 적용 시: 공통 분모인 '사원(Employee)' 클래스를 위 상위에 정의하고, '정직원(Regular)'과 '알바생(PartTime)'은 상위 클래스를 extends 한 뒤 각각 보너스 계산법이나 시급 계산법 등 자신만의 고유 차별점만 아래에 추가 구현하면 됨.

◆ 단순 인맥 관리 프로그램 예제 (관리 대상이 둘인 구조)

관리 대상이 "동창(UnivFriend)"과 "직장 동료(CompanyFriend)" 둘인 경우의 아키텍처 설계 코드임. 공통 데이터는 상위 클래스(Friend)로 묶고 상속을 통해 구현함.

1. 공통 상위 클래스 정의

//   공통 부모 클래스
class Friend {
    protected String name; // 자식 클래스에서 직접 접근할 수 있도록 protected 배치
    protected String phone;

    public Friend(String name, String phone) {
        this.name = name;
        this.phone = phone;
    }

    public void showInfo() {
        System.out.println("이름: " + name);
        System.out.println("전화: " + phone);
    }
}

2. 두 개의 자식 클래스 대상 정의 및 상속 구현 코드

//   관리 대상 1: 대학교 동창 클래스
class UnivFriend extends Friend {
    private String major; // 동창만의 고유 특성 (전공)

    public UnivFriend(String name, String phone, String major) {
        super(name, phone); //   super()를 통해 부모 생성자에 이름과 전화번호 재료 전달
        this.major = major;
    }

    @Override
    public void showInfo() {
        super.showInfo(); //   super 키워드로 부모의 출력 기능 먼저 가동
        System.out.println("전공: " + major);
    }
}

//   관리 대상 2: 직장 동료 클래스
class CompanyFriend extends Friend {
    private String department; // 직장 동료만의 고유 특성 (부서)

    public CompanyFriend(String name, String phone, String department) {
        super(name, phone); // 부모 생성자 호출
        this.department = department;
    }

    @Override
    public void showInfo() {
        super.showInfo(); // 부모의 공통 정보 출력 활용
        System.out.println("부서: " + department);
    }
}

3. 메인 실행 및 제어 코드

public class Main {
    public static void main(String[] args) {
        // 동창 객체와 직장 동료 객체 각각 생성 (Heap 메모리에 부모 공간과 함께 배치됨)
        UnivFriend uFriend = new UnivFriend("홍길동", "010-1111-2222", "컴퓨터공학");
        CompanyFriend cFriend = new CompanyFriend("이순신", "010-3333-4444", "개발팀");

        System.out.println("--- 동창 정보 출력 ---");
        uFriend.showInfo();

        System.out.println("\n--- 직장 동료 정보 출력 ---");
        cFriend.showInfo();
    }
}

◆ 1. static 자원도 상속이 되는가?

결론부터 말하면, static 변수와 static 메서드도 자식 클래스에게 상속됨.

원리: 부모 클래스에 static으로 선언된 자원은 자식 클래스 이름을 통해서도 그대로 접근하고 사용할 수 있음.
코드 예시:

Java

class Parent {
    static int sharedVal = 100;
    static void staticMethod() {
        System.out.println("부모의 스태틱 메서드");
    }
}

class Child extends Parent {
    // 아무것도 적지 않아도 부모의 static 자원을 물려받음
}

public class Main {
    public static void main(String[] args) {
        //   자식 클래스 이름을 통해 부모의 static 자원에 접근 가능
        System.out.println(Child.sharedVal); // 출력: 100
        Child.staticMethod();                // 출력: 부모의 스태틱 메서드
    }
}

◆ 2. 메모리 아키텍처로 보는 상속의 진실: "공유"

상속이라고 하면 부모의 공간을 자식이 복사해서 소유하는 것처럼 느껴지지만, static은 완전히 다르게 작동함.

인스턴스 변수 상속: 자식 객체를 new로 생성할 때마다 힙(Heap) 영역에 부모의 변수 공간과 자식의 변수 공간이 각각 새롭게 파짐.
static 자수 상속: static 변수는 인스턴스(객체)에 속하지 않고 오직 Static(Method) 영역에 단 한 개만 생성됨. 자식 클래스가 이를 상속받는다는 것은, 새로운 상자가 생기는 것이 아니라 Static 영역에 존재하는 하나의 똑같은 상자를 부모와 자식이 '공유'하는 구조임.
코드 증명 예시:

Java

Child.sharedVal = 500; // 자식 쪽에서 static 변수 값을 바꿈
System.out.println(Parent.sharedVal); //   출력: 500 (부모 쪽 값도 바뀜, 결국 같은 상자이기 때문)

◆ 3. ⚠️ static 메서드는 오버라이딩(Overriding)이 불가능하다

인스턴스 메서드는 부모의 것을 자식이 재정의(Overriding)하여 다형성을 구현할 수 있음. 하지만 static 메서드는 오버라이딩 규칙이 적용되지 않음.

자식 클래스에서 부모의 static 메서드와 완전히 똑같은 이름과 형태로 메서드를 다시 정의하면, 오버라이딩된 것이 아니라 '메서드 숨김(Method Hiding)' 현상이 발생함.

❌ 잘못된 오버라이딩 이해와 '메서드 숨김' 예시

Java

class SuperClass {
    static void print() {
        System.out.println("부모 스태틱");
    }
}

class SubClass extends SuperClass {
    // @Override ❌ 에러 발생: 스태틱 메서드에는 오버라이딩 마크를 붙일 수 없음
    static void print() {
        System.out.println("자식 스태틱"); // 부모 메서드를 가려버림(Hiding)
    }
}

public class Main {
    public static void main(String[] args) {
        SuperClass sub = new SubClass(); // 다형성 구조로 객체 생성
        sub.print(); //   출력 결과: "부모 스태틱"
    }
}

이유 (컴파일 타임 바인딩): 일반 인스턴스 메서드는 프로그램 실행 도중(Runtime)에 진짜 힙에 있는 객체가 무엇인지 확인하고 메서드를 찾아감. 반면, static 메서드는 실행되기도 전인 컴파일 시점에 참조 변수의 '타입'만 보고 실행할 메서드를 미리 결정해 버림. 위 코드에서 sub 변수의 타입이 SuperClass이기 때문에 실제 알맹이가 SubClass일지라도 부모의 메서드를 실행해 버리는 것임.

◆ 최종 요약

부모의 static 변수와 메서드는 자식에게 상속되어 자식 이름으로 사용 가능함.
물리적으로 복사되는 것이 아니라 Static 영역의 단 하나의 자원을 부모와 자식이 공유하는 메커니즘임.
static 메서드는 실행 시점이 아닌 컴파일 시점에 결합하므로 오버라이딩(다형성)이 불가능하며, 똑같이 만들 경우 단순히 부모의 메서드를 가리는 '메서드 숨김(Hiding)'이 일어남.

◆ 프로그램 오류 (Error)의 종류

컴퓨터 프로그램이 실행되는 과정에서 발생하는 오류는 발생 시점과 성격에 따라 3가지로 분류됨.

컴파일 오류 (Compile-time Error): 소스 코드의 문법이 틀려 자바 컴파일러(javac)가 실행 파일(.class)을 만들지 못하고 빨간 줄을 띄우는 오류임. 가장 안전하고 발견하기 쉬움.
논리적 오류 (Logical Error): 컴파일도 잘 되고 프로그램도 멈추지 않고 실행되지만, 개발자의 계산 실수 등으로 인해 원하는 결과가 나오지 않는 오류임 (예: 덧셈 연산에 뺄셈 기호를 넣음).
런타임 오류 (Runtime Error): 컴파일은 완벽히 끝났으나, 프로그램이 실행되는 도중(Runtime) 예측하지 못한 상황을 만나 강제로 고장 나는 오류임. 예외 처리는 바로 이 런타임 오류를 방지하기 위해 사용함.

◆ 오류 종료와 해결 방법

오류 종료 (Abnormal Termination): 런타임 오류가 발생하면 자바 가상 머신(JVM)은 즉시 구동을 중단하고 에러 메시지를 쏟아내며 프로그램을 강제 종료시킴. 웹 서버나 금융 프로그램의 경우 시스템 전체가 마비되는 치명적인 결과를 초래함.

해결 방법 (예외 처리 - Exception Handling): 프로그램이 급작스럽게 죽는 것을 막고, 오류가 발생했을 때 우회 도로를 개설하여 프로그램을 끝까지 정상 실행시키도록 제어하는 메커니즘임. 자바에서는 try - catch - finally 블록을 아키텍처로 사용함.

try {
    //   예외가 발생할 가능성이 있는 위험한 코드 배치
    int result = 10 / 0; 
} catch (ArithmeticException e) {
    //   예외가 발생했을 때 실행할 수습용 우회 코드 배치
    System.out.println("0으로 나눌 수 없습니다. 기본값으로 대체합니다.");
} finally {
    //   예외 발생 여부와 상관없이 무조건 마지막에 실행되어야 하는 정리 코드 (자원 해제 등)
}

◆ 예외 클래스의 계층 구조

자바는 프로그램 실행 중 발생할 수 있는 모든 오류 상황을 '객체'로 만들어서 관리함. 따라서 오류도 부모-자식 상속 구조를 가짐.

Throwable : 자바에서 오류로 던져질 수 있는 모든 클래스의 최상위 조상임.
Error 후손: 시스템 메모리 부족(OutOfMemoryError)이나 하드웨어 고장 등 프로그램 코드로 수습할 수 없는 심각한 구조적 오류임. 개발자가 코드로 잡을 수 없음.
Exception 후손: 개발자가 발생을 예측하고 코드를 통해 정상 상태로 수습할 수 있는 가벼운 오류임. 예외 처리의 직접적인 대상임.
- Checked Exception: RuntimeException을 상속받지 않은 예외들. 컴파일러가 예외 처리를 무조건 명시하라고 강제함. 안 적으면 컴파일(빨간 줄) 자체가 안 됨 (예: IOException, SQLException).
- Unchecked Exception: RuntimeException과 그 자식들. 컴파일러가 강제하지 않아 개발자의 주의력에 의존함.

◆ RuntimeException (Unchecked Exception)

예외 계층 구조 중 가장 독특하고 빈번하게 만나는 영역임.

특징: 주로 개발자의 논리적 오류나 코딩 실수(주의 부족)로 인해 발생하는 예외들을 모아놓은 클래스임.
매커니즘: 컴파일러가 수습 코드를 적었는지 감시하지 않기 때문에(try-catch를 안 써도 컴파일은 통과됨) 프로그램 실행 전까지 오류를 인지하기 어려움. 철저한 코드 검증과 예외 처리가 동반되어야 함.
대표적인 자식 클래스들:
- NullPointerException : 객체 주소록이 비어있는 상태(null)인데 그 안의 변수나 메서드를 참조하려고 접근할 때 발생함.
- ArrayIndexOutOfBoundsException : 배열의 크기가 5인데 6번 인덱스 칸을 열어달라고 요청할 때 발생함.
- ArithmeticException : 정수를 0으로 나누는 등 수학적으로 불가능한 연산을 명령할 때 발생함.

◆ Java API Document 확인하는 예시

내가 쓰려는 자바 표준 메서드가 어떤 예외를 던지는지 알고 싶을 때 공식 API 문서를 확인하는 방법임. (주로 오라클 공식 사이트의 자바 API 문서를 기준함)

상황: 문자열을 정수로 바꿔주는 Integer.parseInt(String s) 메서드를 사용하려는 경우.
확인 순서:
- 1. 문서 검색창에 Integer 클래스를 찾고, 메서드 리스트 중 parseInt(String s) 명세서를 찾음.
  1. 메서드 선언부 하단의 "Throws" 항목을 정밀 확인해야 함.
  1. 문서를 보면 Throws: NumberFormatException 이라고 명시되어 있음. 그 옆의 설명을 읽어보면 *"문자열이 정수로 변환될 수 있는 형태가 아닐 때 발생한다"*고 적혀 있음.
  1. 결과 매핑: 개발자는 이 명세를 보고 아래와 같이 방어 코드를 아키텍처에 미리 심어둘 수 있음.
```
String input = "123abc"; // 숫자가 아닌 문자가 섞임

try {
    int num = Integer.parseInt(input); //   Throws 명세에 적힌대로 NumberFormatException 발생함
} catch (NumberFormatException e) {
    System.out.println("숫자 포맷이 잘못되어 기본값 0으로 초기화합니다.");
}
```

자바(Java)에서 예외를 수습하는 핵심 도구인 try - catch 문에 대한 구동 원리와 매커니즘 중심의 정리임.

◆ try - catch 문의 정의와 기능

정의: 프로그램 실행 중 발생할 수 있는 런타임 예외(오류)를 가로채서, 프로그램이 비정상적으로 죽지 않도록 방어막을 치는 제어문임.
기능: 예외가 발생했을 때 프로그램의 강제 종료를 막고, 개발자가 미리 준비한 우회 도로(대비책)를 따라 정상적인 실행 흐름을 유지시킵니다.

◆ try - catch 기본 구조 및 매커니즘

try 블록: 예외(오류)가 발생할 가능성이 있는 위험한 코드를 모아두는 공간임.
catch 블록: try 블록 안에서 진짜로 예외가 터졌을 때만 가동되는 비상 수습 공간임. 괄호 () 안에 수습하고자 하는 예외 객체의 타입을 명시해야 함.

◆ 예외 발생 시나리오별 구동 흐름

시나리오 ①: try 블록 내에서 예외가 발생한 경우 (비상 상황)

1. try 블록을 위에서부터 한 줄씩 실행하다가 예외가 발생하는 순간, 그 즉시 실행을 중단함 (밑에 남은 코드는 무시됨).
1. 발생한 예외 객체와 일치하는 타입을 가진 catch 블록이 있는지 위에서부터 차례로 검사함.
1. 일치하는 catch 블록을 찾으면 그 내부 코드를 실행하여 상황을 수습함.
1. try-catch 전체 문을 빠져나가 그 다음 줄의 코드를 정상적으로 이어서 실행함.

시나리오 ②: try 블록 내에서 예외가 발생하지 않은 경우 (평화 상황)

1. try 블록 안의 모든 코드가 정상적으로 끝까지 실행됨.
1. catch 블록은 실행되지 않고 통째로 패스됨.
1. try-catch 전체 문 아래의 코드를 이어서 실행함.

◆ 실무 코드 예시

❌ 예외 처리를 하지 않아 프로그램이 도중에 죽는 경우

public class Main {
    public static void main(String[] args) {
        System.out.println("프로그램 시작");
        
        int sVal = 10 / 0; //   런타임 에러 발생 (ArithmeticException)
        
        // 에러 발생으로 인해 아래 코드는 실행되지 못하고 강제 종료됨
        System.out.println("연산 결과: " + sVal); 
        System.out.println("프로그램 정상 종료");
    }
}

⭕ try - catch 로 예외를 수습하여 안전하게 실행하는 경우

Java

public class Main {
    public static void main(String[] args) {
        System.out.println("프로그램 시작");

        try {
            System.out.println("  [try] 연산을 시도합니다.");
            int sVal = 10 / 0; //   여기서 예외 발생! 즉시 catch 블록으로 순간이동함
            
            System.out.println("[try] 이 코드는 실행되지 않습니다."); 
        } catch (ArithmeticException e) {
            //   수습 가동
            System.out.println("⚠️ [catch] 에러 발생: 0으로 나눌 수 없어 결과를 0으로 처리합니다.");
        }

        //   수습이 완료되었으므로 아래 코드가 정상 실행됨
        System.out.println("프로그램 정상 종료");
    }
}

◆ 다중 catch 블록 활용 규칙 (상속 계층 고려)

하나의 try 블록 안에서 여러 종류의 예외가 발생할 수 있다면, catch 블록을 아래로 여러 개 덧붙여 다중 방어벽을 세울 수 있음.

이때 부모-자식 상속 계층에 따라 자식 예외 클래스를 무조건 상위에, 부모 예외 클래스를 하위에 배치해야 함.

try {
    int[] arr = new int[3];
    arr[5] = 100; //   ArrayIndexOutOfBoundsException 발생 가능성
    
    int num = Integer.parseInt("abc"); //   NumberFormatException 발생 가능성
} catch (ArrayIndexOutOfBoundsException e) {
    System.out.println("배열 인덱스 범위를 벗어났습니다.");
} catch (NumberFormatException e) {
    System.out.println("숫자로 바꿀 수 없는 문자열입니다.");
} catch (Exception e) {
    //   모든 예외의 조상인 Exception은 맨 마지막에 배치하여
    // 위에서 걸러지지 않은 예상치 못한 모든 예외를 최종 수습하는 안전장치로 씀
    System.out.println("알 수 없는 예외가 발생했습니다.");
}

자바(Java)에서 모든 예외와 오류의 시조이자 최상위 가리키는 설계도가 바로 Throwable 클래스임.

자바 프로그램에서 throw 키워드를 통해 던져질 수 있는(Throwable) 모든 객체는 반드시 이 클래스를 상속받아야 메모리 아키텍처 상에서 예외 시스템으로 인식됨.

◆ 1. Throwable 클래스의 계층적 위치

자바의 모든 객체의 조상인 Object 바로 아래에 위치하며, 자식으로 Error와 Exception 두 개의 거대한 기둥을 거느리고 있음.

java.lang.Object (최상위 객체)
- └── java.lang.Throwable (모든 예외/오류의 시조)
  - ├── java.lang.Error (대형 사고: 코드로 수습 불가)
  - └── java.lang.Exception (일반 예외: 코드로 수습 가능)

◆ 2. 두 종류의 후손(자식) 구별 핵심

Throwable을 상속받은 자식들은 성격이 완전히 극단적으로 나뉨.

Error 계열: JVM 내부 메모리 고갈(OutOfMemoryError), 스택 공간 오버플로우(StackOverflowError) 등 시스템 단위의 치명적인 결함임. 개발자가 코드 수준에서 try-catch로 가로채서 수습할 수 없으므로 무조건 프로그램이 죽음.
Exception 계열: 개발자의 실수나 사용자의 잘못된 조작으로 인해 일어나는 가벼운 오류 상황임. 예측이 가능하므로 try-catch로 잡아내어 우회 도로를 개설(수습)할 수 있음.

◆ 3. Throwable 클래스의 핵심 내장 메서드 기능

Throwable 클래스는 자식들에게 예외가 발생한 상세 원인과 경로를 추적할 수 있는 강력한 핵심 메서드들을 물려줌. 개발자가 예외 처리를 할 때 가장 많이 사용하는 기능들임.

① getMessage() : 에러 메시지 반환

예외 객체 내부에 저장된 발생 원인에 대한 핵심 요약 한 줄 코멘트(문자열)를 리턴함.
코드 예시: System.out.println(e.getMessage()); ➡️ 출력: "/ by zero" (0으로 나누었을 때)

② toString() : 예외 이름과 메시지 통합 반환

발생한 예외 클래스의 풀 네임(패키지 경로 포함)과 에러 메시지를 결합하여 문자열로 내놓음.
코드 예시: System.out.println(e.toString()); ➡️ 출력: "java.lang.ArithmeticException: / by zero"

③ printStackTrace() : 추적 경로 상세 출력 (가장 중요)

예외가 최초로 발생한 소스 코드의 위치(클래스명, 메서드명, 줄 번호)부터 시작해서, 어떤 경로를 거쳐 변수가 타고 내려왔는지 스택(Stack) 영역의 메모리 이동 행적을 화면에 빨간 글씨로 전부 쏟아냄.
예외 처리를 하더라도 이 메서드를 내부에 심어두어야 개발자가 나중에 로그를 보고 버그를 잡을 수 있음.

◆ 4. 실제 작동 및 메서드 활용 예시

Java

public class ThrowableExample {
    public static void main(String[] args) {
        try {
            int[] arr = new int[2];
            System.out.println(arr[5]); //   ArrayIndexOutOfBoundsException 발생
            
        } catch (Throwable t) { 
            //   다형성 아키텍처: Exception의 조상인 Throwable 타입으로도 모든 예외를 다 받아낼 수 있음
            
            System.out.println("1. getMessage 결과: " + t.getMessage());
            System.out.println("-------------------------------------");
            
            System.out.println("2. toString 결과: " + t.toString());
            System.out.println("-------------------------------------");
            
            System.out.println("3. printStackTrace 결과:");
            t.printStackTrace(); // 콘솔에 상세 추적 이력 출력
        }
    }
}

출력 결과 데이터 매핑:
- getMessage : "Index 5 out of bounds for length 2"
- toString : "java.lang.ArrayIndexOutOfBoundsException: Index 5 out of bounds for length 2"
- printStackTrace : 소스코드 몇 번째 줄에서 배열 방 번호 에러가 터졌는지 추적 경로를 로그로 출력함.

printStackTrace

◆ 1. printStackTrace()의 핵심 기능

스택 메모리 추적: 예외가 터지기 직전까지 가상 머신(JVM)의 Stack 영역에 어떤 메서드들이 순서대로 쌓여서 실행되고 있었는지 그 계보를 전부 찾아내어 파일명, 메서드명, 소스 코드 줄 번호(Line Number)까지 명시함.
비정상 종료 없는 확인: try-catch문으로 예외를 가로챘기 때문에 프로그램은 정상 구동 상태를 유지하지만, 이 메서드 덕분에 내부에 어떤 심각한 버그가 있었는지 개발자가 육안으로 추적할 수 있음.

◆ 2. 콘솔 출력 결과 해체 (로그 읽는 방법)

예외가 발생했을 때 printStackTrace()가 쏟아내는 빨간 글씨의 로그는 가장 아래쪽 줄부터 위쪽 줄 순서대로 읽어 올라가야 함.

맨 아랫줄: 프로그램의 시작점(main 메서드)임.
중간 줄들: main에서 어떤 메서드를 타고 들어갔는지 이동 경로를 나타냄.
맨 윗줄: 최종적으로 예외가 발생한 진짜 원인(예외 클래스 이름 및 메시지)과 사건이 터진 최종 소스 코드 위치임.

◆ 3. 실무 코드 및 출력 매핑 예시

일부러 메서드를 3단계로 거쳐서 예외를 발생시킨 뒤 printStackTrace()가 스택 메모리를 어떻게 역추적하는지 보여주는 구조임.

Java

public class Test {
    public static void main(String[] args) {
        try {
            methodA(); //   1. main에서 methodA 호출
        } catch (ArithmeticException e) {
            System.out.println("--- printStackTrace 출력 시작 ---");
            e.printStackTrace(); //   예외 추적 가동
            System.out.println("--- printStackTrace 출력 끝 ---");
        }
        System.out.println("프로그램은 죽지 않고 끝까지 실행됨");
    }

    public static void methodA() {
        methodB(); //   2. methodA에서 methodB 호출
    }

    public static void methodB() {
        int crash = 10 / 0; //   3. 여기서 최종 ArithmeticException 발생!
    }
}

실제 콘솔 출력 결과 데이터:

Plaintext

--- printStackTrace 출력 시작 ---
java.lang.ArithmeticException: / by zero
	at Test.methodB(Test.java:19)
	at Test.methodA(Test.java:15)
	at Test.main(Test.java:5)
--- printStackTrace 출력 끝 ---
프로그램은 죽지 않고 끝까지 실행됨

추적 경로 해독:
- 1. at Test.main(Test.java:5) ➡️ 5번째 줄에서 methodA()를 불렀음.
  1. at Test.methodA(Test.java:15) ➡️ 15번째 줄에서 methodB()를 불렀음.
  1. at Test.methodB(Test.java:19) ➡️ 19번째 줄에서 0으로 나누는 대형 사고가 터짐.
  1. java.lang.ArithmeticException: / by zero ➡️ 사고 원인은 수학적 연산 오류임.

◆ 4. 실무 운영 환경에서의 주의 사항 (보안 및 성능)

보안 취약점 발생: printStackTrace()는 소스 코드의 패키지 구조, 클래스명, 메서드명을 가감 없이 노출함. 만약 실제 서비스 중인 웹사이트 시스템 화면에 이 정보가 그대로 노출되면 해커에게 아키텍처 설계도를 넘겨주는 꼴이 되어 보안상 매우 위험함.
성능 저하: 이 메서드는 힙과 스택의 메모리 추적을 위해 시스템 자원을 생각보다 많이 소모함. 대규모 사용자가 몰리는 서버에서 남발하면 성능을 갉아먹음.
해결책: 현업 실무에서는 개발 중에만 콘솔로 확인하고, 실제 배포할 때는 콘솔 출력을 금지하며, Logback이나 log4j 같은 전문 로깅 라이브러리를 결합하여 안전한 파일 시스템 형태로 에러 로그를 기록 관리함.

자바(Java)에서 부모 클래스의 메서드를 자식 클래스에서 재정의하는 오버라이딩(Overriding)을 진행할 때, 메서드가 던지는 예외(Exception)에는 상속 관계에 따른 엄격한 아키텍처 규칙이 존재함.

자바 컴파일러는 다형성 구현 시 안정성을 보장하기 위해 이 규칙을 강제함. 핵심 규칙과 메커니즘을 팩트 위주로 해체함.

◆ 예외 오버라이딩의 대원칙: "확장 불가, 축소 가능"

자식 클래스에서 메서드를 오버라이딩할 때, 부모 메서드가 던지던 예외보다 더 크거나(상위 클래스) 더 많은 종류의 Checked 예외를 던질 수 없음. 즉, 예외의 범위를 좁히거나 아예 던지지 않는 방향(축소)으로만 오버라이딩이 허용됨.

⚠️ 준수해야 하는 3대 예외 규칙

더 상위의 예외 선언 불가: 부모 메서드가 IOException을 던진다면, 자식 메서드는 그 조상인 Exception이나 Throwable을 던질 수 없음.
새로운 Checked 예외 추가 불가: 부모가 선언하지 않은 완전히 새로운 Checked 예외(예: SQLException)를 마음대로 추가할 수 없음.
자식 예외 선언은 가능 (축소): 부모 메서드가 Exception을 던진다면, 자식 메서드는 그 자식 클래스인 IOException이나 NullPointerException으로 좁혀서 던지는 것이 가능함. 또한 예외를 아예 던지지 않도록 수정하는 것도 허용됨.

◆ 에러가 발생하는 잘못된 오버라이딩 예시

import java.io.IOException;
import java.sql.SQLException;

class Parent {
    //   부모 메서드는 IOException(Checked Exception)을 던지도록 설계됨
    public void process() throws IOException {
        System.out.println("부모 처리");
    }
}

class Child extends Parent {
    // ❌ 컴파일 에러 발생: 부모보다 더 광범위한 상위 예외(Exception)를 던질 수 없음
    @Override
    public void process() throws Exception { 
        System.out.println("자식 처리");
    }
}

class Child2 extends Parent {
    // ❌ 컴파일 에러 발생: 부모 설계도에 없던 새로운 Checked 예외(SQLException)를 추가할 수 없음
    @Override
    public void process() throws SQLException { 
        System.out.println("자식 처리 2");
    }
}

◆ 정상적으로 작동하는 올바른 오버라이딩 예시

import java.io.FileNotFoundException;
import java.io.IOException;

class Parent {
    public void process() throws IOException {
        System.out.println("부모 처리");
    }
}

class ChildGood1 extends Parent {
    // ⭕ 가능: 부모가 선언한 IOException의 하위(자식) 예외인 FileNotFoundException으로 범위를 좁힘
    @Override
    public void process() throws FileNotFoundException {
        System.out.println("자식 처리 1");
    }
}

class ChildGood2 extends Parent {
    // ⭕ 가능: 자식 메서드 내부에서 예외를 완벽히 수습하여 외부로 아예 안 던지도록 축소함
    @Override
    public void process() {
        System.out.println("자식 처리 2");
    }
}

◆이러한 제약 규칙이 존재하는 이유: 다형성 보장

자바 컴파일러가 왜 자식의 예외 확장을 막는지 다형성 호출 구조 관점에서 해체해야 함.

Java

public class Main {
    public static void main(String[] args) {
        //   다형성: 부모 타입 리모컨(Parent)으로 자식 객체(Child)를 조종함
        Parent obj = new Child(); 
        
        try {
            obj.process(); //   컴파일러는 리모컨 타입인 'Parent.process()'의 명세만 보고 코드를 검사함
        } catch (IOException e) {
            // 개발자는 부모 명세에 적힌 IOException만 잡도록 대비책(catch)을 세워둠
            System.out.println("부모가 선언한 예외 수습 완료");
        }
    }
}

메커니즘 비틀기: 만약 자식 클래스인 Child가 오버라이딩을 하면서 부모 몰래 SQLException이라는 완전히 새로운 예외를 던지도록 허용해 버렸다면 어떻게 될까?
실제 프로그램 실행 시 obj.process() 구동 도중 SQLException이 터져 흘러나오게 됨. 하지만 상위 main 메서드에는 오직 IOException만 잡는 방어막(catch)만 쳐져 있기 때문에, 이 예외를 가로채지 못하고 프로그램이 그 자리에서 강제 오류 종료되는 치명적인 구멍이 생김.
자바 컴파일러는 이러한 다형성 구동 시의 런타임 붕괴를 원천 차단하기 위해, 오버라이딩 시 부모가 선언한 예외의 울타리를 자식이 절대 넘어가지 못하도록 규제하는 것임.

◆ 예외 규칙의 유일한 예외: RuntimeException

Unchecked Exception(RuntimeException 계열)은 이 오버라이딩 제약 규칙에서 완전히 자유로움.
자식 클래스에서 오버라이딩할 때 부모 메서드가 선언하지 않은 NullPointerException이나 ArrayIndexOutOfBoundsException 같은 예외는 제한 없이 얼마든지 던지도록 추가할 수 있음.
이유: Unchecked 예외는 애초에 컴파일러가 try-catch 선언을 강제 감시하지 않는 영역이기 때문에 규칙 매핑 자체에서 제외하기 때문임.

데이터 이동 핵심 메커니즘인 입출력(I/O - Input/Output)과 스트림(Stream) 아키텍처를 팩트 기반으로 해체하여 정리함.

◆ 입출력(I/O)의 정의와 기능

정의: 컴퓨터 내부 프로그램과 외부 장치(파일, 키보드, 모니터, 네트워크, 메모리 등) 간에 데이터를 주고받는 일련의 행위를 의미함.
기능: * Input (입력): 외부 장치에 존재하는 데이터를 프로그램 메모리 안으로 읽어 들이는 기능 (Read 연산)
- Output (출력): 프로그램이 메모리상에서 연산한 데이터 결과물을 외부 장치로 내보내어 저장하거나 표시하는 기능 (Write 연산)

◆ 스트림(Stream)의 정의 및 핵심 개념

자바의 I/O는 스트림(Stream)이라는 모델을 통해 물리적인 장치 종류와 상관없이 동일한 방식으로 데이터를 제어함.

스트림의 정의: 데이터가 이동하는 '단방향 통로' 또는 '흐르는 물줄기'를 뜻함.
단방향성의 원칙: 하나의 통로(스트림)로는 한 가지 방향으로만 데이터가 흐를 수 있음. 즉, 입력과 출력을 동시에 처리할 수 없으므로 입력용 통로와 출력용 통로를 각각 별도로 개설해야 함.
FIFO (First-In-First-Out): 통로에 먼저 들어간 데이터가 반대쪽 끝으로 먼저 나오는 선입선출 구조를 따름.

◆ 스트림(Stream)의 3대 분류 기준

자바는 효율적인 자원 제어를 위해 스트림을 세 가지 기준(방향, 데이터 형태, 기능)에 따라 명확하게 분류함.

기준 ①: 데이터 흐름의 방향에 따른 분류 (단방향 원칙)

입력 스트림 (Input Stream): 대상 목적지로부터 프로그램으로 데이터를 밀어 넣어주는 읽기 전용 통로.
출력 스트림 (Output Stream): 프로그램 내부 데이터를 대상 장치로 밀어내 주는 쓰기 전용 통로.

기준 ②: 다루는 데이터의 최소 단주(형태)에 따른 분류

데이터 알맹이를 어떤 크기로 쪼개서 전송하느냐에 따라 물리적 처리 방식이 완전히 나뉨.

바이트 스트림 (Byte Stream): * 데이터를 1바이트(byte, 8bit) 단위로 가공 없이 그대로 주고받는 가장 원시적이고 강력한 통로임.
- 그림 파일(.jpg), 음악(.mp3), 동영상, 실행 파일(.exe) 등 모든 형태의 바이너리 데이터를 깨짐 없이 완벽하게 전송할 수 있음.
- 클래스 이름 접미사: 입력은 ~InputStream, 출력은 ~OutputStream 형식을 취함. (예: FileInputStream)
문자 스트림 (Character Stream):
- 데이터를 2바이트(2byte, 16bit) 단위로 쪼개어 전송하며, 전송 과정에서 자바 내장 인코딩(UTF-16 등) 규격에 맞춰 문자(Text)로 자동 번역해 주는 통로임.
- 오직 텍스트 파일(.txt, .csv, 소스 코드) 전용이며, 영어 외의 전 세계 문자(한글, 한자 등 2바이트 이상 문자)가 깨지지 않도록 보장함.
- 클래스 이름 접미사: 입력은 ~Reader, 출력은 ~Writer 형식을 취함. (예: FileReader)

기준 ③: 스트림의 역할 및 결합 아키텍처에 따른 분류

기반 스트림 (1차 스트림): 파일이나 메모리 같은 데이터 소스에 직접 빨대를 꽂아 통로를 개설하는 스트림임. 혼자서 데이터를 직접 퍼 올릴 수 있음. (예: FileInputStream, FileReader)
보조 스트림 (2차 스트림 / 필터 스트림): 데이터 소스에 직접 연결할 수 없음. 대신 이미 개설된 1차 기반 스트림 주변을 감싸서 버퍼 기능(속도 향상), 문자 인코딩 변환, 성능 업그레이드 등 부가 기능만 데코레이션해 주는 특수 스트림임. (예: BufferedInputStream, BufferedReader)

◆ File 클래스

하드디스크 같은 물리적 저장 장치에 존재하는 실제 파일이나 디렉터리(폴더)를 자바 객체 아키텍처로 추상화하여 제어하는 도구임.◆ File 클래스의 객체 형성(생성) 방식 및 메커니즘

절대 경로: 드라이브의 최상위 루트부터 파일이 있는 위치까지 전체 경로를 전부 다 적어주는 방식임.
- 예시: C:\java_project\test.txt
상대 경로: 현재 프로그램(프로젝트 폴더)이 실행되고 있는 위치를 기준점(./)으로 잡고 파일의 위치를 찾아가는 방식임. 경로 유연성이 높아 실무 아키텍처에서 훨씬 선호됨.
- 예시: src/data/test.txt

◆ File 객체 형성 및 핵심 메서드 제어 예시

Java

import java.io.File;
import java.io.IOException;

public class FileExample {
    public static void main(String[] args) {
        
        //   1. 디렉터리(폴더) 제어용 File 객체 형성
        File dir = new File("src/myFolder");
        
        //   2. 파일 제어용 File 객체 형성 (경로와 파일명 결합)
        File file = new File(dir, "sample.txt");

        try {
            // ◆ 물리적 폴더 생성 메커니즘
            if (!dir.exists()) { // 해당 경로에 폴더가 존재하지 않는다면
                dir.mkdir();     // 하드디스크에 진짜 폴더를 파냄
                System.out.println("  폴더 생성 완료");
            }

            // ◆ 물리적 파일 생성 메커니즘
            if (!file.exists()) {  // 해당 파일이 존재하지 않는다면
                file.createNewFile(); //   Checked Exception 발생하므로 try-catch 필수 구조, 진짜 파일 생성
                System.out.println("  파일 생성 완료");
            }

            // ◆ 형성된 File 객체를 통한 상태 데이터 조회 기능
            System.out.println("--------------------------------");
            System.out.println("파일 절대경로: " + file.getAbsolutePath());
            System.out.println("파일 크기(Byte): " + file.length());
            System.out.println("읽기 가능 여부: " + file.canRead());
            System.out.println("쓰기 가능 여부: " + file.canWrite());
            System.out.println("이것은 파일인가?: " + file.isFile());
            System.out.println("이것은 폴더인가?: " + file.isDirectory());
            System.out.println("--------------------------------");

            // ◆ 파일 삭제 메커니즘 (테스트 필요 시 주석 해제)
            // if (file.exists()) {
            //     file.delete(); // 물리 파일 삭제
            //     System.out.println(" ️ 파일 삭제 완료");
            // }

        } catch (IOException e) {
            // printStackTrace를 활용한 경로 역추적 에러 로그 출력
            e.printStackTrace(); 
        }
    }
}

◆ ⚠️ 주의 사항 및 구동 팩트

객체 생성 vs 물리 파일 생성 분리: File file = new File("test.txt"); 문장을 실행했다고 해서 하드디스크에 파일이 즉시 만들어지는 것이 아님. 단지 메모리 스택 영역에 주소 상자(자바 객체)만 파진 상태임.
존재 여부 확인 필수: 반드시 객체 형성 이후 file.exists() 메서드로 파일이 실제 하드디스크에 있는지 확인한 뒤, createNewFile()이나 mkdir() 메서드를 명시적으로 가동해야 물리 공간에 할당됨.

아래 코드는 상대 경로 구조를 사용하여 실제 파일 시스템에 물리적 파일과 폴더를 탄생시키고 속성을 조회하는 전체 시퀀스임.
File 객체를 생성하기 위해서는 대상 파일이 위치한 물리적 경로(Path) 문자열을 지정해야 함. 이때 경로는 두 가지 방식으로 매핑할 수 있음.
실제 파일 내부의 데이터 알맹이를 읽고 쓰는 기능은 없으며, 파일의 경로, 이름, 크기, 수정 날짜 등을 조회하거나 파일을 생성, 삭제, 이름 변경하는 등의 외형적 관리 기능만 수행함.