dev-emong.log

MCP (Model Context Protocol) 정리

dev-emong — Fri, 11 Sep 2026 10:23:12 +0900

AI 기반 개발을 하다 보면 “AI가 프로젝트를 제대로 이해하지 못한다”는 문제를 자주 겪게 된다.

이 문제를 해결하기 위해 등장한 개념이 바로 **MCP(Model Context Protocol)**이다.

1. MCP란 무엇인가

**MCP(Model Context Protocol)**는

AI 모델이 작업을 수행할 때 필요한 **문맥(Context)을 구조적으로 전달하기 위한 규칙(프로토콜)**이다.

즉,

AI에게 “지금 이 프로젝트에서 무엇을 기준으로, 어떤 정보로 작업해야 하는지”를 명확하게 전달하는 방법이다.

2. 왜 MCP가 필요한가

AI는 기본적으로 stateless하게 동작한다.

즉, 이전 맥락을 완벽하게 기억하지 못한다.

이로 인해 다음과 같은 문제가 발생한다.

프로젝트 구조를 이해하지 못함
어떤 파일을 수정해야 할지 판단 못함
코드 스타일이 일관되지 않음
매번 같은 설명을 반복해야 함

MCP는 이 문제를 해결하기 위한 문맥 전달 표준화 방식이다.

3. MCP의 핵심 개념

3-1. Context (문맥)

AI가 작업할 때 참고해야 하는 모든 정보

예시:

프로젝트 구조
코드 규칙
현재 작업 목표
기존 코드 스타일

MCP는 이 Context를 “정형화해서 전달”한다

3-2. Protocol (규칙)

Context를 어떻게 전달할지에 대한 규칙

즉:

어떤 형식으로 전달할지
어떤 순서로 전달할지
어떤 정보까지 포함할지

이걸 표준화한 것이 MCP

4. MCP 구조

MCP는 보통 다음과 같은 구조로 구성된다.

4-1. System Context

AI의 기본 행동 규칙

코드 스타일
금지 사항
설계 철학

예:

“DTO는 팩토리 메서드로 생성한다”
“서비스는 비즈니스 로직만 담당한다”

4-2. Project Context

프로젝트 자체 정보

디렉토리 구조
주요 모듈 역할
기술 스택

4-3. Task Context

현재 수행할 작업

무엇을 만들 것인지
어떤 문제를 해결할 것인지

4-4. Memory Context (선택)

이전 작업 기록

이전 결정 사항
과거 트러블슈팅
반복되는 패턴

5. MCP를 사용하는 이유 (핵심 장점)

5-1. AI의 이해도 상승

AI가 프로젝트를 “처음 보는 코드”가 아니라

“이미 알고 있는 코드”처럼 처리하게 된다.

5-2. 코드 일관성 유지

스타일 통일
구조 유지
규칙 준수

5-3. 반복 작업 감소

매번 설명할 필요 없이

MCP만 제공하면 된다.

5-4. 협업 효율 증가

팀원 + AI가 같은 기준으로 작업 가능

6. MCP vs 그냥 AI 사용

구분	일반 AI 사용	MCP 사용
문맥 전달	매번 직접 설명	구조화된 전달
일관성	낮음	높음
생산성	중간	높음
유지보수	어려움	쉬움

7. MCP 적용 방식

7-1. 문서 기반 MCP

예:

/docs
 ├─ rules.md
 ├─ architecture.md
 ├─ context.md

AI에게 이 문서를 기반으로 작업하도록 지시

7-2. 자동 생성 MCP

대표적인 방식:

프로젝트 분석 → context 문서 자동 생성

예: DeepInit 같은 방식

7-3. 프롬프트 기반 MCP

프롬프트에 직접 포함

예:

[Project Context]
- Spring Boot 기반 프로젝트
- DTO는 팩토리 메서드 사용

[Task]
- 로그인 API 구현

8. MCP를 잘 쓰는 방법 (실전 팁)

8-1. 규칙을 먼저 정의한다

AI보다 먼저 “팀 기준”이 있어야 한다

8-2. 문맥을 작게 쪼갠다

한 번에 다 넣지 말고

규칙
구조
작업

분리해서 관리

8-3. 자동화한다

수동으로 넣으면 결국 안 쓰게 된다

8-4. 지속적으로 업데이트한다

MCP는 “정적인 문서”가 아니라

프로젝트와 함께 성장하는 구조다

9. 한줄 정리

MCP는 AI에게 프로젝트의 “맥락(Context)”을 구조적으로 전달하기 위한 표준화된 방식이다.

10. 결론

AI를 제대로 활용한 개발을 하려면

단순히 “코드를 요청하는 것”에서 끝나면 안 된다.

중요한 건

AI가 이해할 수 있는 형태로 문맥을 설계하는 것

그리고 그 설계가 바로 MCP다.

JavaScript DOM 요소 선택 메서드 정리

dev-emong — Fri, 11 Sep 2026 10:22:26 +0900

웹 페이지에서 HTML 요소(DOM)를 선택하는 것은 자바스크립트의 가장 기본이자 중요한 기능이다.

이번 예제에서는 자주 사용하는 DOM 선택 메서드들을 직접 버튼으로 테스트해본다.

1. 예제 목적

다양한 DOM 선택 방식 이해
단일 요소 vs 여러 요소 선택 차이
선택한 요소의 텍스트를 읽어 화면에 출력하기

2. 사용된 HTML 구조

<divid="myId"class="box">ID: myId인 요소</div>
<divclass="myClass box">클래스: myClass인 요소 1</div>
<divclass="myClass box">클래스: myClass인 요소 2</div>
<divclass="myClass box">클래스: myClass인 요소 3</div>
<pclass="box">태그: p인 요소</p>

<divid="result"></div>

3. 결과 출력 영역

let resultdom =document.getElementById("result");

선택한 DOM 요소의 텍스트를 이 영역에 출력한다.

4. DOM 선택 방식 정리

① getElementById / querySelector (ID 선택)

let dom1 =document.querySelector("#myId");
resultdom.innerHTML = dom1.innerHTML;

ID는 하나만 선택
가장 빠르고 명확한 방식

② querySelector (CSS 선택자 방식)

let dom2 =document.querySelector("#myId");
resultdom.innerHTML = dom2.innerHTML;

CSS 선택자 그대로 사용
첫 번째 요소만 반환

③ querySelectorAll (여러 개 선택)

let domlist =document.querySelectorAll(".myClass");

let text ="";
for (let eof domlist) {
  text += e.innerHTML +"<br />";
}

resultdom.innerHTML = text;

여러 개 요소 반환 (NodeList)
반복문으로 처리 가능

④ getElementsByClassName 스타일 (예제에서는 querySelectorAll 사용)

let domlist =document.querySelectorAll(".box");

특정 클래스 전체 선택

⑤ getElementsByTagName 스타일 (태그 선택)

let domList =document.querySelectorAll("p");

let text ="";
for (let eof domList) {
  text += e.innerHTML +"<br />";
}

resultdom.innerHTML = text;

특정 태그 전체 선택

5. 메서드 비교 요약

메서드	반환	특징
getElementById	단일 요소	가장 빠름
querySelector	단일 요소	CSS 선택자
querySelectorAll	여러 요소	NodeList
getElementsByClassName	여러 요소	HTMLCollection
getElementsByTagName	여러 요소	HTMLCollection

6. 핵심 정리

하나만 찾을 때 → getElementById, querySelector
여러 개 찾을 때 → querySelectorAll
최신 개발에서는 querySelector, querySelectorAll 사용이 가장 일반적
반복문으로 요소들의 내용을 쉽게 조작 가능

트랜잭션 ACID 4가지 성질 정리

dev-emong — Fri, 11 Sep 2026 10:21:34 +0900

1️⃣ Atomicity (원자성)

“모두 성공하거나, 모두 실패한다”

트랜잭션 내부의 작업은 쪼개질 수 없는 하나의 단위
중간 상태는 절대 DB에 남지 않음

예시

START TRANSACTION;
INSERT INTO orders (...);
UPDATE productSET stock= stock-1;
-- 여기서 오류 발생
ROLLBACK;

➡ orders도 취소, stock도 원래대로

핵심 포인트

실패 시 Undo Log를 이용해 복구
부분 성공 ❌

2️⃣ Consistency (일관성)

“트랜잭션 전후로 데이터 규칙이 유지된다”

트랜잭션 전과 후의 DB 상태는 항상 유효
무효한 데이터 상태로 끝나면 안 됨

예시

재고(stock)는 음수가 될 수 없음
외래키(FK)는 반드시 존재해야 함
NOT NULL, UNIQUE 제약 유지

UPDATE productSET stock=-5;-- ❌

➡ 제약 조건 위반 → 트랜잭션 실패

핵심 포인트

비즈니스 규칙 + DB 제약조건
COMMIT되면 항상 “말이 되는 상태”

3️⃣ Isolation (격리성)

“동시에 실행돼도 혼자 실행된 것처럼 보인다”

여러 트랜잭션이 동시에 실행돼도

서로의 중간 결과를 침범하지 않음

예시

A 트랜잭션이 재고 감소 중
B 트랜잭션이 같은 상품 조회

➡ B는 정해진 격리 수준에 맞는 데이터만 본다

대표적인 문제

문제	설명
Dirty Read	커밋 안 된 데이터 읽음
Non-repeatable Read	같은 쿼리 결과가 달라짐
Phantom Read	갑자기 행이 생김

➡ 이를 제어하기 위해 격리 수준(Isolation Level) 존재

4️⃣ Durability (지속성)

“COMMIT되면 절대 사라지지 않는다”

COMMIT 완료 후
DB 서버 다운
전원 꺼짐
장애 발생

➡ 데이터는 반드시 보존됨

어떻게 보장하나?

Redo Log (WAL) 사용
디스크에 먼저 기록 → COMMIT

핵심 포인트

메모리가 아닌 디스크 기준
COMMIT은 “안전 저장 완료” 선언

ACID 한 줄 요약

성질	한 문장 요약
Atomicity	전부 성공 / 전부 실패
Consistency	규칙을 깨지 않음
Isolation	혼자 실행된 것처럼
Durability	커밋되면 영원히

정리

트랜잭션의 ACID는

원자성(전부 or 실패)

일관성(규칙 유지)

격리성(동시성 보호)

지속성(커밋 보존)을 의미하며

이를 통해 데이터의 신뢰성과 안정성을 보장합니다.

UI 구조 패턴과 이벤트 성능 최적화 기법 정리

dev-emong — Fri, 11 Sep 2026 10:20:40 +0900

UI(User Interface)는 단순히 화면을 그리는 요소가 아니라

사용자 입력 처리, 데이터 표시, 상태 변화 관리까지 포함하는 중요한 시스템이다.

UI가 복잡해질수록 다음과 같은 문제가 발생한다.

코드가 뒤섞임
유지보수 어려움
성능 저하
이벤트 관리 복잡

이 문제를 해결하기 위해 UI 시스템에서는 여러 구성 기법을 사용한다.

대표적으로 다음 세 가지 영역으로 나눌 수 있다.

1️⃣ UI 구조 패턴

2️⃣ UI 이벤트 시스템

3️⃣ UI 성능 최적화

이 글에서는 이 세 가지를 중심으로 UI 구성 기법을 정리한다.

1. UI 구조 패턴 (Architecture Pattern)

UI 구조 패턴은

UI 코드와 로직을 어떻게 분리할 것인가에 대한 설계 방식이다.

대표적인 패턴은 다음과 같다.

MVC
MVP
MVVM

MVC (Model - View - Controller)

개념

MVC는 UI 구조 패턴 중 가장 오래되고 기본적인 패턴이다.

구성 요소는 다음과 같다.

Model : 데이터 및 비즈니스 로직
View : 사용자에게 보여지는 UI
Controller : 사용자 입력 처리 및 흐름 제어

구조

User Input
    ↓
  View
    ↓
Controller
    ↓
  Model
    ↓
 View Update

특징

구조가 단순하다
이해하기 쉽다
작은 프로젝트에 적합

하지만 프로젝트가 커지면

Controller가 비대해지는 문제가 발생할 수 있다.

MVP (Model - View - Presenter)

개념

MVP는 MVC의 단점을 개선하기 위해 등장한 패턴이다.

구성 요소

Model
View
Presenter

구조

User Input
    ↓
  View
    ↓
Presenter
    ↓
 Model
    ↓
Presenter
    ↓
  View

특징

View는 최대한 수동적으로 동작
Presenter가 화면 로직을 담당
테스트하기 쉬운 구조

하지만

Presenter가 커지기 쉽다.

MVVM (Model - View - ViewModel)

개념

MVVM은 데이터 바인딩 기반 UI 패턴이다.

구성 요소

Model
View
ViewModel

구조

View ↔ ViewModel ↔ Model

특징

ViewModel이 UI 상태 관리
데이터 바인딩으로 자동 UI 업데이트
대규모 UI에 적합

대표 사용 환경

WPF
Flutter
Android
React

2. UI 트리 구조 (UI Tree / Widget Tree)

대부분의 UI 시스템은

UI 요소를 트리 구조로 관리한다.

즉 UI는 부모-자식 관계로 구성된다.

예시

Screen
 ├─ Header
 ├─ Panel
 │   ├─ Button
 │   └─ Text
 └─ Footer

이 구조를 UI Tree 또는 Widget Tree라고 한다.

특징

부모 - 자식 구조

UI 요소는 서로 계층 관계를 가진다.

레이아웃 관리

부모 UI가 자식 UI의

위치
크기
정렬

을 관리한다.

렌더링 순서

UI는 보통 트리 순서대로 그려진다.

Composite Pattern

UI 트리는 보통 Composite Pattern 기반이다.

UIElement
 ├─ Button
 ├─ Text
 └─ Panel
      ├─ Button
      └─ Text

Panel도 UIElement이고

Button도 UIElement이다.

즉 개별 요소와 그룹을 동일하게 처리할 수 있다.

3. UI 이벤트 시스템

UI는 단순히 보여주는 것뿐 아니라

사용자 입력을 처리해야 한다.

이때 중요한 개념이 **이벤트 전파(Event Propagation)**이다.

이벤트 버블링 (Event Bubbling)

이벤트 버블링은

자식 UI에서 발생한 이벤트가 부모 UI로 전달되는 구조

이다.

구조

Screen
 └─ Panel
     └─ Button

Button 클릭 시

Button
 ↓
Panel
 ↓
Screen

순서로 이벤트가 전달된다.

이벤트 버블링 장점

이벤트 위임 가능

부모 UI 하나만으로

여러 자식 이벤트를 처리할 수 있다.

코드 단순화

UI 요소마다 이벤트를 등록할 필요가 없다.

성능 개선

이벤트 리스너 수 감소

4. UI 성능 최적화

UI 시스템에서는 성능 최적화도 매우 중요하다.

특히 다음과 같은 비용이 발생한다.

객체 생성
UI 업데이트
레이아웃 계산
렌더링

이를 해결하기 위한 대표적인 기법이

Object Pool
Dirty Update

이다.

Object Pool

개념

Object Pool은

객체를 새로 생성하지 않고 재사용하는 방식

이다.

기존 방식

Create
Destroy
Create
Destroy

Object Pool 방식

Pool 생성
↓
객체 가져오기
↓
사용
↓
비활성화
↓
Pool 반환

사용 예

채팅 메시지 UI
아이템 슬롯 UI
알림 UI
리스트 UI

장점

객체 생성 비용 감소
GC 감소
안정적인 프레임 유지

Dirty Update

개념

Dirty Update는

변경된 UI만 업데이트하는 방식

이다.

예시

UI 구조

Screen
 ├─ Header
 ├─ Inventory
 └─ Footer

Inventory만 변경되면

Inventory만 업데이트

한다.

Dirty Flag

UI가 변경되면

dirty = true

표시가 되고

렌더링 단계에서

dirty UI만 업데이트

된다.

장점

불필요한 UI 계산 감소
렌더링 성능 향상
대규모 UI에 유리

5. UI 구성 기법 전체 구조

지금까지 설명한 UI 구성 기법을 정리하면 다음과 같다.

UI 시스템

├─ UI 구조 패턴
│   ├─ MVC
│   ├─ MVP
│   └─ MVVM
│
├─ UI 구조
│   └─ UI Tree / Widget Tree
│
├─ UI 이벤트 시스템
│   └─ Event Bubbling
│
└─ UI 성능 최적화
    ├─ Object Pool
    └─ Dirty Update

핵심 요약

UI 구성 기법은 크게 세 가지 영역으로 나눌 수 있다.

UI 구조

MVC
MVP
MVVM

UI 코드와 로직을 분리하는 설계 방식

UI 구조 관리

UI Tree
Composite Pattern

UI 요소를 계층 구조로 관리

UI 이벤트 시스템

Event Bubbling

이벤트를 트리를 따라 전달

UI 성능 최적화

Object Pool
Dirty Update

UI 성능을 개선하는 기법

마무리

UI 시스템은 단순히 화면을 만드는 기술이 아니라

구조 설계
이벤트 처리
성능 최적화

까지 포함된 하나의 종합적인 시스템 설계 영역이다.

UI가 복잡해질수록

이러한 구성 기법들을 적절히 활용해야

유지보수성
확장성
성능

을 모두 확보할 수 있다.

Ubuntu에서 nginx 구조 확인 & index.html 수정하기

dev-emong — Fri, 11 Sep 2026 10:19:51 +0900

1️⃣ nginx 설치 위치 찾기

find / -name nginx

✔ 의미

시스템 전체에서 nginx 관련 경로 검색
주요 경로 확인 가능

대표 경로

/etc/nginx          # 설정 파일
/usr/share/nginx    # 정적 파일(html)
/var/log/nginx      # 로그

2️⃣ nginx 설정 폴더 확인

cd /etc/nginx

✔ 주요 파일

파일	역할
nginx.conf	메인 설정
sites-enabled	실제 적용되는 설정
sites-available	설정 템플릿

3️⃣ 파일 상세 정보 확인

ls

ls -l

✔ 해석

drwxr-xr-x

의미

d → 디렉토리
rwx → 권한

4️⃣ index.html 위치 찾기

find / -name index.html

5️⃣ index.html 위치 이동

cd /usr/share/nginx/html
ls

기본 웹 페이지 파일 존재

index.html

6️⃣ index.html 내용 확인

cat index.html

기본 내용

<h1>Welcome to nginx!</h1>

7️⃣ 파일 수정 준비 (nano 설치)

apt install nano

8️⃣ index.html 수정

nano index.html

✔ 수정 예시

<h1>Good Good</h1>

9️⃣ 저장 및 종료

nano 저장 방법

Ctrl + O → Enter → Ctrl + X

또는

Ctrl + X → Y → Enter

결과 확인

브라우저 접속

http://localhost:포트번호

핵심 개념 정리

1. nginx가 보는 파일 위치

무조건 이거다

/usr/share/nginx/html/index.html

2. 구조 이해

경로	역할
/etc/nginx	설정
/usr/share/nginx/html	웹 페이지
/var/log/nginx	로그

3. Docker에서 중요한 포인트

컨테이너 안에서 수정한 파일은

❗ 컨테이너 종료하면 사라진다

스프링 AOP 개념과 횡단 관심사 분리 정리

dev-emong — Fri, 11 Sep 2026 10:18:50 +0900

1. AOP란 무엇인가

AOP는 Aspect Oriented Programming, 즉 관점 지향 프로그래밍이다.

객체 지향 프로그래밍(OOP)이 객체를 중심으로 설계를 나누는 방식이라면,

AOP는 공통 기능을 하나의 관점(Aspect)으로 분리하여 관리하는 방식이다.

스프링에서 AOP는 주로 다음과 같은 공통 기능을 처리하기 위해 사용된다.

로깅 처리
트랜잭션 관리
권한/인증 검사
실행 시간 측정
예외 처리
캐싱 처리
유효성 검사

이처럼 여러 기능에 반복적으로 등장하는 로직을 횡단 관심사(Cross-cutting Concern) 라고 한다.

AOP는 이 횡단 관심사를 분리하여 핵심 비즈니스 로직을 깔끔하게 유지하도록 돕는 기술이다.

2. 왜 AOP가 필요한가

웹 애플리케이션을 개발하다 보면 다음과 같은 코드가 반복된다.

long start=System.currentTimeMillis();
// 실제 비즈니스 로직 실행
long end=System.currentTimeMillis();
System.out.println("실행 시간: "+ (end-start));

이런 로직이 여러 서비스 메서드에 반복되면 다음과 같은 문제가 발생한다.

중복 코드 증가
유지보수 어려움
핵심 로직 가독성 저하
공통 기능 수정 시 전체 수정 필요

AOP는 이러한 문제를 해결하기 위해 등장한 개념이다.

공통 기능을 따로 모아서 필요한 지점에 자동으로 적용함으로써 코드 중복을 제거하는 것이 목적이다.

3. AOP의 핵심 개념 정리

AOP를 이해하기 위해 반드시 알아야 할 용어들이 있다.

3.1 Aspect

Aspect는 공통 기능을 모아놓은 모듈이다.

예를 들어, 로깅 처리 모듈 하나가 하나의 Aspect가 된다.

3.2 Advice

Advice는 공통 기능이 실제로 실행되는 코드이다.

즉, 언제 실행할지를 정의하는 부분이다.

종류는 다음과 같다.

@Before : 대상 메서드 실행 전에 수행된다.
@After : 대상 메서드 실행 후 수행된다.
@AfterReturning : 정상 반환 후 수행된다.
@AfterThrowing : 예외 발생 시 수행된다.
@Around : 대상 메서드를 감싸서 전후 모두 제어한다.

실무에서는 @Around를 가장 많이 사용한다.

3.3 Join Point

Join Point는 Advice가 적용될 수 있는 지점이다.

스프링 AOP에서는 기본적으로 메서드 실행 지점이 Join Point가 된다.

3.4 Pointcut

Pointcut은 Advice를 적용할 대상을 지정하는 조건이다.

예를 들어 다음과 같이 설정할 수 있다.

특정 패키지의 모든 Service 클래스
특정 어노테이션이 붙은 메서드
특정 이름 패턴을 가진 메서드

Pointcut을 통해 Join Point 중 실제 적용 대상을 선택한다.

3.5 Target

Target은 공통 기능이 적용되는 실제 객체이다.

3.6 Proxy

스프링 AOP의 핵심은 Proxy이다.

스프링은 원본 객체 대신 프록시 객체를 만들어 호출을 가로챈다.

호출 흐름은 다음과 같다.

클라이언트 → 프록시 → (Advice 실행) → 실제 대상 객체

즉, 우리가 호출하는 객체는 실제 객체가 아니라 프록시 객체이다.

4. 스프링 AOP의 동작 원리

스프링 AOP는 프록시 기반 방식으로 동작한다.

프록시는 두 가지 방식으로 생성된다.

4.1 JDK Dynamic Proxy

인터페이스 기반 프록시이다.
대상 클래스가 인터페이스를 구현하고 있어야 한다.

4.2 CGLIB Proxy

클래스 상속 기반 프록시이다.
인터페이스가 없어도 동작한다.
final 클래스나 final 메서드는 제한이 있다.

스프링은 상황에 따라 두 방식 중 하나를 자동으로 선택한다.

5. Around Advice가 가장 많이 사용되는 이유

@Around는 대상 메서드를 직접 감싸는 방식이다.

다음과 같은 작업이 가능하다.

메서드 실행 전 로직 수행
메서드 실행 여부 결정
메서드 실행 후 로직 수행
예외 처리
실행 시간 측정

즉, 메서드 호출을 완전히 제어할 수 있다.

그래서 실무에서는 @Around를 가장 많이 사용한다.

6. AOP 사용 예시 영역

스프링 내부에서도 AOP가 많이 사용된다.

대표적인 예시는 다음과 같다.

@Transactional → 트랜잭션 관리
@Cacheable → 캐시 처리
Spring Security → 권한 검사

이 기능들 모두 내부적으로 프록시 기반 AOP를 활용하고 있다.

7. AOP 사용 시 주의해야 할 점

7.1 Self Invocation 문제

같은 클래스 내부에서 메서드를 호출하면 프록시를 거치지 않는다.

예를 들어,

this.methodB();

이 경우 AOP가 적용되지 않을 수 있다.

프록시는 외부에서 호출될 때만 개입하기 때문이다.

7.2 final 메서드 문제

CGLIB는 상속 기반이므로 final 메서드는 오버라이드가 불가능하다.

따라서 AOP 적용에 제한이 생길 수 있다.

7.3 디버깅 난이도 증가

AOP를 과도하게 사용하면 실제 호출 흐름이 보이지 않아 디버깅이 어려워질 수 있다.

공통 기능에만 사용하는 것이 바람직하다.

8. AOP vs Filter vs Interceptor 차이

구분	동작 위치	주요 용도
Filter	서블릿 레벨	요청/응답 전처리
Interceptor	스프링 MVC 레벨	컨트롤러 전후 처리
AOP	스프링 Bean 메서드 레벨	비즈니스 공통 로직

HTTP 요청 흐름을 제어하려면 Filter나 Interceptor를 사용한다.

비즈니스 로직의 공통 기능을 처리하려면 AOP를 사용한다.

9. 정리

스프링 AOP는 프록시 기반으로 동작하는 공통 기능 분리 기술이다.

비즈니스 로직과 횡단 관심사를 분리하여 코드 중복을 제거하고 유지보수를 용이하게 만든다.

핵심은 다음과 같다.

Aspect는 공통 기능 모듈이다.
Advice는 실제 실행 코드이다.
Pointcut은 적용 대상 조건이다.
스프링 AOP는 프록시 기반으로 동작한다.
내부 호출(Self Invocation) 문제에 주의해야 한다.

AOP를 적절히 활용하면 코드 구조가 훨씬 깔끔해진다.

그러나 남용하면 디버깅과 유지보수가 어려워질 수 있다.

공통 기능에만 사용하는 것이 가장 이상적인 활용 방식이다.

Dart Record 타입으로 여러 값 반환하기

dev-emong — Fri, 11 Sep 2026 10:18:08 +0900

Dart 3부터는 record 타입을 사용할 수 있다. record는 여러 값을 하나로 묶어 전달할 때 쓰는 가벼운 데이터 구조다.

ex02/test05.dart와 ex02/test06.dart는 위치 기반 record, 이름있는 record, 그리고 record를 함수 반환값으로 사용하는 방법을 연습한다.

위치 기반 record

void main() {
  final user = ("코스", 10);
  print(user.$1);
  print(user.$2);
}

출력 결과는 다음과 같다.

코스
10

("코스", 10)은 두 값을 묶은 record다. 각 값에는 $1, $2처럼 위치 번호로 접근한다.

이 방식은 간단하지만 값의 의미가 이름으로 드러나지 않는다. $1이 이름인지, $2가 나이인지 코드를 읽는 사람이 문맥으로 추측해야 한다.

타입을 명시한 record

(String, int) user2 = ("메타", 20);
print(user2.$1);
print(user2.$2);

출력 결과는 다음과 같다.

메타
20

(String, int)는 첫 번째 값이 String, 두 번째 값이 int인 record 타입을 뜻한다. Dart는 record 안의 각 위치에 들어갈 타입을 알고 있다.

이름있는 record

({String name, int age}) user3 = (name: "메타", age: 20);
print(user3.name);
print(user3.age);

출력 결과는 다음과 같다.

메타
20

이름있는 record는 값에 이름을 붙인다. 그래서 $1, $2 대신 name, age로 접근할 수 있다.

읽는 입장에서는 이 방식이 훨씬 명확하다. user3.name은 이름이고, user3.age는 나이라는 의미가 바로 드러난다.

타입 추론과 이름있는 record

var user4 = (name: "쌀", age: 20);
print(user4.name);
print(user4.age);

출력 결과는 다음과 같다.

쌀
20

예제 주석에서는 이 형태를 많이 쓴다고 적고 있다. var를 사용해도 Dart가 record의 필드 이름과 타입을 추론한다.

var user4 = (name: "쌀", age: 20);

이 코드는 name이 String, age가 int인 이름있는 record로 추론된다.

함수에서 record 반환하기

record는 함수가 여러 값을 반환해야 할 때 유용하다.

({int id, String title}) download() {
  return (id: 1, title: "안녕");
}

download()는 id와 title을 함께 반환한다. 별도의 클래스를 만들지 않아도 두 값을 이름있는 구조로 묶어서 반환할 수 있다.

void main() {
  var data = download();
  print(data.id);
  print(data.title);
}

출력 결과는 다음과 같다.

1
안녕

data.id, data.title처럼 필드 이름으로 접근할 수 있으므로 반환값의 의미가 분명하다.

class 대신 record를 써도 되는 경우

record는 여러 값을 잠깐 묶어 전달할 때 좋다. 예를 들어 함수 내부에서 계산 결과 두 개를 반환하거나, 작은 값 묶음을 임시로 사용할 때 편하다.

하지만 앱의 중요한 도메인 개념을 표현한다면 class가 더 적합할 수 있다.

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});
}

User처럼 의미가 분명하고 여러 곳에서 재사용될 데이터라면 class로 이름을 붙이는 편이 좋다. record는 가벼운 묶음이고, class는 개념에 이름을 붙인 모델이라고 볼 수 있다.

Flutter에서 왜 중요한가

Flutter와 Dart 코드를 작성하다 보면 함수에서 두 개 이상의 값을 반환하고 싶은 순간이 생긴다. 예전에는 작은 class를 만들거나 Map을 반환하는 방식으로 처리하는 경우가 많았다.

record를 사용하면 타입 안정성을 유지하면서도 간단하게 여러 값을 반환할 수 있다.

final result = await loadUserSummary();
print(result.name);
print(result.age);

다만 화면 상태나 API 모델처럼 오래 유지되는 데이터 구조는 record보다 class나 DTO로 표현하는 편이 읽기 좋다.

핵심 정리

record는 여러 값을 하나로 묶는 Dart 3 문법이다.
위치 기반 record는 $1, $2처럼 접근한다.
이름있는 record는 name, age처럼 필드 이름으로 접근한다.
var를 사용해도 record의 필드 이름과 타입을 추론할 수 있다.
함수 반환값으로 record를 사용하면 여러 값을 타입 안전하게 반환할 수 있다.
잠깐 쓰는 값 묶음에는 record가 편하고, 중요한 도메인 개념에는 class가 더 적합하다.
Flutter 코드에서도 간단한 다중 반환값을 표현할 때 record가 도움이 된다.

Claude 모델 구조와 Constitutional AI 정리

dev-emong — Fri, 11 Sep 2026 10:17:45 +0900

1. Claude란 무엇인가

✔ 정의

Claude는 Anthropic이 개발한

Transformer 기반 LLM으로, Constitutional AI와 Long Context 처리에 특화된 모델이다.

✔ 한 줄 정의

자기 검열(Constitutional AI)을 통해 안정성을 강화하고, 긴 문맥을 효율적으로 처리하는 LLM

✔ 핵심 키워드

Constitutional AI
Long Context
Alignment 중심 설계

2. ⚙️ Claude의 구조 (Architecture)

✔ 기본 구조

GPT와 동일 계열

Transformer 기반
Decoder-only
Autoregressive

✔ 핵심 차이

구조 자체보다 “운영 방식”이 다름

GPT → 성능 + 범용성
Claude → 안정성 + 일관성

3. Constitutional AI (핵심 기술)

✔ 개념

사람이 일일이 피드백 주는 대신

AI가 스스로 규칙을 기반으로 답을 평가하고 수정

✔ 기존 방식 (RLHF)

여러 답변 생성
사람이 좋은 답 선택
보상 학습

사람 의존도 높음

✔ Claude 방식

답변 생성
“헌법(규칙)” 적용
스스로 수정

✔ 헌법(Constitution) 예시

해로운 내용 금지
정확성 유지
편향 최소화

✔ 결과

더 안전한 답변
일관성 높은 출력
과격한 응답 감소

4. Long Context 처리

✔ 개념

매우 긴 입력을 처리하는 능력

수십만 ~ 백만 토큰

✔ 왜 중요한가?

기존 LLM:

긴 입력 → 성능 급감

Claude:

긴 문서 유지 가능

✔ 기술적 배경

Attention 최적화
메모리 효율 개선
Sparse / 효율적 Attention 구조

✔ 효과

코드베이스 분석 가능
긴 문서 요약 가능
대화 맥락 유지 가능

5. Claude의 동작 방식

✔ 기본 흐름

입력 → 토큰화
Transformer 처리
다음 토큰 생성

여기까지는 GPT와 동일

✔ 추가 단계 (중요)

Self-critique (자기 평가)

답변 생성
규칙 기반 평가
수정

✔ 결과

더 보수적이고 안정적인 출력

6. 핵심 기술적 특징

✔ 1) 안정성 중심 디코딩

공격적 생성 ❌
보수적 생성 ✅

✔ 2) 낮은 Hallucination

자기 검열 과정 존재

✔ 3) 긴 문맥 유지

context window 최적화

✔ 4) 구조적 단순성

GPT처럼 Dense 구조 유지
대신 alignment 강화

7. ⚠️ Claude의 한계

❌ 1) 과도한 보수성

답변이 지나치게 조심스러움

❌ 2) 창의성 제한

공격적 생성이 약함

❌ 3) 툴 연동 약함

GPT 대비 ecosystem 부족

❌ 4) 속도 문제

긴 context 처리 비용 큼

8. ⚔️ GPT vs Claude 기술 비교

항목	GPT	Claude
구조	Dense	Dense
정렬 방식	RLHF	Constitutional AI
출력 스타일	적극적	보수적
Hallucination	있음	상대적으로 적음
Context 길이	중간	매우 김

9. 설계 철학 차이

✔ GPT

“범용 + 성능 중심”

✔ Claude

“안정성 + 신뢰성 중심”

10. 핵심 요약

✔ 기술적 핵심

Transformer (Decoder-only)
Autoregressive 생성
Constitutional AI
Long Context 최적화

✔ 구조적 특징

스스로 답변을 검열하고 수정하는 모델

결론

Claude는 Transformer 기반의 LLM이지만,

기존 GPT 계열과 달리 Constitutional AI를 통해

모델이 스스로 답변을 평가하고 수정하는 구조를 가진다.

또한 긴 문맥(Long Context)을 효율적으로 처리할 수 있도록

Attention 구조를 최적화하여,

대규모 문서나 코드 분석에 강점을 보인다.

이러한 설계를 통해 Claude는

안정성과 신뢰성을 중시하는 LLM으로 자리잡고 있다.

자바스크립트 변수 선언과 동적 타입 정리

dev-emong — Fri, 11 Sep 2026 10:17:06 +0900

자바스크립트에서 변수(variable) 는 값을 저장하기 위한 공간이다.

다른 언어(Java, C# 등)와 달리 타입을 미리 지정하지 않는 동적 타입 언어라는 특징을 가진다.

1️⃣ 변수 선언과 초기화

✅ 변수 선언

let n1;
console.log(n1);// undefined

변수를 선언했지만 값을 넣지 않은 상태
이때 변수의 값은 자동으로 undefined

선언은 되었지만 값은 없다

✅ 변수 초기화

let n2 =1;
console.log(n2);// 1

변수를 선언하면서 처음 값을 할당
이 과정을 초기화(initialization) 라고 한다

2️⃣ 자바스크립트의 타입 특징 (동적 타입)

자바스크립트는 변수에 타입을 명시하지 않는다.

값이 들어가는 순간 타입이 결정된다.

let n3 =10;
console.log(typeof n3);// number

정수(int)와 실수(double)를 구분하지 않음
모두 number 타입

let n4 =10.5;
console.log(typeof n4);// number

JS에는 숫자 타입이 하나뿐이다 (**number**)

3️⃣ 문자열 (string)

기본 문자열

let n5 ="문자열";
console.log(typeof n5);// string

문자열 안에 따옴표 포함

let n6 ='문자열 "안녕"';
console.log(n6);
console.log(typeof n6);// string

작은 따옴표 ' 와 큰 따옴표 " 모두 사용 가능
서로 섞어서 사용하면 편리함

템플릿 문자열 (Template Literal)

let n7 =`문자열 ${n4}`;
console.log(n7);// 문자열 10.5
console.log(typeof n7);// string

백틱(`) 사용
${} 문법으로 변수 삽입 가능
문자열 결합보다 가독성이 좋음

4️⃣ 불리언 (boolean)

let n8 =true;
console.log(n8);// true
console.log(typeof n8);// boolean

참(true) / 거짓(false)
조건문(if), 반복문에서 핵심적으로 사용됨

5️⃣ null과 undefined의 차이 ⭐ (중요)

undefined

let n1;
console.log(n1);// undefined

값이 아직 할당되지 않음
자바스크립트가 자동으로 부여

null

let n9 =null;
console.log(n9);// null
console.log(typeof n9);// object ❗

의도적으로 비어있음을 표현
개발자가 직접 넣는 값

⚠️ 주의

typeofnull ==="object"// true

자바스크립트의 오래된 버그
실제로는 객체가 아님

6️⃣ 콘솔 출력 결과 정리

값	typeof 결과
undefined	undefined
10, 10.5	number
"문자열"	string
`문자열 ${n4}`	string
true	boolean
null	object (버그)

7️⃣ 핵심 요약

✔ 자바스크립트는 동적 타입 언어

✔ 변수 선언은 let, 값이 들어가야 타입이 결정됨

✔ 숫자는 모두 number

✔ 문자열은 ", ', ` 사용 가능

✔ undefined = 값이 없음 (자동)

✔ null = 비어있다고 명시 (수동)

✔ typeof null === "object" 는 유명한 JS 버그

✍️ 한 줄 정리

자바스크립트의 변수는 타입보다 값이 중요하며, 실행 시점에 타입이 결정된다.

JSP 템플릿 엔진과 Model 1 구조 정리

dev-emong — Fri, 11 Sep 2026 10:16:13 +0900

3. JSP란?

HTML + Java 코드를 섞어서 작성하는 서버 페이지

프로젝트 경로

C:\workspace\web_history_lab\v3

build.gradle의 dependencies에 탬플릿 추가

// JSP 엔진(톰캣 Jasper)
implementation 'org.apache.tomcat.embed:tomcat-embed-jasper'

// JSTL (EL, core 태그)
implementation 'jakarta.servlet.jsp.jstl:jakarta.servlet.jsp.jstl-api'
implementation 'org.glassfish.web:jakarta.servlet.jsp.jstl'

폴더 경로 설정

/resources/META-INF/resources

4. JSP 예제

index.jsp

<!-- jsp - 자바 서버 페이지 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>index 페이지</h1>
    <% int num = 10; %>
    <h3>값 : <%=num%></h3>
  </body>
</html>

의미

문법	의미
<% %>	자바 코드
<%= %>	자바 값 출력

5. JSP는 어떻게 동작할까?

핵심 개념

JSP는 바로 실행되지 않는다.

실제 내부 과정

index.jsp
   ↓ (템플릿 엔진)
index_jsp.java (서블릿으로 변환)
   ↓
컴파일
   ↓
실행
   ↓
HTML 생성 → 브라우저

브라우저에서 바로 열리는것이 아닌 자바에서 컴파일을 통해 브라우저가 읽을 수있는 데이터로 변환한 후 변환된 데이터를 브라우저에게 전달한다

<!-- jsp - 자바 서버 페이지 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>index 페이지</h1>
    <% int num = 10; %>
    <h3>값 : <%=num%></h3>
  </body>
</html>

6. 그럼 JSP = 서블릿이랑 뭐가 달라?

항목	서블릿	JSP
HTML 작성	자바 문자열	그냥 HTML
가독성	나쁨	좋음
유지보수	어려움	쉬움
디자이너 협업	불가	가능
내부 동작	직접 작성	서블릿으로 변환

JSP는 “서블릿을 자동으로 만들어주는 템플릿”

7 JSP를 서블릿으로 직접 바꾸면?

package com.example.v3;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/index.jsp")
public class MyServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int num = 10;
        String html = """
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8" />
                        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                        <title>Document</title>
                    </head>
                    <body>
                        <h1>index 페이지</h1>

                        <h3>값 : <%=num%></h3>
                    </body>
                    </html>
                """.replace("<%=num%>", num + "");
        resp.setContentType("text/html; charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.println(html);
    }
}

→ JSP 내부적으로 이런 서블릿으로 변환됨

즉:

JSP = 서블릿 자동 생성기

이렇게 변환 시켜주는것을 템플릿 엔진이 처리한다

8. JSP의 장점

HTML 그대로 작성
자바 코드 삽입 가능
생산성 ↑
유지보수 ↑
협업 가능

9. JSP의 단점 (중요)

① 공통 로직 처리 불가

로그인 검사
권한 체크
공통 데이터 처리

중앙에서 통제 불가

② UI + 비즈니스 로직 혼합

HTML + DB 조회 + 조건문 + 반복문

코드 스파게티

10. 이 구조를 뭐라고 부르냐?

Model 1 패턴

특징:

JSP 하나가 다 함
화면 + 로직 + DB

11. 그래서 또 진화함

문제 해결:

MVC 패턴 등장 (Model 2)

12. 한 줄 요약

JSP는 HTML 안에 자바 코드를 작성하고, 내부적으로 서블릿으로 변환되어 실행되는 3세대 서버 템플릿 기술이다.서블릿과 JSP는 대표적인 서버 사이드 렌더링 방식이다.