그렇게 방치하고 버려둔지 약 2년. 벨로그를 보다가 microsoft clarity 라는 기술을 접하게 되었다. 사용자의 커서 이동, 스크롤, 접속 횟수 등 내가 배포한 웹 서비스에 대해 데이터를 정리해서 보여주는 서비스였다. 가장 좋은 것은 '영구 완전 무료'.

너무 신기해서 바로 DueDateTimer 프로젝트를 가져와서 적용해 보았다.

사용법은 정말 간단하다.

먼저 microsoft의 Clarity 사이트에 접속한다.

+새 프로젝트 버튼을 누르고

성명에는 Clarity에서 사용할 이름을, 웹 사이트 URL에 배포한 사이트 URL 주소를, 웹 사이트 업계에는 서비스 분야를 선택해주면 끝이다.

아마 웹 사이트 뿐만 아니라 앱 어플리케이션에도 사용 가능한 것 같다.

그리고 시간이 지나서 데이터가 쌓이면

위와 같은 대시보드 창이 출력된다.

나는 첫 대시보드 화면을 접하기까지 약 2시간이 소요된 것 같다.

빨간색 동그라미로 표시해놓은 동영상 카메라 같은 부분을 클릭하면

다음과 같은 화면이 보인다. 맨 왼쪽 재생 버튼을 누르면 사용자의 웹사이트 마우스 커서 이동을 영상으로 만들어서 보여준다.

사용하고 분석해본 결과, 화면이 회색이 되면 마우스가 해당 웹사이트를 벗어났다는 것 같고 클릭을 많이할수록 마우스 부분이 빨간색으로 표현된다. 단순 마우스 이동 경로는 주황색으로 표현된다.

오른쪽에는 웹사이트 사용시간, 마우스 클릭 횟수, 페이지 (화면 이동 횟수) 가 간단하게 보여진다.

위 이미지와 같이 마우스 이동 경로가 주황색 선으로 표현된다. 그리고 왼쪽에는 세션 인사이트라고 하여 유저의 서비스 이용 내용에 대하여 정리를 해주는 부분이 있다.

새로운 기술을 접하면 일단 무조건 사용을 해보는게 중요해진 시대가 된 것 같다.

분류 모델의 성능을 평가할 때, 4가지의 값을 사용한다. TP, FP, FN, TN

TP => True + Positive FP => False + Positive FN => False + Negative TN => True + Negative

먼저 뒷부분(Positive, Negative)은 모델의 예상값 을 의미한다. Positive라면, '맞다' 혹은 '있다' 와 같은 긍정의 의미를 지닌다. 반면 Negative라면 '틀리다', '없다'의 의미가 된다.

반면 앞부분(True, False)은 모델 예상값의 정답 여부 를 의미한다. True라면 모델 예상값이 맞다는 것을, False라면 모델 예상값이 틀렸다는 것을 의미한다.

예를 들어, 이미지에서 사람이 있는지 없는지 찾는 모델이 있다고 가정해보자. 사람이 있는 곳을 찾고 실제로 해당 이미지에 사람이 있다면, P (모델의 예상 : 있다. 즉, Positive) T (모델 예상 값 정답 여부 : True / 실제로 있기 때문) => 합쳐서 TP 이런 식으로 분류 모델의 성능을 평가하게 된다.

모델이 예상값을 틀리는 FP와 FN의 경우 헷갈렸다. 너무 헷갈려서 그림으로 정리해 보았다.

따라서 FP는 모델이 이미지에 사람이 있다(Positive)고 예측했는데, False(오답)이기 때문에 실제 이미지에는 사람이 없는 것이다. 없는데 있다고 예측을 했기 때문에 '오탐'이 된다. FN는 모델이 이미지에 사람이 없다(Negative)고 예측했는데, False(오답)이기 때문에 실제 이미지에는 사람이 있는 것이다. 있는데 없다고 예측을 했기 때문에 '미탐'이 된다.

Precision

모델이 '있다' 라고 예측한 것 중에서 실제로 맞은 비율이다. 즉, _P 들 중에서 TP 의 비율을 의미한다.

당연히 수식 또한 Precision = TP / TP + FP 가 된다. 위 이미지에서 파란색 네모들 중에서 TP 네모의 비율을 생각하면 이해가 쉽다.

Recall

실제 객체 중 모델이 찾아낸 비율을 의미한다. 위 이미지에서 사람이 있는 부분에 쳐진 두 개의 네모 (TP, FN) 중에서 TP 네모의 비율을 생각하면 된다.

cv2.imread() -> 이미지를 디스크에서 읽어들여 OpenCV의 NumPy 배열 형태로 로드한다.

*image.shape *

image.shape[0] -> Height image.shape[1] -> Width image.shape[2] -> Channels

image.size -> 전체 픽셀 수(Height x Width x Channels)를 의미한다.

image[y, x] -> (y,x) 위치의 픽셀(BGR) 정보를 배열 형태로 얻는다. => image[Height, Width]

OpenCV에서는 BGR (Blue, Green, Red) 순서가 기본이다. (보통은 RGB)

image[y, x][0] => Blue image[y, x][1] => Green image[y, x][2] => Red

코드로 공부하기

# Colab에 이미지 업로드
uploaded = files.upload()

# 업로드된 첫 번째 이미지 파일 이름 가져오기
filename = list(uploaded.keys())[0]

# 이미지를 BGR 컬러로 읽기
image = cv2.imread(filename, cv2.IMREAD_COLOR)

# 이미지 기본 정보 확인하기
print("이미지 크기 확인 (Height, Width, Channels) : ", image.shape)
print("이미지 전체 픽셀 수 : ", image.size)

# 특정 픽셀의 BGR 값 확인
# (100,100) 위치로 가정
y, x = 100, 100 

if y < image.shape[0] and x < image.shape[1]:
    px = image[y, x]
    print(f"({y},{x}) 위치 픽셀의 BGR 값 : ", px)
    print(f"({y},{x}) 위치 픽셀의 Blue 값 : ", px[0])
    print(f"({y},{x}) 위치 픽셀의 Green 값 : ", px[1])
    print(f"({y},{x}) 위치 픽셀의 Red 값 : ", px[2])    
else:
    print(f"이미지 크기가 작아서, {y},{x} 픽셀이 존재하지 않습니다.")

특정 범위 픽셀 변경하기

슬라이싱 방식

# 이미지 복사본 생성
image_copy = image.copy()

start_time = time.time()
rows = min(100, image_copy.shape[0])
cols = min(100, image_copy.shape[1])

# 슬라이싱을 이용한 특정 범위 변경
image_copy2 = image.copy()
start_time = time.time()
image_copy2[0:rows, 0:cols] = [255,255,255] # 검정색으로 변경
end_time = time.time()
print("%.6f seconds" %(end_time - start_time))

# 결과 이미지 보기
cv2_imshow(image_copy2)

ROI (Region of Interest) 추출 및 복사

ROI 추출

# ROI 추출 예시
image_copy3 = image.copy()

# 안전하게 min() 함수를 사용하여 이미지 범위 내에서만 추출
roi = image_copy3[20:min(150, image_copy3.shape[0]), 70:min(200, image_copy3.shape[1])]

# 잘라낸 ROI 확인
cv2_imshow(roi)

ROI 복사 후 다른 곳에 붙여넣기

# ROI를 다른 위치에 복사

# 이미지의 높이 정보를 가져와서 h_roi에 저장하고, 너비 정보를 w_roi 에 저장
h_roi, w_roi = roi.shape[:2]

# 이미지 끝 지점 지정
end_y = min(h_roi, image_copy3.shape[0])
end_x = min(w_roi, image_copy3.shape[1])

# 0부터 end_y까지, 0부터 end_x 까지를 roi 로 변경
image_copy3[0:end_y, 0:end_x] = roi

cv2_imshow(image_copy3)

!pip install opencv-python-headless

OpenCV 라이브러리 임포트

import cv2
from google.colab.patches import cv2_imshow

=> colab에서 이미지를 표시하기 위해 cv2_imshow 사용

OpenCV 이미지 읽어오기 (cv2.imread)

예시 코드)

img1 = 'cat.jpg'
img_color = cv2.imread(img1, cv2.IMREAD_COLOR)

cv2.imread(이미지 파일명, 색상 옵션)

색상 옵션 cv2.IMREAD_COLOR -> 컬러 이미지로 읽기 cv2.IMREAD_GRAYSCALE -> 흑백 이미지로 읽기 cv2.IMREAD_UNCHANGED -> 알파 채널까지 그대로 읽기

OpenCV 이미지 저장하기 (cv2.imwrite)

예시 코드 )

cv2.imwrite('saved_image.jpg', img_color)

=> cv2.imread()를 통해 읽어온 이미지를 img_color 라는 변수에 담았다가, 'saved_image.jpg'라는 파일명으로 저장.

cv2.imwrite(저장할 파일명, cv2.imread()로 읽어온 이미지 변수명)

OpenCV 이미지 색상 변환하기 (cv2.cvtColor)

예시 코드 )

img_gray = cv2.cvtColor(img_color, cv2.COLOR_BGR2GRAY)
cv2_imshow(img_gray)
cv2.imwrite('gray_image.jpg', img_gray)

cv2.cvtColor(cv2.imread()로 읽어온 이미지 변수명, 색상변환옵션)

색상 변환 옵션 cv2.COLOR_BGR2GRAY -> 컬러를 흑백으로 cv2.COLOR_BGR2HSV -> 컬러를 HSV로

OpenCV 이미지 크기 조정 (cv2.resize)

예시 코드 )

h, w = img_color.shape[:2]
img_resized = cv2.resize(img_color, (w//2, h//2)

OpenCV에서 이미지는 NumPy 배열 형태이다. (높이, 너비, 채널) 순서로 구성된 tuple 을 반환한다. 여기에서는 [:2]를 통해서 앞의 두 개 값(높이, 너비)만 가져오겠다는 뜻이다.

이미지 크기 변환을 위해 OpenCV에서는 cv2.resize(너비,높이) 순서로 값을 입력받는다.

OpenCV 이미지 블러 - 가우시안 블러

예시 코드 )

cv2.GaussianBlur(이미지파일명, (7,7), 0)

(7,7)은 커널 사이즈, 0은 자동 계산되는 표준 편차

cv2.GaussianBlur(cv2.imread()로 읽어온 이미지 변수명, 커널사이즈, 0)

OpenCV 이미지 블러 - 미디언 블러

예시 코드 )

cv2.medianBlur(이미지파일명, 7)

cv2.medianBlur(cv2.imread()로 읽어온 이미지 변수명, 커널사이즈)

OpenCV 이미지 크기 확인하기

cv2.imread()로 읽어온 이미지 변수명.shape

OpenCV 전체 픽셀 수 확인하기

cv2.imread()로 읽어온 이미지 변수명.size

LocalDateTime

import문

import java.time.LocalDateTime;

데이터 형태 2026-01-07T13:30:50

'날짜 + 시간' 데이터를 담는 형태로, 가장 많이 사용한다. 타임존은 없다.

MySQL DB를 기준으로 DB 테이블에서는 DATETIME 속성을 사용한다. 자바 LocalDateTime 과 1:1로 매칭된다. PostgreSQL DB를 기준으로는 timestamp without time zone 속성을 사용한다.

OffsetDateTime

import문

import java.time.OffsetDateTime;

데이터 형태 2026-01-07T13:30:50+09:00 날짜 + 시간 + UTC 기준 오프셋 데이터를 담는다. T를 기준으로 앞은 날짜, 뒤는 시간 그리고 +/- 뒤는 UTC를 기준으로 몇 시간 차이 나는 시간의 데이터라고 저장했다 라는 정보를 담는다.

한국의 경우, UTC 보다 +9시간이기 때문에 위 예시처럼 +09:00 라고 담는다. 만약 다른 국가에서도 해당 서비스를 이용해야 한다면, -09:00 시간을 해서 UTC 시간으로 맞춰주고 사용자가 선택한 국가에 맞게 +- 로 국가 시간에 맞춰서 데이터를 보여주면 된다.

LocalDate / LocalTime

LocalDate 는 날짜만 담고, LocalTime 은 시간만 담는다.

import문

import java.time.LocalDate;
import java.time.LocalTime;

데이터 형태 2026-01-07 13:35:40

사용 예시

DB에 TIMESTAMP started_at 과 TIMESTAMP ended_at 이라는 속성이 있다.

백엔드 Entity 폴더에서는

import jakarta.persistence.*;

@Entity
@Getter
@Setter
@Table(name= "테이블명") {
    @Column(name = "started_at")
    private LocalDateTime startedAt;

    @Column(name = "ended_at")
    private LocalDateTime endedAt;
}

다음과 같이 Entity를 선언해주면 된다.

chatGPT를 워크스페이스 형태로 유료로 사용하게 되면, 유료 사용 종료 이후에 gpt 첫 화면에서 위와 같은 화면을 마주하게 된다.

다시 '개인 계정' 워크스페이스로 전환을 해야 하는데, 어떤 것도 클릭이 불가하다. 그냥 단순한 뷰페이지 저게 다다.

방법이 하나 있다.

시크릿창을 열고, 똑같이 chatGPT를 들어간다. 아마 로그인되어 있지 않을 것이다. 동일한 계정의 로그인을 진행하고 유료 사용이 종료된 워크스페이스를 나가면 된다. 이후에 다시 원래 gpt 페이지로 돌아와서 새로고침(F5)을 해보면 원래 내 개인 계정 워크스페이스로 돌아온 것을 확인할 수 있다.

• 회귀 : 데이터들을 2차원 공간에 찍은 후에 이들 데이터들을 가장 잘 설명하는 직선이나 곡선을 찾는 것.

• 선형회귀 : 입력 데이터를 가장 잘 설명하는 기울기와 절편값을 찾는 무제. 선형회귀 기본식 -> f(x) = Wx + b 여기에서 기울기 W는 가중치 (weight) 절편 b는 바이어스 (bias)

• 단순선형회귀 : 입력 변수(x)가 하나일 때, 직선으로 데이터를 설명하는 회귀. f(x) = Wx + b

위 이미지와 같이 공부시간(입력변수 x 하나)에 따라 일정하게 출력값(y) 가 달라지는 경우에 단순선형회귀를 사용하면 된다.

• 다중 선형 회귀 : 입력 변수(x, y, z, ...) 가 여러 개일 때, 직선(평면)으로 데이터를 설명하는 회귀. 쉽게 말해 입력 변수가 여러 개이고, 입력 변수마다 가중치를 다르게 주는 방법이다.

• 손실 함수 : 예측이 얼마나 틀렸는지를 수치화하여 나타낸 것. 필요한 이유 : 회귀의 목표는 데이터를 가장 잘 설명하는 직선을 찾는 것인데, 이 직선이 잘 맞는지를 판단할 기준이 손실 함수이다. 기본식 : (예측값 - 정답값)을 제곱해서 모두 더해서 평균을 낸다.

많이 사용하는 손실 함수 (MSE)

어떤 w와 b를 넣어봤을 때 손실값이 최대한 작은 것을 구하는 것이 우리의 목표. 그런데 w, b가 어떤 값이 최소 손실값이 나올지 한 번에 알 수 없다. 이때 사용하는 것이 경사하강법.

• 경사하강법 : 손실을 줄이는 방향으로 w와 b를 조금씩 고쳐가는 방법. 목표 : argmin Loss(W, b) 경사하강법은 손실 함수를 최소화하기 위해 손실이 감소하는 방향으로 가중치와 바이어스를 반복적으로 조금씩 업데이트 하는 방법.

11장. KNN

• KNN 개념 : 새로운 데이터가 주어지면 기존 데이터들과의 거리를 계산한 뒤에 가장 가까운 K개의 이웃을 선택하고, 분류 문제의 경우 다수결로, 회귀 문제의 경우 평균값으로 예측한다.

분류 : 신규 데이터를 기존 그룹 중 어디에 속할지 판단하는 것.

KNN 장단점 장점 : 구현이 간단하고 학습 과정이 없다. 단점 : 데이터가 많아지면 느리다. 거리 계산 비용이 크다.

• Decision Tree 개념 : 스무고개 게임 (계속 질문을 던져서 데이터를 분류(예측)하는 모델.

위에서 아래로 내려가면서 판단. Root node : 처음 질문. Leaf node : 최종 결정.

Decision Tree 기본 파라미터. criterion : 노드를 분기할 때 사용하는 기준. max_depth : 트리의 최대 깊이. min_samples_split : 노드를 나누기 위한 최소 데이터 개수. (데이터가 너무 적을 때 쪼개지 않도록 막는다. ) min_samples_leaf : 리프 노드에 남아야 하는 최소 데이터 수.

Decision Tree 장점 : 데이터를 분류하는 논리의 흐름을 시각적으로 볼 수 있다. 코드의 이해가 쉽다. Decision Tree 단점 : 과적합에 빠지기 쉽다.

KNN : 거리 기반 Decision Tree : 질문 기반

12장. 퍼셉트론

• 퍼셉트론 개념 : 여러 입력을 받아 가중합을 계산한 뒤, 활성화 함수를 거쳐 출력을 내는 가장 기본적인 신경망. 퍼셉트론 구조 : z = w1x1 + w2x2 + … + wnxn + b 가중합 ⇒ z 입력 ⇒ x1, x2, x3, …, xn 퍼셉트론은 하나의 뉴런만을 사용한다. 다수의 입력을 받아서 하나의 신호를 출력하는 장치이다.

13장. 다층 퍼셉트론

• 다층 퍼셉트론 개념 : 입력층과 출력층 사이에 은닉층을 가지고 있는 신경망. 퍼셉트론에서는 계단함수를 활성화 함수로 사용했지만, 다층 퍼셉트론 (MLP)에서는 다양한 비선형 함수들을 활성화 함수로 사용한다. MLP에서 쓰는 활성화 함수 ⇒ Sigmoid, TanH, ReLU

• 역전파 알고리즘 출력에서 생긴 오차를 뒤쪽에서 앞쪽으로 전달하면서, 각 가중치를 얼마나 고쳐야 하는지 계산하는 방법.

가중치를 조절하는 과정 가중치를 증가시켰을 때 오차 감소 → 가중치 증가. 가중치를 증가시켰을 때 오차 증가 → 가중치 감소.

미분값 < 0 (미분값이 음수라면) 오른쪽으로 갈수록 계속 손실 감소. w 증가시켜야 한다.

미분값 > 0 (미분값이 양수라면) 오른쪽으로 갈수록 계속 손실 증가. w 감소시켜야 한다.

미분값이 음수라면, w 가중치를 증가시키고. 미분값이 양수라면, w 가중치를 감소시켜야. 손실값을 줄일 수 있다.

14장. 딥러닝

DNN (딥러닝)은 MLP(다층 퍼셉트론) 에서 은닉층의 개수를 증가시킨 것이다.

Gradient 소멸 문제 개념 : 은닉층이 많아질수록 역전파되는 기울기가 점점 작아져서 앞쪽 층의 가중치가 거의 학습되지 않는 현상. Gradient 소멸 발생 이유 : 시그모이드, 탄젠트 함수와 같은 활성화 함수의 작은 미분값이 역전파 과정에서 반복적으로 곱해지기 때문이다.

Gradient 폭발 문제 개념 : 역전파 중 기울기가 너무 커져 가중치가 발산하는 현상.

역전파 과정에서 실제로 전달되는 것은 ‘기울기’ w ← w - 학습률 x 기울기 기울기가 클 경우 많이 고치고, 기울기가 작을 경우 거의 안 고치고, 기울기가 0 이면 학습을 멈춘다.

역전파는 뒤에서 앞으로 기울기를 전달한다. 그리고 전달할 때마다 곱해진다.

은닉층이 많아질 때, 은닉층마다 기울기를 곱하니까 기울기값이 작다면 0에 수렴해진다.

가중치 초기화의 필요성 역전파에서 오차는 가중치가 곱해져서 전달되는데, 모든 가중치가 0이면 오차 역전파가 제대로 되지 않는다.

그래서 가중치 초기화는 그래디언트 소멸과 폭발을 방지하고, 신경망의 안정적인 학습을 위해 필요하다. Dropout (과적합 방지)의 효과랑 기능 파악하기. Dropout은 일부 뉴런을 랜덤하게 비활성화하여, 과적합을 방지하고, 모델의 일반화 성능을 향상시킨다.

15장. CNN

CNN (컨벌루션 신경망) 개념 : CNN은 이미지를 한 번에 보지 않고 작은 영역씩 보면서 특징을 뽑고, 중요한 정보만 남겨서 마지막에 분류하는 신경망이다.

CNN의 순서 (컨벌루션 → Pooling → 컨벌루션 → Pooling) → Flatten → Dense → 출력

컨벌루션 작은 필터(커널)가 이미지를 슬라이싱하면서 특정 패턴(엣지, 모서리 등)을 찾는다. 그러니까 작은 필터로 이미지 전체를 훑으면서 계산하는 연산이다. 필터 : 패턴을 검사하는 기준표. (패턴이 얼마나 강한지 계산) 필터가 많아질수록, 더 다양한 특징을 본다. 그 연산 결과를 특징맵이라고 한다. 필터가 1개라면 특징맵도 1개만 반환. 하지만 16개라면 특징맵도 16개 반환된다. 패턴을 검사하는 기준표이기 때문이다.

Feature Map ⇒ 컨벌루션 연산의 결과로 만들어진 ‘특징만 남은 이미지’

Pooling 연산 목적 : 특징맵의 크기를 줄여, 계산량과 과적합을 줄이기 위해서 사용. 폴링 종류 : Max Pooling, Average Pooling. Max Pooling (영역에서 최댓값), Average Pooling (영역에서 평균값)

Flatten 컨벌루션 결과는 2D 아니면 3D 데이터이다. 하지만 Dense 는 1D 벡터 데이터만 입력 가능하다. 그래서 Flatten 과정을 거쳐서 펴줘야 한다. 한줄 정의 : 특징맵을 1차원 벡터로 변환하는 연산. Dense 레이어는 최종 분류를 수행하는 층이다.

16장. 영상인식

왜 픽셀값을 255로 나눌까? ⇒ 픽셀값은 원래 0에서 255 사이의 값을 가진다. 그런데 이 값 그대로 가중치에 곱하면, 가중합 z 값의 숫자가 너무 커진다. 이 값이 그대로 활성화 함수로 들어가면 활성화 함수가 너무 커져 포화 구간에 들어가고, 이로 인해 미분값이 0에 가까워져 Gradient 소멸이 발생한다. 그래서 255로 나눠서 0~1 사이의 작은 값으로 바꿔준다.

데이터 증대 : 한정된 데이터에서 여러 가지로 변형된 데이터를 만들어내는 기법. 이미지를 회전, 이동, 반전하여 과적합을 방지하고 일반화 성능을 향상시킨다.

ImageDataGenerator : 이미지 데이터를 자동으로 전처리 + 증강해주는 도구.

rescale=1./255 ⇒ 픽셀값 정규화. rotation_range ⇒ 살짝 회전. width_shift_range ⇒ 좌우 이동. height_shift_range ⇒ 상하 이동. zoom_range ⇒ 확대/축소. horizontal_flip ⇒ 좌우 반전.

전이학습 : 이미 학습된 모델을 가져와 새 문제에 재사용하는 것. 장점 : 적은 데이터로도 가능하고 학습이 빠르고, 성능이 좋다. 단점 : 기존 데이터와 너무 다르면 성능 저하. 전이 3단계

1. 사전 학습된 모델 불러오기 (VGG, ResNet, MobileNet 등)
2. 기존 레이어 동결
3. 새로운 Dense 레이어 학습. (새 문제의 클래스에 맞게 새롭게 판단)

17장. 강화학습

• 강화학습 개념 : 정답을 주지 않고, 행동의 결과로 받은 ‘보상’을 기준으로 어떤 행동이 좋은지 스스로 배우는 학습 방법.

• 강화학습 구성 요소 Agent → 강화 학습의 중심이 되는 객체 Environment → 에이전트가 작동하는 물리적 세계 State → 에이전트의 현재 상황 (미로 게임이라면 에이전트의 위치가 된다) Action → 에이전트의 행동 Reward → 보상 (환경으로부터의 피드백)

Q테이블과 Q 함수 Q(s, a)는 상태 s에서 행동 a를 했을 때 앞으로 받을 ‘기대 보상’ Q테이블 행은 상태, 열은 행동, 값은 Q값. 처음에는 전부 값이 0이다. 우연히 목표에 도착하면 값이 채워지기 시작한다.

• 개념 : DB에서 데이터를 관리하는 4가지 기본 연산.
• C : Create (생성) R : Read (조회) U : Update (수정) D : Delete (삭제)

• 개념 : URL 로 식별하고, HTTP 메서드로 행위를 표현하는 API 설계 규칙이자, 아키텍처 스타일이다. 쉽게 정리해보면 데이터베이스의 테이블을 URL 로 노출하고, SQL 쿼리문을 HTTP Method 로 바꾸고. 결과 반환은 JSON 혹은 XML 로 반환해주는 형태이다.

• URL : 자원 위치 (DB)

• HTTP Method : 행위 (SQL 쿼리)

• HTTP Method GET : 조회 POST : 등록 PUT : 수정 DELETE : 삭제

이미지 출처 : https://velog.io/@somday/RESTful-API-%EC%9D%B4%EB%9E%80

첫 번째 방법.

.jsp 파일마다 설정하는 방법이 있다. jsp 파일의 맨 위에 아래 코드를 넣어주면 된다. 하지만 해당 jsp 뷰페이지만 한글이 깨지지 않는다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

두 번째 방법.

두 번째 방법은 web.xml 파일에 넣는 방법이다. 이렇게 하면 아예 모든 jps (view page)의 한글이 깨지지 않게 된다.

    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter
        </filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>

    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>```

✔️ 스프링 프레임워크의 설치는 javaJDK 설치가 완벽하게 끝나고, Path 경로까지 지정한 후에 진행해야 한다.

JDK 는 11 버전을, Path 경로는 아래와 같이 진행하였다. jdk 설치하고, path 경로 지정하는 방법

한 마디로 이클립스 위에서 자바 클래스가 온전하게 실행되는 상태에서 진행한다고 생각하면 편하다.

스프링의 경우 Spring 3.0.0 버전과 Spring 4.0.0 버전이 있는데, 스프링 프레임워크를 사용하기 위해서는 3점대 버전을 사용해야 한다. 4점대 버전부터는 스프링 '부트'이기 때문이다.

먼저, 스프링 3점대 버전을 구해서 설치해주어야 한다. 설치는 어렵지 않다.

문제는 설치를 마친 이후에, 처음 STS.exe 를 실행해주었을 때 프로젝트 생성을 위해 Spring Legacy Project를 선택해주는데

처음에는 위 이미지와 달리, Spring MVC Project 라는 선택지가 없다.

✔️ Spring MVC Project 프로젝트를 생성하기 위해서는 아래와 같이 진행하면 된다.

작업 폴더 위치 아래에 .metadata 이 아래에 .plugins이 아래에 있는 org.springsource.ide.eclipse.commons.content.core 폴더를 찾아야 한다.

이 안에 https-content.xml 파일을 넣어주어야 한다. https-context.xml 파일은 웹서핑을 통해서 어렵지 않게 구할 수 있다.

✔️ 여기까지 완료가 되면, STS.exe를 완전히 종료한 이후에 다시 실행하여 프로젝트를 생성하면 위 이미지와 같이 'Spring MVC Project' 선택지가 생긴 것을 확인할 수 있다.

next 버튼을 누르게 되면 다음과 같은 화면이 나오는데, 도메인을 지정해주는 설정 사항이다. 반드시 단어1.단어2.단어3 와 같이, 3개의 구조로 이뤄주어야 한다.

예를 들면, com.mycompany.myapp, kr.blog.velog 와 같다.

✔️ 여기까지 진행했으면 이 이후에 Tomcat 서버를 스프링 위에 얹어주면 된다.

1. JDK 설치 (구글에 jdk download 검색하면 oracle 다운로드 사이트가 나온다. 이곳에서 진행하면 된다. )
2. 내PC 시스템 환경변수 설정
3. cmd에서 javac, java -version 로 jdk 설치 잘 되었는지 확인하기.
4. 자바 편집기인 eclipse 다운로드 및 설치

Java 시스템 환경변수 설정

JDK를 설치한 이후에 진행할 수 있다.

내PC -> 속성 -> 고급 시스템 설정 -> 환경 변수에서 설정.

사용자 변수와 시스템 변수. 두 가지가 존재한다. 시스템 변수에서 변수와 값을 할당해주면, 어떤 사용자든 Java를 이용할 수 있다. 그냥 시스템 변수로 세팅하는게 무난하다.

1. JAVA_HOME

   c:\Program Files\Java\jdk-21

   (자바 JDK가 설치된 폴더 위치 - 보통 다음과 같다.)

2. CLASSPATH

   .;

3. Path (이미 기존에 존해하는 시스템 혹은 사용자 변수명일 것이다. 편집을 눌러서 해당 경로를 추가하고, 맨 위로 올려주면 된다.)

   %JAVA_HOME%\bin;

시스템 환경변수 설정 이유 => 운영체제 어디에서든 자바를 인식하기 위해서. Path 환경 변수에 Java JDK의 bin 폴더 경로를 등록함으로써, java.exe, javac.exe 라는 Java 실행 파일을 찾아 실행하게 하기 위해서이다.

cmd에서 jdk 정상적으로 설치되었는지 확인하는 명령어

시스템 환경변수 설정 이후에는 cmd에 들어가서 javac 와 java -version 명령어를 실행해줘야 한다.

• GitHub

• [시연영상 링크] (https://youtu.be/bwIsmcJjieo?si=cxLkADZhO2yxvDpY)

• 구현 기능 회원가입, 로그인, 로그아웃 개인정보수정 새 글 작성, 글 수정, 글 삭제 댓글 작성

• 기술 스택 언어 : Java Framework : Spring (Spring MVC Project) DB : MySQL CSS : Bootstrap

📌 DB : table

user

board

📌 코드 흐름도

회원가입 뷰페이지 이동

회원가입 실제 로직 처리

다른 페이지들도 흐름은 동일하다. url 주소값에 따라서 컨트롤러에서 분기를 해주고, 단순히 바로 뷰페이지를 띄우면 되는 경우에는 return "뷰페이지". DB와의 연계가 필요한 작업에 경우에는 아래 이미지와 같이 DB 작업을 처리하는 Command 인터페이스 구현 자바 클래스를 통해서 Dao 에 있는 DB 연계 메소드를 거치는 방식으로 구성하였다.

📌 화면 UI

• 회원가입
• 로그인
• 로그아웃

DB (MySQL)

member 테이블

웹 프로젝트 폴더구조

Code

Dto

Dto.java

• DB의 자료형을 그대로 담은 빈즈(데이터 클래스)
• DB에서 문자열 자료형은 String 타입으로 필드값을 선언해주고, birth 와 같이 date(날짜) 자료형은 Timestamp 타입으로 필드를 선언해주었다. timestamp 타입은 import java.sql.Timestamp; 로 import 해주어야 사용 가능하다.

package kr.study.spring.dto;

import java.sql.Timestamp;

public class Dto {

    private String userId;
    private String password;
    private String email;
    private String name;
    private String residentNumber;
    private String address;
    private String detailAddress;
    private Timestamp birth;
    private String interest;
    private String introduce;

    public Dto() {}
    public Dto(String userId, String password, String email, String name, String residentNumber, 
            String address, String detailAddress, Timestamp birth, String interest, String introduce) {
        this.userId = userId;
        this.password = password;
        this.email = email;
        this.name = name;
        this.residentNumber = residentNumber;
        this.address = address;
        this.detailAddress = detailAddress;
        this.birth = birth;
        this.interest = interest;
        this.introduce = introduce;
    }

    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getResidentNumber() {
        return residentNumber;
    }
    public void setResidentNumber(String residentNumber) {
        this.residentNumber = residentNumber;
    }
    public String getAddress() {
        return address;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public String getDetailAddress() {
        return detailAddress;
    }
    public void setDetailAddress(String detailAddress) {
        this.detailAddress = detailAddress;
    }
    public Timestamp getBirth() {
        return birth;
    }
    public void setBirth(Timestamp birth) {
        this.birth = birth;
    }
    public String getInterest() {
        return interest;
    }
    public void setInterest(String interest) {
        this.interest = interest;
    }
    public String getIntroduce() {
        return introduce;
    }
    public void setIntroduce(String introduce) {
        this.introduce = introduce;
    }
}

Dao

Dao.java

• 실제 DB에 사용하는 쿼리문

  package kr.study.spring.dao;
  

import java.sql.Connection; import java.sql.Date; import java.sql.PreparedStatement; import java.sql.ResultSet;

import javax.sql.DataSource;

import org.springframework.context.support.AbstractApplicationContext; import org.springframework.context.support.GenericXmlApplicationContext;

public class Dao {

private DataSource dataSource;

public Dao() {
    try {
        String configLocation = "classpath:application.xml";
        AbstractApplicationContext ctx
        = new GenericXmlApplicationContext(configLocation);

        this.dataSource = ctx.getBean("dataSource", DataSource.class);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

public void joinAction(String userId, String password, String email, String name,
                       String residentNumber, String address, String detailAddress,
                       Date birth, String interest, String introduce) {

    Connection conn = null;
    PreparedStatement ps = null;

    String sql = "INSERT INTO member (userId, password, email, name, residentNumber, address, detailAddress, birth, interest, introduce) " +
                 "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";

    try {
        conn = dataSource.getConnection();
        ps = conn.prepareStatement(sql);

        ps.setString(1, userId);
        ps.setString(2, password);
        ps.setString(3, email);
        ps.setString(4, name);
        ps.setString(5, residentNumber);
        ps.setString(6, address);
        ps.setString(7, detailAddress);
        ps.setDate(8, birth);
        ps.setString(9, interest);
        ps.setString(10, introduce);

        ps.executeUpdate();

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        try {
            if (ps != null) ps.close();
            if (conn != null) conn.close();
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
}

public boolean loginAction(String userId, String password) {
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;

    String sql = "select * from member where userId = ? and password = ?";

    try {
        conn = dataSource.getConnection();
        ps = conn.prepareStatement(sql);

        ps.setString(1, userId);
        ps.setString(2, password);

        rs = ps.executeQuery();

        if (rs.next()) {
            return true;
        } else {
            return false;
        }

    } catch(Exception e) {
        e.printStackTrace();
        return false;
    } finally {
        try {
            if (rs != null) rs.close();
            if (ps != null) ps.close();
            if (conn != null) conn.close();
        } catch (Exception e2) {
            e2.printStackTrace();
        }
    }
}

}

### Controller

**HomeController.java**

package kr.study.spring.controller;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod;

import kr.study.spring.command.Command; import kr.study.spring.command.JoinAction; import kr.study.spring.command.LoginAction;

@Controller public class HomeController {

Command command = null;

//회원가입 페이지
@RequestMapping("/join")
public String join() {
    return "join";
}

//회원가입 처리 페이지
@RequestMapping(value="/joinAction", method=RequestMethod.POST)
public String joinAction(HttpServletRequest request, Model model) {
    model.addAttribute("request", request);
    command = new JoinAction();
    command.execute(model);
    return "redirect:login";
}

//로그인 페이지
@RequestMapping("/login")
public String login() {
    return "login";
}

//로그인 처리 페이지
@RequestMapping(value="/loginAction", method=RequestMethod.POST)
public String loginAction(HttpServletRequest request, Model model) {
    model.addAttribute("request", request);
    command = new LoginAction();
    command.execute(model);

    Map<String, Object> map = model.asMap();
    Boolean loginResult = (Boolean) map.get("loginResult");

    if (loginResult != null && loginResult) {
        return "redirect:main";
    } else {
        return "login";
    }

}

//메인 페이지
@RequestMapping("/main")
public String main(HttpServletRequest request) {
    if (request.getSession().getAttribute("userId") == null) {
        return "redirect:login";
    }
    return "main";
}

//로그아웃 처리 페이지
@RequestMapping("/logout")
public String logout(HttpServletRequest request) {
    request.getSession().invalidate();
    return "redirect:login";
}

//개인정보 수정 화면 페이지
//@RequestMapping("/editProfile")
//public String editProfile(HttpServletRequest request, Model model) {
    //구현 예정.
//}

//개인정보 실제 수정 로직 페이지

}

### View 페이지

**login.jsp**

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Login

join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
    <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body style="text-align:center;">
<form method="post" action="joinAction" id="joinForm">
<table align="center" border="1" cellspacing="0" width="650">

        <tr align="center">
            <td colspan="2" bgcolor="lightgray">
                회원 기본 정보
            </td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">아이디:</td>
            <td align="left"><input type="text" name="userId" id="userId">4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">비밀번호:</td>
            <td align="left"><input type="password" name="password" id="password">4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">비밀번호확인:</td>
            <td align="left"><input type="password" name="passwordCheck" id="passwordCheck">4~12자의 영문 대소문자와 숫자로만 입력</td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">메일주소:</td>
            <td align="left"><input type="text" name="email" id="email">예)id@domain.com</td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">이름:</td>
            <td align="left"><input type="text" name="name" id="name"></td>
        </tr>
        <tr align="center">
            <td colspan="2" bgcolor="lightgray">개인 신상 정보</td>
        </tr>
        <tr>
            <td bgcolor="#f0f0ef">주민등록번호:</td>
            <td align="left"><input type="password" name="residentNumber" id="residentNumber">예)1234561234567</td>
        </tr>
        <tr>
            <td bgcolor="#f0f0ef">생일:</td>
            <td align="left"><input type="text" size = "5" name="year" id="year">년
                <select id="month" name="month">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                월
                <select id ="day" name="day">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
                일
                <a style="font-size:small;">:  주민등록번호를 입력하면 자동입력됩니다.</a>
            </td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">주소:</td>
            <td align="left">
                <input type="text" name="address" id= "address" size="30" placeholder="주소 검색 버튼 클릭" readonly>
                <input type="button" onclick="findAddress()" value="주소 검색"> <br>
                <input type="text" name="detailAddress" id = "detailAddress" placeholder="상세 주소 입력">
            </td>
        </tr>
        <tr>
            <td align="center" bgcolor="#f0f0ef">관심분야:</td>
            <td align="left" id="interest" name="interest">
                <input type="checkbox" name="interest" value="컴퓨터">컴퓨터
                <input type="checkbox" name="interest" value="인터넷">인터넷
                <input type="checkbox" name="interest" value="여행">여행
                <input type="checkbox" name="interest" value="영화감상">영화감상
                <input type="checkbox" name="interest" value="음악감상">음악감상
            </td>
        </tr>
<tr>
<td align="center" bgcolor="#f0f0ef">자기소개:</td>
            <td align="left">
                <textarea cols="50" rows="5" name="introduce" id="introduce">
                </textarea>
            </td>
        </tr>
</table>

<button type="submit" style="margin-top:15px;">회원 가입</button>
<button type="reset" style="margin-top:15px;">다시 입력</button>
</form>

<script src="${pageContext.request.contextPath}/resources/join.js"></script>



</body>


</html>

webapp/resources/join.js

//id 유효성검사
function checkId() {

    var userId = document.getElementById("userId").value.trim();
    const idRegex = /^[a-zA-Z0-9]{4,12}$/;

    if(!idRegex.test(userId)) {
        alert("아이디 입력 형식 오류");
        return false;
    }
    return true;
}    

//password 유효성검사
function checkPassword() {
    var password = document.getElementById("password").value.trim();
    var userId = document.getElementById("userId").value.trim();
    const pwRegex = /^[a-zA-Z0-9]{4,12}$/;

    if (!pwRegex.test(password)) {
        alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
        return false;
    }

    if (password === userId) {
        alert("아이디와 비밀번호는 같을 수 없습니다.");
        return false;
    }
    return true;
}


//password확인 유효성검사
function checkPassword2() {

    var password = document.getElementById("password").value.trim();
    var password2 = document.getElementById("passwordCheck").value.trim();

    if (password2 !== password) {
        alert("비밀번호와 비밀번호확인이 서로 다릅니다.");
        return false;
    }
    return true;
}

//메일주소 유효성검사
function checkEmail() {

    var email = document.getElementById("email").value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if(!emailRegex.test(email)) {
        alert("메일 주소 형식이 정해져 있습니다. ");
        return false;
    }
    return true;
}

//주민등록번호 유효성 검사 및 생일 자동 입력
function checkResidentNum() {

    var residentNumber = document.getElementById("residentNumber").value.trim();
    const pwRegex = /^[0-9]{13}$/;

    if(!pwRegex.test(residentNumber)) {
        alert("주민등록번호는 13자리를 입력해야 합니다.");
        return false;
    }

    let sum = 0;
    const multipliers = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];

    for (let i = 0; i<12; i++) {
        sum += parseInt(residentNumber.charAt(i)) * multipliers[i];
    }

    const calculatedVerifyNum = (11 - (sum % 11)) % 10;

    if(calculatedVerifyNum !== parseInt(residentNumber.charAt(12))) {
        alert("유효하지 않은 주민등록번호입니다.");
        return false;
    }

    //주민등록번호에서 생년월일 추출
    var yearPrefix = (residentNumber.charAt(7) === "1" || residentNumber.charAt(7) === "2") ? "19" : "20";
    var year = yearPrefix + residentNumber.substring(0, 2);
    var month = residentNumber.substring(2, 4);
    var day = residentNumber.substring(4, 6);

    //생년월일 자동으로 채우기
    document.getElementById("year").value = year;
    document.getElementById("month").value = parseInt(month, 10);
    document.getElementById("day").value = parseInt(day, 10);

    return true;
}

//주소 입력
function findAddress() {
    new daum.Postcode({
        oncomplete: function(data) {
            var addr = ''; 
            var extraAddr = ''; 

            if (data.userSelectedType === 'R') {
                addr = data.roadAddress;
            } else { 
                addr = data.jibunAddress;
            }

            document.getElementById('address').value = addr;
            document.getElementById('detailAddress').value = extraAddr;

        }
    }).open();
}

//주소랑 상세주소 입력 유효성검사
function checkAddress() {
    var address = document.getElementById("address").value.trim();
    var address2 = document.getElementById("detailAddress").value.trim();

    const addRegex = /^.{1,}$/;

    if(!addRegex.test(address) || !addRegex.test(address2)) {
        alert("주소와 상세주소를 입력하세요.");
        return false;
    }
    return true;
}

//관심분야 유효성검사
function checkInterest() {
    var interests = document.querySelectorAll("#interest input[type='checkbox']");
    let checked = false;
    interests.forEach(cb => {
        if (cb.checked) checked = true;
    });

    if (!checked) {
        alert("관심분야를 한 가지 이상 선택해야 합니다.");
        return false;
    }
    return true;
}

//자기소개 유효성검사
function checkIntroduce() {
    var introduce = document.getElementById("introduce").value.trim();
    var introRegex = /^.{20,}$/;

    if(!introRegex.test(introduce)) {
        alert("자기소개는 20글자 이상은 입력해주세요.");
        return false;
    }
    return true;
}

//회원가입 버튼 이벤트 (유효성 검사)
document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("joinForm");

    form.addEventListener("submit", (e) => {
        if (!checkId() || !checkPassword() || !checkPassword2() || !checkEmail()
         || !checkResidentNum() || !checkAddress() ||!checkInterest() ||!checkIntroduce() ) {
            e.preventDefault(); 
        }
    });
});

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String userId = (String)session.getAttribute("userId");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>메인페이지 입니다.</title>
</head>
<body>
<%=userId %> 님 로그인 성공 !! <br>

<a href="logout">로그아웃</a> <br>
<a href="editProfile">개인정보수정</a> <br>

</body>
</html>

사용자의 요청이 발생하면, 컨트롤러는 그 내용에 맞게 데이터값과 이동할 페이지를 알려주어야 한다. 이때 스프링에서 사용하는 2가지 방식이 있는데 하나는 Model 방식, 또 하나는 ModelAndView 방식이다. Model 방식에서는 값만 Model에 저장하여 다음 페이지로 넘겨주는 방식인데 이때 이동할 페이지는 return에 String타입으로 담아서 알려주게 된다. 반면 ModelAndView 방식에서는 ModelAndView의 객체를 생성하여 이 객체에 데이터값과 이동할 페이지 모두를 담아서 return 값으로 ModelAndView의 객체를 넘겨주는 방식으로 이루어진다.

Controller (컨트롤러)

컨트롤러로 사용할 자바 클래스의 경우 맨 위에 어노테이션 기능을 이용하여 @Controller 라고 명시해준다. 1번은 페이지만 이동할 때 2번은 Model 방식으로 값을 가지고 페이지를 이동할 때 3번은 ModelAndView 방식으로 값과 이동할 페이지 정보를 모두 가지고 페이지로 이동할 때 그 각각의 코드이다.

페이지만 이동하는 경우

@RequestMapping("/view")
public String view() {
    return "board/view";
}

데이터값을 넘겨줄 필요는 없고, 단순히 페이지 이동만 필요한 경우에는 위와 같이 작성한다. @RequestMapping("/view") 부분에는 url 경로를 지정해주면 된다. 웹프로젝트를 서버에서 실행해주고, url 부분의 뒷부분에 '/view'를 추가로 입력해주면 return 부분에 따라서 board 폴더 안에 있는 view.jsp 페이지로 이동하게 된다.

view.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title> viewpage</title>
</head>
<body>
view.page 입니다. <br>
</body>
</html>

Model을 이용하여 값을 가지고 페이지를 이동하는 경우

@RequestMapping("/content")
public String content(Model model) {
    model.addAttribute("id", "heegon");
    return "board/content";
}

Model을 이용하여 값을 가진 상태에서 페이지를 이동하는 경우에는 페이지만 이동하는 경우와 마찬가지로 String 타입의 반환값을 가진 메소드를 만들어준다. 아까와 다른 점은 매개변수 부분에 Model model과 같이 Model의 객체를 넣어준다는 점이다. 그리고 메소드 내부에서 model.addAttribute("jsp페이지에서 사용하는 데이터의 id명", 해당 데이터에 넣을 데이터값)과 같은 형태로 작성된다.

content.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>content1 page</title>
</head>
<body>
content 페이지 입니다. <br>
id는 ${id } 입니다. <br>
</body>
</html>

ModelAndView를 이용하여 값과 이동할 페이지를 모두 가진 상태로 페이지를 이동하는 경우

@RequestMapping("/content2")
public ModelAndView content2() {

    ModelAndView mv = new ModelAndView();
    mv.addObject("name", "heegonkim");
    mv.setViewName("board/content2");

    return mv;
}

ModelAndView 방식에서는 위와 같이 문법이 살짝 다르다. Model방식에서는 addAttribute를 사용하여 데이터값을 넣어주었다면 ModelAndView 방식에서는 addObject()를 통해서 데이터값을 넣어주고, setViewName()을 통해서 이동할 뷰페이지를 알려준다. 그리고 마지막 return 부분에는 이전에 String타입으로 이동할 뷰페이지를 지정했던 것과 다르게 ModelAndView의 객체를 반환해주는 방식으로 끝나게 된다.

content2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>content2 page</title>
</head>
<body>
content2 페이지 입니다. <br>
이름은 ${name } 입니다. <br>
</body>
</html>

정리

정리하자면 다음과 같다.

• 단순히 페이지만 이동하면 되는 경우에는

  public String 메소드명() { 
    return "뷰페이지 경로"; 
  }

• 값을 가지고 Model을 이용해서 페이지를 이동하는 경우에는

  public String 메소드명(Model model) {
    model.addAttribute("데이터의 id값", 데이터값);
    return "뷰페이지 경로";
  }

• 값과 페이지를 한 번에 저장하여 페이지를 이동하는 경우에는

  public ModelAndView 메소드명() {
    ModelAndView 모델앤뷰객체 = new ModelAndView();
    모델앤뷰객체.addObject("데이터의 id값", 데이터값);
    모델앤뷰객체.setViewName("뷰페이지 경로");
    return 모델앤뷰객체;
  }

public class Human {

    private String name;
    private int age;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }

    public void getHumanInfo() {
        System.out.println("이름 : " + getName());
        System.out.println("나이 : " + getAge());
    }

}

MainClass.java

public class MainClass {

    public static void main(String[] args) {

        AbstractApplicationContext ctx
        = new GenericXmlApplicationContext("classpath:applicationCTX.xml");

        Human human1 = ctx.getBean("human", Human.class);
        human1.getHumanInfo();

        ctx.close();
    }

}

applicationCTX.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.1.xsd">

<bean id="logAop" class="kr.study.spring.LogAop" />

<aop:config>
    <aop:aspect id="logger" ref="logAop">
        <aop:pointcut id="pointcut1" expression="within(kr.study.spring..*)" />
        <aop:around pointcut-ref="pointcut1" method="aopMethod" />
    </aop:aspect>
</aop:config>


<bean id="human" class="kr.study.spring.Human">
    <property name="name" value="희곤"></property>
    <property name="age" value="20"></property>
</bean>

</beans> 

LogAop.java

public class LogAop {

    public Object aopMethod(ProceedingJoinPoint jp) throws Throwable {

        System.out.println("실행 전");
        try {
            Object obj = jp.proceed();
            return obj;
        } finally {
            System.out.println("실행 끝");
        }
    }
}

'핵심 기능 코드' 와 '공통 기능 코드' 를 분류시켜 만드는 방식. (같은 기능이 여러 번 사용되는 공통 기능 코드의 경우, 중복 반복 작성되기 때문이다.)

여기서 공통 기능이란 자주 사용하는 코드들을 따로 빼서 모아놓는 것을 말한다. 그리고 핵심 기능을 실행할 때, 특정 시기(실행 전/실행 후/실행 전후 등)에 공통 기능을 실행해주는 방식으로 사용된다.

ex) 예를 들면, System.out.println("메소드 실행 시작!") -> 메소드 실행 시작 전마다 이 기능을 작동시킬 것이므로 공통 기능으로 분류하여 구현. public void doPlay1() -> 몇 번 실행하지 않으므로 핵심 기능으로 분류.

기본 용어

• Aspect : 공통 기능 을 의미한다.
• Advice : 공통 기능의 기능 자체 를 의미한다.
• JoinPoint : 공통 기능을 적용해야 하는 부분 (스프링에서 메소드)
• Pointcut : 공통 기능의 일부분으로 실제로 공통 기능이 적용 되는 부분
• Weaving : 공통 기능을 핵심 기능에 적용하는 행위 를 의미.

AOP 적용 방식 1 : XML

✅pom.xml

가장 먼저 pom.xml 파일에서 의존 설정을 해줘야 한다. 아래 2개를 추가해주면 된다. version은 잘 맞춰주어야 한다.

<!-- cglib -->
<dependency>
    <groupId>cglib</groupId>
    <artifactId>cglib</artifactId>
    <version>3.2.12</version>
</dependency>

<!-- AOP -->
<!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
<dependency>
    <groupId>org.aspectj</groupId>
    <artifactId>aspectjweaver</artifactId>
    <version>1.7.4</version>
</dependency>

✅Student.java

데이터 클래스 1번

public class Student {

    private String name;
    private int age;
    private int gradeNum;
    private int classNum;

    public void getStudentInfo() {
        System.out.println("이름 : " + getName());
        System.out.println("나이 : " + getAge());
        System.out.println("학년 : " + getGradeNum());
        System.out.println("반 번호 : " + getClassNum());
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
    public int getGradeNum() {
        return gradeNum;
    }
    public void setGradeNum(int gradeNum) {
        this.gradeNum = gradeNum;
    }
    public int getClassNum() {
        return classNum;
    }
    public void setClassNum(int classNum) {
        this.classNum = classNum;
    }

}

✅Worker.java

데이터 클래스 2번

public class Worker {

    private String name;
    private int age;
    private String job;

    public void getWorkerInfo() {
        System.out.println("이름 : " + getName());
        System.out.println("나이 : " + getAge());
        System.out.println("직업 : " + getJob());
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

}

✅MainClass.java

앞 글인 DI 의존주입에서 사용한 Main 클래스와 다른 점이 없다. 이번에는 xml 방식으로 의존 주입을 하였다.

public class MainClass {

    public static void main(String[] args) {

        AbstractApplicationContext ctx
        = new GenericXmlApplicationContext("classpath:applicationCTX.xml");

        Student student = ctx.getBean("student", Student.class);
        student.getStudentInfo();

        System.out.println("=============");

        Worker worker = ctx.getBean("worker", Worker.class);
        worker.getWorkerInfo();

        ctx.close();

    }

}

✅applicationCTX.xml

기본 형태 설명

<bean id="아이디" class="패키지.메소드" />

<aop:config>
    <aop:aspect id="식별자" ref="아이디">
        <aop:pointcut id="포인트컷이름" expression="적용범위 표현식" />
        <aop:적용스타일 pointcut-ref="포인트컷이름" method="Advice메서드 이름" />
    </aop:aspect>
</aop:config>

적용 스타일 aop:around -> 대상 메소드 실행 전후 모두 제어 가능 (인자 반드시 필요) aop:before -> 실행 전 aop:after-returning -> 정상 종료 후 aop:after-throwing -> 예외 발생 시 aop:after -> 항상 마지막에 실행 (예외처리 구문 중 finally 와 유사)

적용범위 표현식 'execution, within, bean' 이렇게 3가지가 있다. expression="within(kr.study.spring.*)" -> kr.study.spring 패키지 바로 아래에 있는 클래스들 안의 메소드에 적용. expression="within(kr.study.spring..*) -> kr.study.spring 패키지의 하위 패키지 전부의 클래스 안의 메소드까지 적용. expression="execution(* kr.study.spring.Worker.*())" -> Worker 클래스의 메소드에만 적용. expression="bean(student)") -> student 라는 이름을 가진 클래스의 메소드에만 적용 expression="bean(*ker)") -> ~ker로 끝나는 클래스의 메소드에만 적용된다.

⭐⭐⭐ 그러니까 쉽게 생각하자면, 현재 Student 클래스가 있다. 이 클래스에게만 AOP를 적용하고 싶다면 kr.study.spring.student 이렇게 적용범위 표현식을 사용하면 된다. 어떤 클래스의 앞뒤, 혹은 앞, 혹은 뒤에 공통 기능을 넣을지를 적용범위 표현식에서 지정한다고 생각하면 된다. 앞뒤, 앞, 뒤 같은 타이밍에 관한 것은 위의 적용 스타일로 지정한다.

예시 코드

<!-- AOP 관련 -->
    <bean id="logAop"  class="kr.study.spring.LogAop" />

    <aop:config>
        <aop:aspect id="logger" ref="logAop">
            <aop:pointcut id="publicM" expression="within(kr.study.spring.*)" />
            <aop:around pointcut-ref="publicM" method="loggerAop" />
        </aop:aspect>

        <aop:aspect id="logger" ref="logAop">
            <aop:pointcut id="publicM" expression="within(kr.study.spring.*)" />
            <aop:before pointcut-ref="publicM" method="beforeAdvice" />
        </aop:aspect>

        <aop:aspect id="logger" ref="logAop">
            <aop:pointcut id="publicM" expression="within(kr.study.spring.*)" />
            <aop:after-returning pointcut-ref="publicM" method="afterReturningAdvice" />
        </aop:aspect>

        <aop:aspect id="logger" ref="logAop">
            <aop:pointcut id="publicM" expression="within(kr.study.spring.*)" />
            <aop:after-throwing pointcut-ref="publicM" method="afterAdvice" />
        </aop:aspect>
    </aop:config>

✅LogAop.java

⭐ 공통 기능을 담은 클래스 (AOP 클래스) ⭐ => 공통으로 적용할 로직을 모아두는 클래스이다. => 여러 번 사용하는 기능(클래스나 메소드)를 모아두었다고 생각하면 쉽다.

자주 쓸 것 같은 코드 구조 1 (메소드의 실행 전후 모두 적용 가능)

public Object 메소드명(ProceedingJoinPoint pjp) throws Throwable {
    //전 처리
    Object result = pjp.proceed(); //실제 메소드 실행
    //후 처리
    return result;
}

여기에서 pjp.getSignature() 는 현재 실행 중인 메소드의 정보를 가져오는 메소드이다.

예시 코드

public class LogAop {

    //공통 기능 메소드 1 (메소드 실행 전후 제어)
    public Object loggerAop(ProceedingJoinPoint joinpoint) throws Throwable {
        String signatureStr = joinpoint.getSignature().toShortString();
        System.out.println(signatureStr + " is start.");
        long startTime = System.currentTimeMillis();
        //System.currentTimeMillis() -> 현재 시간을 ms초로 알려줌.

        try {
            Object obj = joinpoint.proceed();
            return obj;
        } finally {
            long endTime = System.currentTimeMillis();
            System.out.println(signatureStr + " is finished.");
            System.out.println(signatureStr + " 경과시간 : " + (endTime - startTime));
        }
    }

    //실행 전
    public void beforeAdvice(JoinPoint joinPoint) {
        System.out.println("beforeAdvice()");
    }

    //정상 종료 후
    public void afterReturningAdvice() {
        System.out.println("afterReturningAdvice()");
    }

    //예외 발생 후
    public void afterThrowingAdvice() {
        System.out.println("afterThrowingAdvice()");
    }

    //정상 종료 혹은 예외 발생 그 최후 마지막에 실행
    public void afterAdvice() {
        System.out.println("afterAdvice()");
    }
}

AOP 적용 방식 2 : 어노테이션

pom.xml, MainClass.java, Student.java, Worker.java 의 코드는 위와 동일하다.

✅applicationCTX.xml

<!-- AOP 관련 -->
<aop:aspectj-autoproxy />
<bean id="logAop" class="kr.study.spring.LogAop" />

놀랍게도 이게 다다.

✅LogAop.java

@Aspect -> AOP 클래스 임을 표현(?)

@Pointcut("범위 지정 표현식") -> PointCut

@Around("포인트컷 메소드()") -> around, before, after 등등 명시

예시 코드

@Aspect
public class LogAop {

    @Pointcut("within(kr.study.spring.*)")
    private void pointcutMethod() {
    }

    @Around("pointcutMethod()")
    public Object loggerAop(ProceedingJoinPoint joinpoint) throws Throwable {
        String signatureStr = joinpoint.getSignature().toShortString();
        System.out.println(signatureStr + " is start.");
        long st = System.currentTimeMillis();

        try {
            Object obj = joinpoint.proceed();
            return obj;
        } finally {
            long et = System.currentTimeMillis();
            System.out.println(signatureStr + " is finished.");
            System.out.println(signatureStr + " 경과시간 : " + (et - st));
        }
    }

    @Before("pointcutMethod()")
    public void beforeAdvice(JoinPoint joinPoint) {
        System.out.println("beforeAdvice()");
    }

    @AfterReturning("pointcutMethod()")
    public void afterReturningAdvice() {
        System.out.println("afterReturningAdvice()");
    }


    @AfterThrowing("pointcutMethod()")
    public void afterThrowingAdvice() {
        System.out.println("afterThrowingAdvice()");
    }


    @After("pointcutMethod()")
    public void afterAdvice() {
        System.out.println("afterAdvice()");
    }
}

✔️ 스프링 프레임워크의 설치는 javaJDK 설치가 완벽하게 끝나고, Path 경로까지 지정한 후에 진행해야 한다.

JDK 는 11 버전을, Path 경로는 아래와 같이 진행하였다. jdk 설치하고, path 경로 지정하는 방법

한 마디로 이클립스 위에서 자바 클래스가 온전하게 실행되는 상태에서 진행한다고 생각하면 편하다.

스프링의 경우 Spring 3.0.0 버전과 Spring 4.0.0 버전이 있는데, 스프링 프레임워크를 사용하기 위해서는 3점대 버전을 사용해야 한다. 4점대 버전부터는 스프링 '부트'이기 때문이다.

먼저, 스프링 3점대 버전을 구해서 설치해주어야 한다. 설치는 어렵지 않다.

문제는 설치를 마친 이후에, 처음 STS.exe 를 실행해주었을 때 프로젝트 생성을 위해 Spring Legacy Project를 선택해주는데

위 이미지와 달리, Spring MVC Project 라는 선택지가 없다.

✔️ Spring MVC Project 프로젝트를 생성하기 위해서는 아래와 같이 진행하면 된다.

작업 폴더 위치 아래에 .metadata 이 아래에 .plugins이 아래에 있는 org.springsource.ide.eclipse.commons.content.core 폴더를 찾아야 한다.

이 안에 https-content.xml 파일을 넣어주어야 한다. https-context.xml 파일은 웹서핑을 통해서 어렵지 않게 구할 수 있다.

✔️ 여기까지 완료가 되면, STS.exe를 완전히 종료한 이후에 다시 실행하여 프로젝트를 생성하면 위 이미지와 같이 'Spring MVC Project' 선택지가 생긴 것을 확인할 수 있다.

next 버튼을 누르게 되면 다음과 같은 화면이 나오는데, 도메인을 지정해주는 설정 사항이다. 반드시 단어1.단어2.단어3 와 같이, 3개의 구조로 이뤄주어야 한다.

예를 들면, com.mycompany.myapp, kr.blog.velog 와 같다.

✔️ 여기까지 진행했으면 이 이후에 Tomcat 서버를 스프링 위에 얹어주면 된다.

Spring Legacy Project -> Spring MVC Project 폴더 구조

자바 파일은 src/main/java 폴더 아래에, xml 파일은 src/main/resources 폴더 아래에, jsp 파일은 src/main/webapp/views 폴더 아래에 만들어주면 된다.

문제는 여러 곳(여러 외부)에서 해당 클래스의 필드와 메소드가 필요하다면 매번 객체를 생성해주어야 한다는 것이다. 스프링 웹 프레임워크에서는 이를 해결해주기 위해 객체를 생성할 수 있게 미리 세팅을 해놓고 필요할 때만 불러와서 쓸 수 있게 해놓았다. 이를 의존성 주입 (DI) 라고 한다. 그 방법에는 크게 2가지가 있다.

• 즉, 자바 빈즈 (데이터 클래스)를 만들고 이를 외부에서 사용하는 방법은 크게 3가지이다.
  1. 객체 생성하여 사용하기 (기존 방식)
  2. XML 파일 이용하기
  3. 어노테이션 사용하여 자바 파일 이용하기

✅ 방법 1번. 객체 만들어 사용하기

ex)

자바빈즈 클래스 (데이터 클래스)

public class Human {

    //필드 2개 (name, age)
    private String name;
    private int age;

    //필드 2개에 따른 setter, getter 메소드
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

메인 클래스 (외부 클래스)

public class MainClass {
    public static void main(String[] args) {
        Human human = new Human();
        human.setName("사람1");
        human.setAge(20);
        System.out.println(human.getName() + " 의 나이는 " + human.getAge() + " 입니다.");
    }
}

실행 결과

사람1 의 나이는 20 입니다.

✅ 방법 2번. XML 파일을 이용하는 방법.

xml 파일 생성 방법 : file -> new -> Spring Bean Configuration File (src/main/resources 폴더에 넣어주면 된다.)

⭐⭐⭐ 핵심 ⭐⭐⭐ AbstractApplicationContext ctx = new GenericXmlApplicationContext("classpath:applicationCTX.xml");

✅✅ XML방식1 (setter 방식)

xml에서 태그를 이용해서 필드에 값 넣어준다.

자바빈즈 클래스 (데이터 클래스)

public class Human {

    //필드 2개 (name, age)
    private String name;
    private int age;

    //필드 2개에 따른 setter, getter 메소드
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }
}

메인 클래스 (외부 클래스) setter로 사용할 사용 방법 AbstractApplicationContext 객체명 = new GenericXmlApplicationContext("classpath:xml파일명.xml")

public class MainClass {
    public static void main(String[] args) {
          //⭐핵심
        AbstractApplicationContext ctx
            = new GenericXmlApplicationContext("classpath:applicationCTX.xml");

        //객체 사용이라면 Human human = new Human();
          //=new Human() 대신, =ctx.getBean("구분용 아이디", 빈즈클래스명.class) 사용
        Human human = ctx.getBean("humanDataClass", Human.class);

        //setter 역할을 xml 파일이 대신해준다. 
        //바로 getter 메소드로 값만 받아와서 외부에서 값 사용하면 된다. 
        System.out.println("이름은 " + human.getName() + " 이고, 나이는 " + human.getAge() + " 입니다.");

          //객체 사용 종료
        ctx.close();
    }
}

applicationCTX.xml

setter 역할을 해주는 xml 파일

java 파일 위치 -> src/main/java xml 파일 위치 -> src/main/resources xml파일 위치에서 file -> new -> Spring Bean Configuration File 로 xml 파일 생성하면 된다.

<bean id="humanDataClass" class="heegon.study.spring.Human">
    <property name="name">
        <value>희곤</value>
    </property>
    <property name="age">
        <value>20</value>
    </property>
</bean>

실행 결과

이름은 희곤 이고, 나이는 20 입니다.

✅✅ XML방식2 (생성자 방식)

xml에서 태그를 이용해서 필드에 값 넣어준다.

데이터 클래스

public class Human {

        //필드 2개 (name, age)
        private String name;
        private int age;

        public Human(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }


        public int getAge() {
            return age;
        }


        public void printHuman() {
            System.out.println("이름은 " + getName() + " 이고, 나이는 " + getAge() + " 입니다.");
        }

}

메인 클래스(외부 클래스)

public class MainClass {
    public static void main(String[] args) {
          //⭐핵심
        AbstractApplicationContext ctx
            = new GenericXmlApplicationContext("classpath:applicationCTX.xml");

        //객체 사용이라면 Human human = new Human();
        Human human = ctx.getBean("humanDataClass", Human.class);

        //setter 역할을 xml 파일이 대신해준다. 
        //getter 메소드가 없기 때문에, 출력코드를 만들어준 Human 클래스의 printHuman() 메소드를 불러와 사용한다. 
        human.printHuman();

          //객체 사용 종료
        ctx.close();
    }
}  

applicationCTX.xml setter메소드를 이용할 때는 <property> 태그를 이용하고, 생성자 함수로 필드에 값을 넣을 때는 <constructor-arg> 태그를 이용한다.

    <bean id="humanDataClass" class="heegon.study.spring.Human">
        <constructor-arg>
            <value>희곤</value>
        </constructor-arg>

        <constructor-arg>
            <value>20</value>
        </constructor-arg>
    </bean>

실행 결과

이름은 희곤 이고, 나이는 20 입니다.

✅✅ XML방식3 (ArrayList와 같이 여러 값 넣기)

MainClass.java

public class MainClass {

    public static void main(String[] args) {

        AbstractApplicationContext ctx 
              = new GenericXmlApplicationContext("classpath:applicationCTX.xml");

        Human human = ctx.getBean("humanDataClass", Human.class);

        System.out.println("===========");
        System.out.print("이름 : ");
        System.out.println(human.getName());
        System.out.print("취미는 : ");
        System.out.println(human.getHobbys());
        System.out.print("나이는 : ");
        System.out.println(human.getAge());
        System.out.println("===========");

        ctx.close();
    }

}

Human.java

ArrayList 타입의 hobbys 변수가 존재한다. 즉, 여러개의 값을 넣어야 하는 경우가 생겼다.

public class Human {

    private String name;
    private int age;
    private ArrayList<String> hobbys;

    Human(String name, ArrayList<String> hobbys){
        this.name = name;
        this.hobbys = hobbys;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public ArrayList<String> getHobbys() {
        return hobbys;
    }

    public void setHobbys(ArrayList<String> hobbys) {
        this.hobbys = hobbys;
    }

}

applicationCTX.xml

아래와 같이 태그 내부에 값 을 넣어주기만 하면 된다.

<bean id="humanDataClass" class="kr.study.spring.Human">
        <constructor-arg>
            <value>희곤</value>
        </constructor-arg>

        <constructor-arg>
            <list>
                <value>넷플릭스</value>
                <value>운동</value>
                <value>배틀그라운드</value>
            </list>
        </constructor-arg>

        <property name="age" value="20"></property>
    </bean> 

✅ 방법 3번. 어노테이션을 사용하는 방법.

(xml 파일 없이 자바 클래스 파일만으로 가능)

⭐⭐⭐ 핵심 ⭐⭐⭐ AnnotationConfigApplicationContext 객체명 = new AnnotationConfigApplicationContext(파일명.class)

✅✅ 어노테이션 방식1 (setter, getter 메소드만으로 구성된 데이터 클래스)

Human.java

setter와 getter로만 이루어진 (생성자함수 사용 X) 데이터 클래스

public class Human {

    private String name;
    private int age;

      public String getName() {
            return name;
    }

    public void setName(String name) {
            this.name = name;
    }

    public int getAge() {
            return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

MainClass.java

xml방식과 마찬가지로, ctx 객체를 만들어서 .getBean() 메소드를 통해서 데이터값들을 가져올 수 있다. xml방식과 달리 AnnotationConfigApplicaionContext 클래스를 이용해 ctx 객체를 생성한다. = new AnnotationConfigApplicationContext(xml역할을 대신해주는 java코드파일명.class); 이다.

public class MainClass {
    public static void main(String[] args) {

        AnnotationConfigApplicationContext ctx
        = new AnnotationConfigApplicationContext(ApplicationConfig.class);

        Human human1 = ctx.getBean("human1", Human.class);
        System.out.println("이름 : " + human1.getName());
        System.out.println("나이 : " + human1.getAge());

        ctx.close();
    }
}

ApplicationConfig.java

xml의 역할을 해주는 자바 클래스를 만들고 @Configuration 어노테이션을 사용해서 알려준다. xml 방식과 다른 점은, 데이터 클래스인 Human 의 객체를 만들어준다음에, 내부 메소드(지금은 setter)를 사용해 값을 넣어주고, 마지막에 return 클래스 객체; 를 통해서 다시 객체를 반환해주어야 한다는 것이다.

@Configuration
public class ApplicationConfig {

    @Bean
    public Human human1() {
        Human human = new Human();
        human.setName("희곤");
        human.setAge(20);

        return human;
    }
}

pom.xml

추가적으로 자바 클래스를 이용한 어노테이션 방식에서는 반드시 pom 파일 안에 아래와 같이 내용을 추가로 넣어주어야 동작된다.

<dependency>
    <groupId>cglib</groupId>
    <artifactId>cglib</artifactId>
    <version>2.2.2</version>
</dependency>

✅✅ 어노테이션 방식2 (생성자 함수를 이용한 데이터 클래스)

Human.java

  public class Human {

        //필드 2개 (name, age)
        private String name;
        private int age;

          //생성자 함수로 이름과 나이를 넣어줌.
        public Human(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public int getAge() {
            return age;
        }
        public void setAge(int age) {
            this.age = age;
        }

}

MainClass.java

  public class MainClass {
    public static void main(String[] args) {

        AnnotationConfigApplicationContext ctx
        = new AnnotationConfigApplicationContext(ApplicationConfig.class);

        Human human1 = ctx.getBean("human1", Human.class);
        System.out.println("이름 : " + human1.getName());
        System.out.println("나이 : " + human1.getAge());

        ctx.close();
    }
}

ApplicationConfig.java

  @Configuration
public class ApplicationConfig {

    @Bean
    public Human human1() {
        //생성자 함수이기 때문에 다음과 같이 값을 넣어준다.
        Human human = new Human("희곤", 20);
        //return 객체명은 똑같이 필요하다. 
        return human;
    }
}

✅✅ 어노테이션 방식3 (ArrayList 같은 여러 값을 넣어주어야 하는 경우)

Human.java

  public class Human {

        //필드 3개 (name, age, hobbys)
        private String name;
        private int age;
        private ArrayList<String> hobbys;

        //생성자함수
        public Human(String name, int age) {
            this.name = name;
            this.age = age;
        }

        //setter, getter
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public int getAge() {
            return age;
        }
        public void setAge(int age) {
            this.age = age;
        }

        public ArrayList<String> getHobbys() {
            return hobbys;
        }

        public void setHobbys(ArrayList<String> hobbys) {
            this.hobbys = hobbys;
        }

}

MainClass.java

  public class MainClass {
    public static void main(String[] args) {

        AnnotationConfigApplicationContext ctx
        = new AnnotationConfigApplicationContext(ApplicationConfig.class);

        Human human1 = ctx.getBean("human1", Human.class);
        System.out.println("이름 : " + human1.getName());
        System.out.println("나이 : " + human1.getAge());
        System.out.println("취미 : " + human1.getHobbys());

        ctx.close();
    }
}

ApplicationConfig.java

여러 값을 넣어주어야 하는 경우에는 데이터타입의 객체를 새롭게 만들고, .add() 함수 안에 값을 넣어주어 추가해준다. 그리고 setter 메소드에 객체를 넣어서 값을 넣어주어야 한다. (생성자 함수라면 생성자 함수 소괄호 안에 넣어주면 된다.)

  @Configuration
public class ApplicationConfig {

    @Bean
    public Human human1() {
        //생성자 함수이기 때문에 다음과 같이 값을 넣어준다.
        Human human = new Human("희곤", 20);
        //ArrayList 와 같이 여러 값을 넣어주어야 하는 경우
        ArrayList<String> hobbys = new ArrayList<String>();
        hobbys.add("축구");
        hobbys.add("배틀그라운드");
        human.setHobbys(hobbys);
        //return 객체명은 똑같이 필요하다. 
        return human;
    }
}

...끝!