A Better Tomorrow

요즘 난리 난 Clawdbot? AI 비서 끝판왕의 등장

Sponge_ — Sat, 31 Jan 2026 23:39:47 +0900

요즘 AI 관련 커뮤니티에서 정말 핫한 Clawdbot(최근 Moltbot으로 이름이 바뀌었죠)에 대해 들어보셨나요?

묻는 말에 답만 해주는 챗봇 시대는 이제 끝난 것 같아요.

이제는 내 컴퓨터를 직접 제어하고, 대신 일을 해주는 '에이전트 AI'의 시대가 왔거든요.

오늘은 왜 다들 클로드봇에 열광하는지, 그리고 우리 같은 개발자나 기획자들에게 왜 필요한지 핵심만 쏙쏙 뽑아 정리해 드릴게요!

1. Claude봇(Clawdbot), 대체 뭐가 다른데?

기존의 챗봇들이 "이 코드 짜줘" 하면 코드만 줬다면, 클로드봇은 "이 코드 짜서 내 컴퓨터에 파일로 저장하고 실행까지 해줘"가 가능한 녀석이에요.

로컬 환경 제어: 내 맥이나 윈도우 터미널에 직접 접속해서 명령어를 실행해요.
미친 기억력 (Persistent Memory): 어제 했던 이야기, 내 취향, 업무 스타일을 다 기억합니다. 매번 설명할 필요가 없어서 진짜 '비서' 같아요.
강력한 자동화: 이메일, 캘린더, 슬랙까지 연결해서 루틴한 업무를 대신 처리해 줍니다.

2. 왜 지금 '클로드' 기반 봇이 뜰까?

사용자님도 아시다시피, 최근 Claude 3.5 Sonnet이나 4.5 모델의 코딩 능력이 압도적이잖아요? (저도 프론트 디자인이나 복잡한 로직 짤 때 도움을 많이 받죠 ㅎㅎ). 이 강력한 '두뇌'에 '손발(도구 실행 능력)'을 달아준 게 바로 클로드봇이라고 보시면 됩니다.

특히 Anthropic의 MCP(Model Context Protocol) 덕분에 외부 앱이랑 연동되는 속도가 장난이 아니에요.

3. 실전 활용 포인트 (이런 분들께 강추!)

코딩 테스트 준비족: "이 문제 파이썬으로 풀고 효율성 체크해서 오답 노트 파일로 만들어줘" 하면 끝!
업무 자동화가 필요한 분: 특정 키워드가 들어간 댓글 알림을 받거나, 매주 MS 업데이트 소식 취합해서 보고서 만드는 일? 이제 봇한테 맡기면 됩니다.
AI 교육 관계자: 학생들에게 AI 원리를 설명할 때, 이론만 말하는 게 아니라 "AI가 직접 파일을 만들고 수정하는 과정"을 라이브로 보여주기 딱 좋아요.

4. 주의할 점 (보안은 필수!)

내 컴퓨터 권한을 주는 거라 보안이 제일 중요해요! 클로드봇은 데이터를 로컬에 저장하려고 노력하지만, 항상 실행 권한(Action Permission) 설정을 꼼꼼히 확인해야 한다는 점, 잊지 마세요!

채팅을 넘어 실행하는 AI로 넘어가는 과도기에 우리가 서 있는 것 같아요.

저도 요즘 이 봇을 활용해서 인스타 댓글 알림 자동화나 업무 시트 정리를 더 편하게 할 방법을 고민 중이랍니다.

React Native Expo SDK 버전 관리

Sponge_ — Sat, 13 Sep 2025 23:46:14 +0900

현재 진행 중인 최종 프로젝트에 Frontend를 React-Native를 사용하고 있다.

이번 우리 팀의 주제가 웹 애플리케이션 보다는 모바일 앱이 더 적합하다고 판단하여 안드로이드, ios를 동시 개발이 가능한 React-Native를 사용하게 되었다.

하지만 React-Native는 한 번도 사용해본 적이 없는 언어였기에, 마냥 쉽지만은 않았다. 그래도 요즘 워낙 성능 좋은 AI 코딩 툴들이 많아서, 그들의 도움을 받아가며 열심히 진행을 하는 중이다.

오늘은 최근에 발생했던 Expo 버전 관리 이슈에 대한 내용을 다뤄보려고 한다.

Expo로 개발을 할때, 웹뷰, ios 시뮬레이터, 안드로이드 시뮬레이터 등 여러가지 Viewer로 자신의 프로젝트를 실행해볼 수가 있는데, 실제 자신의 모바일 폰으로도 해당 앱을 실행시켜 볼 수 있다.

npx expo start 라는 명령어로 실행시키면 QR 코드가 하나 나오는 것을 볼 수 있는데, 해당 QR을 카메라로 찍으면 Expo Go 앱을 통해 현재 나의 프로젝트 앱을 사용할 수 있다. 물론, Expo Go 앱이 자신의 폰에 설치가 되어 있어야 한다.

난 대부분 그냥 개발을 하며, ios 시뮬레이터를 통해 QA를 진행하지만, 그래도 가끔 실제 모바일 환경에서 잘 작동을 하는지, 또는 두 기기간의 상호작용 등이 필요할때는 모바일로 확인이 가능해야 하기 때문에 종종 사용을 하곤 했다. (최종적으론 모바일에서 사용하기 위해서 개발을 하는 것이기 때문에..)

그런데 바로 어제 오랜만에 또 QR을 통해 모바일에서 확인을 해보려던 찰나, Expo Go 앱이 업데이트가 되었는지, 현재 내가 프로젝트에 사용중인 Expo SDK 버전과 Expo Go 앱의 SDK 버전이 맞지 않다는 에러가 발생했다.

당연히 난 expo 버전을 업데이트 시켜주기만 하면 된다고 생각하여, 그렇게 업데이트를 해주었더니, 이제 온갖 오류가 발생하기 시작했다.

알고보니 expo 버전을 업데이트 시켜주었으면 현재 프론트에서 사용 중인 다른 모듈들의 버전도 현재 업데이트 된 expo 버전과 호환되는 버전으로 맞춰주어야 되는 것이었다.

react native로 버전 관리를 할때 보아야 할 파일은 package.json, package-lock.json 이렇게 두 개를 볼 수 있다.

"dependencies": {
  "react": "^18.2.0",
  "react-native": "0.74.3",
  "expo": "~51.0.8"
}

package.json에는 이런 식으로 대략적인 버전이 적혀있을 것이다.

"^18.2.0" → 18.x 버전대에서 최신 버전을 허용 (예: 18.3.1도 설치될 수 있음)
"~51.0.8" → 패치 버전만 변경 허용 (51.0.9는 가능, 51.1.0은 불가)
"0.74.3" → 정확히 0.74.3만 설치

이처럼 딱 정확한 버전을 지정해서 설치하는 것이 아니기 때문에 다른 팀원과 설치 시점 등이 달라지면 동일한 버전이 설치되지 않아서 충돌이 발생할 수 있다. 이것을 방지하기 위해서 존재하는 것이 package-lock.json이다.

"node_modules/react": {
  "version": "18.2.0",
  "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
  "integrity": "sha512-somehash"
}

이처럼 정확한 버전이 작성되어 있는것이 package-lock.json이기 때문에 팀원이 npm install을 했을 때,

package.json만 보고 설치하면 → 최신 버전 범위 안에서 각자 조금씩 다른 버전이 깔릴 수 있다
package-lock.json도 같이 있으면 → 정확히 같은 버전이 깔린다

하지만 현재 내가 중요한 것은 54 버전으로 업데이트를 진행한 expo에 맞춰서 사용중인 다른 모듈들의 버전도 모두 맞춰주어야 하는데, 그것을 어떻게 하나하나 다 알 수 있냐는 것이다.

이 때 유용한 명령어가 바로 npx expo-doctor 이다.

(final-project)% npx expo-doctor       
env: load .env
env: export GOOGLE_MAPS_API_KEY API_URL
15/17 checks passed. 2 checks failed. Possible issues detected:
Use the --verbose flag to see more details about passed checks.

✖ Check that no duplicate dependencies are installed
Your project contains duplicate native module dependencies, which should be de-duplicated.
Native builds may only contain one version of any given native module, and having multiple versions of a single Native module installed may lead to unexpected build errors.
Found duplicates for expo-constants:
  ├─ expo-constants@17.1.7 (at: node_modules/expo-constants)
  ├─ expo-constants@18.0.8 (at: node_modules/expo/node_modules/expo-constants)
  └─ expo-constants@18.0.8 (at: node_modules/expo-asset/node_modules/expo-constants)
Advice:
Resolve your dependency issues and deduplicate your dependencies. Learn more: https://expo.fyi/resolving-dependency-issues

✖ Check that packages match versions required by installed Expo SDK

❗ Major version mismatches
package                         expected  found    
expo-router                     ~6.0.1    5.1.6    
expo-status-bar                 ~3.0.8    2.2.3    
react-native-reanimated         ~4.1.0    3.19.1   
expo-constants                  ~18.0.8   17.1.7   
expo-linking                    ~8.0.8    7.1.7    

⚠️ Minor version mismatches
package                         expected  found    
react-dom                       19.1.0    19.0.0   
react-native-gesture-handler    ~2.28.0   2.24.0   
react-native-safe-area-context  ~5.6.0    5.4.0    
react-native-screens            ~4.16.0   4.11.1   
react-native-web                ^0.21.0   0.20.0   
react-native-webview            13.15.0   13.16.0  
typescript                      ~5.9.2    5.8.3    

  Patch version mismatches
package                         expected  found    
react-native                    0.81.4    0.81.0   

Changelogs:
- expo-router → https://github.com/expo/expo/blob/sdk-54/packages/expo-router/CHANGELOG.md
- expo-status-bar → https://github.com/expo/expo/blob/sdk-54/packages/expo-status-bar/CHANGELOG.md
- expo-constants → https://github.com/expo/expo/blob/sdk-54/packages/expo-constants/CHANGELOG.md
- expo-linking → https://github.com/expo/expo/blob/sdk-54/packages/expo-linking/CHANGELOG.md

13 packages out of date.
Advice:
Use 'npx expo install --check' to review and upgrade your dependencies.
To ignore specific packages, add them to "expo.install.exclude" in package.json. Learn more: https://expo.fyi/dependency-validation

2 checks failed, indicating possible issues with the project.

해당 명령어를 입력하면 서로 호환되지 않는 패키지 목록이 쭉 나오는 것을 확인할 수 있다.

npx expo install --check 명령어를 사용하면 위의 미스매치된 패키지들을 현재 54SDK 버전에 맞게 자동으로 설치를 해준다.

되도록이면 rm -rf node_modules package-lock.json 로 삭제를 하고 다시 npm install을 하는 것이 추후에 꼬일 위험을 방지할 수 있어서 좋다.

이 모든 과정을 거치고, npx expo start -c 로 캐시 삭제 후 실행을 해주면 아주 말끔히 정리된 것을 확인할 수 있다.

AI 900 자격증 취득 후기

Sponge_ — Sun, 24 Aug 2025 22:53:12 +0900

최근에 MS AI School 타운홀 미팅이 있었다.

이번 미팅에는 AI 900 자격증 시험이 치뤄졌기에, 며칠 공부를 하고 시험을 봤다.

사실, 내가 찾아본 정보에 의하면 시험이 난이도가 엄청 어려운 편은 아니고, 지금까지 수업을 열심히 들었다면 통과할 수 있는 시험이어서 딱히 긴장이 되진 않았다.

https://learn.microsoft.com/ko-kr/credentials/certifications/azure-ai-fundamentals/?practice-assessment-type=certification

Microsoft Certified: Azure AI 기본 사항 - Certifications

AI 솔루션을 만들기 위한 Microsoft Azure의 소프트웨어 및 서비스 개발과 관련된 기본 AI 개념을 보여 줍니다.

learn.microsoft.com

자세한 사항은 위의 링크에 접속하면 안내가 되어있다.

해당 시험은 온라인으로 이루어지고, $59 USD의 비용을 지불해야 하지만 현재 내가 수강 중인 과정이 Microsoft AI School이라 비용을 모두 제공받았다.

그리고 시험 감독까지 운영진 측에서 진행을 하여, 온라인 시험이지만 오프라인과 다를 바 없는 시험이었다.

문제는 총 45문제가 출제 되었고, 모두 객관식 문제였다.

머신러닝, 딥러닝, NLP, LLM, Azure AI 등 AI 분야를 공부 하는 중이라면 기본적으로 알아야 하는 내용들로 구성되어 있었다.

난이도는 생각했던대로 크게 어렵진 않았다.

Microsoft에서 주관하는 자격증이라서 그런지, 자사 서비스에 대한 문제가 나오는게 조금 불편했던 점(?)이었던 것 같다.

총 1000점 만점에 700점 이상이 통과이고, 당연히 난 합격을 했다 ㅎㅎ

시험이 종료되고 나면, 바로 해당 시험에 대한 결과가 나와서 확인을 할 수 있다.

시험 응시할 때 작성했던 나의 이메일로 바로 자격증 배지를 전송 받을 수 있다.

알고리즘 공부 내용 메모 - 시간 복잡도, 빅 오 표기법

Sponge_ — Tue, 19 Aug 2025 23:09:51 +0900

시간 복잡도

시간 복잡도는 서로 다른 알고리즘의 효율성을 비교할 때 사용는데, 몇 가지 규칙이 존재한다.

- input \geq≥ 0

입력값(n)은 항상 0보다 크다.

입력값이 음수일 수는 없기 때문에 복잡도는 항상 0보다 크다고 가정하고 계산을 해야한다.

- functions do more work for more input

함수는 많은 입력값이 있을 때 더 많은 작업을 하게 된다.

더 많은 입력값이 주어지면 어떤 작업을 하는 데 필요한 계산이나 처리 시간이 길어집니다.

- drop all constants

시간 복잡도에서는 모든 상수를 삭제한다.

만약 어떤 알고리즘의 복잡도가 3n3n 이라면 3은 고려하지 않고 복잡도는 nn이 된다. 2n2n, 3n3n, 10n10n 모두 복잡도가 nn 인 알고리즘.

- ignore lower order terms

낮은 차수의 항들은 무시한다.

시간 복잡도에서는 nn 과 n^2n2를 비교할 때에는 항상 n^2n2이 더 오래 걸리는 알고리즘이라고 판단한다. 여기서 의문이 들 수 있는 점은 그래프에서 (1,1)인 지점 전까지는 nn 이 더 오래 걸릴 수 있다는 것.

하지만 알고리즘에서는 입력값( nn )이 1보다 작은 값은 고려하지 않고 큰 값에 대해서만 생각을 하므로 nn 이 무한으로 커진 경우를 가정하고 비교해야 한다.

이런 이유로 시간 복잡도에서는 낮은 차수의 항들은 무시한다. n^3 + n^2 + nn3+n2+n 이라는 함수가 있을 때, nn 과 n^2n2은 알고리즘의 시간 복잡도에 영향을 미치지 않고, 입력값이 무한이 될 때 고려해야 할 부분은 n^3n3 이다.

- ignore the base of logs

시간 복잡도 함수가 log 함수를 포함할 경우 밑은 무시한다.

모든 로그는 서로 배수 관계. 그래서 복잡도에 관해서 이야기할 때는 로그의 밑에 대해서는 고려하지 않아도 됨.

로그의 밑은 무시하고 로그 ( lognlogn ) 알고리즘이라고만 말하면 된다.

복잡도가 loglog 인 알고리즘은 보통 무언가를 반으로 나누거나 2를 곱한 경우에 자주 사용된다. 그래서 만약 for 반복문을 사용해서 무언가를 탐색하면서 반으로 나누거나, 2를 곱할 때 복잡도는 밑이 2인 로그가 된다.

10으로 나누거나 10을 곱하게 되면 밑이 10인 로그가 된다. 하지만 시간 복잡도를 표시할 때에는 로그의 밑은 무시하고 그냥 log n 복잡도를 가진다고 표현한다.

- 2n = O(n)2n=O(n) => 2n \in O(n)2n∈O(n)

등호를 사용하여 표현한다.

2n2n 은 O(n)O(n) 과 같습니다. 여기서 O(n)O(n) 은 2n2n 이 어떤 함수의 집합에 속한다는 의미를 가진다. 그렇기 때문에 아래와 같은 등호를 활용하여 이 관계를 수학적으로 쓸 수 있다.

2n = O(n), 2n ∈ O(n)

빅 오 표기법

빅 오 표기법은 알고리즘의 효율성을 표시하는 표기법이다. 빅 오 표기법을 사용하면 어떤 알고리즘을 다른 알고리즘과 비교해서 표현하는 것이 가능하다.

위 그래프는 복잡도가 nn 인 알고리즘에 빅 오 표기법을 적용한 결과이다. x축은 복잡도 n, y축은 필요한 일의 양이나 메모리를 의미한다.

다른 알고리즘이 이 그래프의 어떤 위치에 있는지에 따라 복잡도 nn 인 알고리즘과 다른 알고리즘의 복잡도를 비교할 수 있다. 다른 알고리즘이 복잡도 nn 인 알고리즘의 아래에 있다면, 같은 일을 하는 데 시간이 덜 들기 때문에 더 빠른 알고리즘이라 한다. 반대로, 복잡도 nn 인 알고리즘의 위에 있다면, 더 느린 알고리즘이다.

빅 오 표기법에서는 이러한 알고리즘 간의 관계를 다음과 같이 표현한다.

O (빅 오 복잡도) : 비교 대상인 그래프가 일치 혹은 아래에 있을 때. 비교 대상인 다른 알고리즘과 같거나 더 빠르다.
θ (세타 복잡도) : 비교 대상인 그래프가 일치할 때. 비교 대상인 다른 알고리즘과 같다.
Ω (빅 오메가 복잡도) : 비교 대상인 그래프가 일치 혹은 위에 있을 때. 비교 대상인 다른 알고리즘과 같거나 느리다.
o (리틀 오 복잡도) : 비교 대상인 그래프가 아래에 있을 때. 비교 대상인 다른 알고리즘보다 더 빠르다.
ω (리틀 오메가 복잡도) : 비교 대상인 그래프가 위에 있을 때. 비교 대상인 다른 알고리즘과 느리다.

[MS AI School] 2차 팀프로젝트 - 날 힘들게 했던 오류들 모음

Sponge_ — Mon, 4 Aug 2025 22:49:05 +0900

프로젝트를 진행 하는 중에도 수 많은 오류들을 해결하면서 진행이 되었지만, 발표 전날 나를 책상에서 15시간 동안 일어나지 못하게 했던 여러 오류들을 모아보았다.

이 날 모든걸 다 해결하고 책상에서 일어나려는 순간, 허리에 극심한 통증을 느끼며 그대로 저녁도 못 먹고 침대에 누웠다...

(왜 사람들이 비싸도 좋은 의자를 쓰라고 하는지 알겠음.)

먼저 배포를 어떤식으로 했는지 간략히 설명을 하자면, 모든 작업물을 Github의 팀 Repository에 push 해놓고, Azure VM을 활용하여 구축한 가상환경에서 그대로 pull로 당겨오는 것이었다.

프로젝트 실행은 로컬과 마찬가지로 FastAPI의 uvicorn서버로 실행을 해주었다.

1. CORS Error

첫 번째 오류는 개발 단계에서 로컬 환경으로 테스트를 하며 발생했던 오류였는데, 나름 인상 깊었던(?) 오류였어서 한 번 다뤄 보려고 한다.

우리 프로젝트의 기능 중 하나인 챗봇이 유튜브 영상 추천을 할 때, 유튜브 API를 통해 영상 search query를 보내고, 결과를 받아 오게 되어있다. 그런데 유튜브 영상을 받아 오려고 하면 자꾸 에러가 나서 확인을 해본 결과, CORS Error라고 나오는 것이다.

그리하여 CORS에 대해서 조금씩 찾아보게 되었다.

CORS(Cross-Origin-Resource-Sharing)는 서로 다른 출처들 끼리도 리소스를 공유한다는 것이다.

여기서 다른 출처(Origin)란?

기본적으로 출처는 다음과 같이 3요소로 정의된다.

프로토콜 (http://, https://)
호스트 (localhost, 127.0.0.1, myserver.test.org)
포트 번호 (3000, 8000 등)

즉, 다음은 모두 서로 다른 origin이라고 할 수 있다.

http://localhost:3000
http://127.0.0.1:3000
http://localhost:8000

같은 origin에서는 요청이 오는 곳과 처리하는 곳이 일치하기 때문에 따로 보안처리를 해줄 필요가 없다. 하지만 다른 origin에서 오는 요청이라면 내가 요청으로 받아온 결과가 믿을만한지 검증하는 과정이 필요하다. 대부분의 브라우저에서는 기본적으로 결과의 헤더 값을 통해 CORS를 확인한다.

브라우저에서는 localhost:8080 서버에서 전달 받은 응답 중 헤더에 Access-Control-Allow-Origin 값을 확인하고, 이 값에 현재 origin이 포함되어 있는지 확인한다. 만약 있다면 CORS를 수행하고, 그렇지 않다면 에러를 보낸다.

이렇듯 따지고 보면 CORS 에러는 브라우저에서 발생시키는 에러이다. 그래서 curl을 통해 서버에 요청을 보내면 문제없이 응답을 보내주지만, 프론트 환경에서 테스트를 할 때만 CORS 에러가 발생하는 것도 그런 이유였던 것이다.

해결방법

해결 방법은 간단했다.

백엔드에서 그냥 모든 주소를 Access-Control-Allow-Origin로 주면 해결된다.

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

물론, 실제 서비스 배포시에는 더 정밀한 보안 작업이 이루어져야겠지만, 학습이 목적인 프로젝트에서, 그리고 계속해서 테스트를 해야하는 단계에서는 위와 같은 방법으로 간단히 해결을 할 수 있다.

2. 414 Error

코딩 공부를 하는 사람이라면, 그래도 404, 405 정도는 많이 봤을 거다. 그런데 414 Error는 본 적 있는가? 나는 솔직히 이번에 처음 봤다.

이번 오류는 유튜브 API 요청을 보내는 부분에서 발생했는데, 위에서 겪었던 CORS 문제랑 비슷한 맥락이긴 하다. 다만 중요한 건, 그 문제는 로컬 환경에서도 발생했던 반면, 이번 414 Error는 VM 환경에서만 발생했다는 점이다.

먼저, 414 Error는 URI Too Long이라는 뜻이다.

그런데 문제는 콘솔에 뜨는 에러 메시지가 생각만큼 친절하지 않아서, 정확한 원인을 파악하기가 어려웠다. 그래서 여기저기 블로그 글도 찾아보고, 아는 LLM들을 총동원해서 끙끙 앓듯이 매달렸다.

그러던 중, 요청 query를 직접 확인해보게 됐는데 원래라면 챗봇의 응답에서 3개의 키워드만 추출해서 유튜브 검색을 해야 하는데, 응답 전체가 query로 들어가고 있었던 거다. 이걸 보고 바로 눈치챘다. 아, 이건 키워드 3개만 추출하는 함수 자체가 애초에 제대로 작동을 안 했구나.

좀 더 파고들어보니, 챗봇의 응답 전체에서 키워드를 추출해야 하는 함수로 넘어가는 과정에서, 응답이 너무 길어서 아예 그 함수까지 못 가고 에러가 바로 터진 거였다.

근데 여기서 또 하나의 의문이 생겼다.

“왜 로컬 환경에서는 멀쩡히 잘 작동했지?”

결론부터 말하면, VM 환경에선 프로젝트가 FastAPI 서버로 구동되긴 했지만, 그 서버가 Apache를 통해 라우팅되고 있었기 때문이었다.

즉, 실제 요청이 Apache 웹 서버를 거쳐서 uvicorn으로 가는 구조였는데, Apache는 보안상의 이유로 URI 최대 길이에 제한이 걸려있다. 스팸이나 DoS 공격을 방지하기 위해 기본적으로 처리할 수 있는 URL 길이에 제한이 있는 거지. 그래서 저렇게 URI가 길어지면 414 에러가 발생할 수밖에 없다.

해결 방법은 간단했다.

프론트에서 요청을 보낼 때, base URL에 8000 포트를 명시해주면 Apache를 거치지 않고 FastAPI(uvicorn)로 직접 연결되게 할 수 있다. 그렇게 하니까 바로 해결됐다.

흐름을 정리하자면,

수정 전 :

BASE_API_URL이 포트 없이 설정되어 있었음 (예: http://your-domain.com) 브라우저는 이 주소의 기본 포트인 80번으로 요청을 보냄.
아파치가 80번 포트에서 이 매우 긴 URL 요청을 받음.
아파치에는 스팸이나 서비스 거부(DoS) 공격 등을 방지하기 위해 처리할 수 있는 URL의 최대 길이를 제한하는 설정(LimitRequestLine)이 있음.
요청된 URL이 이 설정된 길이보다 길었기 때문에, 아파치는 "414 URI Too Long" 에러를 응답하고 FastAPI 서버로 요청을 전달조차 하지 않고 연결을 끊어버림.

수정 후 :

BASE_API_URL에 :8000을 추가. (예: http://your-domain.com:8000)
브라우저는 이제 80번 포트가 아닌 8000번 포트로 직접 요청을 보냄.
이 요청은 Apache를 거치지 않고, 방화벽에서 허용되어 있다면 곧바로 FastAPI 애플리케이션 서버(Uvicorn)에 도달.
FastAPI를 실행하는 Uvicorn 같은 ASGI 서버들은 일반적으로 아파치의 기본 설정보다 URL 길이에 대한 제한이 훨씬 널널하기 때문에 에러를 발생시키지 않음.

3. 프롬프트 엔지니어링

분명 로컬에서 할 때에는 잘 됐었는데, VM환경에서 테스트를 해보니까 거의 10% 확률로 플랜을 저장 해주었다...

원인은 깊게 파고들 필요도 없었다.

먼저 해당 기능의 흐름은, 챗봇의 답변에서 필요한 정보(날짜, 운동 종류, 세트 수, 음식 이름 등)를 추출해서 내가 지정해준 JSON 형태로 파싱하고, 그걸 다시 DB 저장 함수에 넘겨서 저장하는 구조였다.

그런데 문제는, 챗봇의 답변에서 이 필요한 정보를 정확히 추출하지 못하면서, 일부 데이터만 DB에 저장되거나, 아예 저장이 안 되고 Time Out 에러가 발생하는 상황이 발생했다.

처음에는, 챗봇이 만든 답변에서 정보를 추출해주는 부분의 시스템 프롬프트를 계속 수정하면서 테스트를 돌렸다. 조금 더 명확하게, 상세하게 지시해주면 나아지겠지 싶어서 계속 바꿔봤지만, 아무리 잘 써도 프롬프트가 너무 길어져서 요청 시간만 오래 걸리고, 성능은 어느 정도 나아졌지만 결국 한계에 부딪히게 되었다.

그러던 중, 한 가지 흐름에서 힌트를 얻었다.

챗봇이 운동/식단 플랜에 대한 요청을 받았을 때의 답변 내용이 전반적으로 랜덤성이 있다는 점이다. 특히 날짜 부분(예를 들어 Day 1, Day2, 첫째날 등)이 고정된 양식 없이 랜덤하게 표현되고 있었고, 이 때문에 정보 추출 과정이 애매해지는 상황이 반복되었다.

즉, 루틴에 대한 답변 양식을 정확하게 정의해준 적이 없었기 때문이었다.

그래서 나는 방향을 바꿨다.

애초에 챗봇이 운동/식단 플랜을 응답할 때부터 어느 정도의 양식을 정해주고, 그 양식대로 답변을 하도록 가이드라인을 만들어줬다. 그리고 이어지는 정보 추출 단계에서도, 챗봇이 어떤 양식으로 답변을 주게 될지를 염두에 두고, 해당 양식을 어떻게 JSON으로 파싱하면 되는지에 대한 프롬프트를 정확하고 명확하게 작성해줬다.

결과적으로, 이 방식으로 프롬프트를 수정한 이후에는 거의 100%에 가까운 정확도로 정보 추출과 DB 저장이 성공적으로 이루어졌다.

- 기본 시스템 프롬프트 일부 (plan 요청에 대한 답변 가이드 라인 부분)

[운동 루틴 및 식단 플랜 생성 지침 (필수)]
    사용자가 운동 루틴 또는 식단 플랜을 요청하면, 다음 마크다운 형식을 엄격하게 준수하여 답변하세요.
    - **날짜는 항상 명확하게 'YYYY년 M월 D일' 형식으로 표시하세요.**
    - **운동 루틴과 식단 플랜은 항상 별도의 섹션으로 구분하세요.**

    **운동 루틴 형식:**
    ```
    # 운동 루틴

    ## YYYY년 M월 D일 (요일) - [운동 목표/부위]
    - 운동명: 세트수 x 횟수 (무게/시간)
    - 운동명: 세트수 x 횟수 (무게/시간)
    ...

    ## YYYY년 M월 D일 (요일) - [운동 목표/부위]
    - 운동명: 세트수 x 횟수 (무게/시간)
    ...
    ```
    *   예시: `- 스쿼트: 3x10 (50kg)`, `- 플랭크: 3x30초`
    *   무게나 시간이 없는 맨몸 운동은 괄호 생략

    **식단 플랜 형식:**
    ```
    # 식단 플랜

    ## YYYY년 M월 D일 (요일)
    ### 아침
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ### 점심
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ### 저녁
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ### 간식
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ```
    *   예시: `- 닭가슴살: 165kcal, 31g, 0g, 3.6g`
    *   정보가 없는 경우 '정보 없음'으로 표시 (예: `- 사과: 정보 없음, 정보 없음, 정보 없음, 정보 없음`)

    **두 가지 플랜을 모두 요청받았을 경우, 운동 루틴을 먼저 제시하고 이어서 식단 플랜을 제시하세요.**

답변 파싱 및 저장 함수의 시스템 프롬프트

당신은 AI 트레이너의 답변에서 제공된 마크다운 형식의 운동 루틴과 식단 플랜을 추출하여 JSON으로 변환하는 시스템입니다.
    AI의 답변은 다음 마크다운 형식을 엄격하게 준수합니다:

    **운동 루틴 형식:**
    ```
    # 운동 루틴

    ## YYYY년 M월 D일 (요일) - [운동 목표/부위]
    - 운동명: 세트수 x 횟수 (무게/시간)
    ...
    ```
    *   예시: `- 스쿼트: 3x10 (50kg)`, `- 플랭크: 3x30초`
    *   무게나 시간이 없는 맨몸 운동은 괄호 생략

    **식단 플랜 형식:**
    ```
    # 식단 플랜

    ## YYYY년 M월 D일 (요일)
    ### 아침
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ### 점심
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ### 저녁
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ### 간식
    - 음식명: 칼로리(kcal), 단백질(g), 탄수화물(g), 지방(g)
    ```

    **추출 지침:**
    1.  **날짜 파싱:** 'YYYY년 M월 D일 (요일)' 형식의 날짜를 'YYYY-MM-DD' 형식으로 변환하세요. 요일 정보는 무시합니다. 만약 시작 날짜가 명확히 명시되지 않았다면, 오늘({date.today().isoformat()})을 기준으로 삼으세요.
    2.  **운동 루틴 파싱:**
        - 각 운동 항목에서 '운동명', '세트수', '횟수', '무게(kg)' 또는 '시간(분)'을 추출하세요.
        - '무게/시간'이 없는 경우 해당 필드는 null로 처리하세요.
        - '무게'는 'weight_kg' 필드에 숫자로 저장하고, '시간'은 'duration_min' 필드에 분 단위 정수(integer)로 저장하세요. 둘 다 있는 경우는 없습니다. 둘 중 하나만 존재합니다.
        - 'exercise_name', 'reps', 'sets', 'weight_kg', 'duration_min' 필드를 사용하세요.
    3.  **식단 플랜 파싱:**
        - 각 식사 항목에서 'meal_type' (아침, 점심, 저녁, 간식), '음식명', '칼로리(kcal)', '단백질(g)', '탄수화물(g)', '지방(g)'을 추출하세요.
        - '칼로리', '단백질', '탄수화물', '지방'은 가능한 한 구체적인 수치로 제공하고, 정보가 없는 경우 null로 처리하세요.
        - 'food_name', 'calories', 'protein_g', 'carbs_g', 'fat_g' 필드를 사용하세요.

    **출력 형식:**
    ```json
    {{"plans": [
        {{"date": "YYYY-MM-DD", "type": "workout", "items": [
            {{"exercise_name": "운동명", "reps": "횟수", "sets": "세트수", "weight_kg": "무게(숫자) 또는 null", "duration_min": "시간(정수) 또는 null"}}
        ]}},
        {{"date": "YYYY-MM-DD", "type": "diet", "items": [
            {{"meal_type": "아침/점심/저녁/간식", "food_name": "음식명", "calories": "칼로리(숫자) 또는 null", "protein_g": "단백질(숫자) 또는 null", "carbs_g": "탄수화물(숫자) 또는 null", "fat_g": "지방(숫자) 또는 null"}}
        ]}}
    ]}}
    ```
    만약 AI 답변이 운동 루틴이나 식단 계획이 아니거나 파싱할 수 없으면, {{"plans": []}} 를 반환하세요.
    """

프로젝트 기간이 짧긴 했어도, 초반에 바짝 열심히 해서 나름 빨리 잘 마무리 하겠다 싶었는데 하필 하루 전날 이러한 오류들이 여기저기 터져 나와서 진짜 죽고 싶었다... 하지만 덕분에 더 완성도 높은 결과물을 만들게 된 것 같기도 하고, 결과적으론 모든 오류들을 다 해결할 수 있어서 아주 뿌듯했던 경험이었다.

다음부터는 배포 환경에서의 테스트도 미리 염두에 두고, 프로젝트를 미리 배포 환경에서도 테스트를 계속 돌려보는 과정을 거치면 더 좋을 것 같다는 깨달음(?)도 얻을 수 있었다.

[MS AI School] 2차 팀 프로젝트 - 2

Sponge_ — Mon, 21 Jul 2025 19:31:23 +0900

우리의 서비스는 기본적으로 사용자에 대한 정보가 저장이 되어야 했기에, 데이터 베이스를 구축하는 작업이 필요했다.

먼저 사용할 프레임워크에 대해 고민을 하였는데, 비동기 처리에 적합한 FastAPI, 그리고 이와 잘 호환이 되기도 하고, 내가 기존에 사용해본 경험이 있는 Oracle SQL 과 비슷한 MySQL을 사용하기로 했다.

그 후 나는 팀원들과 의논하여 DB에 저장되어야 할 데이터들에 대한 정의를 먼저 해주었다.

시작하기에 앞서, 대부분의 코드 작업들은 AI 에이전트의 도움을 받아 진행되었다는 점을 밝힌다.

요즘은 코딩을 할때 Gemini CLI의 도움을 많이 받는데, 거의 무료나 다름 없는 이 녀석이 상당히 성능이 좋다.

DataBase 설계 & 구축

먼저, 사용자의 정보가 담긴 테이블은 필요로 했고, 사용자는 가입 시, 본인의 운동 수준이 어느 정도인지 기입을 해야 하기에, 운동 레벨 테이블도 따로 필요로 했다.(각 운동 수준별 설명이 필요했기에 따로 분리해서 관리해주었다)

그리고 챗봇과 대화한 내역이 저장될 chat_histories 테이블, 마지막으로 시간의 흐름에 따른 체중 변화를 보여주기 위한 체중 테이블도 정의해주었다.

최종 테이블 생성 SQL 쿼리문

CREATE TABLE training_levels (
    level INT PRIMARY KEY,
    description TEXT
);

-- 사용자 테이블
CREATE TABLE users (
    user_id VARCHAR(50) PRIMARY KEY,
    age INT NOT NULL,
    gender ENUM('남성', '여성') NOT NULL,
    weight FLOAT NOT NULL,
    height FLOAT NOT NULL,
    level INT NOT NULL,
    injury_level VARCHAR(100),
    injury_part VARCHAR(100),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (level) REFERENCES training_levels(level)
        ON UPDATE CASCADE
        ON DELETE RESTRICT
);

CREATE TABLE chat_histories (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(50) NOT NULL,
    role_type ENUM('user', 'assistant', 'system') NOT NULL,
    content TEXT NOT NULL,
    embedding JSON,
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(user_id) ON DELETE CASCADE
);

CREATE TABLE weight_history (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(50),
    weight FLOAT NOT NULL,
    recorded_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(user_id) ON DELETE CASCADE
);

백엔드 아키텍쳐

먼저, 내가 설계한 백엔드 구조는 계층형 아키텍처(Layered Architecture)를 따르고 있다.

각 디렉터리와 파일이 명확한 역할을 갖도록 설계하여, 코드가 복잡해져도 쉽게 관리하고 확장할 수 있도록 하였다.

main.py : FastAPI 애플리케이션의 시작점. 서버 실행, 미들웨어 설정, 라우터 등록 등 핵심 설정을 담당
routers/ : 클라이언트의 HTTP 요청을 직접 받는 API 엔드포인트들을 정의
crud/ : 데이터베이스와 상호작용하며 비즈니스 로직을 처리
schemas/ : Pydantic 모델을 사용하여 API 요청 및 응답의 데이터 형태를 정의하고 검증
utils/ : 특정 기능을 수행하는 재사용 가능한 함수들의 모임
core/ & database.py : 데이터베이스 연결 설정, 환경 변수 등 프로젝트의 핵심 설정을 관리

회원가입

흐름 요약
Client 요청 → routers/user.py → crud/user.py → DB에 사용자 저장 → JWT 발급 → Client 응답

(1) API 엔드포인트 (routers/user.py)

먼저, 클라이언트가 회원가입 POST 요청을 보내면 아래의 코드가 실행된다.

# routers/user.py
from fastapi import APIRouter, HTTPException
from schemas.user import UserSignup
from schemas.user import UserLogin
from crud.user import verify_user
from crud.user import create_user
from utils.jwt_handler import create_access_token

router = APIRouter(prefix="/users")

@router.post("/signup")
async def signup(user: UserSignup):
    success = await create_user(user)
    if not success:
        raise HTTPException(status_code=400, detail="이미 존재하는 아이디입니다.")

    # JWT 토큰 생성
    access_token = create_access_token(data={"sub": user.user_id})

    # 메시지 + 토큰 반환
    return {
        "message": f"{user.user_id}님 가입이 완료되었습니다.",
        "access_token": access_token
    }

요청으로 들어온 데이터가 schemas/user.py에 정의된 UserSignup 모델과 일치하는지 자동으로 검증한다.

데이터베이스 작업은 crud 계층으로 넘겨주고, 가입이 성공하면 바로 로그인 상태를 유지할 수 있도록 JWT토큰을 발급하게 하였다.

# schemas / user.py

# schemas/user.py
from pydantic import BaseModel

class UserSignup(BaseModel):
    user_id: str
    gender: str
    age: int
    height: float
    weight: float
    level: int
    injury_level: str | None = None
    injury_part: str | None = None

class UserLogin(BaseModel):
    user_id: str

(2) 데이터베이스 처리 (crud/user.py)

라우터로 부터 요청을 받아 데이터베이스에 사용자 정보를 저장하는 부분.

INSERT를 하기 전에 SELECT 로 사용자가 이미 존재하는지 먼저 확인하여 데이터 무결성을 보장하였다.

# crud/user.py
from database import database
from schemas.user import UserSignup

async def create_user(user: UserSignup):
    # 1. 먼저 동일한 user_id가 이미 존재하는지 확인
    check_query = "SELECT 1 FROM users WHERE user_id = :user_id"
    existing = await database.fetch_one(query=check_query, values={"user_id": user.user_id})
    
    if existing:
        return False  # 이미 존재함

    # 2. 존재하지 않는다면 새로 INSERT
    insert_query = """
        INSERT INTO users (user_id, gender, age, height, weight, level, injury_level, injury_part)
        VALUES (:user_id, :gender, :age, :height, :weight, :level, :injury_level, :injury_part)
    """
    await database.execute(query=insert_query, values={
        "user_id": user.user_id,
        "gender": user.gender,
        "age": user.age,
        "height": user.height,
        "weight": user.weight,
        "level": user.level,
        "injury_level": user.injury_level,
        "injury_part": user.injury_part,
    })
    return True

로그인

흐름 요약
Client 요청 → routers/user.py → crud/user.py → DB에서 사용자 확인 → JWT 발급 → Client 응답

(1) API 엔드포인트 (routers/user.py)

crud 계층에 사용자 확인을 요청하고, 성공하면 JWT 토큰을 발급하여 반환한다.

@router.post("/login")
async def login(user: UserLogin):
    is_valid = await verify_user(user.user_id)
    if not is_valid:
        raise HTTPException(status_code=404, detail="존재하지 않는 사용자입니다.")
    # ✅ JWT 토큰 생성
    access_token = create_access_token(data={"sub": user.user_id})
    
    return {
        "access_token": access_token,
        "token_type": "bearer"
    }

(2) 사용자 검증 (crud/user.py)

회원가입 때와 마찬가지로, SELECT 쿼리를 통해 데이터베이스에 해당 user_id가 있는지 확인.

async def verify_user(user_id: str) -> bool:
    query = "SELECT user_id FROM users WHERE user_id = :user_id"
    result = await database.fetch_one(query=query, values={"user_id": user_id})
    return result is not None

JWT 토큰 인증

로그인을 하지 않은 사용자들의 진입을 제한하기 위해서, JWT 토큰을 사용하여 사용자 인증 기능을 구현하였다.

(1) JWT 생성 (utils/jwt_handler.py)

토큰의 유효기간을 설정하여, 이 시간이 지나면 토큰은 자동으로 만료되게 하였다.
사용자 정보와 만료 시간을 SECRET_KEY(비밀 키)를 이용해 암호화하여 아무나 위조할 수 없는 토큰을 생성한다.

# backend/utils/jwt_handler.py

from datetime import datetime, timedelta
from jose import JWTError, jwt
from fastapi import HTTPException, status, Depends
from fastapi.security import OAuth2PasswordBearer
from core.config import SECRET_KEY, ALGORITHM, ACCESS_TOKEN_EXPIRE_MINUTES

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="users/login")  # 로그인 API 엔드포인트 경로

# 토큰 생성 함수
def create_access_token(data: dict):
    to_encode = data.copy()
    expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    to_encode.update({"exp": expire})
    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
    return encoded_jwt

(2) JWT 검증 및 사용자 인증 (dependencies.py)

사용자가 로그인 후 인증이 필요한 API를 요청할 때, 이 토큰이 유효한지 검사해야 한다.

FastAPI의 Dependency Injection(의존성 주입) 시스템을 사용하면 이 과정을 쉽게 처리할 수 있다.

# backend/dependencies.py

from fastapi import Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer
from jose import JWTError, jwt
import os
from dotenv import load_dotenv

load_dotenv()

SECRET_KEY = os.getenv("SECRET_KEY")
ALGORITHM = os.getenv("ALGORITHM")

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="users/login")

async def get_current_user(token: str = Depends(oauth2_scheme)):
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        user_id: str = payload.get("sub")
        if user_id is None:
            raise HTTPException(status_code=401, detail="토큰에 사용자 정보 없음")
        return {"user_id": user_id}
    except JWTError:
        raise HTTPException(status_code=401, detail="유효하지 않은 토큰")

이 get_current_user 함수는 보호된 API 엔드포인트에서 다음과 같이 사용된다.

@router.get("/me")
async def read_user_info(current_user: dict = Depends(get_current_user)):
    user_id = current_user["user_id"]
    user = await get_user_by_id(user_id)
    if not user:
        raise HTTPException(status_code=404, detail="사용자 정보를 찾을 수 없습니다.")
    return {"user": user}

Depends(get_current_user) 한 줄만 추가하면, FastAPI가 알아서 요청 헤더에서 토큰을 추출하고 get_current_user 함수로 검증한 뒤, 그 결과를 current_user 매개변수에 넣어준다.

만약 토큰이 없거나 유효하지 않으면, 함수 본문은 실행조차 되지 않고 바로 에러가 반환된다.

챗봇과 대화 하기

흐름 요약
Client 메시지 전송 → routers/chat.py → utils/openai_client.py → OpenAI API 호출 → AI 답변 수신 → crud/chat.py → DB에 대화 저장 → Client에 답변 전송

(1) API 엔드포인트 (routers/chat.py)

from fastapi import APIRouter, Depends, HTTPException, UploadFile, File, Form
from dependencies import get_current_user
from utils.openai_client import (
    ask_openai_unified,
    get_embedding,
    should_search_long_term_memory
)
from crud.chat import (
    save_chat_history, 
    retrieve_and_rerank_history,
    get_recent_chat_history
)
from schemas.chat import ChatHistoryCreate
from typing import Dict, List

router = APIRouter()

# --- 단기 기억 캐시 (In-memory Cache) ---
chat_cache: Dict[str, List[Dict]] = {}
CACHE_MAX_LENGTH = 10 # 단기 기억으로 저장할 최대 대화 개수

@router.post("/chat/image")
async def chat_with_text_or_image(
    message: str = Form(""),
    image: UploadFile = File(None),
    current_user: dict = Depends(get_current_user)
):
    user_id = current_user['user_id']
    rag_history = [] # 장기 기억 검색 결과를 담을 리스트
    embedding = None # 임베딩은 장기 기억 검색 시에만 생성

    try:
        # 1. 단기 기억 조회
        recent_history = chat_cache.get(user_id, [])

        # 2. 장기 기억 검색 여부 판단 (게이트키퍼)
        if await should_search_long_term_memory(message, recent_history):
            print(f"[DEBUG] User({user_id}): 장기 기억 검색 필요. RAG 파이프라인 실행.")
            # --- 깊은 검색 경로 (RAG Pipeline) ---
            # a. 원본 질문을 직접 임베딩
            embedding = await get_embedding(message)
            
            # b. 검색 및 재정렬
            rag_history = await retrieve_and_rerank_history(
                user_id=user_id,
                original_question=message, # 재정렬 시에는 원본 질문을 사용
                transformed_embedding=embedding # 검색 시에는 원본 질문의 임베딩을 사용
            )
        else:
            print(f"[DEBUG] User({user_id}): 단기 기억으로 충분. 빠른 응답 실행.")
            # --- 빠른 경로 (RAG 생략) ---
            # embedding은 None으로 유지

        # 3. 최종 답변 생성
        response = await ask_openai_unified(
            user_message=message,
            image=image,
            recent_history=recent_history,
            rag_history=rag_history
        )

        # 4. 기억 업데이트
        # a. 장기 기억 (DB) 저장
        user_chat_for_db = ChatHistoryCreate(user_id=user_id, role_type="user", content=message, embedding=embedding)
        assistant_chat_for_db = ChatHistoryCreate(user_id=user_id, role_type="assistant", content=response)
        await save_chat_history(user_chat_for_db)
        await save_chat_history(assistant_chat_for_db)

        # b. 단기 기억 (Cache) 업데이트
        if user_id not in chat_cache:
            chat_cache[user_id] = []
        chat_cache[user_id].append({"role": "user", "content": message})
        chat_cache[user_id].append({"role": "assistant", "content": response})
        
        # 캐시 길이 제한
        if len(chat_cache[user_id]) > CACHE_MAX_LENGTH:
            chat_cache[user_id] = chat_cache[user_id][-CACHE_MAX_LENGTH:]

        return {"response": response}

    except Exception as e:
        print(f"채팅 처리 중 오류 발생: {e}")
        raise HTTPException(status_code=500, detail=f"An error occurred: {e}")

Trouble Shooting

챗봇을 구현하면서 가장 애를 많이 먹었던 부분이 이 대화 내역 저장 부분이다.

처음엔 단순히 대화 내역을 DB에 저장하고, 그 내역을 가지고 챗봇이 대화를 하게 구현하면 된다고 생각을 했었다.

하지만 그렇게 짜여진다면, DB에 저장된 데이터가 점점 늘어날수록 엄청난 용량의 DB를 매번 스캔 할 것이고, 메모리도, 토큰도 많이 잡아먹는 아주 비효율적인 구조가 된다.

First

처음 내가 떠올렸던 방법은 일단 대화 내역은 모두 DB에 저장을 하고, 사용자의 프롬프트를 받으면 먼저 이 프롬프트가 과거의 데이터가 필요한 질문인지 GPT모델에게 Yes or No로 답을 하게 한다. 그리고 Yes라는 답이 떨어지면, 그 때만 DB에서 관련된 과거의 대화를 가져와서 모델이 해당 대화 내역을 참조하게 하는 것이다.

DB에서 관련된 데이터를 가져오게 하는 방식은 대화 내역을 저장할때, 해당 대화내역을 텍스트 임베딩 모델을 거쳐서 임베딩 벡터도 함께 저장한 뒤, 나중에 사용자의 프롬프트의 임베딩 벡터와 유사도를 비교하여 가져오게 했다.

하지만 여기서 또 문제가 발생했다.

예를 들어, 사용자가 "나 오늘 운동을 하다가 어깨에 부상을 당했어." 라는 대화를 했다고 해보자.

며칠 뒤, 모델에게 "나 저번에 부상 당한 곳 관리를 어떻게 하면 좋을까?" 라고 프롬프트를 작성하여 보내면, 이게 문장 형식의 차이 때문인지 유사도가 너무 낮게 나와서 저 어깨 부상을 당했다는 과거 내역을 모델이 가져오지 못하는 것이다.

Second

그래서 나는 유사도를 계산을 하게 한 후, 그것을 다시 reranking 하는 방식을 사용하였다.

유사도가 많이 낮게 나오긴 하지만, 그래도 다른 대화들에 비해서는 유사도가 높게 나오기 때문에 재정렬을 한 상위 3개의 대화 내역을 모델이 참조 할 수 있도록 구현하였다.

그리고 단기 기억으로는 10개의 대화 내역 까지는 모델이 기억을 할 수 있게 하여, 굳이 단기 기억으로 해결 할 수 있는 프롬프트들은 DB를 거치지 않게 구현하였다.

그래서 최종적으로 정리하자면,

사용자의 프롬프트가 들어오면, 먼저 해당 질문을 GPT모델이 과거 대화내역이 필요한 질문인지(과거 부상 이력 등), 바로 답변 해도 되는 질문인지(ex : 안녕?) 판단하여 Yes or No로 내부적으로 답변을 받는다.

챗봇은 단기 기억(캐시)과 장기 기억(DB), 두 가지 방식으로 대화를 관리한다.

1. 대화 저장 (모든 대화는 두 곳에 동시 저장)
* 장기 기억 (DB): 모든 대화 내용을 영구적으로 저장. 나중에 검색할 수 있도록 임베딩 벡터도 함께 저장됨.
* 단기 기억 (캐시): 가장 최근 대화 몇 개만 임시로 저장하여 빠르게 참조 할 수 있음.

2. 대화 참조 (상황에 따라 2단계로 참조)

- 항상 단기 기억 먼저 확인: 어떤 질문이든 일단 가장 최근 대화(단기 기억)를 먼저 확인.
- 필요할 때만 장기 기억 검색:
* 단순한 대화 : 최근 대화만으로 충분하면, 장기 기억(DB)을 보지 않고 바로 빠르고 가벼운 답변을 생성합니다.
* 과거 정보가 필요한 질문 : 과거 정보가 필요하다고 판단되면, 장기 기억(DB)에서 관련 내용을 검색.

이미지 처리

사용자의 인바디 결과지 분석도 주요 기능 중 하나이기 때문에 이미지도 업로드 할 수 있게 구현하였다.

그런데 이미지 처리를 GPT 모델에게 바로 맡기니까, 모델이 텍스트를 잘못 인식하는 부분이 꽤 많았다.

그래서 나는 Azure의 Vision 모델로 텍스트를 추출하고, 원본 이미지와 추출한 텍스트를 모두 GPT모델에게 전달하여 텍스트를 잘못 인식할 확률을 최대한을 낮추었다.

OCR 코드

import os
import tempfile
from azure.ai.vision.imageanalysis import ImageAnalysisClient
from azure.ai.vision.imageanalysis.models import VisualFeatures
from azure.core.credentials import AzureKeyCredential
from fastapi import UploadFile
from dotenv import load_dotenv

load_dotenv()

# Azure OCR 클라이언트 초기화
VISION_ENDPOINT = os.getenv("VISION_ENDPOINT")
VISION_KEY = os.getenv("VISION_KEY")

client = ImageAnalysisClient(
    endpoint=VISION_ENDPOINT,
    credential=AzureKeyCredential(VISION_KEY)
)

async def extract_text_from_bytes(image_bytes: bytes) -> str:
    # 전달받은 바이트를 임시파일에 저장
    with tempfile.NamedTemporaryFile(delete=False, suffix=".jpg") as tmp:
        tmp.write(image_bytes)
        tmp_path = tmp.name

    try:
        # Azure OCR 분석
        with open(tmp_path, "rb") as f:
            result = client.analyze(
                image_data=f,
                visual_features=[VisualFeatures.READ]
            )

        if result.read is None or not result.read.blocks:
            return ""

        # OCR 결과 추출
        lines = []
        for block in result.read.blocks:
            for line in block.lines:
                lines.append(line.text)

        return "\n".join(lines)

    finally:
        # 임시 파일 삭제
        os.remove(tmp_path)

백엔드 라우터

@router.post("/chat/image")
async def chat_with_text_or_image(
    message: str = Form(""),
    image: UploadFile = File(None),
    current_user: dict = Depends(get_current_user)
):
    user_id = current_user['user_id']
    rag_history = []
    embedding = None

    try:
        image_bytes = await image.read() if image else None
        recent_history = chat_cache.get(user_id, [])

        if await should_search_long_term_memory(message, recent_history):
            embedding = await get_embedding(message)
            rag_history = await retrieve_and_rerank_history(
                user_id=user_id,
                original_question=message,
                transformed_embedding=embedding
            )

        # RAG가 실행되지 않아 embedding이 None인 경우, 사용자 메시지를 임베딩합니다.
        if embedding is None and message:
            embedding = await get_embedding(message)

        return StreamingResponse(
            stream_generator(user_id, message, image_bytes, recent_history, rag_history, embedding),
            media_type="text/event-stream"
        )

    except Exception as e:
        print(f"채팅 처리 중 오류 발생: {e}")
        raise HTTPException(status_code=500, detail=f"An error occurred: {e}")

아직 개발이 진행되고 있는 단계라, 추후에 코드나 기능들이 조금씩 바뀔 수도 있지만, 현재까지 진행된 내용을 공유하자면 이렇다.

요즘 코드 작성을 어시스트 해주는 LLM도 너무 잘 되어 있어서, 개발을 이전보다 훨씬 쉽고 빠르게 할 수 있게 된 것 같다.

[MS AI School] 2차 팀 프로젝트 - 1

Sponge_ — Sat, 19 Jul 2025 15:46:17 +0900

요즘 한창 팀 프로젝트를 하느라 정신 없는 하루 하루를 보내고 있다.

기존에 같이 프로젝트를 진행해보고 싶었던 분이 계셨는데, 감사하게도 그 분께서 먼저 팀 프로젝트를 같이 하지 않겠느냐고 연락을 주셔서 그렇게 팀을 꾸리게 되었다.

이번 프로젝트의 주제는 기나긴 주제 회의 끝에 헬스 케어 분야로 최종 선정이 되었다.

조금 더 주제에 대해 자세히 설명하자면, 헬스나 식단 등을 하려고 하는 사람들이 요즘 꽤나 많이 있을텐데, 처음 입문한 사람이거나, 경험이 많은 사람들도 자신에게 맞춤형 운동 루틴, 식단 등을 케어 해주는 PT 비서 같은 서비스가 있으면 좋을 것 같다는 생각에 주제를 선정하게 되었다.

그리하여 정해진 우리의 서비스 이름은 "Chat GymPT".

나의 운동 루틴, 운동 방법, 식단 등 자신의 운동 생활과 관련된 대부분의 것들을 다 보좌해주는 서비스라고 볼 수 있다.

서비스 기획

서비스 기획 부분은 기존에 IT 기업에서 기획자로 근무 하셨던 팀원의 주도하에 진행되었다.

이번에 처음으로 "MIRO"라는 플랫폼을 사용해 보았는데, 팀 프로젝트 할 때 꽤 괜찮은 툴인 것 같았다.

이때까지 코드만 줄줄 써왔던 나에게는 이러한 체계적인 기획 단계에 참여해본 것이 너무 신선하고 좋은 경험이었다.

역시 개발자는 코드만 쓸 줄 알면 되는것이 아니라는 것을 다시금 깨닫는 시간이었다.

서비스 플로우

개발 쪽은 대부분 내가 담당하게 될거라, 나와 함께 서비스 플로우를 구체적으로 설계하였다.

서비스 화면 정의

짧은 기간안에 완성을 해야 하기 때문에 디자인 보다는 기능 구현에 중점을 두고 서비스 화면의 흐름을 정리하였다.

구현하고 싶은 기능은 많았지만, 우선은 중심이 되는 기능 부터 먼저 구현을 하기로 하고, 시간이 남으면 하나씩 기능을 덧 붙이기로 하였다.

프로젝트 진행 관리

miro는 주로 프로젝트 진행하면서 필요한 기능 정리, 다이어그램 등의 용도로 사용하였고, 회의, 프로젝트 진행 관리 등은 notion으로 따로 관리를 하였다.

프로젝트 시작 전 각자 자신의 스킬셋이 어떻게 되는지, 얼마나 잘 다루는지, 목표한 바가 무엇인지 등을 작성하였다.

각자 자신이 잘 할 수 있는 것, 그리고 나중에 목표하는 것과 어느정도 일치하도록 역할을 배분하기 위함이었다.

프로젝트 기간은 약 2주 정도로, 생각보다 짧은 기간이기에 처음부터 시간 배분을 철저히 하고 프로젝트에 임하였다.

그리고 매일 아침 데일리 미팅을 진행하여 각자가 맡은 부분에 대해 공유할 내용들을 공유하고, 다 같이 의논해야 할 사항에 대해서 회의를 하는 시간을 가졌다.

현재 프로젝트 시작한지 3일째인데, 생각보다 진행속도가 빨라서 기존에 예상했던 것 보다 기능을 더 많이 구현할 수 있을 것 같다.

내가 현재까지 개발한 내용은 다음 포스트에서 자세히 다룰 예정이다.

문서 작성 AI 서비스 만들기

Sponge_ — Wed, 2 Jul 2025 23:26:38 +0900

다들 가끔 공공기관 등에 제출해야 하는 서류(신청서, 증명서 등)를 작성할때, 매우 스트레스를 받았던 경험이 한 번씩은 있을 것이다.

예를 들어, 전입 신고를 해야 한다고 가정을 해보자.

그럼 먼저 전입 신고시 필요한 서류들이 어떤 것이 있는지 찾아야 할 것이고, 해당 서류들을 어디서 뗄 수 있는지, 양식을 받아와서 본인이 작성을 해야 하는 서류들도 있을 것이다.

우리도 이런 일들이 있을때 귀찮고 번거로운데, 우리나라에 사는 외국인, 또는 나이 드신 노인분들은 얼마나 힘드실까?

이런 생각에 신청서, 문서 등을 작성할 수 있데 도와주는 AI 서비스를 만들어보게 되었다.

소규모로 간단하게 몇 시간 동안 초안 정도로만 만들어본거라 아직 엄청 거창한 서비스를 개발한 것은 아니지만, 추후에 충분히 확장이 가능한 주제라고 생각한다.

Azure의 Document Intelligence는 문서, 이미지 등을 분석하고 처리할 수 있도록 해주는 클라우드 기반 서비스이다.

이 Document Intelligence 와 이전 포스팅에서도 다뤘던 OpenAI를 함께 사용하여 개발했다.

Azure Document Intelligene 사용 방법

해당 리소스를 만든 후 Studio로 이동하면 아래와 같은 여러 분석 모델들이 있다.

대부분의 모델별 사용법은 다 비슷해서, 대표적으로 OCR/Read 를 사용하여 로컬에서 구현해보았다.

로컬에서 구현하기 전, 포털에서 기능을 먼저 사용해보면, 문서의 각 텍스트들을 추출하여 분석을 한 결과를 볼 수 있다.

하나의 이미지는 물론이고, 여러장의 PDF를 분석하는 것도 가능하다.

해당 모델을 로컬에서 호출하여 사용하려면 Endpoint와 API Key 등이 필요하다.

자세한 방법은 Azure 공식 문서를 참고 하였다.

https://learn.microsoft.com/ko-kr/azure/ai-services/document-intelligence/quickstarts/get-started-sdks-rest-api?view=doc-intel-4.0.0&pivots=programming-language-rest-api

빠른 시작: 문서 인텔리전스 클라이언트 라이브러리 - Azure AI services

문서 인텔리전스 SDK 또는 REST API를 사용하여 문서에서 주요 데이터 및 구조 요소를 추출하는 양식 처리 앱을 만듭니다.

learn.microsoft.com

공식 문서를 보면 알 수 있듯이, Endpoint와 Key값은 Document Intelligence 리소스에 가면 확인할 수 있다.

Document Intelligence 리소스

OCR 결과와 PDF 필드를 GPT에 전송

기존에 만들려고 생각했던 것은 사용자가 "OO신청서를 작성하려고 해" 라고 요청을 하면, 보유하고 있는 여러 양식 파일들 중 요청에 맞는 파일을 불러와서 질의응답을 진행하는 것이었다.

하지만 지금 당장은 간단한 서비스를 만들어보는 것이기에, 사용자가 작성해야 할 문서 파일을 업로드 하면, 해당 파일 OCR을 진행하고, 필요한 정보에 대한 질문을 사용자에게 하는 것으로 구현을 했다.

사용자가 파일을 업로드 하면, 해당 파일을 Document Intelligence의 OCR/Read 모델로 텍스트 추출을 진행한다.

추출된 텍스트와 PDF 추출 필드를 모두 GPT에 전송하여, GPT는 사용자로 부터 받아야 하는 정보(예 : 이름, 주소, 전화번호 등)에 대한 질문 리스트를 생성하게 된다.

def handle_pdf_upload(file_path):
    global field_list, field_index, field_answers, inferred_answers, uploaded_pdf_path, pdf_fields
    
    if not file_path:
        return "PDF 파일을 선택해주세요.", None
    
    print(f"PDF 업로드됨: {file_path}")
    uploaded_pdf_path = file_path
    
    # PDF 필드명 추출
    pdf_fields = get_pdf_fields(file_path)
    print(f"추출된 PDF 필드들: {pdf_fields}")
    
    # OCR 텍스트 추출
    ocr_text = extract_text_from_pdf(file_path)
    if not ocr_text:
        return "OCR 텍스트 추출에 실패했습니다. 다른 PDF 파일을 시도해보세요.", None
    
    field_list = generate_questions_from_text(ocr_text, pdf_fields)
    if not field_list:
        return "질문 생성에 실패했습니다.", None
    
    field_index = 0
    field_answers = {}
    inferred_answers = {} 
    
    fields_info = f"발견된 PDF 필드: {len(pdf_fields)}개\n" if pdf_fields else "PDF 필드를 감지하지 못했습니다. 텍스트 기반으로 진행합니다.\n"
    
    first_question_text, _ = field_list[0]
    
    return f"문서 분석이 완료되었습니다.\n{fields_info}총 {len(field_list)}개의 질문이 있습니다.\n\n첫 번째 질문: {first_question_text}", None

GPT가 사용자에게 질문을 할때, 기존에 답변할 때 처럼 장황하고 길게 한다면, 사용자가 질문을 제대로 이해할 수가 없거나, 올바른 답변을 할 수 없을 수 있기 때문에 최대한 간결하게 필요한 질문만 하도록 나의 의도를 Gemini에게 공유하여 함께 프롬프트를 작성하였다.

 prompt = f"""
다음은 문서에서 OCR로 추출한 텍스트와 PDF의 실제 필드명들입니다.
사용자가 입력해야 할 항목들을 파악하고 질문을 생성해주세요.

문서 내용:
{ocr_text}

PDF 필드명들:
{fields_info}

요구사항:
1. 문서의 빈칸이나 입력 필드를 분석하여 적절한 질문을 생성하세요
2. 각 질문은 명확하고 이해하기 쉽게 작성하세요
3. 한 줄에 하나의 질문만 작성하세요
4. 질문 앞에 번호나 특수문자를 붙이지 마세요
5. **각 질문은 해당하는 PDF 필드명을 매핑해야 합니다. 만약 PDF 필드명에 직접적으로 매칭되는 정보가 없으면 'auto_infer'라고 필드명을 지정하세요.**
6. 형식: "질문내용|필드명" (예: "이름을 입력해주세요|name_field" 또는 "생년월일을 입력해주세요|auto_infer")

질문들을 생성해주세요:
"""

답변에 대한 AI 모델 추론

문서 양식의 모든 빈칸에 대해서 하나씩 다 질문을 한다면, 본인이 직접 작성하는 것이랑 별로 다를게 없지 않을까?

그래서 나는 사용자가 답변한 정보들은 모델이 모두 저장을 하고, 추후에 또 새로운 문서를 작성하게 됐을때, 모델에 저장되어 있는 데이터에 대한 정보는 모델이 직접 다 입력을 하고, 더 나아가 추론을 통해 작성할 수 있는 란도 모두 AI가 다 작성을 할 수 있게 하는 것이 목표였다.( 예 : 사용자가 "현재 직장명이 무엇인가요?"라는 질문에 답을 하였음 -> 나중에 현재 재직 상태를 묻는 란이 있다면 그 칸은 당연히 "재직중" 이라고 답을 할 수 있을 것이다)

그런데 내가 아무리 테스트를 해봐도, 비슷한 질문에 대해서 자동으로 기입을 해주질 않길래 뭐가 잘못 됐는지 찾아봤는데, 아직 정확한 원인은 찾지 못했다...

아마 Azure 서비스의 토큰 제한 때문인걸로 추정을 하고 있지만, 정확한 원인은 추후 더 개발을 하면서 찾아보려고 한다.

def handle_user_text(user_text):
    global field_index, field_list, field_answers, inferred_answers, uploaded_pdf_path, pdf_fields

    if not field_list and not pdf_fields:
        return "먼저 PDF 파일을 업로드하고 분석을 시작해주세요.", None

    if field_index >= len(field_list):
        if uploaded_pdf_path:
            final_field_values = map_answers_to_fields(field_list, field_answers, inferred_answers)
            filled_pdf = generate_filled_pdf(uploaded_pdf_path, final_field_values)
            if filled_pdf:
                return "모든 항목이 완료되었습니다! 작성된 문서를 다운로드하세요.", filled_pdf
            else:
                return "문서 생성 중 오류가 발생했습니다.", None
        else:
            return "원본 PDF 파일을 찾을 수 없습니다.", None

    current_question_info = field_list[field_index]
    current_question_text, current_field_name = current_question_info
    
    if not user_text or not user_text.strip():
        return f"답변을 입력해주세요.\n현재 질문: {current_question_text}", None
    else:
        field_answers[current_question_text] = user_text.strip()
        field_index += 1
        print(f"사용자 답변 저장: {current_question_text} -> {user_text.strip()}")
        print(f"현재 진행상황 (사용자 질문): {field_index}/{len(field_list)}")


    inferred_count_this_turn = 0 
    if uploaded_pdf_path and pdf_fields:

        previous_inferred_keys = set(inferred_answers.keys())

        current_mapped_user_answers = map_answers_to_fields(field_list, field_answers, {}) 
        ocr_text_for_inference = extract_text_from_pdf(uploaded_pdf_path) 
        
        inferred_answers_new = request_gpt_inference(
            ocr_text_for_inference, 
            pdf_fields, 
            current_mapped_user_answers 
        )
        inferred_answers.update(inferred_answers_new) 
        print(f"현재 AI 추론된 답변: {inferred_answers}")

        # 새로 추론된 필드 개수 계산
        current_inferred_keys = set(inferred_answers.keys())
        newly_inferred_keys = current_inferred_keys - previous_inferred_keys
        inferred_count_this_turn = len(newly_inferred_keys)
        print(f"이번 턴에 새로 추론된 필드 개수: {inferred_count_this_turn}")


    # --- 다음 질문이 있는지 확인 및 AI 자동 건너뛰기 로직 ---
    response_message = "답변이 저장되었습니다."
    if inferred_count_this_turn > 0:
        response_message += f"\n\n  AI가 추론을 통해 {inferred_count_this_turn}개의 질문에 대한 답변을 추가로 작성하였습니다."

    while field_index < len(field_list):
        next_question_text, next_field_name = field_list[field_index]
        
        if next_question_text in field_answers or \
           (next_field_name in pdf_fields and next_field_name in inferred_answers):
            print(f"질문 '{next_question_text}' (필드: {next_field_name})은(는) 이미 처리되었으므로 건너뜁니다.")
            field_index += 1
        else:
            # 아직 답변되지 않은 (사용자 질문이 필요한) 질문이 남아있음
            return f"{response_message}\n\n다음 질문: {next_question_text}", None

    # 모든 질문이 완료되었거나 AI가 모두 채울 수 있어서 더 이상 사용자 질문이 필요 없는 경우
    if uploaded_pdf_path:
        final_field_values = map_answers_to_fields(field_list, field_answers, inferred_answers)
        filled_pdf = generate_filled_pdf(uploaded_pdf_path, final_field_values)
        if filled_pdf:
            return "모든 항목이 완료되었습니다! 작성된 문서를 다운로드하세요.", filled_pdf
        else:
            return "문서 생성 중 오류가 발생했습니다.", None
    else:
        return "원본 PDF 파일을 찾을 수 없습니다.", None

Gradio 화면 구성

개발을 하다보니까 기능 하나하나를 추가 할때마다 오류가 발생해서, 기존에는 STT, TTS 기능을 모두 탑재 했었지만, 현재는 빠져있는 상태이다...

with gr.Blocks(title="문서 작성 도우미") as demo:
    gr.Markdown("# 문서 자동 작성 도우미")
    gr.Markdown("PDF 파일을 업로드하면 AI가 빈칸을 파악하고 질문을 통해 문서를 작성해드립니다.")
    
    with gr.Row():
        with gr.Column():
            pdf_file = gr.File(label="PDF 업로드", file_types=[".pdf"])
            upload_button = gr.Button("  분석 시작", variant="primary")
            
        with gr.Column():
            chatbot_text = gr.Textbox(
                label="AI 질문", 
                interactive=False, 
                lines=4,
                placeholder="PDF를 업로드하고 분석을 시작하면 질문이 표시됩니다."
            )
    
    with gr.Row():
        user_text_input = gr.Textbox(
            label="답변 입력", 
            placeholder="여기에 답변을 입력하고 Enter를 누르세요.",
            lines=2
        )
        submit_button = gr.Button("답변 제출", variant="secondary")
    
    with gr.Row():
        download_link = gr.File(label="  작성된 PDF 다운로드", interactive=False)
    
    # 이벤트 연결
    upload_button.click(
        handle_pdf_upload, 
        inputs=[pdf_file], 
        outputs=[chatbot_text, download_link]
    )
    
    user_text_input.submit(
        handle_user_text, 
        inputs=[user_text_input], 
        outputs=[chatbot_text, download_link]
    ).then(
        lambda: "", 
        outputs=[user_text_input]
    )
    
    submit_button.click(
        handle_user_text, 
        inputs=[user_text_input], 
        outputs=[chatbot_text, download_link]
    ).then(
        lambda: "", 
        outputs=[user_text_input]
    )

if __name__ == "__main__":
    demo.launch(allowed_paths=["."])

결과

이런 식으로 AI와 사용자는 질문을 주고 받고, 최종 완성된 양식의 파일을 다운받을 수 있게 제공해준다.

아직 개발 중인 단계라 조금은(?) 삐걱 거리는 곳이 많고, 완성도도 현저히 떨어지지만, 내가 생각해낸 아이디어가 너무 좋아서 조금은 급하게 포스팅을 하게 되었다.

나중에 수정이 되고, 업그레이드 되어서 완전한 모습을 갖추게 된다면 다시 포스팅을 할 예정이다.

서울 맛집 챗봇 만들기 : Azure OpenAI + RAG

Sponge_ — Sat, 21 Jun 2025 16:38:29 +0900

ChatGPT나 Gemini, Perplexity 등의 챗봇을 사용하다 보면, 가끔 있지도 않은 사실을 진짜인 것 처럼 대답을 하거나, 특정 분야에 대한 지식을 보유하고 있는 모델이 있었으면 하는 생각이 들곤 할 것이다.

이러한 LLM모델을 내가 직접 개발하기엔 어렵지만, 나에게 딱 맞춘 모델로 튜닝하는 것은 가능하다.

오늘은 Azure OpenAI로 여러가지 데이터를 활용하여 RAG를 적용시킨 챗봇을 개발하는 과정을 담아보았다.

RAG(검색 증강 생성)

RAG는 Retrieval-Augmented Generation의 약자로, 기존의 대규모 언어 모델(LLM)을 확장하여, 주어진 컨텍스트나 질문에 대해 더욱 정확하고 풍부한 정보를 제공하는 방법이다. 모델이 학습 데이터에 포함되지 않은 외부 데이터를 실시간으로 검색하고, 이를 바탕으로 답변을 생성하는 과정을 포함한다. 특히 환각(Hallucination)을 방지하고, 모델이 최신 정보를 반영하거나 더 넓은 지식을 활용할 수 있게 한다.

데이터 업로드

Azure portal에 접속 후, 나의 리소스 그룹으로 이동한다.

storage 리소스를 생성을 해주고, 좌측 사이드 바의 데이터 스토리지 > 컨테이너에 접속.

컨테이너를 생성해준 후, RAG에 활용할 데이터를 업로드 해준다.

데이터는 JSON, CSV, 심지어 PDF 더라도 괜찮다.

왜냐하면 모델에게 인덱싱을 해주기 전, 텍스트 임베딩 모델을 활용할 수 있기 때문이다.

내가 활용한 데이터는 '서울 열린데이터 광장'에서 '서울 관광 음식' 데이터를 가져와 사용하였다.

https://data.seoul.go.kr/

열린데이터광장 메인

데이터분류,데이터검색,데이터활용

data.seoul.go.kr

데이터 Search

이제 스토리지에 업로드한 데이터를 인덱싱 해줄 단계이다.

인덱싱을 하는 방법은 JSON 편집을 통해 내가 직접 인덱싱 방법을 설정해줄 수도 있지만,

내가 일일이 인덱싱 편집, 인덱서 생성 등의 과정을 거치지 않고, 임베딩 모델을 통해 모든 과정을 자동으로 처리할 수 있다.

특히, PDF 파일 같은 경우에는 JSON 편집에 어려움이 있기 때문에 임베딩 모델을 활용하는 것이 좋다.

이 과정에는 'Azure AI Search' 리소스를 사용해야 한다.

리소스 그룹에서 검색 후 리소스 생성

본인이 임베딩 모델을 사용하지 않고, 직접 데이터 인덱싱 방법 등을 설정하고 싶으면 '인덱스 추가'를 클릭하여 진행하면 된다.

위에서 내가 설명한 것 처럼 임베딩 모델을 사용하여 인덱싱 과정을 진행하려면 먼저 Azure AI Foundry에서 임베딩 모델을 생성해주도록 하자.

나는 text-embedding-3-small 모델을 사용하였다. 해당 모델이 가격 대비 꽤 성능이 잘 나오는 것 같다.

텍스트 임베딩 모델 생성 확인

임베딩 모델을 생성했다면, 이전에 생성했던 AI Search 리소스로 접속하여, 데이터 가져오기 및 벡터화를 클릭.

RAG 클릭

텍스트 벡터화 부분에서 이전에 생성해둔 텍스트 임베딩 모델을 선택하면 된다.

데이터의 크기에 따라서 인덱싱 과정이 오래 걸릴 수도 있다.

나는 꽤 큰 데이터를 사용했더니, 한 10분 가량 소요된 것 같다.

과정이 완료되면 자동으로 인덱스와 인덱서가 생성이 된 걸 확인 할 수 있다.

RAG 모델 테스트

이제 다시 AI Foundry로 접속하여 Add Data 를 클릭하여 생성해둔 인덱스로 데이터를 모델에게 인덱싱 시켜준다.

이제 데이터를 기반하여 대답을 하는지 확인하기 위해 도봉구 맛집을 추천해달라고 요청해보았다.

맛집들 추천과 함께 자세한 정보들을 제공해주고, 참고한 reference가 무엇인지도 확인할 수 있다.

로컬 환경으로 RAG 모델 호출하여 사용하기

Chat playground에서 'View code'를 클릭하면 로컬 환경으로 나의 모델을 호출할 수 있는 Sample Code가 제공된다.

해당 code를 그대로 가져와 endpoint, API Key 등을 나의 키로 입력해주고, 코드를 조금만 수정해주면 로컬에서 사용할 수 있는 코드를 금방 작성할 수 있다.

Endpoint와 API Key를 입력해주고, prompt를 내 input을 받도록 수정해주었다.

그리고 기본 Sample Code에는 답변을 completition.to_json()으로 출력을 하게 되어있어서, 출력 결과를 확인한 후 내가 원하는 답변만 출력하도록 수정할 수 있다.

내가 필요한 답변은 completion > choices[0] > message > content 경로임을 알 수 있다.

나는 참조한 reference도 함께 출력하게 코드를 수정해주었다.

최종 결과

최종 완성 코드

import os
from openai import AzureOpenAI

# 환경변수 또는 직접 설정
endpoint = os.getenv("ENDPOINT_URL", "YOUR_URL")
deployment = os.getenv("DEPLOYMENT_NAME", "7ai010-gpt-4o-mini")
search_endpoint = os.getenv("SEARCH_ENDPOINT", "YOUR_ENDPOINT")
search_key = os.getenv("SEARCH_KEY", "YOUR_SEARCH_KEY")
search_index = os.getenv("SEARCH_INDEX_NAME", "YOUR_INDEX")
subscription_key = os.getenv("AZURE_OPENAI_API_KEY", "YOUR_API_KEY")

# Azure OpenAI 클라이언트 초기화
client = AzureOpenAI(
    azure_endpoint=endpoint,
    api_key=subscription_key,
    api_version="2025-01-01-preview",
)

# 사용자 프롬프트 입력
user_input = input("질문을 입력하세요: ")

# Chat Prompt 생성
chat_prompt = [
    {
        "role": "user",
        "content": user_input
    }
]

# Completion 요청
completion = client.chat.completions.create(
    model=deployment,
    messages=chat_prompt,
    max_tokens=800,
    temperature=0.7,
    top_p=0.95,
    frequency_penalty=0,
    presence_penalty=0,
    stream=False,
    extra_body={
        "data_sources": [{
            "type": "azure_search",
            "parameters": {
                "endpoint": search_endpoint,
                "index_name": search_index,
                "semantic_configuration": "matzip-index-semantic-configuration",
                "query_type": "semantic",
                "strictness": 2,
                "top_n_documents": 5,
                "authentication": {
                    "type": "api_key",
                    "key": search_key
                }
            }
        }]
    }
)

# 결과 출력
print("\n답변:")
print(completion.choices[0].message.content)

# 참고 문서 출력
citations = completion.choices[0].message.context.get("citations")
for citation in citations :
    if citations:
        print(citation['content'] + '\n')
    else:
        print("\n참조 문서 없음.")

[MS AI School] 1차 프로젝트 Record - 최종

Sponge_ — Tue, 17 Jun 2025 01:28:48 +0900

API 구현까지 완료한 후 다음 과정으로는 다른 팀원분이 각자의 코드(모델, 백엔드, 프론트 등)들을 git으로 merge한 후 수정과 추가 작업을 진행하였다.

추가 작업을 하며 중간 중간 코드 리뷰를 하고, 각 팀원들의 피드백 등을 반영하는 식으로 작업을 진행하였다.

이때가 프로젝트 마지막 날이어서, 조금 빠듯하게 하느라 다들 정신없이 했던 것 같다.(물론 나도...)

코드 병합을 진행하신 팀원분께서 개발 경력이 있으신 분이라, Git사용법 부터 API 관련해서 많은 것을 알려주셨다.

GRU / Two-Tower 모델별 API

내가 구현했던 Two-Tower 모델과 다른 팀원이 구현한 GRU 모델을 따로 구분하여, 모델별 추천 성능도 비교할 수 있게 해주셨다.

프론트는 일주일 이라는 제한된 시간이었기에 많은 공을 들여 구현을 하진 못했다.

주제의 중심은 결국 머신러닝 / 딥러닝이기 때문에 모델을 구현하는 것에 더 높은 비중을 두고 프로젝트를 진행하였다.

프로젝트 Preview

처음 사이트에 접속을 하면 해당 사용자는 데이터가 없기 때문에 랜덤으로 아이템이 뜨게 되어있다.

"스마트폰 케이스"를 검색하는 이벤트를 발생 시킨 후 메인으로 다시 이동을 해보면

기존의 리스트에 스마트폰 케이스 제품들이 섞여서 추천되고 있는 것을 확인할 수 있다.

추가로 두 개의 키워드를 더 검색한 후의 결과를 살펴보자.

"여름 캠핑 장비"와 "컴퓨터 메모리 32GB"를 검색한 후 메인으로 이동을 하면 이때까지의 모든 데이터가 반영된 추천이 이루어지고 있는 모습을 볼 수 있다.

프로젝트 리뷰

개발자이신 팀원 덕분에 원래 Github을 사용할 줄은 알았지만, 이 정도로 디테일하게 Git을 사용하고, 협업을 진행한건 처음이었던 것 같아서 나에게 좋은 경험이 된 것 같다.

Git으로 작업한 흔적들

그리고 우리 팀은 매일 아침 시작 전 스탠드업 회의를 통해 당일에 진행할 각자의 역할에 대해 확실히 인지를 시켰다.

회의록 리스트

매일 아침 진행한 회의록들을 노션으로 관리하여, 필요할때 바로 찾아서 볼 수 있도록 하였다.

회의록 외에도, 여러 관련 문서, 논문, 데이터 등을 노션으로 공유, 관리하여 팀원들과의 커뮤니케이션을 원활히 할 수 있었다.

초반 주제 선정을 위한 아이디어 회의

[MS AI School] 1차 프로젝트 Record - 3

Sponge_ — Mon, 16 Jun 2025 21:07:22 +0900

저번 two-tower 모델 구현에 이어, 백엔드 구현을 어떤 식으로 하게 되었는지 작성해보려고 한다.

현재의 가장 큰 문제는 저번 포스트에서도 언급 했다시피, 모델은 데이터셋에 존재하는 데이터만을

기반으로 하여 추천을 하게 되어있다.

하지만 실제로 사용자는 새로운 행동 데이터가 추가가 될 것이고, 그에 따른 모델의 추천 결과도 달라져야 한다.

이를 도대체 어떻게 구현을 해야할까?

먼저 백엔드 구현은 빠른 API 구축이 가능한 FastAPI를 채택하여 사용하였다.

FastAPI는 한 번도 사용해본 적이 없었지만, 요즘 코딩 성능이 가장 좋다는 평까지 나오고 있는,

Gemini의 도움을 받아 조금씩 배워가며 코드를 작성할 수 있었다.

처음에 나는 사용자의 새로운 행동 데이터가 생길때 마다 실시간으로 모델 재학습을 진행하는 방법을 생각했다.

당연히 말도 안되는 소리이다.

지금 현재 모델을 학습하는 시간도 거의 1시간 가까이 걸렸는데, 이 과정을 수많은 사용자들의

데이터가 생성될때마다 진행을 한다? 이건 사실상 불가능한 일이다.

여러가지 방법을 시도해본 후, 하나의 방법을 고안해내게 되었다.

사용자의 데이터를 단기 데이터 / 장기 데이터로 나눈 후, 사용자의 기존 데이터는 장기 데이터, 새롭게 추가된 데이터는 단기 데이터로 저장하여 두 개의 데이터를 모두 고려한 상품을 추천하게 구현해보았다.

@app.post("/events", status_code=202)
def track_event(event: Event):
    # 사용자의 행동 (클릭, 검색) 이벤트를 기록합니다.
    if not SERVER_IS_READY:
        raise HTTPException(status_code=503, detail="Server is not ready.")
    
    # 1. 모든 이벤트를 전체 히스토리에 기록 (이력 조회를 위함)
    USER_INTERACTION_HISTORY[event.session_id].append(
        {"event_type": event.event_type, "value": event.value}
    )

    # 2. 클릭/검색 이벤트를 단기 행동 기록에 추가
    if event.event_type == 'click' or event.event_type == 'search':
        # 벡터를 바로 업데이트하는 대신, 행동 자체를 기록
        USER_RECENT_ACTIONS[event.session_id].append(event.value) # <--- 여기에 최근 행동이 저장됨.
        print(f"Action '{event.value}' added to recent history for session: {event.session_id}")
        
    return {"message": "Event tracked"}

이 함수는 웹 서비스에서 사용자의 클릭, 검색과 같은 이벤트가 발생할 때 호출되어, 해당 이벤트를 USER_RECENT_ACTIONS라는 메모리 상의 큐에 저장한다. 이 큐에 저장된 정보가 나중에 단기 추천에 활용된다.

# --- 유틸리티 함수 ---
def find_internal_item_vector_by_title(title: str) -> Optional[torch.Tensor]:
    """외부 상품 제목과 가장 유사한 내부 아이템을 찾아 그 벡터를 반환합니다."""
    if not SERVER_IS_READY: return None
    try:
        title_tfidf = tfidf_vectorizer.transform([title])
        similarities = cosine_similarity(title_tfidf, tfidf_matrix).flatten()
        most_similar_item_idx = similarities.argmax()
        
        # 유사도가 매우 낮으면 (e.g., 0.1 미만) 관련 없는 아이템으로 간주하고 무시
        if similarities[most_similar_item_idx] < 0.1:
            print(f"No relevant internal item found for title: '{title}'")
            return None
            
        print(f"Found internal item '{all_titles[most_similar_item_idx]}' for external title '{title}'")
        return ALL_ITEM_VECTORS[most_similar_item_idx]
    except Exception as e:
        print(f"Error finding internal item by title: {e}")
        return None

def get_base_user_vector(session_id: str) -> Optional[torch.Tensor]:
    """모델에서 사용자의 기본(장기) 벡터를 가져옵니다."""
    user_idx = SESSION_TO_IDX.get(session_id)
    if user_idx is None: return None
    with torch.no_grad():
        return model.get_user_vector(torch.LongTensor([user_idx]).to(device))

def get_user_vector(session_id: str) -> Optional[torch.Tensor]:
    """
    세션의 단기 사용자 벡터를 계산합니다.
    최근 행동(최대 10개)의 평균 벡터를 반환합니다.
    최근 행동이 없으면 None을 반환합니다.
    """
    recent_actions = USER_RECENT_ACTIONS.get(session_id)
    if not recent_actions:
        return None # 최근 행동이 없음

    # 최근 행동들의 아이템 벡터를 수집
    recent_item_vectors = []
    print(f"Calculating short-term vector from actions: {list(recent_actions)}")
    for action_title in recent_actions:
        item_vector = find_internal_item_vector_by_title(action_title)
        if item_vector is not None:
            recent_item_vectors.append(item_vector)

    if not recent_item_vectors:
        return None # 유효한 아이템 벡터가 없음

    # 아이템 벡터들의 평균을 계산하여 순수 단기 벡터 생성
    short_term_vector = torch.mean(torch.stack(recent_item_vectors), dim=0)
    return short_term_vector

find_internal_item_vector_by_title(title: str)

사용자가 클릭하거나 검색한 상품 제목이 주어졌을 때, 시스템이 알고 있는 수많은 내부 상품들 중에서 가장 비슷한 상품을 찾아 그 상품의 벡터(임베딩)를 가져오는 함수이다.

*TF-IDF 와 코사인 유사도를 사용해서 제목 간의 유사도를 측정하고, 가장 유사한 내부 아이템의 미리 계산된 임베딩 벡터를 반환한다.

*TF-IDF : "Term Frequency-Inverse Document Frequency"의 약자로, 특정 단어가 문서 집합(코퍼스) 내에서 얼마나 중요한지를 측정하는 통계적 가중치 방법

쉽게 말해, 어떤 단어가 특정 문서에서 자주 나오면서도 다른 문서에서는 잘 나오지 않을수록 그 단어가 해당 문서를 대표하는 중요한 단어라고 판단하는 방식이다.

get_base_user_vector(session_id: str)

이 함수는 특정 사용자의 고유한 취향(장기 선호도)을 나타내는 벡터를 가져온다.

이 벡터는 모델이 처음 학습될 때 사용자별로 고정적으로 생성된 값이며, 사용자의 전반적인 관심사를 대변한다고 볼 수 있다.

사용자 ID를 내부 인덱스로 변환한 다음, 사전 학습된 모델에서 해당 인덱스에 매핑된 사용자 임베딩 벡터를 직접 조회한다.

get_user_vector(session_id : str)

track_event 함수를 통해 기록된 사용자의 최근 10개 행동 (상품 제목)을 가져온다.

이 제목들 각각에 대해 위에서 설명한 find_internal_item_vector_by_title 함수를 써서 해당 상품의 임베딩 벡터를 찾는다.

이렇게 찾은 모든 벡터들의 평균을 내서 단기 사용자 벡터가 완성된다.

@app.get("/recommend/{session_id}", response_model=RecommendationResponse)
def get_recommendations(session_id: str, long_term_ratio: float = 0.7, num_recs: int = 30):
    if not SERVER_IS_READY: raise HTTPException(status_code=503, detail="Server not ready")

    long_term_vector = get_base_user_vector(session_id)
    if long_term_vector is None:
        raise HTTPException(status_code=404, detail=f"Session ID '{session_id}' not found.")

    short_term_vector = get_user_vector(session_id) # 최신 단기 벡터

    with torch.no_grad():
        # 장기 벡터는 항상 존재
        long_term_scores = torch.matmul(ALL_ITEM_VECTORS, long_term_vector.T).squeeze()

        if short_term_vector is not None:
            # 단기 벡터가 있으면 단기 점수도 계산
            short_term_scores = torch.matmul(ALL_ITEM_VECTORS, short_term_vector.T).squeeze()
            num_long_term_recs = int(num_recs * long_term_ratio)
            num_short_term_recs = num_recs - num_long_term_recs
        else:
            # 단기 벡터가 없으면 장기 추천만 제공
            print(f"No short-term vector for {session_id}, returning long-term recs only.")
            short_term_scores = None
            num_long_term_recs = num_recs
            num_short_term_recs = 0

        long_term_indices = torch.topk(long_term_scores, k=num_long_term_recs * 2).indices.tolist()
        
        if short_term_scores is not None:
            short_term_indices = torch.topk(short_term_scores, k=num_short_term_recs * 2).indices.tolist()
        else:
            short_term_indices = []

    # 2. 두 추천 목록을 조합
    combined_indices = []
    seen_indices = set()

    # 단기 추천(최신 관심사)을 먼저 일부 추가
    for idx in short_term_indices:
        if idx not in seen_indices:
            combined_indices.append(idx)
            seen_indices.add(idx)
        if len(seen_indices) >= num_short_term_recs:
            break
            
    # 장기 추천으로 나머지 채우기
    for idx in long_term_indices:
        if idx not in seen_indices:
            combined_indices.append(idx)
            seen_indices.add(idx)
        if len(combined_indices) >= num_recs:
            break

    # 3. 조합된 인덱스로부터 최종 추천 목록 생성 (내부 데이터 사용)
    final_recommendations = []
    for idx in combined_indices:
        title = mappings['item_titles'].get(idx)
        if title:
            final_recommendations.append(Product(
                title=title,
                link="#", # 내부 아이템은 링크가 없음
                price=mappings['item_prices'].get(idx),
                thumbnail=None,
                source="Internal DB"
            ))

    internal_titles = [rec.title for rec in final_recommendations]
    print(f"Blended internal recommendations for {session_id}: {internal_titles}")

    return RecommendationResponse(session_id=session_id, recommendations=final_recommendations)

사용자 취향 벡터 준비:
- long_term_vector를 통해 사용자의 장기기억 데이터를 가져오고, short_term_vector를 통해 사용자의 최근 행동(클릭, 검색)으로 파악된 단기적인 관심사를 동적으로 생성한다.
아이템 추천 점수 계산:
- ALL_ITEM_VECTORS (모든 상품의 임베딩 벡터)와 장기 데이터 벡터의 유사도를 계산하여 장기 추천 점수를 매김.
- 단기 데이터 벡터가 있다면, 이 벡터와 ALL_ITEM_VECTORS의 유사도를 계산하여 단기 추천 점수를 매김.
장기/단기 추천 조합 (블렌딩):
- long_term_ratio 에 따라 최종 추천 목록에서 장기/단기 추천이 차지할 비율을 결정.
- 단기 추천 점수가 높은 상품들을 우선적으로 목록에 채우고, 나머지 자리를 장기 추천 점수가 높은 상품들로 채운다.
- 이때 중복된 상품은 제거하여 최종 추천 목록을 만든다.
- 이 블렌딩 과정을 통해 사용자의 최신 관심사를 빠르게 반영하면서도, 기존의 선호도도 잃지 않도록 균형을 맞춘다.
최종 추천 목록 반환:
- 조합된 상품 인덱스를 바탕으로 실제 상품 정보(제목, 가격 등)를 가져와 Product 객체 리스트 형태로 사용자에게 반환.

[MS AI School] 1차 프로젝트 Record - 2

Sponge_ — Wed, 11 Jun 2025 22:53:46 +0900

다른 팀원분은 GRU 모델을 사용하여 모델 학습 후 백엔드 진행을 맡았고,

나는 Two-Tower 모델을 구현을 해보기로 하였다.

각각의 모델로 구현 후, 코드 리뷰를 해보면서 기능을 테스트 해보기로 했다.

그래서 오늘은 내가 이틀 동안 구현해 본 추천 시스템을 위한 Two-Tower 모델 학습 파이프라인을 설명해보려고 한다.

데이터 전처리

 # --- 1. 데이터 로드 및 전처리 ---
    print("\n--- 1. Loading and Preprocessing Data ---")
    
    parquet_files = [f"{data_folder_path}/{i:012d}.parquet" for i in range(4)]

    print(f"Attempting to load {len(parquet_files)} parquet files...")
    try:
        # 필요한 컬럼만 불러오기
        columns_to_read = ['session_id', 'item_id', 'name', 'price', 'c1_name', 'c2_name', 'brand_name']
        dataset = load_dataset('parquet', data_files={'train': parquet_files}, split='train', columns=columns_to_read)
        df = dataset.to_pandas()
        print(f"Successfully loaded {len(df)} rows from {len(parquet_files)} Parquet files.")
        
        #  결측치 처리
        for col in ['c1_name', 'c2_name', 'brand_name', 'item_condition_name']:
            df[col] = df[col].fillna('Unknown')
        
        # 사용자/아이템 인덱스 생성
        df['user_idx'] = df['session_id'].astype('category').cat.codes
        df['item_idx'] = df['item_id'].astype('category').cat.codes
        
        num_users = len(df['user_idx'].unique())
        num_items = len(df['item_idx'].unique())
        print(f"Unique Users: {num_users}, Unique Items: {num_items}")

    except Exception as e:
        print(f"An error occurred during data loading: {e}")
        exit()

총 10개의 parquet 데이터를 다운 받아서 학습을 시키려고 했지만, GPU 성능의 이슈로 인해 학습 시간이 너무 오래 걸렸다.

그래서 타협을 본 후 총 4개의 파일만 불러와서 학습을 시키게 되었다.

학습에 사용 될 column은 'session_id', 'item_id', 'name', 'price', 'c1_name', 'c2_name', 'brand_name' 총 7개 이다.

session_id는 각 사용자를 구분하는 user_idx로 사용될 것이고, item_id, name은 각 상품을 뜻하게 된다.

Feature Engineering

# 2-1. 가격(Price) 피처 처리
print("Processing price feature...")
# 가격이 0 이하인 경우 이상치로 간주하고 1로 처리 후 로그 변환
df['price'] = df['price'].apply(lambda x: max(x, 1.0))
df['log_price'] = np.log1p(df['price'])

price_scaler = StandardScaler()
df['scaled_price'] = price_scaler.fit_transform(df[['log_price']])

# 아이템별 가격 정보 저장
item_prices = df.drop_duplicates('item_idx').set_index('item_idx')['scaled_price'].to_dict()

# 2-2. 텍스트(Text) 임베딩 생성 
print("Creating enhanced item embeddings...")
text_model = SentenceTransformer('all-MiniLM-L6-v2', device=device)

# 아이템별 메타데이터 딕셔너리 생성
item_meta = df.drop_duplicates('item_idx').set_index('item_idx')
item_titles = item_meta['name'].to_dict()
item_idx_to_c1 = item_meta['c1_name'].to_dict()
item_idx_to_c2 = item_meta['c2_name'].to_dict()
item_idx_to_brand = item_meta['brand_name'].to_dict()
item_idx_to_condition = item_meta['item_condition_name'].to_dict()

# 모든 피처를 결합한 상세 설명 생성
item_descriptions = []
for i in range(num_items):
    name = item_titles.get(i, 'N/A')
    c1 = item_idx_to_c1.get(i, 'N/A')
    c2 = item_idx_to_c2.get(i, 'N/A')
    brand = item_idx_to_brand.get(i, 'N/A')
    condition = item_idx_to_condition.get(i, 'N/A')
    description = (f"Name: {name}. Category: {c1}, {c2}. "
                   f"Brand: {brand}. Condition: {condition}.")
    item_descriptions.append(description)

# 텍스트 임베딩 생성
item_text_embeddings = text_model.encode(item_descriptions, show_progress_bar=True, convert_to_tensor=True, device=device)
text_embedding_dim = item_text_embeddings.shape[1]
print("Item embeddings generated.")

상품 가격에 대해서는 우선 0 이하의 값들(이상치)을 1로 보정 해주었고, right-skewed 분포를 모델이 학습하기 수월한 정규 분포에 가깝게 처리해주기 위해 로그 변환을 적용하였다.

이 모든 Feature들을 결합하여, 텍스트 임베딩을 해주었는데, 텍스트 임베딩 생성 모델에는 'all-MiniLM-L6-v2' 라는 SentenceTransformer 모델을 사용하였다. 이 모델은 Sentence Embaddings를 생성하는데에 특화된 모델이다.

문장이나 단락의 의미를 숫자 벡터로 변환하고, 이를 통해 컴퓨터가 텍스트의 의미를 이해하고 다양한 자연어 처리(NLP) 작업에 활용할 수 있다.

모델 및 데이터셋 정의

# 3-1. 모델 아키텍처 (가격 피처 결합)
class TwoTowerModel(nn.Module):
    def __init__(self, num_users, precomputed_item_embeddings, text_embedding_dim, final_embedding_dim=64):
        super(TwoTowerModel, self).__init__()
        self.final_embedding_dim = final_embedding_dim

        # User Tower
        self.user_embedding = nn.Embedding(num_users, final_embedding_dim)

        # Item Tower
        self.item_text_embedding = nn.Embedding.from_pretrained(precomputed_item_embeddings, freeze=True)
        # 텍스트 임베딩과 가격 피처(1차원)를 합친 후 최종 임베딩 차원으로 매핑하는 MLP
        self.item_mlp = nn.Sequential(
            nn.Linear(text_embedding_dim + 1, (text_embedding_dim + 1) // 2),
            nn.ReLU(),
            nn.Linear((text_embedding_dim + 1) // 2, final_embedding_dim)
        )

    def get_user_vector(self, user_ids):
        return self.user_embedding(user_ids)

    def get_item_vector(self, item_ids, item_prices):
        text_vecs = self.item_text_embedding(item_ids)
        # 가격 피처를 [batch_size, 1] 형태로 만들어 텍스트 임베딩과 결합
        combined_vec = torch.cat([text_vecs, item_prices.unsqueeze(1)], dim=1)
        return self.item_mlp(combined_vec)

< User Tower >

User Tower에는 사용자 ID를 임베딩 벡터로 변환하는 nn.Embedding 레이어를 포함하고 있다.

num_users는 임베딩을 할 고유한 사용자 ID의 개수이다. final_embedding_dim은 각 사용자 ID에 해당하는 임베딩 벡터의 차원수이다. 예를 들어서, num_users = 1000, final_embedding_dim = 128 이라면, 이 레이어는 1000 x 128 크기의 임베딩 행렬을 가지게 된다.

< Item Tower >

nn.Embedding.from_pretrained() : 미리 계산된(Sentence Transformer로 생성한 아이템 텍스트 임베딩)을 사용하여 임베딩 레이어를 초기화 한다.

precomputed_item_embeddings : item_text_embeddings 텐서가 여기에 전달된다. 이 텐서의 각 행이 특정 아이템의 텍스트 임베딩 벡터가 된다.

그리고 freeze=True 를 써주어, 임베딩 레이어의 가중치를 학습 과정에서 업데이트 하지 않게 하였다.

다층 퍼셉트론(MLP)로 텍스트 임베딩과 가격 피처를 결합하여 최종 아이템 임베딩을 생성해주었다.

get_item_vector 메서드에서 기존 1차원 배열 형태의 가격 feature를 torch.cat을 위해 텍스트 임베딩과 차원을 맞춰주었고, 각 아이템 임베딩 벡터의 차원 방향으로 결합해주었다. 최종적으로 final_embedding_dim 차원의 아이템 임베딩을 반환한다.

네거티브 샘플링을 포함한 데이터셋 클래스

class TripletDataset(Dataset):
    def __init__(self, interactions_df, item_prices_dict, all_item_indices):
        self.users = torch.LongTensor(interactions_df['user_idx'].values)
        self.pos_items = torch.LongTensor(interactions_df['item_idx'].values)
        self.item_prices = item_prices_dict
        self.all_item_indices = all_item_indices
        self.num_items = len(all_item_indices)

    def __len__(self):
        return len(self.users)

    def __getitem__(self, idx):
        user_id = self.users[idx]
        pos_item_id = self.pos_items[idx]

        # 네거티브 샘플링
        while True:
            neg_item_id = np.random.randint(0, self.num_items)
            # 여기서는 단순 랜덤 샘플링을 사용 (개선 가능)
            if neg_item_id != pos_item_id.item():
                break
        
        pos_item_price = torch.tensor(self.item_prices.get(pos_item_id.item(), 0.0), dtype=torch.float)
        neg_item_price = torch.tensor(self.item_prices.get(neg_item_id, 0.0), dtype=torch.float)
        
        return user_id, pos_item_id, neg_item_id, pos_item_price, neg_item_price

여기서는 nn.TripletMarginLoss와 같은 손실 함수에 필요한 트리플릿(Anchor, Positive, Negative) 형태로 데이터를 제공한다.

Anchor (앵커): 사용자의 임베딩 벡터
Positive (긍정 샘플): 사용자가 실제로 상호작용(예: 구매, 클릭)한 아이템의 임베딩 벡터
Negative (부정 샘플): 사용자가 상호작용하지 않은 아이템 중 임의로 선택된 아이템의 임베딩 벡터

앵커와 긍정 샘플은 가깝게, 부정 샘플과는 멀게 만드는 것이다.

학습 및 검증

# 데이터 분할
df_interactions = df[['user_idx', 'item_idx']].drop_duplicates().reset_index(drop=True)
train_val_df, test_df = train_test_split(df_interactions, test_size=0.1, random_state=42)
train_df, val_df = train_test_split(train_val_df, test_size=0.15, random_state=42)

print(f"Train size: {len(train_df)}, Validation size: {len(val_df)}, Test size: {len(test_df)}")

all_items = np.arange(num_items)
train_dataset = TripletDataset(train_df, item_prices, all_items)
val_dataset = TripletDataset(val_df, item_prices, all_items)

train_loader = DataLoader(train_dataset, batch_size=512, shuffle=True, num_workers=4, pin_memory=True)
val_loader = DataLoader(val_dataset, batch_size=512, shuffle=False, num_workers=4, pin_memory=True)

# 4-2. 모델 학습 루프 (검증 및 조기 종료 포함)
final_embedding_dim = 128
model = TwoTowerModel(num_users, item_text_embeddings, text_embedding_dim, final_embedding_dim).to(device)
optimizer = optim.Adam(model.parameters(), lr=0.001)
# TripletLoss: anchor와 positive는 가깝게, anchor와 negative는 멀게 만듦
criterion = nn.TripletMarginLoss(margin=1.0)

num_epochs = 20
best_val_loss = float('inf')
patience = 3
patience_counter = 0

print("Starting model training...")
for epoch in range(num_epochs):
    model.train()
    total_train_loss = 0

    for batch in tqdm(train_loader, desc=f"Epoch {epoch+1}/{num_epochs} [Training]"):
        user_ids, pos_item_ids, neg_item_ids, pos_prices, neg_prices = [b.to(device) for b in batch]

        optimizer.zero_grad()

        user_vec = model.get_user_vector(user_ids)
        pos_item_vec = model.get_item_vector(pos_item_ids, pos_prices)
        neg_item_vec = model.get_item_vector(neg_item_ids, neg_prices)

        loss = criterion(user_vec, pos_item_vec, neg_item_vec)
        loss.backward()
        optimizer.step()
        total_train_loss += loss.item()

    avg_train_loss = total_train_loss / len(train_loader)

    # 검증
    model.eval()
    total_val_loss = 0
    with torch.no_grad():
        for batch in tqdm(val_loader, desc=f"Epoch {epoch+1}/{num_epochs} [Validation]"):
            user_ids, pos_item_ids, neg_item_ids, pos_prices, neg_prices = [b.to(device) for b in batch]
            user_vec = model.get_user_vector(user_ids)
            pos_item_vec = model.get_item_vector(pos_item_ids, pos_prices)
            neg_item_vec = model.get_item_vector(neg_item_ids, neg_prices)
            loss = criterion(user_vec, pos_item_vec, neg_item_vec)
            total_val_loss += loss.item()

    avg_val_loss = total_val_loss / len(val_loader)
    print(f"Epoch {epoch+1}, Train Loss: {avg_train_loss:.4f}, Val Loss: {avg_val_loss:.4f}")

    # 조기 종료 및 모델 저장
    if avg_val_loss < best_val_loss:
        best_val_loss = avg_val_loss
        torch.save(model.state_dict(), os.path.join(artifacts_folder, "best_model.pth"))
        print(f"Validation loss improved. Saved best model to '{artifacts_folder}/best_model.pth'")
        patience_counter = 0
    else:
        patience_counter += 1
        print(f"Validation loss did not improve. Patience: {patience_counter}/{patience}")
        if patience_counter >= patience:
            print("Early stopping triggered.")
            break

1. 상호작용 데이터 준비

User - Item 쌍이 한 번만 학습 데이터에 포함되도록 하기 위해서, drop_duplicates()를 사용하여 중복을 제거하였다.

2. 데이터셋 분할

전체 상호작용 데이터(df_interactions) 를 Train, Validation, Test 세트로 각각 76.5%, 13.5%, 10% 비율로 나눴다.

3. TripletDataset 인스턴스 생성

all_items = np.arange(num_items) : 전체 아이템의 인덱스 배열을 생성 -> 부정 샘플링을 위한 준비
train_dataset = TripletDataset(train_df, item_prices, all_items) : 학습용 상호작용 데이터(train_df), 아이템 가격 정보(item_prices), 전체 아이템 인덱스(all_items)를 사용하여 학습용 TripletDataset을 만든다.
검증용 TripletDataset도 위와 동일한 방법으로 만들어주었다.

4. DataLoader 생성

학습 데이터는 Epoch마다 섞어서 모델이 데이터의 순서에 의존하지 않고 일반화 능력을 향상시키도록 해주었다.

num_workers는 데이터를 로드하고 전처리하는 데 사용할 서브프로세스의 수를 지정한다.

모델이 한 batch에 대한 학습을 진행하는 동안, num_workers는 다음 배치를 미리 준비해 둔다.

pin_memory=True 옵션은 DataLoader가 데이터를 CPU 메모리에 미리 고정된 상태로 로드하여, GPU 데이터를 복사할 때 더 효율적으로 전송 되도록 돕는다고 한다.

5. 모델 학습 루프

학습 단계에서는 train_loader 에서 배치 데이터를 가져와 forward pass, 손실 계산, backward pass, 옵티마이저 스텝을 수행한다.

검증 단계에서는 각 Epoch이 끝날 때마다 model.eval() 로 설정하고, val_loader 를 사용하여 모델 성능을 검증한다.

검증 손실이 더 이상 개선되지 않으면 학습을 조기 중단하여 과적합을 방지하고, 가장 좋은 성능을 보였던 모델의 가중치를 저장하도록 했다.

Artifacts 저장

print("\n--- 5. Saving Artifacts ---")
# 1. 가장 성능이 좋았던 모델 가중치 이름 변경
if os.path.exists(os.path.join(artifacts_folder, "best_model.pth")):
    os.rename(os.path.join(artifacts_folder, "best_model.pth"), os.path.join(artifacts_folder, "two_tower_model.pth"))
    print("Saved best model as 'two_tower_model.pth'")

# 2. 아이템 텍스트 임베딩 저장
torch.save(item_text_embeddings, os.path.join(artifacts_folder, "item_text_embeddings.pt"))

# 3. 가격 스케일러 저장
with open(os.path.join(artifacts_folder, "price_scaler.pkl"), 'wb') as f:
    pickle.dump(price_scaler, f)

# 4. 매핑 및 데이터 저장
mappings = {
    'user_categories': df['session_id'].astype('category').cat.categories,
    'item_categories': df['item_id'].astype('category').cat.categories,
    'idx_to_item_original': {idx: original_id for idx, original_id in enumerate(df['item_id'].astype('category').cat.categories)},
    'item_titles': item_titles,
    'item_idx_to_c1': item_idx_to_c1,
    'item_idx_to_c2': item_idx_to_c2,
    'item_idx_to_brand': item_idx_to_brand,
    'item_idx_to_condition': item_idx_to_condition,
    'item_prices': item_prices,
    'final_embedding_dim': final_embedding_dim,
    'text_embedding_dim': text_embedding_dim
}
with open(os.path.join(artifacts_folder, "mappings.pkl"), 'wb') as f:
    pickle.dump(mappings, f)

# 5. 테스트 데이터 저장
test_df.to_pickle(os.path.join(artifacts_folder, "test_df.pkl"))

print(f"Artifacts saved to '{artifacts_folder}' folder.")
print("\n--- Training Script Finished ---")

학습이 완료된 후, 추후 백엔드와 연동하여 활용할 수 있게 Artifacts를 저장해주었다.

two_tower_model.pth : 최종 학습된 모델의 가중치
item_text_embeddings.pt : 모든 아이템의 사전 계산된 텍스트 임베딩
price_scaler.pkl : 가격 스케일링에 사용된 StandardScaler 객체 (새로운 아이템 가격을 처리할 때 사용)
mappings.pkl : 사용자 및 아이템의 원본 ID와 인덱스 간의 매핑 정보, 아이템의 메타데이터(이름, 카테고리, 브랜드, 상태), 그리고 최종 임베딩 차원 및 텍스트 임베딩 차원 등의 필요한 정보들을 딕셔너리 형태로 저장

이렇게 까지 하고 "사용자의 실시간으로 업데이트 되는 행동 데이터들은 어떡하지?"라는 생각이 들었다.

그래서 처음엔 막연히 모델에게 그때 그때 재학습을 시켜서 구현을 해야하나 싶었지만, 유저 한 명, 한 명의 실시간으로 쌓여가는 수많은 행동데이터를 그때마다 모델에게 학습을 시킨다는 것은 거의 불가능한 일이었다.

그렇게 방법을 찾고 찾은 결과, 이와 관련된 코드는 백엔드로 구현을 하게 되었는데...

이후로 작업했던 백엔드와 간단한 테스트용 프론트 작업에 대해서는 다음 포스팅에서 다룰 예정이다.

[MS AI School] 1차 프로젝트 Recorde - 1

Sponge_ — Thu, 5 Jun 2025 00:19:20 +0900

먼저, 팀 프로젝트의 주제는 "고객별 상품 추천 시스템" 이다.

쉽게 말해서, 쿠팡, 아마존, 무신사, 넷플릭스 등과 같이 고객별로 취향, 행동 등을 반영하여 그에 맞는 상품을 추천해주는 시스템이다.

주제는 쿠팡, 아마존 같은 시스템을 구현 해보고 싶다는 나의 의견 제시를 시작으로 최종 선정이 되었다.

이 주제를 선정한 이유는, 이번 기수들을 포함하여 이전 기수들도 한 번도 하지 않은, 그리고 실무에서도 많은 기업들에서도 사용 중인, 또는 사용 할 수 있는 주제라고 생각해서 선정하게 되었다.

처음 내가 생각했을 때는, 군집 모델을 활용하여, 고객별로 특성이 비슷한 군집을 생성하게 한 후 상품도 군집화를 진행 -> 각 고객 군집별 군집의 특성에 맞는 상품 추천. 이러한 흐름을 생각했었다.

그렇게 프로젝트 첫 날, 프로젝트에 사용할 데이터셋을 조사 하면서 여러 알고리즘과 모델들을 서칭해보았는데, 그렇게 군집화 모델 하나로 띡 하고 해결 될 단순한 문제가 아니었다.

정확히 어떤 알고리즘으로 구성되어 있는지 내부를 다 알 수는 없지만, 여러 논문과 kaggle을 뒤져가며 추천 시스템을 조사해본 결과 여러가지 모델 / 알고리즘이 있었다.

내가 조사하면서 알게된 내용들은 따로 포스팅 하여 자세히 다룰 예정이다.

그리고 데이터셋을 엄청 찾아봤는데, 우리에게 딱 적합한 데이터셋은 찾기 힘들었다.

사용자의 행동패턴에 대한 정보, 상품명, 카테고리명 등이 다 같이 포함되어 있는 데이터가 필요했는데, 꼭 하나씩 빠져있는 데이터셋만 있어서 골치가 좀 아팠다.

https://www.kaggle.com/retailrocket/ecommerce-dataset

Retailrocket recommender system dataset

Ecommerce data: web events, item properties (with texts), category tree

www.kaggle.com

https://www.kaggle.com/datasets/karkavelrajaj/amazon-sales-dataset/data

Amazon Sales Dataset

This dataset is having the data of 1K+ Amazon Product's Ratings and Reviews

www.kaggle.com

그래서 나는 한 가지 방법을 팀원들에게 제안했다.

위 두 데이터에서 필요한 부분만 추출하여 병합을 하는 것이다.

Retailrocket 같은 경우에는 모두 다 갖추고 있지만, 상품명이 존재하지 않았다.

반면, Amazon의 데이터는 상품명은 갖추고 있었지만, 사용자 행동에 대한 데이터가 없었다.

그래서 나는 팀원들에게 이 의견을 제시한 후, 팀원들도 모두 동의하여 데이터 병합을 진행하였다.

Trouble Shooting

하지만, 여기서 한가지 문제가 발생했다.

Retailrocket 데이터의 item_id에 임의로 Amazon의 product_name을 부여하려고 했는데, 이렇게 되면 사용자 군집화를 진행하였을때, 군집 왜곡이 발생할 수 있다는 것을 알게되었다.

군집 왜곡이 왜 발생하느냐고 설명을 하자면, 예를 들어, A라는 고객 데이터가 있다고 치자.

Retailrocket 데이터셋에서 A고객의 행동 데이터에는 화장품과 관련된 상품을 클릭, 조회 등을 했다고 기록되어 있다.

하지만, 이 상품을 무작위로 지정하게 되면, 음식, 옷, 전자기기 등 A고객은 이것 저것 무작위로 상품을 조회 한 것으로 되어, 이 데이터를 바탕으로 군집을 진행한다면, 당연히 군집이 제대로 될리가 없다.

그래서 나는 고민끝에 또 한가지 방법을 고안해냈다.

바로 Retailrocket과 Amazon의 Category 컬럼을 이용하는 것이다.

Retailrocket에는 categoryid 컬럼이, Amazon에는 Category_name이 들어있어서, Retailrocket의 item_properties.csv의 property 컬럼의 value가 category인 데이터만 뽑은 다음, 필터링된 데이터들의 value컬럼에서 같은 categoryid를 가진것끼리 그룹을 만든 후 출력을 해보면, 각 카테고리별 아이템의 수를 알 수 있다.

categoryid별로 상품 count

하지만 여기서 하나 짚고 넘어갈 것이, 저 categoryid는 대분류인지, 중분류, 소분류인지 알 수가 없다는 것이다.

그래서 나는 데이터를 분석해보았는데, category_tree.csv 파일을 이용하면 됐었다.(왜 이 파일을 볼 생각을 못 했는가...)

해당 파일에는 categoryid, parentid 두 컬럼이 존재하는데, 우리는 대분류로 category를 나누기로 결정을 해서, parentid가 Nan인 categoryid만 출력을 시켜보았다.

대분류 카테고리만 출력

이렇게 하여 어찌저찌 우리가 필요한 데이터셋을 구성할 수 있게 되었다.

하지만 바로 다음 날, 팀원 중 한 분이 프로젝트에 필요한 데이터(사용자 행동 데이터, 상품명, 카테고리명 등), 방대한 데이터 수(5백만 명 이상의 사용자, 8천만 개 이상의 상품, 10억 건 이상의 사용자-상품 상호작용 이벤트)를 찾아오셔서... 나의 반나절 동안의 수고는 물거품이 되어버렸지만... 그래도 이를 통해 얻어가는 것이 크다고 생각하며, 스스로 위로 했다 하하...

https://huggingface.co/datasets/mercari-us/merrec

mercari-us/merrec · Datasets at Hugging Face

MerRec: A Large-scale Multipurpose Mercari Dataset for Consumer-to-Consumer Recommendation Systems This repository contains the dataset accompanying the paper MerRec: A Large-scale Multipurpose Mercari Dataset for Consumer-to-Consumer Recommendation System

huggingface.co

바로 이 데이터셋이다.

용량이 아주 크기 때문에, 웬만하면 일부 데이터만 다운 받아 사용하는 것을 권장한다.

추천 시스템에 사용되는 알고리즘 / 모델들에 대해서 조사를 좀 해보았다.

Collaborative Filtering, Sequential Recommendation, Hybrid System 등 여러 알고리즘이 있었고, 그 모델들을 사용하여 직접 PoC를 진행하였다.

오늘은 Two-Tower 모델 PoC를 진행하였다.

Two-Tower 모델은 두 개의 타워를 세워 벡터 임베딩 후 학습을 하는 것이다.

위 데이터에 적용 시키면, User Tower, Item Tower를 구성한 후 두 타워에서 나온 벡터들을 서로 비교하여 사용자가 어떤 아이템을 좋아할지 예측을 하는 것이다.

처음엔 name 데이터만을 feature로 사용하여 모델 학습을 진행하였다.

text_model = SentenceTransformer('all-MiniLM-L6-v2', device=device)
item_titles_list = [item_titles[i] for i in range(num_items)]
item_embeddings = text_model.encode(item_titles_list, show_progress_bar=True, convert_to_tensor=True, device=device)
print("Item embeddings generated.")

all-MiniLM 이라는 미리 학습된 SentenceTransformer모델을 사용하여, 아이템의 의미론적 특징을 포착하게 하였다.

이 결과는 아래와 같이 나왔다.

two-tower model

결과를 보면, 사용자 행동 패턴과 관련 있는 상품도 보이지만, 관련 없는 상품도 상당히 많이 추천이 되고 있는것을 볼 수 있다.

feature로 사용할 데이터를 더 많이 넘겨주어야 할 것 같다.

그래서 c1_name(category), brand_name을 추가적으로 학습에 사용될 feature로 넘겨주었다.

two-tower after

드라마틱하게 결과가 좋아진 것을 확인할 수 있다.

사용자의 과거 관심을 보였던 상품들과 유사하거나, 같은 브랜드의 상품을 추천하고 있다.

이 정도만 해도 충분히 좋은 결과를 도출했다고 볼 수 있지만, 우리는 사용자의 행동 순서(Sequential) 데이터를 보유하고 있기에 그 데이터를 활용하여 성능을 조금 더 좋게 나올 수 있게 하는 방법을 고민해보았다.

그래서 나는 two-tower 와 GRU(Sequential Model) 를 결합하여, Hybrid System을 구축해보았다.

먼저, two-tower로 이 수많은 상품들 중 사용자와 연관된 상품들로 필터링 한 후 GRU 모델에게 넘겨준다.

GRU 모델은 사용자의 행동 패턴, 순서를 기반으로 하여 다음 행동을 예측하고, 그에 따른 추천 상품의 순위를 매겨 제공한다.

이렇게 구현한 결과는 아래와 같다.

two-tower + GRU

두 번째 결과와 뭐가 크게 달라졌는지 잘 모르겠다고 할 수 있겠지만, 이 코드를 잘 다듬어서 기능 별로 적절한 알고리즘을 선택하여 각각 다르게 적용시킬 수 있을 것 같다.

MS AI School 7기 - 우수생 선정 되다 !

Sponge_ — Wed, 4 Jun 2025 18:52:06 +0900

일주일 정도 전, 1차 프로젝트 시작을 알리는 두번 째 타운홀 미팅이 있었습니다.

이번 미팅도 저번처럼 한국 마이크로소프트 건물에서 진행되었습니다.

갈때마다 느끼지만, 경복궁이 보이는 이 동네는 참 분위기가 좋은 것 같습니다.(저런 건물에서 일 한다면 매일 야근도 할 수 있을 것 같은...)

이번 미팅때는 바로 다음 날 부터 시작될 1차 프로젝트에 관한 설명, 그리고 팀원들과의 첫 대면 회의를 할 수 있는 시간이 대부분으로 구성되어 있었습니다.

주제 선정부터 시작해서 팀원들과 여러 의견을 주고 받고, 여러 멘토님들에게도 코칭을 받으며 반나절 가까이 회의를 진행했습니다.

미팅이 끝나기 한 시간 전, 갑작스러운 중간 평가를 진행한다고 하여 적잖이(사실 아주 많이...) 당황했습니다.

나중에 알고보니, 사전에 미리 중간 평가를 진행한다고 공지에 기재가 되어 있었습니다. 공지를 제대로 읽지 않은 저는 그 평가가 우리를 평가하는 것인줄은 꿈에도 몰랐던거죠...

이렇게 된거 그냥 그 동안 열심히 공부했던 만큼만 해보자는 마음가짐으로 시험에 임했습니다.

하지만 웬걸... 생각보다 점수가 엄청 높게 나와서 저도 놀랐습니다.

그렇게 며칠 뒤, 저는 이번 중간 평가 우수 학생으로 선정 되었다는 소식을 듣게 되었습니다. 하하

열심히 했던 보람이랄까..

점수가 높게 나오긴 했지만, 수강생들 중 가장 높을거라곤 전혀 예상도 못했어서 그런지 기분이 정말 좋더군요.

현재는 1차 프로젝트를 진행 중입니다.

미팅 후 팀 결성 기념 사진(?)

다음 포스트 부터는 현재 진행 중인 프로젝트에 관한 내용에 대해서 중간 중간 포스팅 할 예정입니다.

[ML] Linear Regression 정리

Sponge_ — Tue, 27 May 2025 00:16:32 +0900

Linear Regression(선형 회귀)는 독립 변수와 종속 변수 사이의 관계를 직선 형태로 모델링 하는 기법이다.

y = wx + b

w: (weight)
b: (bias)

기본 식은 위와 같다고 볼 수 있지만, feature의 수가 늘어나면 다차원 형태의 식이 될 수도 있다.

weight는 각각의 feature의 importance에 따라 값이 달라지기 때문에 feature의 값 만큼 weight의 개수도 달라진다.

여기서 우리는 최적의 weight 값을 찾는 것을 목표로 모델 학습을 진행한다.

그렇다면 Linear Regression을 어디에 쓸 수 있을까?

예를 들면 공부 시간과 내 시험 점수, 집 평수에 따른 월세 가격, 나이에 따른 실업률 추정 등등이 Linear Regression의 예시가 될 수 있다.

그래프로 보았을때, 저 빨간점들과 파란선(예측선)의 차이가 최소가 되는 직선을 찾는것이 Linear Regression 모델 이다.

저 예측선은 w(weight)값을 조정하여 변화시킬 수 있고, 최적의 w값을 찾는것이 모델 학습의 목적이라고 볼 수 있다.

그럼 최적의 weight값을 어떻게 찾을까?

여기서 우리는 RSS와 MSE에 대해서 알고 넘어가야 한다.

RSS

RSS는 잔차 제곱 합을 뜻하며, 쉽게 말해 오류 값의 제곱을 구한 다음, 더해주는 방식이다.

당연히 RSS 값이 최소가 되는 방향으로 weight 값을 찾는게 모델링의 목적이다.

MSE

MSE는 평균제곱오차 를 뜻하며, RSS를 학습 데이터의 수로 나눠준 것을 의미한다.

회귀에서는 MSE를 비용 함수(Cost function) 또는 손실 함수(Loss function)이라고 한다.

이 비용함수를 최소화 하는 것을 목표로 한다.

그럼 MSE를 최소화 하는 방법이 뭘까?

그건 바로 미분이다.

선형 회귀에서의 weight(가중치)는 feature(입력 변수)의 수에 따라 w1, w2, w3, ... 형태로 벡터로 존재하게 된다.

MSE를 최소화하기 위해서는, 이 각각의 가중치 w에 대해 MSE를 편미분한 값이 0이 되도록 만드는 것이다.

즉, 전체 MSE 함수에 대해 모든 가중치에 대한 gradient(기울기)가 0이 되는 지점을 찾는 것이 곧, MSE를 최소화하는 최적의 weight 값을 찾는 것이다.

그 방법 중 가장 널리 쓰이는게 바로 Gradient Descent Method(경사 하강법)이다.

MSE가 크면 클수록 다음 weight는 작은 쪽으로 보내야 하고, 작으면 작을 수록 weight는 큰 쪽으로 보내야 한다.

이때, learning rate는 가중치를 얼마나 크게 또는 작게 업데이트 할지를 결정하는 파라미터 값이다.

이 값이 클 수록 변화폭은 더 커지게 된다.

그럼 learning rate의 값을 처음부터 크게 줘서 바로 0을 찾아가게 만들면 안되나? 라는 생각이 들 수도 있다.

하지만 너무 큰 값을 주게 되면 최솟값을 지나쳐서 멀리 가버릴 수도 있다. 그렇게 되면 Loss가 오히려 증가하는 경우도 생긴다.

반대로, 너무 작은 값을 주게 되면 학습 속도가 매우 느려서 오랜 시간 학습을 했지만, 최솟값에 도달하지 않는 결과를 초래할 수 있다.

learning rate 잘못된 예

그렇기 때문에 우리는 적절한 learning rate의 값을 잘 찾아서 입력을 해주어야 한다.

이 파라미터가 매우 중요하기 때문에 learning rate의 값을 찾기 위한 여러가지 방법들이 존재한다.

일반적으로는 큰 값부터 넣은 후, 값을 조금씩 감소 시키면서 실험을 해보는 방법을 사용한다.

https://arxiv.org/abs/1506.01186

Cyclical Learning Rates for Training Neural Networks

It is known that the learning rate is the most important hyper-parameter to tune for training deep neural networks. This paper describes a new method for setting the learning rate, named cyclical learning rates, which practically eliminates the need to exp

arxiv.org

위 논문에서는 Cyclical learning rates (순환학습률, CLR) 이라는 방법을 소개하고 있다.

최대 학습률과 최저 학습률 사이 값을 순환하게 하는 방법이다.

대표적인 3가지 모드를 소개하자면,

1. triangular

가장 기본적인 형태: learning rate가 base ↗ max ↘ base 형태로 반복
일정한 높이의 삼각형 패턴을 반복함

2. triangular2

triangular와 동일하지만, 반복할수록 amplitude를 절반으로 감소시킴

3. exp_range

반복할 때마다 max_lr를 지수적으로 감소시킴
주기 안에서는 증가/감소를 반복하되, 전체적으로는 감소함

Cyclical learning rates의 장점은 따로 learning rate를 찾지 않아도 돼서, 하이퍼파라미터 튜닝 시간을 단축 시켜주고, 수렴이 빠르다.

그리고 overfitting을 방지할 수 있다는 장점도 있다.

[ML] Azure 클라우드 기반 머신러닝 실습 - 다중 선형 회귀

Sponge_ — Fri, 16 May 2025 00:31:41 +0900

오늘은 자전거 대여에 관한 정보 및 데이터들을 수집하여, 자전거 렌탈 수요 예측 모델을 만들어 보는게 목표이다.

Azure에서 제공하는 Machine Learning Studio로 실습을 진행할 예정이다.

Azure에서는 데이터의 흐름과 모델 학습까지의 머신러닝을 파이프라인으로 구성할 수 있어, 사용자에게 조금 더 복잡하지 않고, 직관적으로 보여주기 때문에 머신러닝에 익숙하지 않은 사람들도 쉽게 이용을 할 수 있게 서비스를 제공하고 있다.

"UCI" 사이트에 가면 여러가지 데이터들을 받아서 볼 수 있다.

나는 그 중 "Bike Sharing Dataset"을 이용하였다.

실습에 들어가기 앞서, 다중 선형 회귀(Multi Linear Regression)에 대해서 간략히 설명을 하고 넘어가보자.

다중 선형 회귀(Multi Linear Regression)

다중 선형 회귀는 단순 선형 회귀와 달리, 종속변수가 여러 독립변수에 의해 영향을 받는 경우에 사용한다.

쉽게 예를 들어, 시험 점수 예측 모델을 만든다고 할 때, 하나의 요소만 영향을 주는 것이 아니라,

공부 시간, 수면 시간, 출석률 등 여러개의 독립 변수(x들)가 결과(y)에 영향을 준다.

이것이 바로 다중 선형 회귀이다.

그렇다면 이번 실습에서는 왜 다중 선형 회귀 모델이어야 할까?

종속 변수(y) = 자전거 수요
독립 변수(x) = 기온, 습도, 바람, 계절, 휴일 여부 등...

이렇듯, 여러 개의 독립 변수들이 영향을 주기 때문에 다중 선형 회귀 모델이 적합하다고 볼 수 있다.

Azure Machine Learning Studio

먼저, Azure Machine Learning Studio의 Data 탭 상단의 Create 버튼을 클릭하여, 준비한 csv파일을 업로드 해주면 된다.

기본적으로 Compute 인스턴스는 생성을 하고 작업을 해야, 나중에 작업 후 모델을 돌려볼 수 있다.

Designer 탭

Compute 인스턴스, Data 까지 모두 준비가 되었다면, 이제 Designer 탭에서 작업을 시작해주면 된다.

좌측에 보이는 Data 리스트에서 내가 업로드 한 Dataset을 드래그로 가져와 준다.

그 다음, Component 탭으로 가서, Select Columns in Dataset 을 가져와서 연결해준다.

현재 데이터 파일에서 특성(feature)으로 사용할 열만 선택해주는 기능을 하는 것이다.

여기서 day, year 컬럼은 모델 학습에 영향이 없는 데이터 이므로, 두 개의 컬럼을 뺀 나머지 컬럼들을 모두 select 해줬다.

다음은 범주형 데이터 -> Categorical 로 변환해주는 작업이다.

Edit Metadata 컴포넌트를 가져와서 변환할 범주형 데이터를 select 해준다.

mnth, season, holiday, weekday, workingday, weatersit 컬럼을 select 한 후, Categorical로 변경해주면 된다.

Categorical 변환

그리고 이 categorical로 변환된 컬럼들을 one-hot 인코딩 해줘야 한다.

왜 해줘야 할까?

그 이유는, 머신러닝 알고리즘(특히 회귀, SVM, 트리 기반 모델 등)은 대부분 숫자만 처리 가능하기 때문이다.

Convert to indicator values 컴포넌트를 사용하여, one-hot 인코딩을 해주면 된다.

이제 수치형 데이터에 대해서 정규화를 진행해줘야 한다.

정규화 및 표준화를 진행하는 이유를 이번 실습 데이터로 예들 들자면, 이 데이터들의 특성 중 온도, 체감온도, 풍속, 강수량 등은

서로 단위, 분포가 다르다. 이 데이터들을 그대로 학습 시키게 되면 모델 학습에 끼치는 영향력이 균등할 수 없기 때문이다.

데이터 정규화

위와 같이 Normalize Data 컴포넌트로 정규화를 진행해주었다.

이제 Split Data로 train data, test data 를 나누어 준다.

나는 70%를 학습데이터로 할당해 주었다.

그 다음, Linear Regression 알고리즘을 선택해주고, Train model에 학습데이터와 해당 알고리즘을 연결해준다.

Train model에서는 Label column을 지정해주어야 한다.

이번 실습의 Label column은 rentals 이므로, 이를 지정해주었다.

이제 Score Model로 점수를 매기고, 모델 평가를 해주는 단계이다.

모델 평가는 Evaluate Model 컴포넌트로 할 수 있다.

여기까지 완료했다면, Job을 돌려주면 된다.

Job을 돌리기 전 항상 compute 인스턴스가 running 상태인지 확인하고 돌리기를 권한다.

Jobs 탭에서 현재 진행상황을 확인 할 수 있다.

위 사진처럼 위에서 부터 순차적으로 진행이 되고 있는것을 확인할 수 있다.

모두 진행이 완료되고 나면, Evaluate Model에서 평가 지표를 확인할 수 있다.

지표상으로 보면 그렇게 잘 나온 것 같지는 않다...

이렇게 지표를 확인하고, 다시 전처리 과정이나 알고리즘 선택, 하이퍼 파라미터 등을 수정해 가면서

지표가 더 좋게 나오는 방향으로 업그레이드 해 나가는 것이 머신러닝의 전반적인 과정이라고 볼 수 있다.

MS AI School 7기 한 달차 후기

Sponge_ — Tue, 13 May 2025 20:50:44 +0900

요즘 수업을 따라가느라 엄청 바쁜 하루 하루를 보내고 있다.

지금은 azure 클라우드 기반 머신러닝을 배우는 중인데, 수학적 개념까지 들어가니 조금 난이도가 있는 편이다.

현재 수업 외적으로 수학 공부를 병행하고 있는 중인데, 수업 내용을 이해하는데에 도움이 많이 되는 것 같다.

요즘 나의 일상 루틴 :

09 : 00 - 18 : 00 - AI School 수업
18 : 00 - 19 : 00 - 수업 내용 복습
19 : 00 - 21 : 00 - 저녁 식사 및 휴식
21 : 00 - 22 : 00 - 프로그래머스 문제 풀이
22 : 00 - 24 : 00 - 수학 공부

대충 이런 식으로 매일을 보내는 것 같다...

하루에 자는 시간을 제외 하고는 거의 책상 앞에 앉아 있다 보니, 허리가 많이 안좋아진 것이 느껴진다.

프로그래머스 내가 푼 문제

파이썬에 익숙해지기 위해서 한 달 동안 프로그래머스에서 문제를 조금씩이라도 매일 풀려고 노력했다.

비록 모든 문제를 스스로의 힘만으로 풀었다고는 말 못하지만, 풀이를 찾아보며 코드를 한 줄씩 이해하며 다시 푸는 과정을 반복한 결과...

이제는 어느정도 파이썬에 조금 익숙해진 것 같다.

이제는 시간이 조금 여유가 생길때, 알고리즘 강의를 조금 더 들으며, Lv1 ~ Lv2 문제들도 도전해보려고 한다.

(지금은 수업 내용 조차 따라가기 힘들어서, 코딩테스트 공부는 조금 후순위로 미뤄뒀다...)

그리고 수학 공부를 하고 있는 방법에 대해서 살짝 소개를 하자면,

Khan Academy라는 사이트에서 강의를 들으며 공부하고 있다.

https://ko.khanacademy.org/

Khan Academy

ko.khanacademy.org

위 처럼 인공지능 공부에 필요한 선형대수학, 확률과 통계, 미적분학 등을 학습할 수 있게, 강의가 제공 된다.

영어 강의이긴 하지만, 한글 번역을 지원하고 있어서 학습에 큰 문제는 없고, 퀄리티도 생각보다 좋아서 애용하고 있다.

이번 달 말에는 또 타운홀 미팅이 잡혀있고, 말 일에는 바로 첫 번째 프로젝트가 시작된다.

AI School 과정을 진행하면서, 조금 불만이었던 점을 말하자면...

일단 강사가 너무 자주 바뀐다.

물론, 각 과정별로 특화된 강사님이 들어오신다면 환영이겠지만, 딱히 그런것 같지도 않을 뿐더러, 강의력에 상당히 의구심이 드는 강사님도 계셨다.

이렇게 강사가 너무 자주 바뀔때, 강사간의 커뮤니케이션이 잘 되어 어느 부분을 얼만큼 배웠는지를 잘 인지하고 있다면 그나마 좀 낫겠지만, 서로 어떤 수업을 진행했는지도 잘 모르시는 것 같았다.

그래도 소수의 강사님을 제외하면 대부분 높은 퀄리티의 수업을 진행해주셔서 나름 만족하면서 열심히 듣고 있다.

앞으로 배울 내용이 훨씬 더 많이 남아있기 때문에, 나의 목표를 향해 열심히 달려봐야지.

[ML] 머신러닝 모델 검증을 위한 레코드 분할

Sponge_ — Wed, 7 May 2025 23:16:28 +0900

오늘 배운 내용을 복습할 겸, 머신러닝 모델 검증을 위한 레코드 분할에 대해서 다뤄 보려고 한다.

학습용과 검증용 데이터 나누기

데이터 분할은 예측 모델을 평가할 때 필요한 전처리이다.

학습 데이터와 검증 데이터는 같은 전처리를 적용해야 하며(스케일링, 결측치 처리 등), 되도록 같은 데이터로 묶어서 다루고,

예측 모델에 입력하기 직전 분할하는 것이 적절하다.

적용 데이터는 정답을 알 수 없는 상태에서 사용하는 데이터이다. 그러므로 흐름이나 수집 시점이 다르기 때문에, 분할할 필요가 없다.

쉽게 말해서, 어차피 "평가용" 데이터가 아니고, 실제로 사용 되는 "운영용" 데이터니까 분할할 필요가 없다.

데이터 레코드 분할

위 이미지와 같이 교차 검증은 데이터를 검증용 데이터 / 학습용 데이터로 구분한다.

from sklearn.model_selection import train_test_split
from sklearn.model_selection import KFold

train_data, test_data, train_target, test_target = \
    train_test_split(production_tb.drop('fault_flg', axis=1),
                     production_tb[['fault_flg']],
                     test_size=0.2)

train_data.reset_index(inplace=True, drop=True)
test_data.reset_index(inplace=True, drop=True)
train_target.reset_index(inplace=True, drop=True)
test_target.reset_index(inplace=True, drop=True)

print(train_data)
print(train_target)

모델 학습시, 정답이 없어야 하므로 fault_flg 컬럼을 drop 해주고, 테스트 데이터는 20%로 잡아주었다.

<결과>

type      length  thickness
0      E  226.187113  21.029733
1      B  133.814427  14.083716
2      B  200.142637   2.917706
3      D  142.887310  16.560487
4      E  289.162995  30.476145
..   ...         ...        ...
795    C  212.354175  38.857996
796    D  223.806149  19.650766
797    A  198.988129  31.631090
798    E  162.463041  20.752650
799    B  124.966171   8.337629

[800 rows x 3 columns]
     fault_flg
0        False
1        False
2        False
3        False
4        False
..         ...
795       True
796      False
797      False
798      False
799      False

[800 rows x 1 columns]

여기까지 잘 되었다면, 교차 검증을 위해 분할을 해줄 차례이다.

row_no_list = list(range(len(train_target)))

# 교차 검증을 위한 분할
k_fold = KFold(n_splits=4, shuffle=True)

for train_cv_no, test_cv_no in k_fold.split(row_no_list) :
    train_cv = train_data.iloc[train_cv_no, :]
    print(train_cv)
    test_cv = train_data.iloc[test_cv_no, :]

<결과>

type      length  thickness
0      E  226.187113  21.029733
1      B  133.814427  14.083716
2      B  200.142637   2.917706
3      D  142.887310  16.560487
5      A   81.478578   8.840798
..   ...         ...        ...
795    C  212.354175  38.857996
796    D  223.806149  19.650766
797    A  198.988129  31.631090
798    E  162.463041  20.752650
799    B  124.966171   8.337629

[600 rows x 3 columns]
    type      length  thickness
2      B  200.142637   2.917706
3      D  142.887310  16.560487
4      E  289.162995  30.476145
6      A  135.440179  14.673518
8      E  157.480341  31.257903
..   ...         ...        ...
794    E  142.888025   2.229418
796    D  223.806149  19.650766
797    A  198.988129  31.631090
798    E  162.463041  20.752650
...
795    C  212.354175  38.857996
796    D  223.806149  19.650766

[600 rows x 3 columns]

[Kaggle] Titanic (데이터 전처리, Machine Learning)

Sponge_ — Mon, 5 May 2025 18:59:20 +0900

Kaggle의 Competitions에서는 여러가지 주제의 데이터들을 가지고, 사람들과 데이터 분석, 모델 학습을 통해 경쟁을 할 수 있다.

나는 오늘 처음으로 Kaggle을 사용해보아서, 비교적 쉬운 난이도의 데이터를 한 번 다뤄보았다.

https://kaggle.com/competitions/titanic

Titanic | Novice

Kaggle profile for Titanic

www.kaggle.com

영화 타이타닉을 주제로 만든 데이터이고, gender_submission.csv, test.csv, train.csv. 이렇게 총 3개의 파일이 들어있다.

gender_submission.csv : 예시 제출 파일
test.csv : 예측 데이터
train.csv : 모델 학습용 데이터

과정을 생각해보자면,

train.csv 데이터를 전처리 후 모델에게 학습 -> test.csv로 학습된 모델을 테스트 -> 결과를 예시 파일처럼 만든 후 제출

이렇게 된다.

데이터 분석

Kaggle에서는 Jupyter Notebook 환경을 지원하기 때문에 굳이 로컬에서 작업을 할 필요가 없다.

train = pd.read_csv('/kaggle/input/titanic/train.csv')
test = pd.read_csv('/kaggle/input/titanic/test.csv')

train.head()

train 데이터의 각 컬럼명을 찾아보자면 아래와 같이 설명할 수 있다.

PassengerId	탑승객 번호
Survived	생존 여부 (0 = 사망, 1 = 생존) ← 우리가 예측할 대상
Pclass	티켓 등급 (1등석, 2등석, 3등석)
Name	이름
Sex	성별
Age	나이
SibSp	같이 탄 형제/배우자 수
Parch	같이 탄 부모/자식 수
Ticket	티켓 번호
Fare	요금
Cabin	객실 번호
Embarked	탑승한 항구 (C, Q, S)

다음으로 결측치 값들을 한 번 살펴보았다.

train.isnull().sum()

<결과>

PassengerId      0
Survived         0
Pclass           0
Name             0
Sex              0
Age            177
SibSp            0
Parch            0
Ticket           0
Fare             0
Cabin          687
Embarked         2
dtype: int64

Age, Cabin, Embarked 에 결측치들이 있는 것을 확인했으니, 나중에 그 결측치들을 어떤 값으로 채울지 생각을 해보아야한다.

이제 성별, 티켓 등급, 탑승 항구 등에 따라서 생존률이 얼마나 됐는지 살펴보기 위해서 아래와 같이 코드를 작성했다.

# 성별
train.groupby('Sex')['Survived'].mean()
# 티켓등급
train.groupby('Pclass')['Survived'].mean()
# 탑승항구
train.groupby('Embarked')['Survived'].mean()

<결과>

Sex
female    0.742038
male      0.188908
Name: Survived, dtype: float64
##################################
Pclass
1    0.629630
2    0.472826
3    0.242363
Name: Survived, dtype: float64
####################################
Embarked
C    0.553571
Q    0.389610
S    0.336957
Name: Survived, dtype: float64

여성 생존률 약 74%, 남성 생존률 약19%로 여성 생존률이 훨씬 높았고, 1등급 생존률 62%, 3등급 24%로 등급이 높을 수록 생존률이 올라가는 것을 알 수 있었다.

데이터 전처리

필요한 데이터들에 대한 결측치를 채우고, 모델에게 학습시킬 수 있도록, 숫자 형태로 데이터를 변환시켜 준다.

train['Age'].fillna(train['Age'].mean(), inplace=True)
train['Embarked'].fillna(train['Embarked'].mode()[0], inplace=True)
train['Sex'] = train['Sex'].map({'male' : 0, 'female' : 1})
train['Embarked'] = train['Embarked'].map({'S' : 0, 'C' : 1, 'Q' : 2})

Age는 결측치를 모든 값들의 평균으로 채워줬다.
Embarked는 가장 mode() 함수를 사용하여, 가장 자주 등장하는 값으로 채워주었다. 여기서, mode()함수는 가장 자주 등장하는 값들이 리스트 형태로 반환되기 때문에, [0]과 같이 하나의 인덱스 값을 지정해주어야 한다.
성별 컬럼에서 남성은 0, 여성은 1로 변환해주었다.
Embarked 역시 문자열 형태로 되어있기 때문에 S, C, Q를 각각 0, 1, 2 로 변환해주었다.

모델 학습

이제 모델에게 학습시킬 데이터만 따로 features에 담아서 준비하고, 입력 데이터와 맞춰야 할 정답을 나눠준다.

features = ['Pclass', 'Sex', 'Age', 'SibSp', 'Parch', 'Fare', 'Embarked']

x = train[features]
y = train['Survived']

x에는 우리가 입력할 데이터. 즉, features를 넣어주고, y에는 우리가 맞춰야 할 생존율인 Survived를 담아준다.

이제 모델을 임포트 해주고, 학습을 시킬 차례이다.

from sklearn.ensemble import RandomForestClassifier

model = RandomForestClassifier(random_state=42)
model.fit(x,y)

RandomForestClassifier 는 여러 개의 Decision Tree(의사결정 트리)를 만들어서 결과를 투표로 결정하는 모델이다.

한 개의 트리보다 더 안정적이고, overfitting에 강하다. 특히, 분류 문제에서 매우 잘 작동한다고 한다.

random_state=42 는 왜 작성해줘야 할까?

RandomForestClassifier와 같은 랜덤 포레스트는 여러 개의 트리를 무작위로 만들기 때문에, 매번 실행할 때마다 결과가 조금씩 달라질 수 가 있다. 때문에 random_state에 고정된 숫자를 입력하여, 랜덤 시드를 고정하는 역할을 하게 해준다.

이에 대한 정보를 찾아보다가 알게 되었는데, 숫자는 아무 숫자나 입력해도 되지만, 42라는 숫자가 관습처럼 많이 쓰여진다고 한다.

모델 테스트

이제 모델 학습까지 완료 되었으니, test.csv 데이터를 이용해, 테스트를 거친 후 나온 결과를 예시 파일과 같이 만든 후 제출만 하면 끝이다.

test = pd.read_csv('/kaggle/input/titanic/test.csv')

test['Age'] = test['Age'].fillna(train['Age'].median())
test['Fare'] = test['Fare'].fillna(train['Fare'].median())
test['Embarked'] = test['Embarked'].fillna(train['Embarked'].mode()[0])

test['Sex'] = test['Sex'].map({'male': 0, 'female': 1})
test['Embarked'] = test['Embarked'].map({'S': 0, 'C': 1, 'Q': 2})

X_test = test[features]
predictions = model.predict(X_test)

위에서 가공했던 것과 동일하게 test파일의 데이터들을 가공해주면 된다.

model.predict()를 통해 예측을 진행한다. 그 결과는 predictions에 담아주었다.

마지막으로, 제출용 데이터프레임을 만들어 주어야 한다.

output = pd.DataFrame({
    'PassengerId': test['PassengerId'],
    'Survived': predictions
})

output.to_csv('/kaggle/working/submission.csv', index=False)

이렇게 해주면, 우측에 output에서 내가 만든 결과 파일을 확인할 수 있다.

이 파일을 다운로드 한 후, 제출해주면 score가 나온다.

0부터 1사이의 점수를 받을 수 있는데, 생각보다 점수가 낮게 나와서 조금 실망했다...

하지만 오늘의 결과를 발판 삼아서, 예측률을 더 높일 수 있도록 방법들을 하나씩 배워가면 될 것 같다.

Pandas 실습 - NASA 데이터 활용

Sponge_ — Wed, 16 Apr 2025 22:02:28 +0900

Pandas로 실제 데이터들을 가공해보면서 익혀보았다.

NASA에서 제공하는 아폴로 임무별 데이터들을 토대로 만들어 보았다.

2024년 부터 달탐사는 현재까지 진행 중이고, 앞으로 진행 예정인 작전에 도움을 줄 수 있도록 수집할 암석들의 종류와 갯수를 구해보는 작업을 진행하였다.

NASA에서 제공하는 데이터 가져오기

https://curator.jsc.nasa.gov/lunar/samplecatalog/index.cfm

Apollo Samples and Photo catalog

curator.jsc.nasa.gov

해당 사이트에서 필요한 컬럼을 체크하여, 데이터들을 csv 파일로 가져올 수 있다.

데이터 프레임 생성 및 정보 확인

# 데이터 파일을 읽어오기
rock_samples = pd.read_csv('./data/rocksamples.csv')

파일을 읽어올 경로는 자신의 csv파일의 실제 경로를 작성해주어야 한다.

#열수
rock_samples.shape[1]
#모양
rock_samples.shape
#컬럼명
rock_samples.columns

함수들로 일단 데이터의 모양, 컬럼명 등을 확인해주었다.

#결측치 갯수 확인
rock_samples.isnull().sum()

출력결과

결측치 개수 확인 결과, Subtype이라는 컬럼에 3개의 결측치가 있다는 것을 알 수 있었다.

결측치가 있는 행만 출력하고 싶을때는, 아래 처럼 작성해주면 된다.

rock_samples[rock_samples['Type'].isnull().any(axis=1)]

데이터 가공

데이터에 대한 웬만한 정보들을 알아냈으니, 이제 본격적으로 데이터들을 가공해볼 것이다.

- 컬럼명 변경 & 컬럼값 변환

# 컬럼값변환 : rock_samples['Weight (g)'] -> rock_samples['Weight (kg)]
rock_samples['Weight (g)'] = rock_samples['Weight (g)'].apply(lambda x : x * 0.001)
# 컬럼명 변환 : 'Weight(g)' -> 'Weight(kg)
rock_samples.rename(columns={'Weight (g)' : 'Weight(kg)'}, inplace=True)

g으로 표기되어 있는 단위를 kg으로 바꾸어 주었고, 그에 맞게 컬럼의 값들도 모두 변경해주었다.

- missions 데이터 프레임 구성하기

rock_samples에서 'Mission'별로 중복되지 않게 값들을 출력해보면 아래와 같은 결과가 나올 것이다.

#rock_samples['Mission']의 중복되지 않은 고유값들을 알아본다.
rock_samples['Mission'].unique()

아폴로 미션별 출력이 된 모습

# 빈 데이터 프레임을 만들고 변수 missions에 할당한다.
missions = pd.DataFrame()
# mission 데이터프레임의 새로운 컬럼인 mission['Mission']에 할당한다.
missions['Mission'] = rock_samples['Mission'].unique()

고유값들을 그대로 새로 만든 missions 데이터 프레임에 할당해준다.

missions를 출력한 모습

다음으로는 rock_samples에서 미션별 sample의 중량의 총합을 구해보자.

미션별로 묶기 위해서 groupby() 함수를 사용해주었다.

total_weight = rock_samples.groupby('Mission')['Weight(kg)'].sum()

그리고 이 미션별 샘플들의 총합(total_weight)을 위에서 만들었던 missions와 병합해준다.

missions = pd.merge(missions,total_weight, on='Mission')
missions

merge total_weight가 된 모습

다음 작업으로는, 각 미션들이 진행됨에 따라, 샘플 수집 중량 증가수를 알기 위해서 각 미션별 중량들의 차이를 구해서 병합해주었다.

Weight diff의 첫 번째 행은 비교대상이 없기 때문에, Nan이 나올것이다. 그래서 그 값을 0으로 채워주었다.

# 아폴로 임무간의 수집해온 암석 샘플 총중량 차이를 나타내는 컬럼 'Weight diff'를 missions 데이터프레임에 추가
missions['Weight diff'] = missions['Sample weight (kg)'].diff()
missions.fillna(value=0, inplace=True)

+weight diff

달 탐사선은 달모듈 + 명령모듈로 이루어져 있는데, 이 둘을 합쳐서 승무원 모듈이라고 한다.

그래서 일단 NASA 사이트에서 모듈명, 중량 데이터를 가져와서 병합해주었다.

달모듈이름 = ['Eagle (LM-5)', 'Intrepid (LM-6)', 'Antares (LM-8)', 'Falcon (LM-10)', 'Orion (LM-11)', 'Challenger (LM-12)']
달모듈중량 = [15103, 15235, 15264, 16430, 16445, 16456]
missions['Lunar module (LM)'] = 달모듈이름
missions['LM mass (kg)'] = 달모듈중량

모듈명, 중량까지 반영된 모습

이와 동일한 방법으로 명령모듈 컬럼까지 만들어서 병합해준다. + 각 모듈의 미션별 중량 증가량까지

Lm diff, CM diff 까지 병합 후

위에서 말했듯이 승무원 영역은 LM 과 CM의 합친 값이기 때문에, 두 컬럼의 합으로 승무원 영역의 중량(총 중량)을 병합한다.

# 승무원영역 = 달모듈 + 명령모듈
# 달모듈과 명령모듈 중량을 합한 값을 'Total weight (kg)'라는 새로운 컬럼을 만들어 missions 데이터프레임에 추가
missions['Total weight (kg)'] = missions['LM mass (kg)'] + missions['CM Mass (kg)']
# 마찬가지로 증가량(diff)까지 병합
missions['Total weight diff'] = missions['Total weight (kg)'].diff()

이제 승무원 영역이 전체 탐사선(Payload)에서 차지하는 비율을 구해야 하는데, NASA에서 찾은 탐사선의 무게는 43,500kg이라고 나와있다.

Total weight / 43,500 을 하면 차지하는 비율을 알 수 있다.

saturnVPayload = 43500
missions['Crewed area : Payload'] = missions['Total weight (kg)'] / saturnVPayload

동일한 방법으로 승무원 영역 / 전체 탐사선에서 암석 샘플이 차지하는 비율을 각각 구해서 병합해주었다.

# 승무원 영역에서 암석 샘플이 차지하는 비율 구하기 -> 'Sample : Crewed area'
missions['Sample : Crewed area'] = missions['Sample weight (kg)'] / missions['Total weight (kg)']
# 페이로드에서 샘플이 차지하는 비율 구하기 -> 'Sample : Payload'
missions['Sample : Payload'] = missions['Sample weight (kg)'] / saturnVPayload

비율까지 모두 병합 완료

artemis_mission DataFrame 만들기

아르테미스 임무란, 2024년부터 진행 중인 Moon to Mars 프로그램의 첫 번째 단계이다.

Artemis 임무에서 우주 비행사는 달에서 추가로 암석 샘플을 가져올 수 있다.

이미 지난 임무긴 하지만, 우리는 아르테미스 임무에서 가져와야 할 암석 샘플을 데이터 분석을 통해 예측해볼 생각이다.

artemis_crewedArea = 26520

artemis_dict = {'Mission' : ['artemis1', 'artemis1b', 'artemis2'],
                'Total weight (kg)' : [artemis_crewedArea, artemis_crewedArea, artemis_crewedArea],
                'Payload (kg)' : [26988, 37965, 42955]
               }
# 딕셔너리를 데이터 프레임으로 저장하기
artemis_mission = pd.DataFrame(artemis_dict)

아르테미스의 승무원 영역은 고정으로 26,520이고, 나머지 데이터들은 딕셔너리로 데이터 프레임을 만들어 주었다.

artemis_mission

다음으로는, 밑의 단계들을 거쳐서 출발할 탐사선들의 무게에서 샘플들의 무게가 차지하는 비율을 예상을 해 볼 것이다.

missions에서 구했던 'Crewd area : Payload', 'Sample : Crewed area', 'Sample : payload' 의 평균값을 구한다.
missions 에서 Sample weight 의 총합을 구한다.
이 두개의 값으로 예측치를 계산해, 병합해준다.

# missions 데이터프레임에서 'Crewed area : Payload', 'Sample : Crewed area', 'Sample : payload' 의 평균값을 구한다.
a = missions['Crewed area : Payload'].mean()
b = missions['Sample : Crewed area'].mean()
c = missions['Sample : Payload'].mean()

# missions 데이터프레임에서 'Sample weight (kg)'의 총합을 구한다.
sample_sum = missions['Sample weight (kg)'].sum()

#artemis_missions 데이터 프레임에 'Sample weight from total (kg)' 컬럼을 추가한다.
artemis_mission['Sample weight from total (kg)'] = artemis_mission['Total weight (kg)'] * b
#artemis_mission 데이터프레임에 'Sample weight from payload (kg)' 컬럼을 추가한다.
artemis_mission['Sample weight from payload (kg)'] = artemis_mission['Payload (kg)'] * c
# artemis_mission 데이터프레임에 'Estimated sample weight (kg)' 컬럼을 추가한다.
artemis_mission['Estimated sample weight (kg)'] = (artemis_mission['Sample weight from payload (kg)']
                                                    + artemis_mission['Sample weight from total (kg)']) / 2

예측치까지 병합된 모습

이제 어떤 종류의 암석을 가져와야 할지 생각을 해보면, 현재 보유 중인 암석 중에서 거의 남지 않은 암석들을 위주로 가져오는게 좋을 것 같다는 결론이 날 수 있다. (물론 나의 개인적인 생각이다)

rock_samples 에서 Weight와 Pristine(사용한 비율)을 이용해 남은 암석의 무게를 구하여 컬럼으로 추가해준다.

rock_samples['Remaining (kg)'] = rock_samples['Weight(kg)'] * rock_samples['Pristine (%)'] * 0.01

중량이 0.16kg 이상이고, pristinedl 50 이하인 행만 추출하여, low_samples 라는 데이터프레임을 만든다.

low_samples = rock_samples[
    (rock_samples['Weight (kg)'] >= 0.16) & 
    (rock_samples['Pristine (%)'] <= 50)
]

그리고, 연구에 많이 사용되는 현무암과 각력암만을 추출하여, needed_samples 데이터 프레임을 만들어준다.

needed_samples = low_samples[
    (low_samples['Type'] == 'Basalt') | (low_samples['Type'] == 'Breccia')
]
needed_samples

needed_sample

타입별로 암석 샘플의 총중량을 구해서, 아폴로 임무에서 처음부터 수집이 되지 않은 암석을 찾는다.

Crustal 수집량이 현저히 떨어져 있다는 것을 알 수 있다.

# rock_samples에서 'Type'이 'Crustal'. 인 행만 추출한다.
crustal = rock_samples[rock_samples['Type'] == 'Crustal']
needed_samples = pd.concat([needed_samples, crustal])

Crustal을 추출하여 need_samples에 추가해준다.

이번 Crusatal의 경우에는 데이터 프레임의 옆이 아니라, 위아래 방향으로 붙여주는 것이기 때문에, pd.concat() 함수를 사용하여 붙여주었다.

Crustal 추가 확인

완성된 needed_samples의 타입은 모두 'Basalt', 'Breccia', 'Crustal' 이 세 개인 것을 알 수 있다.

unique()로 고유값 출력

need samples overview 만들기

이제 최종적으로 우주인에게 보여줄 overview를 제작할 차례이다.

먼저, needed_samples에서 암석 타입별로 중량의 합을 구하여 needed_samples_overview 데이터 프레임과 병합해준다.

# 아르테미스 임무에 전달할 최종 데이터프레임 needed_samples_overview 만든다.
needed_samples_overview = pd.DataFrame
needed_sample_weight = needed_samples.groupby('Type')['Weight(kg)'].sum().reset_index()
# 두 데이터프레임을 병합한다.
needed_samples_overview = needed_sample_weight

needed_samples 에서 암석 타입별 중량의 평균을 구하여 병합한다.

컬럼명도 변경 해주었다.

# needed_samples 데이터프레임에서 암석유형별 중량의 평균을 구한다.
Weight_mean = needed_samples.groupby('Type')['Weight(kg)'].mean()
needed_samples_overview = pd.merge(needed_samples_overview, Weight_mean, on='Type')
# 컬럼명 변경. 'ID' -> 'Number of samples'
needed_samples_overview.rename(columns={'count' : 'Number of samples'}, inplace=True)

이제, 각 암석별 차지하는 비율을 계산하기 위해, Number of samples의 총합을 구하여 total_rocks에 할당한다.

그리고, 비율을 구하여 새로운 컬럼으로 할당해준다.

# needed_samples_overview['Number of samples'] 의 총합을 구하고 total_rocks에 할당
total_rocks = needed_samples_overview['Number of samples'].sum()
# 각 암석유형별로 차지하는 비율을 구해서 'Percentage of rocks'라는 컬럼에 할당한다.
needed_samples_overview['Percentage of rocks'] = (needed_samples_overview['Number of samples'] / total_rocks)

결과

수집해야 할 무게 계산을 위해, 잊고 있었던 artemis_mission을 찾았다.

여기서 Estimated sample weight 의 평균을 구하여 이번 달탐사의 예상 암석 중량 예측치를 계산하였다.

# artemis_mission['Estimated sample weight (kg)']의 평균을 구해서 Artemis 달탐사의 에상 암석 중량을 구한다.
sample_weight_mean = artemis_mission['Estimated sample weight (kg)'].mean()
# needed_samples_overview['Weight to collect'] 컬럼을 만든다.
needed_samples_overview['Weight to collect'] = needed_samples_overview['Percentage of rocks']
* sample_weight_mean

마지막으로 수집할 각각의 암석 개수를 구하여 마무리

# 수집할 각각의 암석 개수를 알려준다.
needed_samples_overview['Rocks to collect'] = (needed_samples_overview['Weight to collect']
/ needed_samples_overview['Average weight (kg)'])

결과

최종결과

최종적으로 Basalt : 13개, Breccia : 36개, Crusatal : 21개 가량을 수집해오면 된다는 결과를 도출해냈다.

[프로그래머스] 옹알이(1) - Python

Sponge_ — Thu, 10 Apr 2025 23:02:42 +0900

파이썬 공부를 하며, 프로그래머스 문제로 연습을 하던 도중...

아주 흥미로운 녀석을 만나서 포스트를 작성하게 되었다.

문제설명 >

머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요.

제한사항 >

1 ≤ babbling의 길이 ≤ 100
1 ≤ babbling[i]의 길이 ≤ 15
babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다.
- 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "ma"가 한 번씩만 등장합니다.
문자열은 알파벳 소문자로만 이루어져 있습니다.

나의 풀이 >

def solution(babbling):
    joka = ["aya", "ye", "woo", "ma"]
    answer = 0
    for i in babbling :
        for j in joka :
            i = i.replace(j, " ")
        if i.strip() == "":
            answer += 1
    return answer

1. 한 줄씩 살펴보면, 먼저 조카가 발음 가능한 단어들을 "joka"라는 리스트에 담아준다.

2. babbling을 for문으로 돌리면서 joka도 함께 for문으로 비교를 한다.

3. babbling의 i에 대응하는 joka의 j가 같은게 있으면 그것을 빈 문자열 " " 로 replace() 함수를 이용해 치환해준다.

4. 모든 for문이 돌고 나면, i와 j가 대응되었던 곳은 모두 " "로 치환이 되었을 것이다.

5. 여기서, 양 끝이 빈 문자열인 것을 없앴을때 아무것도 남지 않닸다면, 그 단어는 완벽히 발음 가능한 단어 이므로,

그럴 경우에만 answer 카운터 수 +1 해준다.

아직 Python이 익숙치 않아서, strip() 같은 함수도 몰랐지만,

이렇게 문제를 풀면서 하나씩 얻어가는게 있는 것 같다.

The 2025 AI Index Report | Stanford HAI - 요약

Sponge_ — Tue, 8 Apr 2025 16:56:23 +0900

[The 2025 AI Index Report]

지금 AI는 어디까지 왔을까?

2025년 4월, 스탠퍼드 인간중심 AI 연구소(HAI)는 매년 발간하는 AI Index Report의 여덟 번째 에디션을 발표했습니다.

AI의 기술 발전, 산업 활용, 정책 대응, 교육 변화 등 AI가 사회 전반에 미치는 영향을 폭넓게 분석한 세계 최고 권위의 보고서인데요.

이번 보고서에서는 특히 “AI가 상상에서 현실로 완전히 진입했다”는 점이 인상 깊게 드러납니다.

AI는 얼마나 똑똑해졌을까?

• 초고난이도 벤치마크 성능 대폭 향상

• SWE-bench(코딩 문제 해결) 기준, 1년 만에 **4.4% → 71.7%**로 급상승

• 소형 모델도 초거대 모델급 성능

• Microsoft의 **Phi-3-mini (3.8B 파라미터)**가 GPT-3.5 수준 달성

• AI 비디오 생성 기술 급성장

• OpenAI SORA, Meta Movie Gen 등 고퀄리티 텍스트 → 비디오 생성

SWE 벤치마크 성능의 향상폭이 가장 눈에 띄는 것 같습니다.

AI는 이제 기업의 핵심 자산

• AI 도입 기업 비율:

• 2023년 55% → 2024년 78%

• 생성형 AI 투자금:

• $33.9B, 전체 AI 투자 중 20% 이상 차지

• AI가 생산성 향상과 인력 격차 해소에 기여

• ⚡ AI 수요로 원자력 등 대체 에너지에 대한 관심 증가

미국과 중국의 AI 패권 경쟁

• 미국:

• AI 모델 수 40개로 세계 1위

• 중국:

• 논문 수 1위, 특허 수 1위

• 모델 성능 격차도 크게 좁힘 (HumanEval 기준 2023년 31.6% → 2024년 3.7%)

이제 미국의 압도적 1위라는 말은 점점 사라져 갈 듯 하네요.

중국은 특히, 모든걸 오픈소스로 공개한다는 점이 매력적일 수 밖에 없는 것 같습니다.

⚖️ 책임 있는 AI(RAI)는 아직 갈 길이 멀다

• AI 관련 사고 급증:

• 2024년 233건 (전년 대비 56% 증가)

• 암묵적 편향 여전:

• GPT-4, Claude 3 등 최신 모델도 인종/성별 편향 지속

• OECD, EU, UN 등 국제 거버넌스 등장

과학과 의학도 AI가 주도

• ‍⚕️ 의사보다 정확한 진단:

• GPT-4가 임상 진단에서 인간보다 뛰어난 결과 도출

• AI 의료기기:

• 2015년 6개 → 2023년 223개로 폭증

• 바이오 대형 모델 등장:

• AlphaFold 3, Med-Gemini, VisionFM 등

️ 정책과 규제도 본격화

• ⚖️ 미국 AI 관련 연방 규제 수:

• 2023년 25건 → 2024년 59건

• ️ AI 안전 연구소 전 세계 확산:

• 美·英 → 韓, EU, 日 등으로 확대

• 사우디, 프랑스, 캐나다 등 대규모 AI 인프라 투자

교육과 여론, 그리고 대중의 인식 변화

• ‍ 초중등 CS 교육 국가: 전 세계 2/3 이상 도입 or 계획 중

• 미국 AI 석사 졸업자 수 급증

• AI 낙관론 증가:

• 2022년 52% → 2024년 55%

• 하지만 여전히 존재하는 불신:

• “AI는 공정하지 않다”는 응답 증가

결론: AI는 ‘미래 기술’이 아닌 ‘현재의 기술’이다

AI는 더 이상 연구소나 실험실의 전유물이 아닙니다.

이제는 기업, 병원, 학교, 심지어 정치와 사회 문제 해결에까지 실질적인 영향을 주는 기술로 자리잡았습니다.

2025년 AI 인덱스 리포트는 우리에게 다음과 같은 질문을 던집니다.

“이 급변하는 기술의 흐름 속에서, 우리는 얼마나 잘 준비되어 있는가?”

오늘 수업에서 2024 Report를 리뷰했었습니다.

교수님이 바로 어제 2025 Report가 발표되었다고 하셔서, 찾아보게 되었습니다.

인공지능을 공부하는 분들이라면, Report 원문을 살펴보시는게 현재 AI 시장의 동향을 파악하는 것에 도움이 될 것 같습니다.

전체 리포트 원문 보기

Stanford HAI AI Index Report 2025 바로가기

[Microsoft AI School 7기] 비전공자 최종 합격 후기

Sponge_ — Sat, 5 Apr 2025 15:32:08 +0900

몇 달 전, 혼자 진행했던 사이드 프로젝트를 진행을 하며, AI 기술 분야에 관심이 생겨 관련 교육기관들을 찾아보던 중, Microsoft에서 진행하는 MS AI School을 알게되었다.

물론, 요즘 AI가 엄청 핫한 이슈이기 때문에 이와 관련된 교육을 해주는 아카데미, 부트캠프는 꽤나 많았지만, 커리큘럼을 하나씩 뜯어서 살펴본 결과, MS AI School이 가장 마음에 들었다.

가장 마음에 들었던 부분은 Azure를 꽤나 많이 지원 해주어서, Azure OpenAI 서비스를 공부해볼 수 있다는 것이었다.

그리고 온라인으로 진행되긴 하지만, Teams를 활용하여 오프라인 못지 않은 수업 진행방식이라면 괜찮을 것 같다는 생각이었음.

지원서 제출 후 며칠 뒤, 면접 관련 메일을 받게 되었다.

서류 합격 메일

얼리버드 서류 전형으로 지원하여, 면접보기 까지는 어려움 없이 진행되었던 것 같다.

면접 전, 대기실에서 코딩테스트를 진행 예정이라는 문구를 보고, Java로 문제들을 좀 풀면서 준비했다.

하지만 막상 면접 당일, 코딩테스트를 치루러 들어갔을때는, 코딩테스트라기 보다는 기본적인 컴퓨터 관련 질문들? 같은 내용이라 별로 어려움 없이 진행되었다.

면접은 3인 1조로 화상 면접이 진행되었다.

코딩 관련 경험, 지원동기 등의 질문을 하셨고, 가장 기억에 남는 질문은 "팀 프로젝트 진행 시, 같은 팀에 '빌런'이 있으면 어떻게 할 것인가?"라는 질문이었다.

나의 생각은 "그 사람이 할 의지가 있는 사람이라면, 열심히 이끌어주며 하겠다. 하지만 의지도 없는 사람이라면 배제하고 진행을 할 것 같다." 였고, 그대로 답변을 하였다.

이에 면접관님도 "그런 사람이 있으면 자기 할 일만 잘 하고, 자기가 빼먹을 수 있는 부분을 최대한 빼먹으면서 하면 된다. 라고 말씀 해주셨다. (무슨 말인지 매우 공감... 끄덕)

그렇게 면접을 끝마치고 3일 뒤.

최종합격

최종 합격 메일 받음...

딥러닝, 머신러닝의 기본 언어가 파이썬인 만큼, 수업 시작 전까지 파이썬 공부를 꾸준히 하면서 수업을 들어갈 생각이다.

AI 엔지니어가 되려면 대학원을 나오는게 기본이라는 말들이 많지만, 해보지 않으면 모르는 일 아니겠어요?

피나는 노력으로 불가능 한 일은 없다고 생각한다 ㅎㅎㅎ

6개월이란 시간이 길다면 길고 짧다면 짧겠지만, 최대한 열심히 해서 목표를 향해 달려보겠습니다.

(수업을 들으면서 파이썬, 확률과통계, 선형대수학 등의 공부도 병행해야 할 것 같습니다.)

[Project] Google Gemini API 활용

Sponge_ — Wed, 20 Nov 2024 12:40:00 +0900

이번 프로젝트 컨셉이 여행 관련 사이트를 만드는 것인데, 요즘 또 대 AI 시대인 만큼 나도 AI 챗봇 등에 관심이 많아서 프로젝트에 AI를 활용한 시스템을 한 번 만들고 싶어졌다.

그래서 여러가지 챗봇 API 중 현재 무료로 사용 가능한 Google Gemini를 내 프로젝트에 적용시켜 보기로 했다.

Chat GPT도 일정 크레딧 까지는 무료로 사용이 가능하다고 나와있었는데, 내 계정엔 크레딧이 없어서 다른걸 찾던 중 Gemini를 사용하게 되었다.

그럼 Gemini API를 어떻게 불러와서 사용하는지, 내 프로젝트에 어떻게 적용시켰는지를 포스팅 해보겠다.

가장 먼저, Gemini API를 사용하기 위해서는 API 키를 발급받아야 한다.

https://ai.google.dev/

Gemini Developer API | Gemma open models | Google AI for Developers

Build with Gemini 1.5 Flash and 1.5 Pro using the Gemini API and Google AI Studio, or access our Gemma open models.

ai.google.dev

위 링크로 들어가서 회원가입을 한 후 API 키를 발급 받고 따로 키를 메모를 해둬야 한다.

키를 다 발급 받았으면 본격적으로 API를 불러와서 사용할 수 있다.

CDN 방식과 NPM 환경에서 하는 방법이 있는데, 나는 CDN 방식을 사용했다.

1. 라이브러리 호출

<script type="importmap">
{
    "imports": {
        "@google/generative-ai": "https://esm.run/@google/generative-ai"
    }
}
</script>

이렇게 라이브러리를 CDN 방식으로 불러온다.

2. 객체 생성

import { GoogleGenerativeAI } from "@google/generative-ai";

// API 키 설정
const API_KEY = 'API KEY';

// GoogleGenerativeAI 객체 생성
const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

이런 식으로 API 키를 사용하여 GoogleGenerativeAI 객체를 생성해주고, 어떤 모델을 사용할지 적어줘야 한다.

flash 모델, pro 모델이 있지만 무료로 사용하기에 가장 적합한 flash 모델을 사용해주었다.

3. 프롬프트 생성

이제 Gemini에게 요청을 보낼 프롬프트를 생성해야 한다.

<div class="input-group">
    <label for="category">여행 카테고리:</label> 
    <select id="category">
        <option value="자연">자연</option>
        <option value="휴양">휴양</option>
        <option value="액티비티">액티비티</option>
        <option value="도시">도시</option>
    </select>
</div>

<div class="input-group">
    <label for="country">여행 국가:</label> 
    <input type="text" id="country" placeholder="여행할 국가를 입력하세요">
</div>

<div class="input-group">
    <label for="days">여행 일수:</label> 
    <input type="number" id="days" placeholder="여행 일수를 입력하세요">
</div>
<button id="generate-button">추천 경로 생성</button>

나는 위와 같이 HTML 에서 사용자가 원하는 여행 국가, 카테고리, 여행 일 수를 선택할 수 있게 하여 그걸 토대로 프롬프트를 생성하도록 구현하였다.

 document.getElementById('generate-button').addEventListener('click', async () => {
    const category = document.getElementById('category').value.trim();
    const country = document.getElementById('country').value.trim();
    const days = document.getElementById('days').value.trim();
    
 const prompt = `${country}에서 ${category} 컨셉의 ${days}일 여행 도시를 추천해주고, ...`;

자세한 요청 문장과 함께 조합하여 프롬프트를 생성해 주었다.

4. Gemini API 호출 및 응답 처리

이제 위에서 생성한 프롬프트를 API 호출하여 날아오는 응답을 처리해주면 된다.

try {
    // API 호출
    const result = await model.generateContent(prompt);
    console.log('API Result:', result);

    // 응답 데이터 처리
    if (result && result.response && result.response.candidates.length > 0) {
        const content = result.response.candidates[0].content.parts[0].text;
        document.getElementById('response').innerText = content;
    } else {
        document.getElementById('response').innerText = "추천 결과가 없습니다.";
    }
} catch (error) {
    console.error('API 호출 중 오류 발생:', error);
    document.getElementById('response').innerText = "오류가 발생했습니다.";
}

API 호출 후 응답 처리를 해야 하는데, 생각보다 해당 응답이 복잡한 경로 안에 있다.

위에 적힌 코드와 같이 result > candidates[0] > content > parts[0] > text 이 경로에 응답이 들어있다...

여기에 있는 응답을 innerText로 화면에 잘 출력해주기만 하면 된다.

처음엔 이렇게 복잡할 줄도 모르고 그냥 다른 사람들이 올려놓은 Gemini API 호출 방법만 보고 간단해 보여서 사용해보았는데, 생각보다 막히는 부분도 많고 복잡했다.

특히, 아직 JavaScript에 대한 지식이 많이 부족해서 더 힘들었던 것도 있었다.

거의 다 구현하고 응답을 처리해주기만 하면 되는데, 화면에 계속 응답이 출력이 되질 않아서 애를 많이 먹었다.

개발자 도구로 하나하나 뒤져 가면서 찾아 내어 겨우 처리할 수 있었다..

힘들었던 기능이지만 막상 구현해놓고 보니 뿌듯하기도 하고, 더 많은 것을 배운 느낌이라 오히려 기분은 더 좋다.

[Project] Spring Security를 활용한 회원기능

Sponge_ — Thu, 14 Nov 2024 03:15:07 +0900

개인 프로젝트를 진행하면서 처음으로 Spring에서 지원하는 Spring Security를 활용하여 회원기능을 구현해보았다.

나도 아직 Spring boot를 배우면서 프로젝트를 진행하는 중이라 기능들을 구현하는 데에 시간이 좀 오래걸렸다.

잘 모르는 부분들은 Chat gpt를 활용하면서 하나씩 해결해 나갔다.

오늘은 그럼 Spring Security가 무엇인지, 그리고 이를 어떤식으로 프로젝트에 적용 시켰는지 기록 해볼것이다.

Spring Security란?

먼저 왜 Spring Security를 사용하여 회원 기능을 구현해야 하는지에 대해서 말하자면, 웹사이트에서 로그인, 로그아웃 등의 기능을 구현하면 이에 대한 권한 부여 / 관리 등이 필요하다.

이를 Spring에서 쉽고 효율적으로 구현할 수 있게 개발된 것이 Spring Security 이다. Spring Security를 사용하여 개발하면

인증 / 인가 등의 보안적인 기능을 개발하는 데에 있어서 아주 효율적이고 신속하게 개발이 가능하다.

예를들어, 로그인을 한 사용자에게만 사이트 접속 권한을 부여한다던지 이런 기능들을 효율적으로 처리할 수 있다.

Spring Security 사용 방법

그렇다면 Spring Security는 어떻게 사용하는 걸까?

<Spring Boot gradle을 사용한 나의 프로젝트 기준>

먼저, build.gradle에 아래와 같이 의존성을 추가해주어야 한다.

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
	testImplementation 'org.springframework.security:spring-security-test'
    	<-- 기타 의존성 생략 -->
}

그리고 config 클래스를 생성하여 Spring Security 기능을 구현해주어야 한다.

먼저, src > main > java > com.xx.MyProject 경로 안에 config 패키지를 생성 해주고, config 패키지 안에 SecurityConfig 클래스를 생성해주었다.

그럼 나의 SecurityConfig 클래스의 구성에 대해서 하나하나 자세히 알아보자.

전체 코드

package com.yubin.SpringBootTest.config;

import com.yubin.SpringBootTest.service.CustomUserDetailsService;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.annotation.web.configurers.LogoutConfigurer;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    private final CustomUserDetailsService userDetailsService;

    public SecurityConfig(CustomUserDetailsService userDetailsService) {
        this.userDetailsService = userDetailsService;
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Bean
    public DaoAuthenticationProvider authenticationProvider() {
        DaoAuthenticationProvider authProvider = new DaoAuthenticationProvider();
        authProvider.setUserDetailsService(userDetailsService);
        authProvider.setPasswordEncoder(passwordEncoder());
        return authProvider;
    }

    @Bean
    public AuthenticationManager authenticationManager(HttpSecurity http) throws Exception {
        AuthenticationManagerBuilder auth = http.getSharedObject(AuthenticationManagerBuilder.class);
        auth.authenticationProvider(authenticationProvider());
        return auth.build();
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests(auth -> auth
                        .requestMatchers("/register", "/login","/error").permitAll()
                        .anyRequest().authenticated()
                )
                .formLogin(form -> form
                        .loginPage("/login")
                        .loginProcessingUrl("/login")  // 로그인 처리 URL 설정
                        .defaultSuccessUrl("/home", true)  // 로그인 성공 후 이동할 URL 지정
                        .failureUrl("/login?error=true")  // 로그인 실패 시 이동할 경로
                        .permitAll()
                )
                .logout(LogoutConfigurer::permitAll)
                .csrf(AbstractHttpConfigurer::disable); // CSRF 비활성화;
        return http.build();
    }
}

PasswordEncoder

@Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}

사용자의 패스워드를 암호화 하기 위한 메서드이다.

BCryptPasswordEncoder는 SpringSecurity에서 지원하는 클래스로, 비밀번호를 bcrypt 해시 함수로 암호화하고 검증하는 기능을 제공한다.

해시 생성 시 매번 무작위로 salt를 추가하여 같은 비밀번호도 항상 다른 해시 값을 가지게 만들어 보안에 아주 강력하다.

DaoAuthenticationProvider

@Bean
public DaoAuthenticationProvider authenticationProvider() {
    DaoAuthenticationProvider authProvider = new DaoAuthenticationProvider();
    authProvider.setUserDetailsService(userDetailsService);
    authProvider.setPasswordEncoder(passwordEncoder());
    return authProvider;
}

DaoAuthenticationProvider는 UserDetailsService를 통해 데이터베이스에서 사용자 정보를 로드하고, PasswordEncoder를 사용하여 비밀번호를 검증한다. 그리고 CustomUserDetailsService를 이용해 사용자 정보를 조회하고, 사용자 인증 시 암호를 인코딩해 매칭한다.

여기서 UserDetailsService가 무엇이냐?

UserDetailsService는 UserDetails 객체를 반환하며, Spring Security가 인증 절차에서 사용자 세부 정보를 관리할 수 있도록 표준화된 인터페이스이다.

그럼 CustomUserDetailsService 클래스를 따로 생성해주는 이유는?

UserDetailsService가 세부 정보를 관리할 수 있게 해주었다면, CustomUserDetailsService에서 사용자 정보 등을 데이터 베이스와 연동하여 조회, 또는 이 정보를 기반으로 인증을 수행한다.

<CustomUserDetailsService>

package com.yubin.SpringBootTest.service;

import com.yubin.SpringBootTest.model.User;
import com.yubin.SpringBootTest.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class CustomUserDetailsService implements UserDetailsService {

    @Autowired
    private UserRepository userRepository;

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        User user = userRepository.findByUsername(username)
                .orElseThrow(() -> new UsernameNotFoundException("User not found"));

        return new org.springframework.security.core.userdetails.User(
                user.getUsername(),
                user.getPassword(),
                user.isEnabled(),
                true, 
                true, 
                true, 
                List.of(new SimpleGrantedAuthority("ROLE_USER")) // 기본 권한 추가
        );
    }
}

AuthenticationManager

@Bean
public AuthenticationManager authenticationManager(HttpSecurity http) throws Exception {
    AuthenticationManagerBuilder auth = http.getSharedObject(AuthenticationManagerBuilder.class);
    auth.authenticationProvider(authenticationProvider());
    return auth.build();
}

AuthenticationManager 는 로그인 시도 시 사용자의 신원을 검증하는 역할을 하며, 성공적으로 인증된 Authentication 객체를 반환하거나 인증 실패 시 예외를 던진다.

흐름을 한번 살펴보자.

1. 사용자가 로그인 페이지를 통해 사용자명과 비밀번호를 입력하고 제출하면, Spring Security는 로그인 요청을 받아 AuthenticationManager.authenticate()를 호출.

2. AuthenticationManager는 여러 AuthenticationProvider 목록을 가지고 있으며, 요청된 Authentication 객체를 각 AuthenticationProvider에 전달하여 인증을 시도.

(현재 나의 코드에서는 위에서 확인 했듯이 DaoAuthenticationProvide임)

3. 인증에 성공하면 세션에 인증 정보를 저장하고, 사용자를 인증된 상태로 유지한다.

인증에 실패하면 AuthenticationProvider는 예외를 던져 인증 실패를 처리한다.

SecurityFilterChain

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
        .authorizeHttpRequests(auth -> auth
            .requestMatchers("/register", "/login", "/error").permitAll()
            .anyRequest().authenticated()
        )
        .formLogin(form -> form
            .loginPage("/login")
            .loginProcessingUrl("/login")
            .defaultSuccessUrl("/home", true)
            .failureUrl("/login?error=true")
            .permitAll()
        )
        .logout(LogoutConfigurer::permitAll)
        .csrf(AbstractHttpConfigurer::disable);
    return http.build();
}

SecurityFilterChain은 DaoAuthenticationProvider를 사용하여 사용자 정보를 로드하고, SecurityFilterChain으로 HTTP 요청을 보호하면서 지정된 페이지에 대한 접근 권한을 설정한다.

requestMatchers 메서드를 통해 "/register", "/login", "/error" 경로를 모든 사용자에게 허용 (permitAll) 한다.
formLogin을 통해 로그인 페이지와 로그인 처리 URL, 성공 or 실패 시 이동할 경로를 지정한다.
loginPage("/login") : 사용자 정의 로그인 페이지 경로를 설정한다.
loginProcessingUrl("/login") : 로그인 요청을 처리할 URL.
defaultSuccessUrl("/home", true) : 로그인 성공 시 이동할 페이지를 지정한다. true는 로그인 페이지를 강제로 /home으로 지정하여 마지막 페이지가 아닌 특정 페이지로 이동하게 한다.
failureUrl("/login?error=true") : 로그인 실패 시 이동할 URL.
로그아웃 (logout) : permitAll로 설정하여 모든 사용자에게 로그아웃을 허용한다.

그리고 내가 이 SecurityFilterChain 부분을 공부하고 적용하면서 엄청 애를 많이 먹었는데, 분명히 reauestMatchers에

"/register", "/login" 등의 경로를 지정해 주었다. 그런데도 계속 프로젝트를 실행하면 403에러가 뜨는 것이다.

그래서 끙끙대며 머리를 싸매며 해결 방법을 찾다가 csrf를 disable 해주어야 한다는 글을 보게 되었다.

기본적으로 Spring Security를 사용하면 csrf가 활성화 되어 있다.

여기서 csrf란 Cross Site Request forgery, 사이트 간 위조 요청으로 일종의 보안 위협 요소이다.

여러 글들을 찾아봤는데 대부분의 가이드 글들이 csrf를 disable 하고 사용하라고 나와 있어서 그렇게 해보니 403 에러가 사라지고 요청이 잘 되었다.

왜 대부분 csrf를 사용하지 않는지 궁금하여 한 번 찾아봤는데,

Rest API를 이용한 서버라면, session 기반 인증과는 다르게 stateless하기 때문에 서버에 인증 정보를 보관하지 않는다. 일반적으로 jwt 같은 토큰을 사용하여 인증하기 때문에 해당 토큰을 Cookie에 저장하지 않는다면 csrf 취약점에 대해서는 어느 정도 안전하다고 한다.

모르는 부분을 하나씩 새로 배워가면서 프로젝트를 진행하다 보니 진행 속도가 많이 더디지만, 그래도 알차게 제대로 배워가는 것 같아서 뿌듯하긴 하다.

아 그리고 csrf.disable()은 곧 지원이 중단된다고 하길래 그럼 어떻게 해줘야 할지 gpt에게 물었더니 위 코드처럼

.csrf(AbstractHttpConfigurer::disable) 라고 작성하면 된다고 한다.

[Spring] Thymeleaf

Sponge_ — Mon, 4 Nov 2024 20:11:08 +0900

저번 포스트에서 미리 예고 했듯이, Thymeleaf에 대해서 알아 볼 것이다.

일단 Thymeleaf가 무엇일까?

Thymeleaf란?

Thymeleaf(타임리프)는 템플릿 엔진의 일종으로 흔히 View Template(뷰 템플릿) 이라고 부른다.

기존에 사용했던 JSP 같은 템플릿 엔진의 한 종류라고 할 수 있다.

JSP와 Thymeleaf 차이점

그럼 이때까지 사용했던 JSP와 어떤 차이점이 있을까?

먼저, 기존에 사용했던 JSP는 Servlet으로 변환되어 실행된다.

Servlet은 Java 소스이기 때문에 HTML 코드에 Java 코드를 합하여 동적으로 웹 페이지를 구성한다.

(때문에 JSP 파일 내부에 자바 코드를 작성하는 것도 가능하지만 웬만하면 그렇게 하지 않는 것을 추천한다.)

반면, Thymeleaf는 Servlet으로 변환되지 않고, 순수 HTML파일을 최대한 유지하기 때문에 비즈니스 로직이

완전히 분리된다. 그래서 파일을 웹 브라우저에서 바로 실행 시켜도 그 내용을 확인하는게 가능하다.

이 둘의 가장 큰 차이는 Thymeleaf는 jar 파일로 export가 가능하다는 것이다.
Spring으로 빌드하면 기본적으로 jar파일로 빌드가 되는데 JSP는 jar패키징이 불가능하고 war패키징만 가능하다.

그래서 jar로 패키징이 가능한 Thymeleaf를 사용하는 것이 더 좋고 편리하다.
(war로 패키징을 하려면 was가 필요하고 사전에 정의된 구조만을 사용해야 해 복잡하다. 그래서 jar로 패키징 하는 것이 더 편리함)

JSP와 Thymeleaf 의 동작 차이

Thymeleaf는 HTML파일을 파싱하고 분석한 후 정해진 위치에 데이터를 치환해 웹 페이지를 생성한다.
반면, JSP는 Servlet으로 변환되어 웹 애플리케이션 서버에서 동작하며 필요한 기능을 수행하고 생성된 데이터를 웹 페이지와 함께 클라이언트로 응답한다.

그럼 Thymeleaf만 쓰면 되지 JSP를 왜 쓰는 것이냐? 장점만 있는게 아니냐? 라고 할 수 도 있지만,

JSP보다 Thymeleaf가 응답 속도가 느리다는 단점이 있다.

하지만 웬만하면 Thymeleaf를 사용하는 것이 배포하기도 편리하고, 여러 방면으로 장점도 많아서 앞으로 주 엔진으로 사용할 것 같다.

[Spring] Spring Boot 시작하기

Sponge_ — Wed, 23 Oct 2024 03:53:06 +0900

STS에서 Spring Framework로만 프로젝트를 하다가, 이번에 아예 Spring Boot를 시작해보려고 한다.

Spring Boot는 기존의 Spring보다 의존성 관리, 초기 설정 등에 대해서 훨씬 간단하고 편리한 서비스를 제공한다고 생각하면 된다.

Spring Boot는 대부분 IntelliJ를 많이 사용한다고 하여, 나도 이번 기회에 넘어가보기로 했다.

https://www.jetbrains.com/ko-kr/idea/

IntelliJ IDEA – Java 및 Kotlin을 위한 최고의 IDE

www.jetbrains.com

위 링크에서 다운을 받으면 되는데, 인텔리제이는 유료 버전이 있기 때문에 무료로 사용하려면 "community" 버전을

설치 해주어야 한다.

Spring Boot는 https://start.spring.io/ 링크에서 프로젝트 기본 정보 입력 및 설정 후 > 필요한 의존성 부여 > 압축을 풀어 인텔리제이에서 해당 파일을 열어서 사용한다.

이때까지 Java11버전을 사용하다가, Spring Boot는 더 이상 11버전을 지원하지 않는다고 하여 17버전을 새로 설치해 주었다.

스프링 부트가 진짜 편하다고 느낀게 이렇게 프로젝트를 생성해주면 더 이상 설정을 만져줄게 없다는 것이다.

(새로 의존성을 부여해야 하는게 아닌 이상)

심지어 서버도 내장 되어 있어서, 톰캣을 다운 하고 Server를 설정 해야하는 번거로운 일도 없다.

기존의 Spring과 약간 다르게 여기서는 Thymeleaf를 사용하고 있어서, src > main > resources > templates 경로에 jsp 파일이 아닌 html 파일을 생성하여 view를 구성하면 된다.

Thymeleaf에 대해서는 다음 포스팅에 자세히 알아볼 예정이다.

그리고 controller, service 등의 패키지는 src > main > java > com.OO.프로젝트이름 경로 하단에 생성하여 작성해주면 된다.

대충 테스트 해볼 수 있게 view와 controller를 구성했다면,

위처럼 생긴 (프로젝트 이름)Application.java 파일을 실행해주고, localhost:8080을 들어가면 확인을 할 수 있다.

근데 나는 실행을 해보니 콘솔에 에러가 떴었다.

Execution failed for task ':com.yubin.SpringBootTest.SpringBootTestApplication.main()'. > Process 'command 'C:\Program Files\Java\jdk-17\bin\java.exe'' finished with non-zero exit value 1 * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 1s 3 actionable tasks: 1 executed, 2 up-to-date

이런 오류가 뜨길래 ChatGPT의 도움을 받아봤더니 인텔리제이에서 jdk의 버전 설정이 제대로 안되었을 때의

오류 코드라고 하여, 해결 방법을 찾아보았다.

해결방법

File > Project Structure > Project 부분에서 프로젝트 SDK, 모듈 SDK를 모두 %JAVA_HOME%의 경로에 있는 jdk-17버전으로 맞춰주어야 한다.

그리고, File > Settings > Build, Execution, Deployment > Build Tools > Gradle에서 Gradle JVM이 JDK 17로 설정되어 있는지 확인까지 해주면 된다.

나는 위와 같은 방법을 사용하니 프로젝트가 잘 작동하는 것을 확인할 수 있었다.

기존의 Spring은 새로 프로젝트를 만들어 시작하려고 하면 설정도 다 처음부터 해야하고, dependency도 하나 하나 추가 해줘야 하는게 너무 번거로웠는데, 스프링 부트를 처음 사용해보니 정말 신세계였다. (이걸 왜 이제야 맛 본 걸까...)

몇 가지 빼고는 Spring과 비슷해서 금방 적응할 것 같긴한데, 인텔리제이에도 아직 익숙하지 않아서 조금의 적응 시간이 필요한 것 같다.

새로 사이드 프로젝트를 만들어보고 싶은게 생겨서, 그 프로젝트는 스프링 부트로 한 번 진행해볼 생각이다.

[Java] StringBuffer

Sponge_ — Sat, 12 Oct 2024 17:22:25 +0900

오늘은 StringBuffer 클래스가 무엇인지 알아보자.

StringBuffer

String클래스는 인스턴스를 생성할 때 지정된 문자열을 변경할 수 없기 때문에 문자열 결합시 계속해서 새로운 인스턴스를 생성한다.
하지만 StringBuffer클래스는 변경이 가능하다.
내부적으로 문자열 편집을 위한 버퍼(buffer)를 가지고 있으며,

StringBuffer인스턴스를 생성할 때 그 크기를 지정할 수 있다.

크기를 지정할 때 나중에 편집을 고려하여 버퍼의 길이를 충분히 잡아주는 것이 좋다.

버퍼의 길이를 넘어서게 되면 버퍼의 길이를 늘려주는 작업을 추가적으로 해야 하기 때문이다.

StringBuffer의 생성자

StringBuffer클래스의 인스턴스를 생성하면 동시에 char형 배열이 생성된다.

이 배열은 이후 문자열을 저장하고 편집하기 위한 공간(buffer)로 사용된다.

따라서 StringBuffer클래스의 생성자는 위 char형 배열의 길이를 매개변수로 받게 되어있다.
만약 매개변수로 길이를 지정해주지 않을시 16개의 문자를 저장할 수 있는 크기의 버퍼를 생성한다.

public StringBuffer(int length) {
	value = new char[length];
    shared = flase;
    // 인스턴스 생성시 int값을 넣어주면 해당 길이의 배열생성
}

public StringBuffer() {
	this(16);
    // 인스턴스 생성시 아무런 값을 넣지 않으면 길이를 16으로 지정
}

public StringBuffer(String str) {
	this(str.length() + 16);
    append(str);
    // 인스턴스 생성시 문자열을 넣으면 해당 문자보다 16 더 크게 버퍼 생성
}

StringBuffer를 이용하여 문자열 변경하기

StringBuffer sb = new StringBuffer("abc");
// char[]에 앞에서부터 a,b,c를 저장

sb.append("123");
// 배열에서 a,b,c 뒤에 1,2,3 추가하여 저장
// append()는 반환타입이 StringBuffer인데 자신의 주소를 반환한다.

StringBuffer sb2 = sb.append("가나");
// sb내용 뒤에 가,나를 덧붙인다.

System.out.println(sb);		// "abc123가나" 출력
System.out.println(sb2);	// "abc123가나" 출력

sb와 sb2 모두 같은 StringBuffer인스턴스를 가리키고 있으므로 같은 내용이 출력된다.

StringBuffer 문자열 비교

StringBuffer클래스는 String클래스와 다르게 equals메서드가 오버라이딩 되어있지 않아

equals메서드를 사용하여도 등가비교연산자(==)로 비교한 것과 같은 결과를 얻는다.

String sb1 = new StringBuffer("abc");
String sb2 = new StringBuffer("abc");

System.out.println(sb==sb2);		// false
System.out.println(sb.equals(sb2);	// false

반면에 toString( )은 오버라이딩이 되어 있기 때문에 StringBuffer인스턴스를 String으로 바꿀 수 있다.
이렇게 String으로 바꾸어준 후 equals메서드를 사용하면 비교 가능하다.

String s1 = sb1.toString()
String s2 = sb2.toString()

System.out.println(s.equals(s2));	// true

그냥 쉽게 생각해서 변경(편집)이 가능한 String 클래스 = StringBuffer 클래스

라고 생각하면 될 것 같다.

[Spring] DispatcherServlet

Sponge_ — Sat, 12 Oct 2024 16:31:18 +0900

Spring MVC에서는 DispatcherServlet을 도입하여 모든 과정을 중앙에서 처리한다.

이전에는 요청된 URL과 매핑된 각각의 Servlet class를 찾아갔다면, Spring MVC는

모든 요청을 DispatcherServlet에서 받는다는 말이다.

그리고 DispatcherServlet은 이 요청을 분석하여 그 요청에 맞는 컨트롤러를 불러온다.

[이전(모델1)에는 servlet과 controller가 분리되지 않았지만, Spring MVC(모델2)는 분리되었다.)

그럼 이 DispatcherServlet은 어떻게 구현해야 되는지 알아보자.

사실 직접적으로 구현할 필요는 없고, DispatcherServlet 라이브러리를 설치해주기만 하면 된다.

Spring Web MVC 라이브러리

https://mvnrepository.com/

우리가 의존성을 추가 해줄때 사용하는 Maven Repository 사이트에서 Spring 이라고 서치를 하면

Spring Web MVC가 보일 것이다.

최선 버전의 코드를 복사하여 pom.xml에 의존성을 추가해주면 된다.

잘 설치가 되었는지 확인이 하고 싶다면 추가한 프로젝트에서

JavaResources > Libraries > Maven Dependencies 에서 확인을 해주면 된다.

내가 설치하지도 않은 라이브러리가 있는 이유는 내가 설치한 라이브러리가 필요로 하는

라이브러리들을 Maven이 자동으로 설치를 해주기 때문에 있는 것이다.

web.xml에 매핑하기

DispatcherServlet 클래스가 모든 요청을 받아서 처리를 해야하기 때문에

이 내용을 web.xml에 적어주어야 한다.

<servlet>
	  	<servlet-name>dispatcher</servlet-name>
	  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/*</url-pattern>
</servlet-mapping>

모든 URL요청(/)이 들어오면 DispatcherServlet.class로 보내 처리하도록 한다.

servlet-name은 아무거나 지정해도 상관이 없다.

servlet-class의 이름을 작성하기 힘들거나 실수할 것 같으면

라이브러리에서 DispatcherServlet.class를 찾아 우클릭 후

Copy Qualified Name을 하면 패키지와 클래스 이름이 복사된다.
붙여넣기 할때 .class까지 같이 붙여넣어지므로 꼭 이때는 .class를 지워준다.

-servlet.xml 파일 만들기

여기까지만 설정하고 jsp를 만들어 실행하면 오류가 발생한다.
오류의 내용은 다음과 같다.
/WEB-INF/dispatcher(내가 매핑할때 썼던 이름)-servlet.xml 이 없기 때문이다.

DispatcherServlet과 컨트롤러가 분리되면서 DispatcherServlet은 모든 요청을 받게된다.

하지만 각 요청에 맞는 매핑을 찾아서 컨트롤러를 호출해야 하는데,

그 매핑정보가 web.xml이 아닌 (내가 지정한 이름)-servlet.xml 파일에 담기게 되는 것이다.

현재는 이 파일이 없는 상태이므로 만들어 준다.

위치 : WEB-INF 폴더 안에 xml 파일 생성

xml 파일을 생성할 때 이름은 -servlet.xml을 꼭 뒤에 붙여주기만 한다면 아무렇게나 지어도 된다.

안에 내용을 채우기 위해서 먼저
https://docs.spring.io/spring-framework/docs
사이트에 들어가서 내가 spring-webmvc 라이브러리를 설치한 버전과 맞는 곳으로 들어간다.

나는 5.2.9 버전이기 때문에 spring-framework/docs/5.2.x으로 들어갔다.

여기서 맨 밑의 spring-framework-reference로 들어간다.

core > 1.The IoC Contatiner > 1.2.1 부분의 beans 코드

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

    <bean id="/index" class="com.newlecture.web.controller.IndexController">  
    	<!-- /index URL요청이 오면 IndexController를 객체화해서 호출한다 -->
        <!-- collaborators and configuration for this bean go here -->
    </bean>

</beans>

이때까지 이미 만들어져 있는 web.xml을 받아와서 실습을 진행했었는데,

이걸 배우고 보니 자동으로 기입되어 있는 코드가 아니란걸 알게 되어 좀 신기했다.

[Spring] QueryString

Sponge_ — Fri, 11 Oct 2024 19:06:45 +0900

오늘은 QueryString을 파라미터로 받아오는 방법에 대해 알아보자.

만약, URL요청이 localhost:8080/info?name="yubin"

이렇게 들어왔을 때, info 뒤의 name이 QueryString이다.
요청을 받아서 처리하는 컨트롤러에서 이 쿼리스트링을 사용해야 한다면 그냥 바로 파라미터로 받아올 수 있다.

@RequestMapping("/info")
public void info(String name) {
	System.out.println(name);
}

원래라면 request에서 이 쿼리스트링을 받아와야 하지만,
스프링은 아주 편하게 자동으로 연결해준다.하지만 주의해야할 점은 스프링이 파라미터의 이름과 쿼리스트링의 이름이 일치해야만 연결을 해준다는 것이다.

만약 파라미터의 이름을 name이 아닌 다른 이름으로 받고싶다면 어떻게 해야할까?

보통 브라우저는 URL길이의 제한을 두고 있기 때문에 쿼리스트링은 최대한 간결하게 적는 것이 좋고,
자바에서 변수의 이름은 최대한 알기 쉽고 직관적으로 적어줘야 하기 때문에 서로의 이름이 달라질 수 있다.

@RequestParam

위와 같은 문제를 해결하기 위해 @RequestParam 어노테이션을 사용할 수 있다.

@RequestMapping("/info")
public void info(@RequestParam(name="name") String userName) {
	System.out.println(userName);
}

위와 같은 코드로 바꿔 준다면 쿼리스트링으로 들어온 name을 위 메서드에서는 userName으로 바꿔 사용할 수 있다.

@RequestParam의 옵션

name : 바로 위에서 name옵션을 사용하여 파라미터의 변수 이름을 바꿔줄 수 있었다.
defaultValue : 위와 같은 코드를 쓴 다음 그냥 /info URL로 들어가면 어떻게 될까? userName이라는 문자열을 받아오기로 했는데 아무것도 들어가지 않았기 때문에 오류가 발생한다.
이 때 사용할 수 있는 옵션이 defaultValue다.
요청에 지정한 쿼리스트링이 들어오지 않았을 경우 해당 쿼리스트링의 기본값을 지정할 수 있다.
required : 이 required는 따로 지정하지 않으면 기본값은 true로 설정되어있다.
만약 이 옵션을 false로 설정한다면 쿼리스트링의 값이 들어오지 않았을 경우 값을 null로 처리한다.

@RequestMapping("/info")
public void info(@RequestParam(name="name", required=false) String userName) {
	System.out.println(userName);
}
// 만약 name 쿼리스트링이 들어오지 않은채 위 함수가 실행되면
// userName의 값은 null로 처리된다.

QueryString의 자료형

이 쿼리스트링은 받아올 때 String으로 인식한다.
따라서 매개변수의 타입도 String으로 해야 옳다.

예를 들어, localhost:8080/info?name="yubin"&age="20" 같은 요청이 들어왔을 때,

age의 값은 숫자 30이 아니라 문자열 30으로 인식한다.

그래서 원래라면 모두 String으로 받아야 옳지만
스프링은 이를 인식하여 int로 바꿔주기 때문에 자료형을 int로 해도 괜찮다

@RequestMapping("/info")
public void info(@RequestParam(name="age") int userAge) {
	System.out.println(userName);
}

만약 스프링이 자동으로 바꿔주지 않는다면
String을 int로 바꿔주는 코드 1줄이 더 추가되었을 것이다.

하지만 Spring이 자동으로 변환할 수 없는 자료형이거나 잘못된 값이 들어오면 예외가 발생할 수 있으므로, 자료형 변환에 꼭 주의해야 한다.

[Spring] ViewResolver

Sponge_ — Fri, 11 Oct 2024 18:50:16 +0900

오늘은 ViewResolever에 대해서 한 번 알아보자.

public class IndexController implements Controller{
	
	@Override
	public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) 
									throws Exception {
		ModelAndView mav = new ModelAndView("/WEB-INF/view/index.jsp");
		mav.addObject("text", "Spring MVC");

		return mav;
	}
}

원래 view로 이동하기 위해서 controller에서는 경로를 적어줘야한다.

하지만 위와 같이 복잡한 경로를 모든 컨트롤러에 계속해서 적어주는 것은 아주 불편할 것이다.

모든 경로는 "/WEB-INF/view/ ... .jsp" 라는 공통 부분이 있다.

이 공통부분을 제외하고 jsp페이지의 이름만 적는다면 경로를 적을때 훨씬 수월할 것이다.

이때 공통부분을 알아서 적용시킬 수 있는 것이 바로 ViewResolever이다.

ViewResolver

ViewResolver의 종류는 많은 데 그 중 InternalResourceViewResolver는 뷰 이름을 실제 JSP 파일의 경로로 변환하는 역할을 한다.

스프링은 ModelAndView에서 객체를 반환할 때 InternalResourceViewResolver를 거쳐서 처리함으로써

뷰 이름을 경로로 바꿀 수 있게된다.

prefix는 뷰 이름의 앞에, suffix는 뷰 이름의 뒤에 붙여져서 파일 경로를 생성한다.

ViewResolver 설정하기

설정을 위해 dispatcher-servlet.xml 파일로 들어간다.

bean태그를 만들고 옵션의 클래스 부분을 작성해야 하는데,
실수를 줄이기 위해 아무 클래스에 들어가서 InternalResourceViewResolver를 임포트해서

임포트 부분의 경로를 복사해서 붙이는 것이 좋다.

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/view/" />
    <property name="suffix" value=".jsp" />
</bean>

이렇게 설정해주면 이제 ModelAndView에 복잡한 경로를 넣지 않고 view의 이름만

작성해 주어도 페이지 이동이 가능하다.

물론, 해당 페이지는 WEB-INF/view 폴더 안에 존재해야 한다.

처음엔 그냥 흘려듣고 넘어갔던 내용인데, 이러한 사소한(?) 용어까지 정확히 짚고 넘어가야

나중에 그 다음 내용을 들어도 코드의 흐름을 파악할 때 더 수월하게 이해가 된다고 생각이 들어서

다시 한 번 정리해 보았다.

[Spring] 인증 메일 보내기

Sponge_ — Fri, 11 Oct 2024 18:07:09 +0900

웹 사이트에 새로 가입을 할 때 이메일로 인증 코드를 받는 경우가 되게 많다.

오늘은 그 인증 메일을 보내는 방법을 알아보자.

사전 작업

1. 프로젝트 내에서 바로 id, password 를 임의로 작성해줄 것이기 때문에

편의성을 위해서는 2차인증을 "해제" 해두자.

2. 네이버 메일 -> 환경설정 -> POP3/IMAP 설정에서,

POP3/SMTP 설정 , IMAP/SMTP 설정 둘다 사용함으로 체크해둔 후, "저장"해두어야 한다.

꼭, 네이버가 아니더라도

2번에서 언급한 환경설정만 해둔다면 메일 보내기 가능하다.

3. 프로젝트에 필요한 설정

pom.xml

의존성 추가

<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		
		<!-- 스프링에서 STOMP 처리를 위한 라이브러리 -->
		<dependency>
			<groupId>org.springframework.integration</groupId>
			<artifactId>spring-integration-stomp</artifactId>
			<version>5.4.13</version>
		</dependency>


		<!-- https://mvnrepository.com/artifact/com.sun.mail/jakarta.mail -->
		<dependency>
			<groupId>com.sun.mail</groupId>
			<artifactId>jakarta.mail</artifactId>
			<version>2.0.1</version>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context-support</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
	</dependencies>

serlvet-context.xml

web-socket message-broker prefix 설정

<websocket:message-broker application-destination-prefix="/app">
		<websocket:stomp-endpoint path="/endpoint">
			<websocket:sockjs websocket-enabled="true" />
		</websocket:stomp-endpoint>
		<websocket:simple-broker prefix="/broker" />
</websocket:message-broker>

root-context.xml

component를 사용할 거기 때문에 스프링 빈 등록

<?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:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
		
		<context:component-scan base-package="com.itbank.component" />
	
</beans>

ex03.jsp

인증번호가 담겨있는 메일을 보내고,

사용자에게 인증번호입력을 받아서

일치하는지 확인하기.

인증번호 보내기 버튼을 누르면

숨어있던 인증번호 입력 form이 나타난다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp" %>


<h3>AJAX로 메일보내기</h3>


<div class="mailSend">
	<form>
		<h3>인증번호 발송</h3>
		<p>
			<input type="email" name="address" placeholder="email">
			<button>인증번호 보내기</button>	
		</p>
		<p class="message"></p>
	</form>
</div>

<div class="auth box hidden">
	<form>
		<h3>인증번호 확인</h3>
		<p>
			<input type="text" name="authNumber" placeholder="인증번호 입력">
			<button>인증 확인</button>	
		</p>
		<p class="message"></p>
	</form>
</div>


<script>
	const mailSendForm = document.forms[0]		//	form은 배열로 바로 불러올 수 있음
	const authForm = document.forms[1]
	
	mailSendForm.onsubmit = async function(event) {
		event.preventDefault()
		const url = '${cpath}/ajax/sendMail'
		const opt = {
				method: 'POST',
				body : JSON.stringify({
					address: event.target.querySelector('input').value
				}),
				headers: {
					'Content-Type' : 'application/json;charset=utf-8'
				}
		}
		const result = await fetch(url, opt).then(resp => resp.text())
		const message = event.target.querySelector('p.message')
		if(result == 1) {
			message.innerText = '메일을 전송했습니다'
			message.style.color = 'blue'
			document.querySelector('.auth').classList.remove('hidden')
		}
		else {
			message.innerText = '메일을 보낼 수 없습니다'
			message.style.color = 'red'
		}
	}
	
	
	
	authForm.onsubmit = async function(event) {
		event.preventDefault()
		
		const inputNumber = event.target.querySelector('input').value
		const url = '${cpath}/ajax/authNumber/' + inputNumber	//	/를 꼭 붙여야 pathVariable 사용할 수 있음
		const result = await fetch(url).then(resp => resp.text())
		const message = event.target.querySelector('p.message')
		
		if(result == 1) {
			message.innerText = '인증 성공'
			message.style.color = 'blue'
		}
		else {
			message.innerText = '인증 실패'
			message.style.color = 'red'
		}
	}
</script>
</body>
</html>

AjaxController

import java.util.HashMap;
import java.util.Random;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.itbank.component.MailComponent;


//	AJAX 니까 그냥 controller 말고 Restcontroller

//	문자열 하나만 받는다면, 굳이 ajax 필요없음
//	객체로 묶어주기 위해서 ajax 로 처리하자
@RestController
@RequestMapping("/ajax")
public class AjaxController {

	@Autowired private MailComponent component;
	
	private Random ran = new Random();
	
	@PostMapping("/sendMail")
	public int sendMail(@RequestBody HashMap<String, String> param, HttpSession session) {
		
		System.out.println("address : " + param.get("address"));
		int num = ran.nextInt(999999);
		
		String authNumber = String.format("%06d", num);
		System.out.println("authNumber : " + authNumber);
		
		session.setAttribute("authNumber", authNumber);
		session.setMaxInactiveInterval(180);
		
		
		param.put("subject", "인증번호");
		param.put("content", authNumber);
		
		int row = component.sendMimeMessage(param);
		
		System.out.println(row != 0 ? "전송 성공" : "전송 실패");
		
		return row;
	}
	
	@GetMapping("/authNumber/{inputNumber}")
	public int authNumber(@PathVariable("inputNumber") String inputNumber, HttpSession session) {
		//	만약, 세션이 만료되었다면 (== 180초)
		//	authNumber 의 값은 1이다
		//	두개의 문자열의 일치를 비교할때 A.equals(B) 형태로 비교한다
		//	null 일 가능성이 있는 문자열을 뒤에 배치하여 Nullpointer 에러를 방지함
		
		//	만약, 세션이 만료되었을 때 예외를 발생시켜서 다른 반환값을 전달하려면,
		//	ExceptionHandler 를 사용하거나,
		//	@RestControllerAdvice 클래스를 작성하여 처리할 수도 있다
		String authNumber = (String) session.getAttribute("authNumber");
		
		int row = 0;
		
		if(inputNumber.equals(authNumber)) {
			row = 1;
		}
		return row;
	}
}

MailComponent

import java.io.IOException;
import java.util.HashMap;
import java.util.Properties;
import java.util.Scanner;

import javax.annotation.PostConstruct;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Component;

import jakarta.mail.Authenticator;
import jakarta.mail.Message;
import jakarta.mail.MessagingException;
import jakarta.mail.PasswordAuthentication;
import jakarta.mail.Session;
import jakarta.mail.Transport;
import jakarta.mail.internet.InternetAddress;
import jakarta.mail.internet.MimeMessage;

@Component
public class MailComponent {

   private final String host = "smtp.naver.com";
   private final int port = 465;
   private String serverId = "로그인할 아이디";		//	이 계정으로 로그인해서 메일을 보낼것임 
   private String serverPw = "비번";
   
   private Properties props;
   
   //	@Autowired 가 자동으로 스프링 빈 연결하듯이
   //	@Value는 자동으로 자원(파일)을 연결한다
   //	org.springframework.core.io.Resource
   //	classpath : "src/main/java"		or		"src/main/resources
   @Value("classpath:mailForm.html")
   private Resource mailForm;
   
   @PostConstruct
   private void init() {
      props = new Properties();
      props.put("mail.smtp.host", host);
      props.put("mail.smtp.prot", port);
      props.put("mail.smtp.auth", "true");
      props.put("mail.smtp.ssl.enable", "true");
      props.put("mail.smtp.true", host);
   }
   
   // 단순 텍스트 메일 보내기 (ex01)
   public int sendSimpleMessage(String address, String content, String subject) {
      
      // 1) 메일 서버 인증 (접속에 필요하다)
      Session mailSession = Session.getDefaultInstance(props, new Authenticator() {
         String un = serverId;
         String pw = serverPw;
         
         @Override
         protected PasswordAuthentication getPasswordAuthentication() {
            return new PasswordAuthentication(un, pw);
         }
      });
      
      mailSession.setDebug(true);      // 메일 전송 과정을 콘솔창에 출력한다
      
      // 2) 보낼 메세지 작성
      Message message = new MimeMessage(mailSession);
      
      try {
         message.setFrom(new InternetAddress(serverId + "@naver.com"));
         message.setRecipient(Message.RecipientType.TO, new InternetAddress(address));   // 받는사람
         message.setSubject(subject);   // 제목
         message.setText(content);   // 내용
         
         Transport.send(message);   // 3) 준비가 끝난 메시지를 발송한다
         return 1;
         
      } catch (MessagingException e) {
         e.printStackTrace();
         return 0;
      }
   }

   //	html 포함한 메일(ex02)
   public int sendMimeMessage(HashMap<String, String> param) {

	      // 1) 메일 서버 인증 (접속에 필요하다)
	      Session mailSession = Session.getDefaultInstance(props, new Authenticator() {
	         String un = serverId;
	         String pw = serverPw;
	         
	         @Override
	         protected PasswordAuthentication getPasswordAuthentication() {
	            return new PasswordAuthentication(un, pw);
	         }
	      });
	      
	      mailSession.setDebug(true);      // 메일 전송 과정을 콘솔창에 출력한다
	      
	      
	      // 2) 보낼 메세지 작성
	      Message message = new MimeMessage(mailSession);
	      String address = param.get("address");
	      String subject = param.get("subject");
	      String content = param.get("content");
	      
	      try {
	         message.setFrom(new InternetAddress(serverId + "@naver.com"));
	         message.setRecipient(Message.RecipientType.TO, new InternetAddress(address));   // 받는사람
	         message.setSubject(subject);   // 제목
	         
	         
	         String tag = "";
	         Scanner sc = new Scanner(mailForm.getFile());
	         
	         while(sc.hasNextLine()) {
	        	 tag += sc.nextLine();
	         }
	         sc.close();
	         
	         content = String.format(tag, content);
	         
	         message.setContent(content, "text/html; charset=utf-8");	//	태그 포함 내용
	         
	         Transport.send(message);   
	         return 1;
	         
	      } catch (MessagingException | IOException e) {
	         e.printStackTrace();
	         return 0;
	      }

   }
   
}

네이버가 아니라 구글이라도 메일을 보내려면 POP/IMAP을 활성화 해야하고,

사이트 별로 port가 다르기 때문에 유의해야 한다.

네이버 port : 465

구글 port : 587

[JavaScript] hidden 활용

Sponge_ — Fri, 11 Oct 2024 17:51:08 +0900

hidden을 활용하여 다중 필터 기능을 구현해볼 것이다.

배열에 사용할 수 있는 함수

함수	기능
arr.forEach	단순 반복
arr.filter	조건 필터
arr.toSorted	정렬
arr.map	재구성
arr.slice	잘라내기
arr.includes	포함여부 확인

다중필터

boxList 는 check box의 내용을 모두 불러온것 (querySelect 로 불러온건 모두 nodeList)
-> const boxList = document.querySelectorAll('div.left > label > input[type="checkbox"]')

배열에서 원하는 속성만 가져오거나, 별도의 속성을 추가해서 가져올때 Array.map 사용

map 을 이용하여 name 속성에 있는 데이터에서 a 를 지우고(replace) 정수(+)만 남긴다

-> const checkedArray = Array.from(boxList).filter(e => e.checked).map(e => +e.name.replace('a', ''))

반복문을 이용하여, 소수점 아래 지움(floor)
-> const age = Math.floor(+tr.children[1].innerText / 10) * 10

체크박스에 체크가 되어있는 목록에서 해당 나이가 있다면

-> if(checkedArray.includes(age)) {

hidden 목록에서 제거

-> tr.classList.remove('hidden') }

아니라면, hidden 에 추가
-> else { tr.classList.add('hidden') }

체크박스를 클릭하면 filterHandler 실행

-> boxList.forEach(box => box.onclick = filterHandler

<style>
        #root {
            display: flex;
            width: 500px;
            height: 350px;
        }
        .left {
            display: flex;
            flex-direction: column;
            width: 100px;
        }
        .left > label {
            flex: 1
        }
        table {
            border-collapse: collapse;
            border: 2px solid black;
        }
        td {
            border: 1px solid grey;
            padding: 10px 20px;
        }
        tr.hidden {
            display: none;
        }
    </style>
</head>
<body>

    <h1>다중조건필터</h1>
    <hr>

    <div id="root">
        <div class="left">
            <label><input type="checkbox" name="a10">10대</label>
            <label><input type="checkbox" name="a20">20대</label>
            <label><input type="checkbox" name="a30">30대</label>
            <label><input type="checkbox" name="a40">40대</label>
            <label><input type="checkbox" name="a50">50대</label>
        </div>

        <div class="right">
            <table>
                <tr>
                    <td>남도일</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>카리나</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>이지은</td>
                    <td>31</td>
                </tr>
                <tr>
                    <td>홍진호</td>
                    <td>42</td>
                </tr>
                <tr>
                    <td>유재석</td>
                    <td>51</td>
                </tr>
                <tr>
                    <td>천우희</td>
                    <td>37</td>
                </tr>
                <tr>
                    <td>윈터</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>나루토</td>
                    <td>16</td>
                </tr>

            </table>

        </div>
    </div>


    <!--    다중 필터   -->
    <script>
        const boxList = document.querySelectorAll('div.left > label >  input[type="checkbox"]')     //  NodeList

        function filterHandler(event) {
           
            const checkedArray = Array.from(boxList).filter(e => e.checked).map(e => +e.name.replace('a', ''))
           
            console.log(checkedArray)

            const trList = document.querySelectorAll('table > tbody > tr')

            trList.forEach(tr => {
               
                const age = Math.floor(+tr.children[1].innerText / 10) * 10 
                
                if(checkedArray.includes(age)) {    
                    tr.classList.remove('hidden')   
                }
                else {
                    tr.classList.add('hidden')   
                }
            })
        }
        boxList.forEach(box => box.onclick = filterHandler)
    </script>
</body>
</html>

클릭이벤트의 대상만 처리 한다면

<script>
    const boxList = document.querySelectorAll('div.left > label >  input[type="checkbox"]')

    function filterHandler(event) {
        //  배열에서 원하는 속성만 가져오거나
        //  별도의 속성을 추가해서 가져올때 Array.map 사용
        
        const checkedArray = Array.from(boxList).map(e =>  {
            const ob = {
                age : +e.name.replace('a', ''),
                checked  : e.checked
            }
            return ob
        })
        console.log(checkedArray)

        //  만약, 다중조건이 아니라 클릭이벤트의 대상만 처리한다면
        const flag = +event.target.name.replace('a', '')

        const trList = document.querySelectorAll('table > tbody > tr')

        trList.forEach(tr => {
            const value = +tr.children[1].innerText

            if(flag <= value && value < flag + 10 ) {
                tr.classList.remove('hidden')
            }
            else {
                tr.classList.add('hidden')
            }
        })
        
    }

    boxList.forEach(box => box.onclick = filterHandler)
</script>

hidden 속성을 추가, 삭제하여 해당하지 않는 데이터는 사용자에게 보여지지 않게

흔히 말하는 필터 기능을 구현하니 또 색달랐다.

같은 필터 기능이더라도 어떤식으로 접근 하느냐에 따라 많은 방법들이 존재하는 것 같다.

[Project] 프로젝트 후기

Sponge_ — Thu, 10 Oct 2024 23:25:36 +0900

힘들고 험난했지만, 정말 다시는 겪지 못할 만큼 재밌었던 팀원들 과의 프로젝트가 끝이났다.

거의 한 달 가량을 매일 붙어서 프로젝트를 진행하다 보니까

팀원들과 상상 이상으로 친해져서 끝난 후에 같이 피크닉도 다녀왔다.

처음 팀이 만들어졌을때는 이렇게 자주 만나서 놀고 할 정도로 친해질 줄은 몰랐는데...

케잌이랑 스피커 싸들고 돗자리에서 피크닉 즐기기

이때가 딱 봄이라서 벚꽃 구경도 할 겸 같이 만나서 피크닉도 즐겨줬다.

놀러가기 전 단백질 보충도 충분히 해주었다. ㅎㅎ

감기걸린 채로 프로젝트 하러 나오니까 꿀물 챙겨 준 우리 팀...

내가 팀에서 막내라 그런지 매번 챙김을 받기만 한 것 같아서

조금 미안하고 고마웠다...

처음 시작할때는 아직 사이도 어색하고, 우리가 정한 주제이지만 잘 해낼 수 있을까?

라는 생각이었다.

하지만 프로젝트를 진행하면서 팀원들이 전부 의욕 넘치게 다 도와주고, 의견을 주고받으니

힘든게 없었다면 거짓말이겠지만 엄청 힘들 일도 덕분에 쉽게 해결할 수 있었던 것 같다.

프로젝트가 끝나고 나면 정말 기쁠 줄 알았는데, 막상 끝이나니 뭔가 아쉬운 마음이

더 많이 드는 것 같다.

저번 소규모 프로젝트때 아는게 많이 없어 구현할 수 없었던 것을 많이 보완할 수 있어서

그건 많이 뿌듯한 일이었다.

특히, 저번 프로젝트때는 비동기 함수로 처리하는 방법을 몰랐어서 좋아요 기능이나 찜 같은

부분을 페이지의 새로고침 없이 처리할 수가 없었다.

하지만 이번 프로젝트를 진행하면서 그러한 부분을 보완하여 웹페이지의 요청, 응답 속도를 개선하니

확실히 편의성이 향상된 것 같았다.

아직 완벽하진 않지만 불과 한 두달 전에 비해서 많이 성장한 것 같은 나를 보니 더 열심히 하고 싶은

동기부여가 확실히 된 것 같다.

+ 다음에 프로젝트를 하게 되면 카카오톡 말고 코드를 주고 받을 수 있는 더 좋은 방법을 찾아봐야겠다 ㅎㅎ..

[Project] 실시간 1:1 채팅

Sponge_ — Thu, 10 Oct 2024 19:14:38 +0900

내가 맡은 역할 중 실시간 1:1 채팅 기능이 있다.

이미 STOMP 프로토콜을 활용한 채팅 구현을 해본 경험이 있기 때문에,

처음엔 별로 대수롭지 않게 생각했었다.

하지만 그건 나의 엄청난 오만이었다.

실시간으로 채팅을 하는 시스템은 비슷하지만 저번에 했던 채팅은 단순한 단체 채팅방 이고,

이번 프로젝트에 필요한 기능은 관리자와 고객들의 1:n 관계 채팅 시스템이다.

channel 생성 부터 구독 하는 것까지 엄청 골머리를 썩혔지만 결국 해결해냈다.

그럼 내가 이 난관을 어떻게 극복했는지 한 번 적어보겠다.

유저 채팅 채널 생성

<script>
	const chat = document.getElementById('chatIcon')
	const questions = document.querySelectorAll('.question')
	const userid = '${login.userid}'
	questions.forEach(e => e.onclick = clickHandler)
	
	function clickHandler(event) {
		const arr = Array.from(questions)
		const idx = arr.indexOf(event.currentTarget)
		
		const answer = document.querySelectorAll('.answer')
		answer[idx].classList.toggle('hidden')
	}
	
	chat.onclick = async function() {
		const url = '${cpath}/create/' + userid
		const result = await fetch(url).then(resp=>resp.text())
	}
</script>

일단 관리자가 아닌 일반 사용자의 입장에서 채팅 icon을 클릭하면

해당 유저의 고유키인 "userid"를 이용해 독단적인 채널을 생성하게 했다.

"사용자 마다 각각 다르게 개별적으로 채널을 어떻게 생성해야 하지?" 라는 고민을

했었는데, "그럼 각각 마다 다르게 가지고 있는게 뭐가 있을까" 라고 생각을 하던 중

그럼 고유키인 "userid"를 사용하자 ! 라는 결론이 나오게 되었다.

유저 채팅 기능

// onclick
exit.onclick = exitChat
send.onclick = sendMsg
inputMsg.onkeyup = function(e) {
	if(e.key == 'Enter') sendMsg()
	if(e.key == 'Escape') e.target.value = ''
}
   
stomp.connect({}, onConnect)
function onConnect() {
	stomp.subscribe('/sendTo/' + userid)
	stomp.send('/app/enter/' + userid, {}, JSON.stringify({
		writer: username
	}))
	onInput()
}

async function onInput() {
	const ad = '${cpath}/getRoom/' + userid
	const adResult = await fetch(ad).then(resp=>resp.json())
	const arr = Array.from(adResult)
	console.log(arr)
	chat_idx = arr[0].idx
	console.log(chat_idx)
	const url = '${cpath}/getMsg/' + chat_idx
	const result = await fetch(url).then(resp=>resp.json())
	console.log(result)
	const arr2 = Array.from(result)
	if(arr2.length != 0) {
		arr2.forEach(e => {
		let messageDirection = 'message-left'; // 기본적으로 왼쪽 정렬
       	if(e.writer != 'admin') { // 현재 사용자가 보낸 메시지인 경우 오른쪽 정렬
         	messageDirection = 'message-right';
      	 }
	 	let str = ''
	    	str += '<div class="' + messageDirection + '">'
	    	str += '<div>' + e.nickname + '</div>'
	    	str += '<div class="content">' + e.content + '</div>'
	    	str += '</div>'
	   	chatArea.innerHTML += str
		})
	}
   	chatArea.scrollTop = chatArea.scrollHeight;
	stomp.subscribe('/sendTo/' + userid, onReceive)
	stomp.send('app/sendTo/admin/' + userid, {}, JSON.stringify({
		writer: username
	}))
}

async function sendMsg() {
	const text = document.querySelector('input[name="msg"]').value
	if(text == '') {
		return
	}
	document.querySelector('input[name="msg"]').value = ''
	console.log(chat_idx)
	const url = '${cpath}/sendMsg'
	const opt = {
			method: 'POST',
			body: JSON.stringify({
				chat_idx: chat_idx,
				writer: userid,
				content: text
			}),
			headers: {
				'Content-Type': 'application/json; charset=utf-8'
			}
	}
	const result = await fetch(url,opt).then(resp=>resp.text())
	stomp.send('/app/sendTo/' + userid, {}, JSON.stringify({
		content: text,
		writer: username
	}))
}

async function exitChat() {
	 const url = '${cpath}/exitChat';
	 try {
	     await fetch(url).then(resp => resp.text());
	     
	     stomp.send('/app/disconnect', {}, JSON.stringify({
	         writer: username,
	     }));
	     stomp.disconnect(function() {
	         console.log('Disconnected');
	     });
	     
	     window.location.href = '${cpath}/inquiry/list';
	 } catch (error) {
	     console.error('에러:', error);
	 }
}


function onReceive(chat) {
    const chatContent = JSON.parse(chat.body)
    const text = chatContent.content
    const from = chatContent.writer
   	let messageDirection = 'message-left'; // 기본적으로 왼쪽 정렬
 	if (from === username) { // 현재 사용자가 보낸 메시지인 경우 오른쪽 정렬
        messageDirection = 'message-right';
    }
    let str = ''
   	str += '<div class="' + messageDirection + '">'
   	str += '<div>' + from + '</div>'
   	str += '<div class="content">' + text + '</div>'
   	str += '</div>'
   	chatArea.innerHTML += str
   	chatArea.scrollTop = chatArea.scrollHeight;
}
	
</script>

사용자는 자신이 userid를 이용하여 개설한 채팅방에 message input을 해주어야 하기 때문에

adResult를 배열로 만들어 그 배열의 0번째에 해당하는 채널의 메세지를 볼 수 있게 해주었다.

이 작업도 처음엔 어떻게 같은 채널의 메세지를 보게 할 지 잘 몰랐었는데, 팀원들과 협업하여

다행히 잘 해결되었다.

관리자 관점 채팅

stomp.connect({}, onConnect)
function onConnect() {
	stomp.subscribe('/sendTo/admin', onReceive)
	stomp.send('/app/enter', {}, JSON.stringify({
		writer: username
	}))
}
send.onclick = sendMsg
close.onclick = function() {
    chatFrame.style.bottom = "-600px"; 
    setTimeout(() => {
        chatFrame.classList.add('hidden');
        chatFrame.classList.remove('visible')
        chatOpenButton.classList.remove('hidden'); 
    }, 500); 
}

chatOpenButton.onclick = function() {
    chatFrame.style.bottom = "-600px"
    chatFrame.classList.remove('hidden')
    chatFrame.classList.add('visible')
    setTimeout(() => {
        chatFrame.style.bottom = "20px"
    }, 10);
    chatOpenButton.classList.add('hidden'); 
}

inputMsg.onkeyup = function(e) {
	if(e.key == 'Enter') sendMsg()
	if(e.key == 'Escape') e.target.value = ''
}
chatList()

async function chatList() {
	const url = '${cpath}/chatList'
	const result = await fetch(url).then(resp=>resp.json())
	const arr = Array.from(result)
	console.log(arr)
	arr.forEach(e=> {
		let str = ''
		str += '<div class="chatRoom">' + e + '</div>'
		listFrame.innerHTML += str
	})
	const chat = document.querySelectorAll('.chatRoom')
	chat.forEach(e => e.addEventListener('click', enterChat))
}

async function enterChat(event) {
	userid = event.target.textContent
	const ad = '${cpath}/getRoom/' + userid
	const adResult = await fetch(ad).then(resp=>resp.json())
	const arr = Array.from(adResult)
	chat_idx = arr[0].idx
	console.log(chat_idx)
	const url = '${cpath}/getMsg/' + chat_idx
	const result = await fetch(url).then(resp=>resp.json())
	console.log(result)
	const arr2 = Array.from(result)
	console.log(arr2)
	if(arr2.length != 0) {
		arr2.forEach(e => {
		let messageDirection = 'message-left'; // 기본적으로 왼쪽 정렬
       	if(e.writer == 'admin') { // 현재 사용자가 보낸 메시지인 경우 오른쪽 정렬
         	messageDirection = 'message-right';
      	 }
	 	let str = ''
	    	str += '<div class="' + messageDirection + '">'
	    	str += '<div>' + e.nickname + '</div>'
	    	str += '<div class="content">' + e.content + '</div>'
	    	str += '</div>'
	   	chatArea.innerHTML += str
		})
	}
   	chatArea.scrollTop = chatArea.scrollHeight;
	chatFrame.classList.remove('hidden')
	chatFrame.classList.add('visible')
	stomp.subscribe('/sendTo/' + userid, onReceive)
}

async function sendMsg() {
	const text = document.querySelector('input[name="msg"]').value
	if(text == '') {
		return
	}
	document.querySelector('input[name="msg"]').value = ''
	const url = '${cpath}/sendMsg'
	const opt = {
			method: 'POST',
			body: JSON.stringify({
				chat_idx: chat_idx,
				writer: '${login.userid}',
				content: text
			}),
			headers: {
				'Content-Type' : 'application/json; charset=utf-8'
			}
	}
	const result = await fetch(url,opt).then(resp=>resp.text())
	stomp.send('/app/sendTo/' + userid, {}, JSON.stringify({
		content: text,
		writer: username
	}))
}

function onReceive(chat) {
    const chatContent = JSON.parse(chat.body)
    const text = chatContent.content
    const from = chatContent.writer
	let messageDirection = 'message-left'; 
    if(from == username) { 
        messageDirection = 'message-right';
    }
   
    let str = ''
    	str += '<div class="' + messageDirection + '">'
    	str += '<div>' + from + '</div>'
    	str += '<div class="content">' + text + '</div>'
    	str += '</div>'
	chatArea.innerHTML += str
   	chatArea.scrollTop = chatArea.scrollHeight;
}

</script>

먼저, 관리자는 chatList로 채팅이 활성화 되어 있는 전체 리스트를 볼 수 있다.

그리고 그 방을 클릭하면 해당 방으로 입장하게 된다.

당연히 각 사용자마다 채널이 다르기 때문에 각각 채널을 구독시키기 위해서 userid를 let으로

선언해주었고, 각 방을 클릭 시 해당 고객과의 1:1 채팅방에 들어갈 수 있게 했다.

구독할 채널을 추출하는 방식은 전 방식과 동일하게 배열에서 추출하였다.

지금 이렇게 돌아보면 정말 별거 아닌거 처럼 보일진 모르겠지만, 내 딴에는

정말 힘들었던 부분이었다.

막혀서 진도는 안나가는데 마감 기한은 점점 다가오고... 하지만 방법은 도저히 모르겠고...

그래도 팀원들에게 도움을 청해서 같이 의견을 주고받으니까 훨씬 수월하게 해결했던 것 같다.

아직 두번째 팀 프로젝트 이지만 이 경험이 나중에 내 개발자 인생에 있어서 정말 큰 도움이 될 것 같다.

[Project] Spring 팀 프로젝트 시작

Sponge_ — Thu, 10 Oct 2024 17:57:20 +0900

이번에 spring 팀 프로젝트를 시작하게 되었다.

오늘은 팀 프로젝트에서 사용할 DB인 Oracle의 계정을 새로 만들어 보자.

Oracle 계정 생성하기

사전에 VMware에 linux 환경이 구축되어 있고, Oracle도 당연히 설치가 되어 있어야한다.

VMware에 접속한 후 터미널을 열고 명령어를 작성해 준다.

명령어	명령어에 대한 결과
. oraenv	The Oracle base has been set to /기본 설치 디렉토리
create user 계정명 identified by 비밀번호;	User created.
grant connect, resource, dba to 계정명;	Grant succeeded

유저 생성 및 권한 부여가 완료되었으면, SQL Developer를 실행한다.

> 방금 생성한 계정으로 접속을 시도한다.

VMware에서 작성한 계정명, 비밀번호를 사용자 이름, 비밀번호 란에 기입해주고

테스트 버튼을 눌러서 정상적으로 연결이 되는지 확인한다.

> "상태 : 접속 성공" 이 뜬다면 정상적으로 생성 및 연결이 된 것이다.

이번에는 5명의 팀원과 함께 프로젝트를 진행하게 되었다.

팀원들 모두 열정이 넘치고 다 같이 으쌰으쌰 하는 분위기라 결과물도 그 만큼 잘 나올 것 같아 기분이 좋다.

저번 프로젝트에서 아쉬웠던 부분을 최대한 보완하여 더 발전된 결과물을 만들어 보고 싶다.

[Spring] WebSocket - 실시간 채팅

Sponge_ — Thu, 10 Oct 2024 17:30:11 +0900

저번 메모장 기능 구현에 이어 이번에는 실시간 채팅을 한 번 만들어 볼 것이다.

실전에 들어가기 앞서, 이번 채팅 구현에 있어서는 stomp에 대해서 알고 이 녀석을 사용해 줄거다.

STOMP

STOMP란, Simple Text Oriented Messaging Protocol의 약자이다.

간단한 메세지를 전송하기 위한 프로토콜로 메세지 브로커를 publisher - subscriber 방식을 사용한다.

메세지의 발행자와 구독자가 존재하고 메세지를 보내는 사람과 받는 사람이 구분되어 있다.

메세지 브로커는 발행자가 보낸 메세지를 구독자에게 전달해주는 역할을 한다.

STOMP는 HTTP와 비슷하게frame 기반 프로토콜 command, header, body로 이루어져 있다.

사전 설정

servlet-context.xml

prefix 지정

(web socket message broker prefix / web socket simple broker prefix)

<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	
	<view-controller path="/" view-name="home" />
	
	<context:component-scan base-package="com.itbank.controller" />
	
	<websocket:message-broker application-destination-prefix="/app">
		<websocket:stomp-endpoint path="/endpoint">
			<websocket:sockjs websocket-enabled="true" />
		</websocket:stomp-endpoint>
		<websocket:simple-broker prefix="/broker" />
	</websocket:message-broker>
	
</beans:beans>

root-context.xml

스프링빈 등록을 위한 scan 지정

<?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:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Root Context: defines shared resources visible to all other web components -->
		
		
	<context:component-scan base-package="com.itbank.repository" />
	
</beans>

pom.xml

 <!-- 스프링에서 웹소켓을 처리할 수 있도록 하는 라이브러리 -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-websocket</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>
		
		<!-- 스프링에서 STOMP 처리를 위한 라이브러리 -->
		<dependency>
			<groupId>org.springframework.integration</groupId>
			<artifactId>spring-integration-stomp</artifactId>
			<version>5.4.13</version>
		</dependency>
				        
	</dependencies>

ChatController

방 목록 보여주기, 개설된 채팅방으로 입장하기

import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.itbank.model.RoomDTO;
import com.itbank.repository.ChatRoomRepository;

@Controller
@RequestMapping("/chat")
public class ChatController {
	
	@Autowired
	private ChatRoomRepository repository;

	@GetMapping("/rooms")
	public ModelAndView rooms(String username, HttpSession session) {
		ModelAndView mav = new ModelAndView();
		if(username != null) {
			session.setAttribute("username", username);
			session.setMaxInactiveInterval(600);
		}
		List<RoomDTO> list = repository.findAllRooms();
		System.out.println("=== 현재 개설된 방 목록 ===");
		list.forEach(System.out::println);
		System.out.println("========================\n");
		mav.addObject("list", list);
		return mav;
	}
	
	@PostMapping("/rooms")
	public String create(String name, RedirectAttributes rttr) {
		RoomDTO room = repository.createChatRoom(name);
		rttr.addFlashAttribute("roomName", room.getName());
		return "redirect:/chat/rooms";	// -> @GetMapping("/rooms")
	}
	
	@GetMapping("/room")
	public ModelAndView getRoom(String roomId) {
		ModelAndView mav = new ModelAndView();
		mav.addObject("room", repository.findRoomById(roomId));
		return mav;
	}
}

ChatRepository

import java.util.ArrayList;
import java.util.Collections;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Repository;

import com.itbank.model.RoomDTO;

@Repository
public class ChatRoomRepository {

	private Map<String, RoomDTO> roomMap = new LinkedHashMap<>();
	
	public List<RoomDTO> findAllRooms() {			// 모든 방의 객체를 리스트로 반환
		List<RoomDTO> result = new ArrayList<>(roomMap.values());	// Map의 values만 추출
		Collections.reverse(result);			// 순서 뒤집기(최신방먼저)
		return result;
	}
	
	public RoomDTO findRoomById(String id) {		// 저장된 방은 각각 고유 id가 있다
		return roomMap.get(id);				// id를 key로 사용하여 방을 찾아 반환
	}
	
	public RoomDTO createChatRoom(String name) {	// 방 생성, 이름을 전달받는다
		RoomDTO room = RoomDTO.create(name);		// 이름을 전달하여 방 객체 생성
		roomMap.put(room.getRoomId(), room);		// 방의 id를 key로 지정하여 Map에 저장
		return room;					// 생성한 방을 반환
	}
}

StompController

채팅방 안에서 이루어지는 대화

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

import com.itbank.model.MessageDTO;

@Controller
public class StompController {

	@MessageMapping("/enter/{roomId}")	// 들어오는 주소
	@SendTo("/broker/room/{roomId}")	// 브로커에게 보내는 주소 (브로커가 다시 클라이언트에게 보낸다)
	public MessageDTO enter(MessageDTO message) {
		message.setText(message.getFrom() + "님이 채팅방에 참여하였습니다");
		message.setFrom("service");
		return message;
	}
	
	@MessageMapping("/message/{roomId}")
	@SendTo("/broker/room/{roomId}")
	public MessageDTO message(MessageDTO message) {
		return message;
	}

}

RoomDTO

생성자를 이용하여 UUID로 방 번호를 가지게 구현

import java.util.HashSet;
import java.util.Set;
import java.util.UUID;

import org.springframework.web.socket.WebSocketSession;

// 채팅방
public class RoomDTO {

	private String roomId;
	private String name;
	private Set<WebSocketSession> sessions = new HashSet<>();
	// 웹소켓세션을 저장, 중복을 허용하지 않는다. for문으로 순회 가능하다
	
	// 자바 빈즈 DTO는 기본생성자만 가지는 편이 좋다
	public static RoomDTO create(String name) {
		RoomDTO room = new RoomDTO();
		room.roomId = UUID.randomUUID().toString().substring(0, 8);
		room.name = name;
		return room;
	}
	
	@Override
	public String toString() {
		String form = "%s] %s\n%s";
		return String.format(form, roomId, name, sessions);
	}
	public String getRoomId() {
		return roomId;
	}
	public void setRoomId(String roomId) {
		this.roomId = roomId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Set<WebSocketSession> getSessions() {
		return sessions;
	}
	public void setSessions(Set<WebSocketSession> sessions) {
		this.sessions = sessions;
	}

}

MessageDTO

public class MessageDTO {

	private String roomId;
	private String from;
	private String text;
	private String time;
	
	public String getRoomId() {
		return roomId;
	}
	public void setRoomId(String roomId) {
		this.roomId = roomId;
	}
	public String getFrom() {
		return from;
	}
	public void setFrom(String from) {
		this.from = from;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getTime() {
		return time;
	}
	public void setTime(String time) {
		this.time = time;
	}
}

사용자에게 보여지는 부분

home.jsp

사용자의 이름을 입력하고, 채팅방 목록에 입장.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ws02 - STOMP를 활용한 웹소켓 채팅</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.1/sockjs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
</head>
<body>

<h1>ws02 - STOMP를 활용한 웹소켓 채팅</h1>
<hr>

<div id="root">
	<form action="${cpath }/chat/rooms">
		<input name="username" required autofocus>
		<input type="submit" value="입장">
	</form>
</div>

</body>
</html>

rooms.jsp

개설된 방 목록을 보여주는 페이지.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방 목록</title>
</head>
<body>

<h1><a href="${cpath }">rooms.jsp - ${username }</a></h1>
<hr>

<fieldset>
	<form action="${cpath }/chat/rooms" method="POST">
		<input type="text" name="name" placeholder="방제" autocomplete="off" autofocus required>
		<input type="submit" value="채팅방 개설">
	</form>
</fieldset>

<ul>
	<c:forEach var="room" items="${list }">
		<li><a href="${cpath }/chat/room?roomId=${room.roomId}">${room.name }</a></li>
	</c:forEach>
</ul>

</body>
</html>

room.jsp

각각의 방을 보여주는 페이지

sockJS는 js라이브러리이며, stomp 위에서 돌아가고 있다고 생각하면 된다.

(stomp : 서브 프로토콜)

json.parse : json을 객체로 변환한다.

json.stringify : 객체를 json으로 변환한다.

json.stringify({roomId : roomId, from : username})

> 중괄호 안에 있는 것이 {객체}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>room.jsp - ${room.name }</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.1/sockjs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script>
	// 자바스크립트 함수 정의
	function onReceive(chat) {					// 메시지를 받으면
		const content = JSON.parse(chat.body)	// JSON을 객체로 변환하고
		const from = content.from				// 누구에게서 온 메시지인지
		const text = content.text				// 어떤 내용인지
		let str = ''
		str += '<div class="' + (from == 'service' ? 'service' : from == username ? 'right' : 'left') + '">'
		str += '<div>'
		str += '<b>' + (from != 'service' ? from + ': ' : '') + text + '</b>'
		str += '<br><sub>' + content.time + '</sub>'
		str += '</div></div>'
		messageArea.innerHTML += str			// 태그로 구성하여 화면에 반영
		messageArea.scrollTop = messageArea.scrollHeight	// 스크롤 이동시키기
	}
	
	function onConnect() {
		console.log('STOMP Connection')
		stomp.subscribe('/broker/room/' + roomId, onReceive)	// 구독할 채널, 메시지 받으면 실행할 함수
		stomp.send('/app/enter/' + roomId, {}, JSON.stringify({	// 서버에게 입장 메시지와 시간을 보낸다
			roomId: roomId,
			from: username,
			//time: getCurrentHHmm(),
		}))
		document.querySelector('input[name="msg"]').focus()
	}
	
	function onInput() {	// 클라이언트가 메시지를 입력할 때
		const text = document.querySelector('input[name="msg"]').value	// 내용을 불러와서
		if(text == '') {												// 내용이 없으면 중단
			return
		}
		document.querySelector('input[name="msg"]').value = ''			// 입력창을 비워준다
		
		stomp.send('/app/message/' + roomId, {}, JSON.stringify({		
			roomId: roomId,			// 방번호, 사용자, 내용을 JSON으로 보낸다
			from: username,
			text: text,
			//time: getCurrentHHmm()
		}))
		document.querySelector('input[name="msg"]').focus()	// 다시 입력할 수 있도록 포커스를 잡아준다
	}
	
	// JSP에서 자바스크립트로 넘기는 변수
	const roomName = '${room.name}'
	const roomId = '${room.roomId}'
	const username = '${username}'
	const cpath = '${cpath}'
	
	
</script>
<style>
	#messageArea {
		border: 2px solid black;
		width: 700px;
		height: 250px;
		margin: 20px 0;
		word-wrap: break-word;
		overflow-y: scroll;
		scroll-behavior: smooth;
	}
	#messageArea > div > div {
		margin: 10px;
		padding: 10px 20px;
		border: 0.5px solid black;
		border-radius: 20px;
		width: fit-content;
		box-shadow: 2px 2px 2px grey;
	}
	.service {
		display: flex;
		justify-content: center;
	}
	.service > div {
		background-color: #f5f6f7;
	}
	.left {
		display: flex;
		justify-content: flex-start;
	}
	.right {
		display: flex;
		justify-content: flex-end;
	}
	.right > div {
		background-color: yellow;
	}
	.service sub {
		clear: both;
		display: none;
	}
	sub {
		color: grey;
	}
	.left sub {
		float: left;
	}
	.right sub {
		float: right;
	}
</style>

</head>
<body>

<h1><a href="${cpath }">room.jsp - ${room.name }</a></h1>
<hr>

<div id="messageArea"></div>
<div id="input">
	<input type="text" name="msg" id="msg" placeholder="내용을 입력하세요">
	<input type="button" value="send">
	<a id="disconnect" href="${cpath }/chat/rooms"><button>나가기</button></a>
</div>

<script>
	if(roomId == '') {
		location.href = cpath
	}
	
	const messageArea = document.getElementById('messageArea')
	const sockJS = new SockJS(cpath + '/endpoint')
	const stomp = Stomp.over(sockJS)
	
	const sendBtn = document.querySelector('input[value="send"]')
	const msgInput = document.querySelector('input[name="msg"]')
	const leaveLink = document.getElementById('disconnect')
	
	stomp.connect({}, onConnect)
	
	// leaveLink.onclick = onDisconnect
	sendBtn.onclick = onInput
	msgInput.onkeyup = function(e) {
		if(e.key == 'Enter') onInput()
	}
</script>

</body>
</html>

대부분이 그렇겠지만 처음부터 코드 하나 하나를 뜯어보기 보다는

먼저 전체적인 흐름을 이해하고 들어가는게 좋다.

방이 어떤식으로 개설 되었고, 그 방을 어떻게 구독하고... 이러한 흐름을 잡고 들어가면 훨씬 이해하기가 쉽다.

[Spring] WebSocket을 활용한 메모장 만들기

Sponge_ — Thu, 10 Oct 2024 17:13:01 +0900

오늘은 웹소켓을 활용하여 메모장 기능을 한 번 구현해볼 것이다.

Ajax와 WebSocket의 차이

연결의 지속성에 따라 둘을 구분한다.

클라이언트와 서버가 통신할 때 HTTP통신을 주로 사용한다.

HTTP통신은 다음과 같은 특징이 있다.

1. 비연결성 (connectionless) : 연결을 맺고 요청을 하고 응답을 받으면 연결을 끊어버린다.

2. 무상태성 (stateless) : 서버가 클라이언트의 상태를 가지고 있지 않는다.

3. 단방향 통신이다.

이러한 HTTP 통신의 경우 채팅과 같은 실시간 통신에 적합하지 않다.

물론 HTTP 통신으로 실시간 통신을 흉내낼 수는 있으나 완벽하지는 않다.

실시간 통신이 필요할 때 사용하는 통신을 소켓 통신이라고 한다.

HTTP통신과 다르게 연결을 맺고 바로 끊어버리는게 아니라 계속 유지를 하기 때문에 실시간 통신에 적합하다.

Ajax

JavaScript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능

데이터를 주고 받는 형식.
요청과 응답이 존재한다.
HTTP를 이용한 요청과 응답.
클라이언트의 요청이 없으면 서버의 응답도 없다.

WebSocket

사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술

클라이언트의 요청이 없어도 서버의 응답이 존재할 수 있다.
웹소켓 연결을 끊어버리기 전까지는 자유롭게 요청, 응답이 오고 갈 수 있다.

home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>

<style>
	#notepad {
		box-sizing: border-box;
		width: 700px;
		height: 400px;
		padding: 10px;
		margin: 10px 0;
		border: 2px solid black;
		font-size: 17px;
		overflow-y: auto;
	}
	form > p {
		box-sizing: border-box;
		width: 700px;
		display: flex;
		justify-content: space-between;
	}
	input[name="input"] {
		padding: 5px;
		font-size: 20px;
		flex: 5;
		margin-right: 5px;
	}
	input[type="submit"] {
		flex: 1;
	}
	
</style>

</head>
<body>

<h1>websocket 을 이용한 메모장 (sockJS)</h1>
<hr>


<div id="notepad">
</div>

	<form>
		<p><input type="text" name="input" placeholder="글을 입력">
			<input type="submit">
		</p>
			
	</form>

<script>
	//	변수선언
	const cpath = '${cpath}'
	const form = document.forms[0]
	const ws = new SockJS(cpath + '/chat')
	const notepad = document.getElementById('notepad')
	
	
	//	함수정의
	function messageHandler(event) {
		notepad.innerHTML = '<p>' + event.data + '</p>'
		notepad.scroll({
			top : notepad.scrollHeight,
			behavior : 'smooth',
		})	
	}
	
	function submitHandler(event) {
		event.preventDefault()
		const input = event.target.querySelector('input[name="input"]')
		
		
		ws.send(input.value)
		input.value = ''
		input.focus()
	}
	
	//	이벤트 연결
	ws.onmessage = messageHandler
	ws.onopen = function(msg) {}
	ws.onclose = function(msg) {}
	ws.onerror = function(msg) {}
	form.onsubmit = submitHandler
	
</script>

</body>
</html>

ChatComponent

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class ChatComponent extends TextWebSocketHandler {

	
	List<WebSocketSession> sessionList = new ArrayList<>();
	

	//	저장 - source - Override/Implements method
	
	@Override	//	연결이 성립된 이후 실행되는 함수
	public void afterConnectionEstablished(WebSocketSession session) throws Exception {
		System.out.println("연결 생성 확인 : " + session);
		sessionList.add(session);
	}

	
	@Override	//	텍스트 메시지를 전달받았을 때 실행되는 함수 
	protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		System.out.printf("메시지 받음 : [%s] : %s\n", session, message);
		
		for(WebSocketSession ws : sessionList) {	//	세션리스트에 들어가있는 모든 웹 소켓에게
			ws.sendMessage(message);		//	받은 메시지를 다시 보낸다 (== 클라이언트가 응답을 받았을 것이다)
		}
	}
	
	
	@Override	//	연결이 끊어졌을 때 실행되는 함수 
	public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
		System.out.println("연결 종료 : " + session);
		sessionList.remove(session);
	}
	
}

접속 이동 경로

함수 작성 없이 먼저 연결부터 확인해봐야 한다.

web.xml 에서 version은 3.0 이상이어야 한다. > WebSocket 지원이 3.0 이상 부터 가능

1. home.jsp에서 script 태그

const ws = new SockJS(cpath + '/chat')

2. ChatComponent 에서

afterConnectionEstablished가 작동하면

3. 콘솔창에서 연결 확인 메시지가 뜬다.

콘솔로 연결 여부를 확인

실시간으로 빠릿 빠릿 하게 통신이 되는걸 보니까 너무 재밌었다.

다음 번에는 이 웹소켓을 활용하여 채팅을 한 번 구현해 볼 생각이다.

[JavaScript] AJAX

Sponge_ — Thu, 10 Oct 2024 16:55:36 +0900

다른 웹서버의 데이터를 이용해서 원하는 형식으로

데이터를 한 번 출력해보자.

script 코드드 vscode로 작성할 거다.

이미지 출력

<style>
        #root {
            max-width: 1200px;
            display: flex;
            flex-flow: wrap;
            margin: 20px auto;
        }
        .item {
            width: 45%;
            display: flex;
            border: 1px solid black;
            margin: 10px;
            padding: 10px;
        }
        .item img {
            margin-right: 10px;
        }

    </style>

  </head>
  <body>
    <h1>AJAX 화면 구현</h1>
    <hr>

    <div id="root"></div>

    <script>
      //  fetch(콜백형태, 함수 내부에)

      const url = "https://jsonplaceholder.typicode.com/photos";
      
      
      fetch(url)     //  주소로 요청한다
        .then(resp => resp.json())     //  요청에 따른 응답이 오면, 응답을 json 으로 변환   
        .then(json => {                //  json 을 이용하여 다음 내용을 수행
  
          console.log(json);

          const arr = json.slice(0, 50).map(e => {
            delete e.url
            return e
          })

          console.log(arr)

          const root = document.getElementById('root')

          arr.forEach(dto => {
            let tag = ''
            tag += `<div class="item">`
            tag += `    <div class="thumbnailUrl"><img src="${dto.thumbnailUrl}"></div>`
            tag += `    <div>`
            tag += `        <div class="title">${dto.title}</div>`
            tag += `        <div class="id">${dto.id}</div>`
            tag += `        <div class="albumId>${dto.albumId}</div>`
            tag += `    </div>`
            tag += `</div>`

            root.innerHTML += tag
          })

          //    fetch.then() 함수의 콜백에는 반환을 수행하지 않는다
          //    만약, async / await 를 사용하면 반환을 수행할 수 있다 

        });

    </script>
  </body>
</html>

결과는 위와 같이 나올 것이다.

style에는 .item에 width를 사용하여, 한 줄ㅇ 나오는 요소의 개수를 정해 줄 수 있다.

전체 목록 출력 (페이징)

<style>
        a {
            color: inherit;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        table {
            border-collapse: collapse;
            margin: auto;
        }
        thead {
            background-color: grey;
            color: white;
        }
        tr {
            border-bottom: 1px solid grey;
        }
        td,th {
            padding: 5px 10px;
        }


    </style>
</head>
<body>
    
    <h1>posts</h1>
    <hr>


    <div id="root">
        <table>
            <thead>
                <tr>
                    <th>번호</th>
                    <th>제목</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>


    <!--
        HTTP 요청 메서드
        
        GET           : select     요청할때 메서드를 지정하지 않으면 기본값은 get       
        POST          : insert
        PUT/PATCH     : update 
        DELETE        : delete

    -->


    <script>
    	 //  다른 서버에있는 데이터를 가져오기 위해 주소를 넣음 
        const url = 'https://jsonplaceholder.typicode.com/posts'   

        fetch(url)
            .then(resp => resp.json()) 
            .then(json => {

                //  console.log(json)   항상 fetch 하고 나서 출력해보기!! 
                //  (내가 가져온 데이터가 무엇인지 알아야 다듬을 수 있음 )
                //  tbody 에 innerHTML 넣어주는 것이 정석임
                const tbody = document.querySelector('#root > table > tbody')  
                const arr = json.toSorted((a, b) => b.id - a.id)    //  정수반환으로 정렬하기 
                                        .slice(0, 20)               //  slice 로 페이징 
                
                arr.forEach(dto => {
                        let tag = ''
                        tag += `<tr>`
                        tag += `    <td>${dto.id}</td>`
                        
                        //	12_post.html?id=${dto.id} : 이때 id 를 같이 넘긴다
                        tag += `    <td><a href="12_post.html?id=${dto.id}">${dto.title}</a></td>`
                        tag += `</tr>`
                        
                        tbody.innerHTML += tag
                })
            })

    </script>
</body>
</html>

개별 출력

전체 목록 중에서 하나를 선택하면 (a태그를 이용하여 페이지 이동)

이때, id를 받아와서 개별로 출력한다.

<style>
    table {
        border: 2px solid black;
        border-collapse: collapse;
        margin: 10px 0;
    }
    td, th {
        padding: 5px 10px;
    }
    tr {
        border-bottom: 1px solid grey;
    }

</style>

</head>
<body>
    

    <h1>post.html</h1>
    <hr>


    <table>
        <tr>
            <td class="id"></td>
            <td class="title"></td>
        </tr>
        <tr>
            <td class="userId" colspan="2"></td>
        </tr>
        <tr>
           <td colspan="2"><pre class="body"></pre></td>
        </tr>
    </table>

    <div style="display: flex; justify-content: space-between;">
        <div>
            <a href="11_post.html"><button>목록</button></a>
        </div>
        <div></div>
    </div>


    <script>
        //   자바스크립트에서 쿼리스트링 가져오기
        const id = new URLSearchParams(location.search).get('id')       //  위에서 생성한 id 를 
        const url = `https://jsonplaceholder.typicode.com/posts/${id}`  //  쿼리스트링 자리에 넣기 
        //  console.log(url)


        //  async / await 를 활용하여 json 을 반환값으로 받기
        //  비동기 함수를 정의할때 async        
        //  비동기 함수를 호출할때 await   :   주소로 요청을 하고 응답을 받으면 그 응답을 json 객체로 바꿈 (콘솔로그가 안뜬다)
        //  단, await 호출은    javascript 코드의 top-level 에서 호출할 수 없음(그래서, loadHandler() 를 만든 이유) 
        async function loadHandler() {
            const json = await fetch(url)
                        .then(resp => resp.json())
            console.log(json)


        //  json 객체의 변수(필드) 이름과 
        //  HTML element 의 클래스 이름을 맞춰두고 하나씩 대입
            for(let key in json) {      //  key 는 index 역할, index에 접근하려면 for 문의 in 을 사용 
                console.log(key)
                const value = json[key]
                const element = document.querySelector('.' + key)       //  앞에 . 붙이면 class로 불러옴 
                element.innerText = value

            }


        //  불러온 json 객체에서 userId 를 불러와서 username을 작성자 위치에 덮어쓰기
            const username = await fetch('https://jsonplaceholder.typicode.com/users/' + json.userId)
                        .then(resp => resp.json())
                        .then(json => json.username)
        
            document.querySelector('.userId').innerText = username
        }
        window.onload = loadHandler
    </script>
</body>
</html>

아직까지는 비동기 함수에 대해서 잘 모르겠다.

수업에서 배운 내용으로 계속 한 번씩 사용해보면서 사용법을 익혀봐야 될 것 같다.

[JavaScript] json 화면 구현

Sponge_ — Thu, 10 Oct 2024 02:12:09 +0900

json 파일을 이용해서 화면 구현을 해보자.

appendChild

appendChild() : 새로운 요소를 추가하는 방법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <h1>6_appendChild.html</h1>
    <hr>

    <div id="root"></div>

    <script>
        //  자바스크립트에서 HTML 요소를 생성해서 문서에 반영할 수 있다
        //  1) document 내장함수 createElement 활용
        const e1 = document.createElement('div')    //  태그이름
        e1.className = 'item'
        e1.innerText = '돈까스'
        root.appendChild(e1)        //  root 에 자식요소로 e1 을 추가 


        //  2) innerHTML 을 이용하여 문자열 형식으로 태그를 작성하여 추가하기
        const e2 = '<div class="item">초밥</div>'
        root.innerHTML += e2

        
        //  3) 백틱 문자열(``)을 이용하여 추가하기
        //  JSP 에서는 EL 문법과 겹치기 때문에 사용할 수 없고,
        //  .html 과 .js 에서는 이용가능함 
        const food = '라멘'
        const e3 = `<div class="item">${food}</div>`
        root.innerHTML += e3
        
        //  appendChild 는 신규요소를 마지막에 추가함       <>  createElement
        //  만약, 추가하는 요소가 이미 문서에서 불러온 요소라면 마지막으로 자리를 옮긴다 
        const item1 = document.querySelector('.item')
        root.appendChild(item1)     //  새로고침하면 원래 있던 요소는 맨 마지막으로 감(재배열할때 사용 가능)

        const tag = document.querySelector('.item').outerHTML   //  시작 태그 ~ 마무리 태그 까지 전부   
        root.innerHTML += tag

        </script>

</body>
</html>

데이터를 직접 넣고 화면에 출력해보기

 <style>
      #root {
        width: 900px;
        margin: auto;
      }
      .item {
        display: flex;
        border: 2px solid black;
        margin: 10px;
        padding: 10px;
      }
      .item > div {
        flex: 1;
      }
      .item > div:nth-child(2) {
        flex: 3;
      }
    </style>
  </head>
  <body>
    <h1>7_ JS 화면 구현</h1>
    <hr />


    <!-- 
        먼저 출력 형식 틀은 html 로 만들어둔 다음, 
        script 로 데이터를 만들어 놓고 forEach 를 이용하여 원하는 틀대로 데이터 출력시켜보기 
    -->


    <div id="root"></div>

    <script>
      //  스프링에서 myBatis 로 select 를 수행한 결과를 List<DTO>로 받았다고 가정

      const arr = [
        {
          idx: 1,
          name: "새벽 겨울 딸기 500G(팩)",
          salesPrice: 9990,
          grade: 4.6,
        },
        {
          idx: 2,
          name: "알큰 딸기 700G(박스)",
          salesPrice: 14990,
          grade: 4.5,
        },
        {
          idx: 3,
          name: "살살 녹는 장희 딸기 750G(팩)",
          salesPrice: 22990,
          grade: 4.1,
        },
        {
          idx: 4,
          name: "슈퍼푸드 블루베리(칠레) 310G(팩)",
          salesPrice: 9990,
          grade: 4.6,
        },
      ];

      console.log(arr);



      //    arr 에 있던 요소들을    div root 에 넣기
      const root = document.getElementById("root");
      arr.forEach((dto) => {
        let tag = "";
        tag += `<div class="item">`;        //  백틱(``) 을 이용
        tag += `    <div class="idx">${dto.idx}</div>`;
        tag += `    <div class="name">${dto.name}</div>`;
        tag += `    <div class="salesPrice">${dto.salesPrice}</div>`;
        tag += `    <div class="grade">${dto.grade}</div>`;
        tag += `</div>`;

        root.innerHTML += tag;
      });
    </script>
  </body>
</html>

03 다른 사이트에 있는 json 파일 내용을 출력하기

장점

미리 데이터를 준비하지 않아도 된다.
데이터를 내가 직접 관리할 필요가 없다

주의할 점

해당 파일이 어떤 내용을 가지고 있는지 먼저 파악해야한다 (이름이 일치해야 출력할 수 있기 때문)

<style>
      #root {
        width: 900px;
        margin: auto;
      }
      .item {
        display: flex;
        border: 2px solid grey;
        margin: 20px;
        padding: 20px;
        background-color: ivory;
     
      }
      .item > div {
        flex: 1;
      }
      .item:hover {
        background-color: rgb(123, 155, 181);
        border: 2px solid black;
        color: rgb(255, 255, 255);
        font-weight: bold;
        
      }
      .item > div:nth-child(2) {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <h1>JSON 파일 내용 불러와서 화면에 출력하기</h1>
    <hr />

    <div id="root"></div>

    <script src="homeplus(berry).js"></script>
    <script>
      console.log(arr);

      const root = document.getElementById("root");


      //    원하는 조건으로 정렬한 이후에 json 데이터로 반영할 수 있다 
      //    가격순 또는 상품명순 으로 정렬 가능 
      //    이러한 기능들은 특정 기능을 함수로 만들어두는 것이 좋음 
      arr.sort((a, b) => a.price - b.price)

      //    json 데이터를 화면에 반영하는 코드
      arr.forEach((dto) => {
        let tag = "";

        tag += `<div class="item">`;
        tag += `    <div class="name">${dto.name}</div>`;
        tag += `    <div class="price">${dto.price}원</div>`;
        tag += `    <div class="salePrice">${dto.salePrice}원</div>`;
        tag += `    <div class="salesCount">${dto.salesCount}</div>`;
        tag += `    <div class="grade">${dto.grade}점</div>`;
        tag += `    <div class="reviewCount">${dto.reviewCount}</div>`;
        tag += `</div>`;

        root.innerHTML += tag;
      });
    </script>
  </body>
</html>

미리 데이터를 직접 준비하지 않아도 된다는 점이 너무 편하다.

그러나, 여태껏 DB에 있는 데이터를 불러와서 출력하는 경우가 많았기 때문에,

dto.컬럼이름으로 값을 불러오기만 하면 됐었는데

다른 사이트에 있는 데이터의 속성에는 어떤 것이 있는지 미리 파악하는 것이 좋은 방법이라 생각한다.

[Spring] HashMap json mapping

Sponge_ — Thu, 10 Oct 2024 01:41:28 +0900

공공데이터 포털에 가면 오픈 되어 있는 여러가지 공공데이터들이 있다.

오늘은 그 오픈 json데이터를 HashMap으로 mapping 해볼 것이다.

home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>day09</h1>
<hr>

<h3>JSON : JavaScript Object Notation</h3>
<h3>자바스크립트에서 객체를 표현하는데 사용하는 문법</h3>

<ul>
	<li><a href="ex01">ex01 - 부산 축제 정보 서비스 연습</a></li>
	<li><a href="ex02">ex02 - 부산 축제 정보 서비스 (AJAX)</a></li>
</ul>

</body>
</html>

ex01.jsp

json 파일을 자바 객체로 변환하여 출력하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex01.jsp</title>
<style>
	#root {
		width: 900px;
		margin: 20px auto;
	}
	.item {
		width: 800px;
		margin: 10px auto;
		border: 1px solid grey;
		padding: 10px;
	}
</style>
</head>
<body>

<h1>ex01 - JSON을 자바 객체로 변환하여 출력하기</h1>
<hr>

<p>
	<a href="${cpath }/ex01/js"><button>JS로 처리하기</button></a>
</p>

<div id="root">
	<c:forEach var="dto" items="${list }">
	<div class="item">
		<div><h3>${dto.UC_SEQ }. ${dto.TITLE } (${dto.GUGUN_NM })</h3></div>
		<div>${dto.HOMEPAGE_URL }</div>
		<div><img src="${dto.MAIN_IMG_NORMAL }" height="300"></div>
		<div>
			<details>
				<summary>상세보기</summary>
				<span>${dto.ITEMCNTNTS }</span>
			</details>
		</div>
	</div>
	</c:forEach>
</div>


</body>
</html>

해당 api의 내용을 알고 있어야 한다.

필드명이 반드시 일치해야 불러올 수 있다.

ex01- js.jsp

json 파일을 자바 스크립트로 변환하여 출력하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex01-js</title>
<style>
	#root {
		width: 900px;
		margin: 20px auto;
	}
	.item {
		width: 800px;
		margin: 10px auto;
		border: 1px solid grey;
		padding: 10px;
	}
</style>
</head>
<body>

<h1>ex01 - JSON을 자바스크립트로 처리하여 출력하기</h1>
<hr>

<div id="root"></div>

<script>
	const jsonObject = ${json}
	
// 	console.log(jsonObject.getFestivalKr.item)
	const arr = jsonObject.getFestivalKr.item
	const root = document.getElementById('root')
	
	root.innerHTML = ''
	for(let i = 0; i < arr.length; i++) {
		let tag = ''
		tag += '<div class="item">'
		tag += '	<div><h3>' + arr[i].UC_SEQ + '. ' + arr[i].TITLE + '(' + arr[i].GUGUN_NM + ')</h3></div>'
		tag += '	<div>' + arr[i].HOMEPAGE_URL + '</div>'
		tag += '	<div><img src="' + arr[i].MAIN_IMG_NORMAL + '" height="300"></div>'
		tag += '	<div>'
		tag += '		<details>'
		tag += '			<summary>상세보기</summary>'
		tag += '			<span>' + arr[i].ITEMCNTNTS + '</span>'
		tag += '		</details>'
		tag += '	</div>'
		tag += '</div>'
		root.innerHTML += tag
	}
</script>

</body>
</html>

Ex01Controller

import java.io.IOException;
import java.net.MalformedURLException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itbank.service.Ex01Service;

@Controller
public class Ex01Controller {
	
	@Autowired private Ex01Service service;
	private ObjectMapper objectMapper = new ObjectMapper();
	
	@GetMapping("/ex01/js")
	public ModelAndView ex01Js() throws MalformedURLException, IOException {
		ModelAndView mav = ex01();
		mav.setViewName("ex01-js");
		return mav;
	}

	@GetMapping("/ex01")
	public ModelAndView ex01() throws MalformedURLException, IOException {
		ModelAndView mav = new ModelAndView();
		
		String json = service.getFestivalJson();	// JSON 데이터는 문자열이다
		mav.addObject("json", json);
		System.out.println(json);
		
		// JSON 형식의 문자열을 자바 객체로 변환하기 위한 코드
		JsonNode node = objectMapper.readTree(json);
		JsonNode item = node.get("getFestivalKr").get("item");
		System.out.println("item : " + item.toPrettyString());
		
//		DTO로 맵핑하기 (필드이름이 복잡하여 제대로 맵핑되지 않았다)
//		List<FestivalDTO> list = Arrays.asList(
//				objectMapper.readValue(item.toPrettyString(), FestivalDTO[].class)
//		);
//		System.out.println(list.get(0).getMAIN_TITLE());
		
//		HashMap으로 맵핑하기
		@SuppressWarnings("unchecked")
		List<HashMap<String, Object>> list = Arrays.asList(
				objectMapper.readValue(item.toPrettyString(), HashMap[].class)
		);
		System.out.println(list.get(0).get("MAIN_TITLE"));
		
		mav.addObject("list", list);
		return mav;
	}
}

위 코드에서 어려웠던 부분

처음에는 DTO로 처리하려고 했으나, 필드명이 너무 복잡해서 mapping이 잘 되지 않았다.

그래서 mapping을 HashMap으로 구현하였다.

FestivalDTO

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import com.fasterxml.jackson.annotation.JsonProperty;

// JSON데이터에서 DTO에 명시되지 않은 속성(알수없는 속성)은 무시하겠다
@JsonIgnoreProperties(ignoreUnknown = true)

// JSON의 속성이름을 자바 네이밍 컨벤션(camelCase)으로 변환하는 과정이 맞아야 한다
public class FestivalDTO {

	@JsonProperty("UC_SEQ")				private int UC_SEQ;
	@JsonProperty("MAIN_TITLE")			private String MAIN_TITLE;
	@JsonProperty("GUGUN_NM")			private String GUGUN_NM;
	@JsonProperty("HOMEPAGE_URL")		private String HOMEPAGE_URL;
	@JsonProperty("MAIN_IMG_NORMAL")	private String MAIN_IMG_NORMAL;
	@JsonProperty("ITEMCNTNTS")			private String ITEMCNTNTS;
	
	public int getUC_SEQ() {
		return UC_SEQ;
	}
	public void setUC_SEQ(int uC_SEQ) {
		UC_SEQ = uC_SEQ;
	}
	public String getMAIN_TITLE() {
		return MAIN_TITLE;
	}
	public void setMAIN_TITLE(String mAIN_TITLE) {
		MAIN_TITLE = mAIN_TITLE;
	}
	public String getGUGUN_NM() {
		return GUGUN_NM;
	}
	public void setGUGUN_NM(String gUGUN_NM) {
		GUGUN_NM = gUGUN_NM;
	}
	public String getHOMEPAGE_URL() {
		return HOMEPAGE_URL;
	}
	public void setHOMEPAGE_URL(String hOMEPAGE_URL) {
		HOMEPAGE_URL = hOMEPAGE_URL;
	}
	public String getMAIN_IMG_NORMAL() {
		return MAIN_IMG_NORMAL;
	}
	public void setMAIN_IMG_NORMAL(String mAIN_IMG_NORMAL) {
		MAIN_IMG_NORMAL = mAIN_IMG_NORMAL;
	}
	public String getITEMCNTNTS() {
		return ITEMCNTNTS;
	}
	public void setITEMCNTNTS(String iTEMCNTNTS) {
		ITEMCNTNTS = iTEMCNTNTS;
	}
	

}

Ex01Service

Ex01Controller의 호출을 받고,

요청된 내용을 처리한 후

결과값을 호출한 장소로 반환한다.

import java.io.IOException;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.HashMap;
import java.util.Scanner;

import org.springframework.stereotype.Service;

@Service
public class Ex01Service {
	// 공공데이터포털, 부산 축제 정보

	private final String serviceKey = "K7G5hCA%2FRqnmALDK%2F7POZXDGSgTgQFRIcOqpF8HUf9rqLn17QSaJ4Q0Ox732h%2BF%2FgxuyB3bXrdEWApNVwrOtWA%3D%3D";
	
	public String getFestivalJson() throws MalformedURLException, IOException {
		// 1) 요청 주소 및 파라미터 준비
		String url = "https://apis.data.go.kr/6260000/FestivalService/getFestivalKr";
		HashMap<String, String> param = new HashMap<>();
		param.put("pageNo", "1");
		param.put("numOfRows", "10");
		param.put("resultType", "json");
		param.put("serviceKey", serviceKey);
		url += "?";
		for(String key : param.keySet()) {
			url += key + "=" + param.get(key) + "&";
		}
		
		// 2) 요청을 전송하여 응답을 받아서 저장
		Scanner sc = null;
		String response = "";
		HttpURLConnection conn = (HttpURLConnection) new URL(url).openConnection();
		
		if(conn.getResponseCode() == 200) {	// 200 = 정상
			sc = new Scanner(conn.getInputStream());
			while(sc.hasNextLine()) {
				response += sc.nextLine();
			}
			sc.close();
			conn.disconnect();
		}
		
		return response;
	}

}

여기서 주의할 점

공공데이터 포털 사이트에서 url과 serviceKey 오타를 항상 조심해야 함.

DTO로 매핑을 계속 시도 했는데 잘 되지도 않고, 비효율적인 것 같아서 Chat gpt의 도움을 조금 받았다.

그래서 HashMap을 사용하게 되었고, 훨씬 효율적인 로직이 완성되었다.

언제나 간결성, 가독성 그리고 효율성이 좋은 코드를 작성하도록 노력이 필요하다.

[JavaScript] Search Filter

Sponge_ — Thu, 10 Oct 2024 01:23:51 +0900

우리가 사이트를 이용할 때 흔히 볼 수 있는 검색 필터 기능을 한 번 자바스크립트로 구현해볼 것이다.

코드 풀이

filter는 boolean 형식이다.

form태그를 쓴다면, form 이 제출될때 이벤트가 발생하도록 해야함.

: input 에 대한 key 이벤트 사용 X
submit 에 대한 click 이벤트 사용 X
form 에 대한 submit 이벤트를 사용한다.

form이 submit 되면 새로운 요청이 발생하고, 이후의 자바 스크립트는 무시한다.

form 에 대한 submit 이벤트는 반드시 !! 첫줄에 이벤트 기본작동을 막아야함.
-> event.preventDefault()

확실하게 하기 위해서는 console.log 를 이용하는 것이 가장 바람직하다.

-> console.log(searchValue) : 확인이 완료되면, 해당 코드는 아예 지우거나, 또는 주석처리로 남겨둔다

검색어 가져오기
-> const searchValue = event.target.querySelector('input').value

대상을 배열 형태로 불러옴
-> const arr = Array.from(document.querySelectorAll('ul > li'))

배열의 각각에 있는 hidden 을 모두 지워서 초기화

-> arr.forEach(e => e.classList.remove('hidden'))

검색어를 포함하지 않는 배열을 별도로 불러와서 모두 hidden 처리하기

: arr.filter 는 새로운 배열을 반환하기 때문에 arr2로 저장

arr.filter의 콜백함수는 boolean 타입을 반환하면 됨

-> const arr2 = arr.filter(e => e.innerText.includes(searchValue) == false)
arr2.forEach(e => e.classList.add('hidden'))

<style>
        .hidden {
            display: none;
        }

    </style>
</head>

    <h1>내가 좋아하는 남자배우</h1>
    <hr>

    <form id="searchForm">
        <p>
            <input id="search" type="search" autocomplete="off" autofocus>
            <input type="submit" value="검색">
        </p>

    </form>

    <ul>
        <li>차은우</li>
        <li>김수현</li>
        <li>서강준</li>
        <li>변우석</li>
        <li>위하준</li>
        <li>김우빈</li>
        <li>김건우</li>
        <li>이민기</li>
        <li>송강</li>
        <li>강태오</li>
        <li>이민기</li>
        <li>우도환</li>
        <li>조정석</li>
    </ul>


    <script>

        const searchForm = document.getElementById('searchForm')
        const ul = document.querySelector('ul')

        searchForm.onsubmit = function(event) {
            event.preventDefault()
            
            const searchValue = event.target.querySelector('input').value

            const arr  = Array.from(document.querySelectorAll('ul > li'))
            arr.forEach(e => e.classList.remove('hidden'))


            //  검색어를 포함하지 않는 배열을 별도로 불러와서 모두 hidden 처리하기
            //  arr.filter 는 새로운 배열을 반환함(arr2 로 저장)
            //  arr.filter의 콜백함수는 boolean 타입을 반환하면 됨
            //  (조건을 만족하는 내용만 남기고 모두 제거)
            const arr2 = arr.filter(e => e.innerText.includes(searchValue) == false)    
            arr2.forEach(e => e.classList.add('hidden'))    
        }
    </script>

</body>
</html>

boolean형식으로 되어 있어서 조건을 처리하기가 까다롭지 않았다.

검색필터를 다른 언어로도 코드를 짜보니까 새롭기도 하고 재밌었다.

[JavaScript] ClickEvent

Sponge_ — Thu, 10 Oct 2024 01:18:29 +0900

오늘은 자바스크립트의 클릭이벤트를 활용하는 방법을 알아볼거다.

하나의 버튼을 이용하여, 오름차순 정렬과 내림차순 정렬 모두 수행할 수 있도록 한다.

즉, 홀수번째로 눌렀을때는 오름차순 정렬

짝수번째로 눌렀을때는 내림차순 정렬로 바뀌도록 할 것이다

script 를 해당 폴더에 넣어두고, 선언해서 사용한다

-> <script src="parking.js"></script>

arrow 라는 클래스를 만들어서 여기에 또는 가 나오도록 할것이다.

: 오름차순을 의미

: 내림차순을 의미

order 값이 1이라면, 버튼을 한번 더 눌렀을때에는 값이 -1로 바뀐다.

-> const order = +target.getAttribute('order')
target.setAttribute('order', -order)

문자열이 아닌, 정수형태로 비교하기 위해서 + 부호를 붙인다.

arr3.sort((e1, e2)=> {

const v1 = +e1.children[idx].innerText
const v2 = +e2.children[idx].innerText

기본적으로는 오름차순으로 정렬해둔다.
return (v1 <= v2 ? 1 : -1) * order

핵심

: 클릭이벤트는 3번째 컬럼부터 적용시키기

-> columns.slice(3, 7).forEach(e => e.onclick = sortHandler)

 <style>
        .item {
            display: flex;
            max-width: 1200px;
            margin: auto;
        }
        .item > div {
            flex: 2;
            border: 1px solid grey;
            padding: 5px 10px;
        }
        .item > div:nth-child(1) { flex: 5; }
        .item > div:nth-child(2) { flex: 4; }
        .columns {
            background-color: #eee;
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>

    <h1>부산광역시 주차장 요금 현황</h1>
    <hr>

    <div id="root">
        <div class="columns item">
            <div order="1" class="pkNam"><span class="text">주차장이름</span><span class="arrow"></span></div>
            <div order="1" class="guNm"><span class="text">지역</span><span class="arrow"></span></div>
            <div order="1" class="pkFm"><span class="text">형식</span><span class="arrow"></span></div>
            <div order="1" class="tenMin"<span class="text">10분주차요금</span><span class="arrow"></span></div>
            <div order="1" class="ftDay"><span class="text">일주차요금</span><span class="arrow"></span></div>
            <div order="1" class="ftMon"><span class="text">월주차요금</span><span class="arrow"></span></div>
            <div order="1" class="pkCnt"><span class="text">전체주차대수</span><span class="arrow"></span></div>
        </div>

        <div class="main"></div>  <!-- 내용이 나와야할 곳-->

    </div>
    
    <script src="parking.js"></script>
    <script>
        
        //  JSON 데이터 출력하기
        const arr2 = arr.slice(0, 300)
        console.log(arr2)

        const main = document.querySelector('.main')
        arr2.forEach(e => {
            let tag = ''
            tag += `<div class="item">`
            tag += `    <div class="pkNam">${e.pkNam }</div>`
            tag += `    <div class="guNm">${e.guNm }</div>`
            tag += `    <div class="pkFm">${e.pkFm }</div>`
            tag += `    <div class="tenMin">${e.tenMin == '-' ? 0 : e.tenMin}</div>`
            tag += `    <div class="ftDay">${e.ftDay == '-' ? 0 : e.ftDay }</div>`
            tag += `    <div class="ftMon">${e.ftMon == '-' ? 0 : e.ftMon }</div>`
            tag += `    <div class="pkCnt">${e.pkCnt }</div>`
            tag += `</div>`
            main.innerHTML += tag
        })
        
        //  클릭이벤트 설정
        const columns = Array.from(document.querySelectorAll('div.columns > div'))  //  배열로 만들기

        //  클릭이벤트
        function sortHandler(event) {
   
            //  내가 클릭한 대상은 columns에서 몇번째 인덱스를 가지는가?
            let target = event.target
            while(target.tagName != 'DIV') {
                target = target.parentNode
            }

            const idx = columns.indexOf(target)
            console.log(idx)	//  idx가 -1 이라면 대상을 찾지 못했다는 뜻.

            const order = +target.getAttribute('order')	//  order가 1이라면
            
            target.setAttribute('order', -order)  //  그 다음은 -1 이 나올것임(이것을 반환할때 곱해주면 함수실행할때마다 값이 바뀜)
            
            document.querySelectorAll('span.arrow').forEach(e => e.innerText = '')

            target.querySelector('span.arrow').innerText = order > 0 ? ' ' : ' '

            const arr3 = Array.from(document.querySelectorAll('div.main > div.item'))

            arr3.sort((e1, e2)=> {
                //  문자열이 아닌, 정수형태로 비교
                const v1 = +e1.children[idx].innerText   //  각 컬럼을 [0] [1] ...  == [idx]
                const v2 = +e2.children[idx].innerText
                
                return (v1 <= v2 ? 1 : -1) * order
                
                //  children :  HTMLCollection 형태, index 는 존재함
                //  저번에 +a.querySelector('td:nth-child(2)').innerText 처럼
                //  원하는 컬럼의 데이터만 뽑아올 수 있도록 한다

            })
            arr3.forEach(e => main.appendChild(e))
        }
        columns.slice(3, 7).forEach(e => e.onclick = sortHandler)

    </script>
</body>
</html>

오늘도 코드를 작성하면서 삼항연산자를 사용하여 코드의 길이를 더 줄어든 일이 있었다.

매번 작성하는 코드이지만 어떻게 하면 더 간결하고, 가독성이 좋게 코드를 작성할 수 있을지 생각하는게 관건인 것 같다.

[JavaScript] 정렬

Sponge_ — Wed, 9 Oct 2024 23:01:56 +0900

이번엔 JavaScript의 정렬에 대해서 한 번 알아보자.

출력할 js파일을 vscode에 넣어두어야한다.

const arr = [
    {
        "user": "TrynMst",
        "champion": "퀸",
        "team": "블루",
        "kill": 7,
        "death": 7,
        "assist": 7,
        "damage": 27176,
        "cs": 173
    },
    {
        "user": "강승우의 제발PLZ",
        "champion": "마오카이",
        "team": "블루",
        "kill": 4,
        "death": 6,
        "assist": 17,
        "damage": 22744,
        "cs": 144
    },
    {
        "user": "Hide on bush",
        "champion": "산드라",
        "team": "블루",
        "kill": 8,
        "death": 3,
        "assist": 10,
        "damage": 42702,
        "cs": 274
    },
    {
        "user": "128482031",
        "champion": "바루스",
        "team": "블루",
        "kill": 14,
        "death": 5,
        "assist": 8,
        "damage": 31350,
        "cs": 277
    },

...중략 
]

전체코드

 <style>
        #root {
            border: 2px solid black;
            max-width: 1200px;
            margin: auto;
        }
        .item {
            display: flex;
            border-bottom: 1px solid grey;
        }
        .item > div {
            padding: 10px 20px;
            flex: 2;
        }
        .item > div:first-child {
            flex: 4;
        }
        .item > div:nth-child(2) {
            flex: 3;
        }
        .columns {
            background-color: #eee;
            cursor: pointer;
            user-select: none;      /*  사용자가 드래그로 글자 및 그림을 선택할 수 없음 */
        }
        .item.blue {
            background-color: skyblue;
        }
        .item.red {
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="columns item">  <!--    .columns : item 클래스를 추가로 작성 -->
            <div order="1" class="user">
                <span class="text">유저</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="champion">
                <span class="text">챔피언</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="team">
                <span class="text">팀</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="kill">
                <span class="text">킬</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="death">
                <span class="text">데스</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="assist">
                <span class="text">어시스트</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="damage">
                <span class="text">데미지</span>
                <span class="arrow"></span>
            </div>
            <div order="1" class="cs">
                <span class="text">CS</span>
                <span class="arrow"></span>
            </div>
        </div>
        <div class="main">  <!--    .main : 정렬의 대상 -->

        </div>
    </div>

    <script src="opgg_result.js"></script>	<!-- 사용할 파일 -->


    <!--        div class="item ${e.team == '블루' ? 'blue' : 'red'}"
                : class 이름에다가 조건에 따라서 blue 또는 red 라는 문자열을 더 추가한다
    -->
    <script>
        console.log(arr)

        //  일반 출력
        function load() {
            const main = document.querySelector('div.main')
            arr.forEach(e => {
                let tag = ''
                tag += `<div class="item ${e.team == '블루' ? 'blue' : 'red'}">`
                tag += `    <div class="user">${e.user}</div>`
                tag += `    <div class="champion">${e.champion}</div>`
                tag += `    <div class="team">${e.team}</div>`
                tag += `    <div class="kill">${e.kill}</div>`
                tag += `    <div class="death">${e.death}</div>`
                tag += `    <div class="assist">${e.assist}</div>`
                tag += `    <div class="damage">${e.damage}</div>`
                tag += `    <div class="cs">${e.cs}</div>`
                tag += `</div>`
                main.innerHTML += tag
            })
        }
        window.addEventListener('DOMContentLoaded', load)

        


        //  먼저, 클릭이벤트를 적용할 부분을 추출하자
        const columns = document.querySelectorAll('.columns > div') //  모든 컬럼을 불러와서
        const sort = Array.from(columns).slice(3, 8)                //  3부터 8까지만 잘라낸다
        const main = document.querySelector('.main')                //  클릭이벤트 정렬 후 main에 내용을 넣는다
        
        
        function sortHandler(event) {   //  클릭이벤트
            let target = event.target   //  클릭 대상 (클릭한 대상이 target 으로 지정됨)
            //  이벤트는 div 에 걸어도, span이 타깃이 될수도 있음(span을 클릭할수도 있기 때문)



            while(target.tagName != 'DIV') {    // 대상의 태그이름이 DIV가 아니라면 반복(div를 가리킬때까지 반복한다)
                target = target.parentNode      // 상위 요소를 대상으로 지정한다(div가 가장 상위요소임)
            }


            const className = target.className    // 태그의 클래스이름을 문자열로 불러온다
            const order = +target.getAttribute('order') // getAttribute('속성이름')     : order값을 정수로 불러온다 (+기호를 붙이면 정수로 불러옴)
            target.setAttribute('order', -order)        // setAttribute('속성이름', 값) : 부호반전시켜서 새로 저장한다
            console.log(className, order)



            //  모든 span.arrow 의 내부 글자를 지운다  (삼각형 기호들이 지워질 것임)
            //  항상 무엇을 클릭하든간에 모든 값을 없애버림 (kill컬럼을 클릭 후에 또 다른 컬럼을 클릭하면 kill 컬럼의 삼각형이 없어질 수 있는 이유임)
            document.querySelectorAll('span.arrow').forEach(span => span.innerText = '')



            // 클릭된 대상의 span.arrow 에는 order(정렬순서)에 따라서 삼각형 기호를 넣어준다
            target.querySelector('span.arrow').innerText = order > 0 ? '▲' : '▼'    //  order가  1이면 ▲
                                                                                    //  order가 -1이면 ▼



            // main의 item들을 불러와서
            const arr2 = Array.from(document.querySelectorAll('.main > .item'))
            arr2.sort((e1, e2) => {
                const v1 = +e1.querySelector('.' + className).innerText     // 태그 내부 값을 정수로 변환
                const v2 = +e2.querySelector('.' + className).innerText


                const ret = v1 - v2 >= 0 ? 1 : -1   //  정렬에 필요한 정수를 반환하기 위해 준비한다  (정렬을 위한 코드)
                return ret * order                  //  반환값의 부호가 반전되도록 1 or -1을 곱한다
                //  order ==  1일때  arrow 는 ▼(내림차순)
                //  order == -1일때  arrow 는 ▲(오름차순)
            })


            //  정렬이 끝나면 appendChild
            arr2.forEach(e => main.appendChild(e))
        }

        //  클릭이벤트 실행
        sort.forEach(e => e.onclick = sortHandler)
    </script>
    
</body>
</html>

단순 출력 함수 (load)

팀명에 따라 배경색을 다르게 해주고 싶어서

팀명에 조건을 넣어 주었다.

삼항연산자에 의하여 div class 명이 달라지니까 style에는 class명에 따라서 색깔을 다르게 넣어주자.

<script>
        console.log(arr)

        //  일반 출력
        function load() {
            const main = document.querySelector('div.main')
            arr.forEach(e => {
                let tag = ''
                tag += `<div class="item ${e.team == '블루' ? 'blue' : 'red'}">`
                tag += `    <div class="user">${e.user}</div>`
                tag += `    <div class="champion">${e.champion}</div>`
                tag += `    <div class="team">${e.team}</div>`
                tag += `    <div class="kill">${e.kill}</div>`
                tag += `    <div class="death">${e.death}</div>`
                tag += `    <div class="assist">${e.assist}</div>`
                tag += `    <div class="damage">${e.damage}</div>`
                tag += `    <div class="cs">${e.cs}</div>`
                tag += `</div>`
                main.innerHTML += tag
            })
        }
        window.addEventListener('DOMContentLoaded', load)

`<div class="item ${e.team == '블루' ? 'blue' : 'red'}">`

team의 내용이 '블루' 라면

div의 클래스명이 item blue가 됨.

'블루'가 아니라면

div의 클래스명이 item red가 됨.

팀의 이름에 따라, div 클래스명을 바꿔주고,

클래스명을 이용하여 style 태그에 background-color 를 바꿔준다.

클릭 이벤트 함수 (clickHandler)

//  먼저, 클릭이벤트를 적용할 부분을 추출하자
   const columns = document.querySelectorAll('.columns > div') //  모든 컬럼을 불러와서
   const sort = Array.from(columns).slice(3, 8)                //  3부터 8까지만 잘라낸다
   const main = document.querySelector('.main')                //  클릭이벤트 정렬 후 main에 내용을 넣는다
        
        
   function sortHandler(event) {   //  클릭이벤트
       let target = event.target   //  클릭 대상 (클릭한 대상이 target 으로 지정됨)
       //  이벤트는 div 에 걸어도, span이 타깃이 될수도 있음(span을 클릭할수도 있기 때문)



        while(target.tagName != 'DIV') {    // 대상의 태그이름이 DIV가 아니라면 반복(div를 가리킬때까지 반복한다)
            target = target.parentNode      // 상위 요소를 대상으로 지정한다(div가 가장 상위요소임)
        }


       const className = target.className    // 태그의 클래스이름을 문자열로 불러온다
       const order = +target.getAttribute('order') // getAttribute('속성이름')     : order값을 정수로 불러온다 (+기호를 붙이면 정수로 불러옴)
       target.setAttribute('order', -order)        // setAttribute('속성이름', 값) : 부호반전시켜서 새로 저장한다
       console.log(className, order)



       //  모든 span.arrow 의 내부 글자를 지운다  (삼각형 기호들이 지워질 것임)
       //  항상 무엇을 클릭하든간에 모든 값을 없애버림 (kill컬럼을 클릭 후에 또 다른 컬럼을 클릭하면 kill 컬럼의 삼각형이 없어질 수 있는 이유임)
      document.querySelectorAll('span.arrow').forEach(span => span.innerText = '')



      // 클릭된 대상의 span.arrow 에는 order(정렬순서)에 따라서 삼각형 기호를 넣어준다
      target.querySelector('span.arrow').innerText = order > 0 ? '▲' : '▼'    
      //  order가  1이면 ▲
      //  order가 -1이면 ▼



      // main의 item들을 불러와서
      const arr2 = Array.from(document.querySelectorAll('.main > .item'))
      arr2.sort((e1, e2) => {
          const v1 = +e1.querySelector('.' + className).innerText     // 태그 내부 값을 정수로 변환
          const v2 = +e2.querySelector('.' + className).innerText


          const ret = v1 - v2 >= 0 ? 1 : -1   //  정렬에 필요한 정수를 반환하기 위해 준비한다  (정렬을 위한 코드)
          return ret * order                  //  반환값의 부호가 반전되도록 1 or -1을 곱한다
                //  order ==  1일때  arrow 는 ▼(내림차순)
                //  order == -1일때  arrow 는 ▲(오름차순)
      })


      //  정렬이 끝나면 appendChild
         arr2.forEach(e => main.appendChild(e))
      }

     //  클릭이벤트 실행
     sort.forEach(e => e.onclick = sortHandler)
     
     
    </script>

HTML을 공부할 때와 마찬가지로 JavaScript도 F12를 눌러

개발자도구와 함께 확인해보는 것이 중요한 것 같다.

[JavaScript] JavaScript 기본 다지기

Sponge_ — Wed, 9 Oct 2024 22:51:28 +0900

오늘은 JavaScript를 접한 나를 위해 기본을 한 번 다져볼 것이다.

유의사항

- JavaScript는 자료형을 쓰지 않아도 된다.

동적 타입을 지원해주기 때문.

같은 변수에 서로 다른 값을 넣어도, 에러가 나지 않고 값과 타입이 변한다.

- 변수로는 var와 let이 있다. 그러나, 일반적으로 let을 많이 사용한다.

var는 재선언이 가능해서, 변수가 어디에 선언되어 있는지 판단하기가 어렵기 때문에

프로그램상의 오류를 일으킬 수 있어서 잘 사용하지 않는다.

- 상수로는 const가 있다. 상수는 변하지 않고 일정한 값을 갖는 수를 의미

상수로 지정한 후에는 나중에 값을 바꿀 수 없다.

변수

let으로 선언

> let apple = 'yummy'

상수

const로 선언

> const arr = [ 1, 2, 3 ]

숫자로 구성된 배열 정렬

배열을 만든다

> const arr = [4, 8, 2, 7, 6, 1, 10]

배열을 정렬하는 함수 toSorted

람다 함수식을 사용하여, 오름차순으로 정렬한다.

> const arr2 = arr.toSorted((a, b) => a - b)

(+) 만약 내림차순 정렬이라면?

> cosnt arr2 = toSorted((a, b) => b - a)

<ul class="test1"></ul>

    <script>
        const arr = [4, 8, 2, 7, 6, 1, 10]
        console.log(arr)

        // const arr2 = arr.toSorted((a, b) => { return a - b })
        const arr2 = arr.toSorted((a, b) => a - b)
        console.log(arr2)

        const test1 = document.querySelector('ul.test1')
        arr2.forEach((num) => {
            test1.innerHTML += '<li>' + num + '</li>'
        })
    </script>
    
</body>
</html>

결과

문자열 배열 정렬

자바스크립트는 문자열도 크기 비교가 가능하다.

정렬 기준 함수를 전달하지 않아도, 문자열로 정렬해주지만 이후 객체 혹은

HTMLElement를 정렬하려면 직접 정렬 기준식을 작성할 줄 알아야 한다.

정렬함수에 전달되는 콜백함수는 정수를 반환한다.

반환되는 정수가 0보다 큰지, 작은지 판별하여 정렬을 수행한다.

따라서 작성하는 콜백함수에는 항상 1 혹은 -1을 반환할 수 있도록 처리한다.

만약 비교기준이 정수라면 -연산을 이용하여 두 수의 차이만 반환해도 된다.

삼항연사자를 이용한 오름차순 정렬

> const arr2 = arr.toSorted((a, b) => {return (a > b) ? 1 : -1 })

(+) 만약 내림차순 정렬을 하려면?

-> const arr2 = arr.toSorted((a, b) => {return (a < b) ? 1 : -1 })

 <ul class="test"></ul>

    <script>
        const arr = ['유빈', '유진', '현웅', '민정']
        // 위 배열을 정렬하여 ul.test에 출력하세요

        console.log('apple' > 'banana') // "apple".compareTo("banana") > 0
        console.log('apple' < 'banana') // "apple".compareTo("banana") < 0

        const arr2 = arr.toSorted((a, b) => {return (a > b) ? 1 : -1})

        const ul = document.querySelector('ul')
        arr2.forEach(e => ul.innerHTML += '<li>' + e + '</li>')
    </script>
    
</body>
</html>

결과

민정
유빈
유진
현웅

버튼을 클릭했을때 정렬되도록 하기

버튼의 id 가 sortAsc 인 요소를 getElementById 를 이용하여 불러온다.

-> const sortAsc = document.getElementById('sortAsc')

정렬 대상을 불러온다.

-> const ul = document.querySelector('ul')

CSS선택자로 모든 요소를 NodeList 형태로 불러온다.

-> const liList = document.querySelectorAll('ul > li')

NodeList타입에는 sort()가 없기 때문에, 배열로 바꿔준다.
-> const liArray = Array.from(liList)

정렬을 수행할 대상들은 <li> 이고, 그 기준은 <li>의 내부 텍스트이다.
-> const resultArray = liArray.toSorted((a, b) => { return a.innerText > b.innerText ? 1 : -1 })

정렬을 수행했지만 스크립트내부에서만 적용되기 때문에

문서에 반영하기 위해 appendChild를 수행한다.

기존에 있는 요소이므로, 추가하지 않고 자리만 바꾼다.

-> resultArray.forEach(e => ul.appendChild(e))

<ul>
        <li>유빈</li>
        <li>민정</li>
        <li>진호</li>
        <li>재영</li>
        <li>민서</li>
        <li>형주</li>
    </ul>
    <div>
        <button id="sortAsc">오름차순 정렬</button>
    </div>

    <script>
        const sortAsc = document.getElementById('sortAsc')

        const ul = document.querySelector('ul')

        sortAsc.onclick = function() {
            const liList = document.querySelectorAll('ul > li')

            const liArray = Array.from(liList)

            const resultArray = liArray.toSorted((a, b) => {
                return a.innerText > b.innerText ? 1 : -1
            })

            console.log(resultArray)

            resultArray.forEach(e => ul.appendChild(e)) 
        }
    </script>
    
</body>
</html>

아직 자바스크립트는 익숙치 않은 언어이지만 나름 재미도 있고, 별로 어렵게 느껴지지 않아서 다행이다.

[Spring] 매장 포스기 시스템

Sponge_ — Wed, 9 Oct 2024 22:25:23 +0900

매장 같은 곳에서 사용하는 포스기들의 시스템을 실제로 비슷하게 구현하여 보자.

1. 테이블로 구성해야 하는 항목

= CRUD 작업 대상

1. 상품 테이블 (Product)

2. 매출 테이블 (Sales)

2. 각 테이블에 대한 스키마 구성

상품 테이블

상품번호 (primary key)	상품명	이미지	단가	수량
NUMBER	VARCHAR2	VARCHAR2	NUMBER	NUMBER (default 0)

매출테이블

매출번호 (primary key)	날짜	상품번호 (foreign key)	판매수량
NUMBER	DATE	NUMBER	NUMBER

3. 각 테이블에 대해서 구현할 CRUD 기능

상품테이블

기능	설명
insert	상품 등록
select	상품 조회 (전체 목록 / 단일 조회) -- 2가지
update	수량 변경
delete	상품 삭제

매출테이블

기능	설명
insert	매출 등록
select	매출 목록
update	매출 취소 (반품)

header.jsp

모든 페이지에서 사용할 태그들을 선언해둔다.

이번에는 home 에 링크들을 생성해둘 것이기 때문에

header.jsp 에는 자주 사용하는 스타일과 태그만 작성해 줄 것이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
	.frame {
		width: 900px;
		justify-content: center;
	}

	.flex {
		display: flex;
	}
	
	.bold {
		font-weight: bold;
	}

</style>

</head>
<body>

home.jsp

<%@ include file="header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<h1>상품 매출 관리</h1>
<hr>

<h3>오늘은 <fmt:formatDate value="${today }" pattern="yyyy년  MM월 dd일" /> 입니다</h3>


<ul>
	<li><a href="${cpath }/product/list">상품 목록</a>
	<li><a href="${cpath }/product/add">상품 추가</a>
	<li><a href="${cpath }/sales/list">매출 목록</a>

</ul>

</body>
</html>

ProductDTO

import org.springframework.web.multipart.MultipartFile;

public class ProductDTO {
	
//	PRODUCT 테이블
	
//	이름    	널?         유형             
//	----- -------- -------------- 
//	IDX   NOT NULL 	NUMBER         
//	NAME  NOT NULL 	VARCHAR2(500)  
//	IMG            	VARCHAR2(1000) 
//	PRICE NOT NULL 	NUMBER         
//	COUNT          	NUMBER 
//	SAVE_IMG				
	
	private int idx;
	private String name;
	private String img;
	private int price;
	private int count;
	
	//	UUID로 변경한 값 
	private String save_img;
	
	//	파일 업로드
	private MultipartFile upload;
	
	public String getSave_img() {
		return save_img;
	}
	public void setSave_img(String save_img) {
		this.save_img = save_img;
	}

	public MultipartFile getUpload() {
		return upload;
	}
	public void setUpload(MultipartFile upload) {
		this.upload = upload;
	}
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getImg() {
		return img;
	}
	public void setImg(String img) {
		this.img = img;
	}
	public int getPrice() {
		return price;
	}
	public void setPrice(int price) {
		this.price = price;
	}
	public int getCount() {
		return count;
	}
	public void setCount(int count) {
		this.count = count;
	}

}

SalesDTO

Join 사용해서 다른 테이블에 있는 필드의 내용을 가져왔을때에는
결과물의 필드명과 일치해야함으로, DTO에만 필드를 하나 추가하자.
-> private String s_name;

import java.sql.Date;

public class SalesDTO {

	
//	Sales 테이블
	
//	이름             널?      유형     
//	------------- -------- ------ 
//	S_IDX         NOT NULL NUMBER 
//	S_DATE                 DATE   
//	S_PRODUCT_IDX          NUMBER 
//	S_COUNT       NOT NULL NUMBER 
//	S_DELETE               NUMBER 
	
	
	private int s_idx;
	private Date s_date;
	private int s_product_idx;
	private int s_count;
	private int s_delete;
	
    // join 사용시에 쓰일 s_name (상품명)
	private String s_name;
	

	public String getS_name() {
		return s_name;
	}
	public void setS_name(String s_name) {
		this.s_name = s_name;
	}
	public int getS_idx() {
		return s_idx;
	}
	public void setS_idx(int s_idx) {
		this.s_idx = s_idx;
	}
	public Date getS_date() {
		return s_date;
	}
	public void setS_date(Date s_date) {
		this.s_date = s_date;
	}
	public int getS_product_idx() {
		return s_product_idx;
	}
	public void setS_product_idx(int s_product_idx) {
		this.s_product_idx = s_product_idx;
	}
	public int getS_count() {
		return s_count;
	}
	public void setS_count(int s_count) {
		this.s_count = s_count;
	}
	public int getS_delete() {
		return s_delete;
	}
	public void setS_delete(int s_delete) {
		this.s_delete = s_delete;
	}
	
}

ProductController

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.itbank.model.ProductDTO;
import com.itbank.service.ProductService;

@Controller
@RequestMapping("/product")
public class ProductController {

	@Autowired private ProductService service;
	
	@GetMapping("/list")
	public ModelAndView list() {
		
		ModelAndView mav = new ModelAndView("/product/list");
		List<ProductDTO> list = service.getList();
		
		mav.addObject("list", list);
		
		return mav;
		
	}
	
	@GetMapping("/add")
	public void add() {}
	
	
	@PostMapping("/add")
	public String product_add(ProductDTO dto) {
		
		int row = service.add(dto);
		
		System.out.println(row != 0 ? "상품 등록 성공" : "상품 등록 실패");
		
		return "redirect:/product/list";
	}
	
	
	@GetMapping("/update/{idx}")
	public ModelAndView update(@PathVariable("idx") int idx) {
		ModelAndView mav = new ModelAndView("/product/update");
		
		ProductDTO dto = service.getIdx(idx);
		
		mav.addObject("dto", dto);
		
		return mav;
	}
	
	@PostMapping("/update/{idx}")
	public String update(ProductDTO dto) {
		
		int row = service.update(dto);
		
		System.out.println(row != 0 ? "수정 성공" : "수정 실패");
		
		return "redirect:/product/list";
	}
	
	@GetMapping("/delete/{idx}")
	public String delete(@PathVariable("idx") int idx) {
		
		int row = service.delete(idx);
		
		System.out.println(row != 0 ? "삭제 성공" : "삭제 실패");
		
		return "redirect:/product/list";
		
	}

	
}

ProductService

import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.UUID;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.itbank.model.ProductDTO;
import com.itbank.repository.ProductDAO;

@Service
public class ProductService {

	@Autowired private ProductDAO dao;
	
	private String saveDirectory = "C:\\upload";
	
	public ProductService() {
		
		File dir = new File(saveDirectory);
		if(dir.exists() == false) {
			dir.mkdirs();
		}
	}
	
	public List<ProductDTO> getList() {
		return dao.selectList();
	}

	public int add(ProductDTO dto) {
		String originalFileName1 = dto.getUpload().getOriginalFilename();
		
		//	파일 확장자만 출력하기 		마지막 .의 위치부터 끝까지 잘라냄 
		String ext1 = originalFileName1.substring(originalFileName1.lastIndexOf("."));
		
		//	새로 저장될 이름은 중복되지 않도록 UUID 를 사용
		String storedFileName1 = UUID.randomUUID().toString().replace("-", "");
		storedFileName1 += ext1;
		
		File f1 = new File(saveDirectory, storedFileName1);
		
		try {
			dto.getUpload().transferTo(f1);		
			
		} catch (IllegalStateException | IOException e) {
			e.printStackTrace();
		}
		
		dto.setImg(originalFileName1);
		dto.setSave_img(storedFileName1);

		
		return dao.insertFile(dto);
	}

	public int update(ProductDTO dto) {
		return dao.update(dto);
	}

	public ProductDTO getIdx(int idx) {
		return dao.SelectOne(idx);
	}

	public int delete(int idx) {
		return dao.delete(idx);
	}
}

ProductDAO

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.itbank.model.ProductDTO;

public interface ProductDAO {

	
	@Select("select * from product1 order by idx desc")
	List<ProductDTO> selectList();

	@Insert("insert into product1(name, img, price, save_img) values(#{name}, #{img}, #{price}, #{save_img})")
	int insertFile(ProductDTO dto);

	@Update("update product1 set count = #{count} where idx = #{idx}")
	int update(ProductDTO dto);

	@Select("select * from product1 where idx = #{idx}")
	ProductDTO SelectOne(int idx);

	@Delete("delete from product1 where idx = #{idx}")
	int delete(int idx);

}

list.jsp

전체 상품 목록

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>상품 목록</h1>

<div class="frame productList">
<c:forEach var="dto" items="${list }">
	<div class="flex box">
		<img src="${cpath }/upload/${dto.save_img}" height="250px">
		<p class="bold">${dto.name }</p>
		<p class="sp">${dto.price }</p>
		<p class="sp">${dto.count }</p>
		<p><a href="${cpath }/product/update/${dto.idx}"><button>수량 변경</button></a>
		<p><a href="${cpath }/product/delete/${dto.idx}"><button>삭제</button></a>
		
	</div>
</c:forEach>
</div>


</body>
</html>

코드 풀이

ProductController 를 보면, ModelAndView 객체가 list 라는 이름으로 저장됨.

-> mav.addObject("list", list)

이때, list 는 ProductService 와 ProductDAO 를 거쳐서 sql 문을 만나게 되고, 그의 결과가 list로 넘어온다.

-> select * from product1 order by idx desc

list 라는 mav 객체는 product/list.jsp 에서 EL태그를 이용하여 사용할 수 있으며,

이를 반복문으로 출력한다면 모든 목록이 나오게 된다.

-> <c:forEach var="dto" items="${list }">

add.jsp

상품 등록

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>상품 추가</h1>
<hr>

<form method="POST" enctype="multipart/form-data">
	<p><input type="text" name="name" placeholder="상품명" required autofocus></p>
	<p><input type="file" name="upload"></p>
	<p><input type="number" name="price" placeholder="가격" required></p>
	<p><input type="submit" value="상품 등록"></p>

</form>

</body>
</html>

코드 풀이

form 을 제출하면, method POST로 인하여, ProductController 에 있는 PostMapping이 실행된다.

-> @PostMapping("/add")

이미지도 추가했다면, ProductService 에 있는 add() 함수에 의하여, 원본 파일명의 확장자만 떼어내서 새로운 변수에 저장하고,

-> String ext1 = originalFileName1.substring(originalFileName1.lastIndexOf("."));

UUID 를 이용한 새로운 파일명을 만들어내서 확장자를 더한다. (파일명 중복을 피하기 위함)

-> String storedFileName1 = UUID.randomUUID().toString().replace("-", "");
storedFileName1 += ext1;

미리 선언한 saveDirectory 를 이용하여, 해당 디렉토리에 바뀐 파일명으로 생성한 이미지를 저장한다.

-> File f1 = new File(saveDirectory, storedFileName1);

dto.getUpload().transferTo(f1);

DB의 내용도 변경하기 위해 setter 를 이용한다.

(DB를 통해서 원본파일명과 바뀐 파일명을 알수 있음)

-> dto.setImg(originalFileName1);
dto.setSave_img(storedFileName1);

ProductDAO 를 거쳐서 sql문을 통하여, insert 가 이루어진다.

-> @Insert("insert into product1(name, img, price, save_img) values(#{name}, #{img}, #{price}, #{save_img})")

insert 의 결과를 콘솔창을 통해 확인할 수 있으며,

-> System.out.println(row != 0 ? "상품 등록 성공" : "상품 등록 실패");

성공여부와 관계없이 redirect 를 이용하여 list 페이지로 이동된다.

-> return "redirect:/product/list";

update.jsp

상품 수량 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>상품 수량 수정</h1>
<hr>

<form method="POST">
	<p><input type="text" name="name" value="${dto.name }"></p>
	<p><input type="number" min="0" max="500" step="1" name="count" value="${dto.count }"></p>
	<p><input type="submit" value="수정"></p>
	<input type="hidden" name="idx" value="${dto.idx }">

</form>

</body>
</html>

코드 풀이

list 에서 수량변경 버튼을 누르면 해당 상품의 idx 를 포함한채로 update.jsp 로 넘어오게 된다.

-> @GetMapping("/update/{idx}")

form을 제출하면 ProductController 에 있는 PostMapping 이 실행된다.

-> @PostMapping("/update/{idx}")

ProductDAO 를 거쳐서 sql문이 수행된다.

-> @Update("update product1 set count = #{count} where idx = #{idx}")

sql 문 실행결과를 콘솔창에 띄우고,

-> System.out.println(row != 0 ? "수정 성공" : "수정 실패");

실행결과와는 상관없이 redirect 를 이용하여 list 페이지로 이동.
-> return "redirect:/product/list";

delete.jsp

상품 삭제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

사용자에게 보여줄 필요가 없기 때문에 아무 코드도 존재하지 않는다.

코드 풀이

list.jsp 에서 상품삭제 버튼을 누르면 상품의 idx 와 함께 delete.jsp로 넘어온다.

-> <p><a href="${cpath }/product/delete/${dto.idx}"><button>삭제</button></a>

Controller , Service , DAO 를 거쳐서 sql 문을 만난다.

-> @Delete("delete from product1 where idx = #{idx}")

sql문의 결과를 콘솔창에 띄운다.

-> System.out.println(row != 0 ? "삭제 성공" : "삭제 실패");

결과와는 상관없이 redirect 를 이용하여 list 로 이동.
-> return "redirect:/product/list";

글을 작성하며 다시 코드들을 살펴보니 몇 가지 수정하고 싶은 부분이 존재했다.

먼저, delete.jsp에서 아무 코드도 작성하지 않고 그냥 둘거면

차라리 alert창이라도 띄우게 해서 사용자가 이에 대한 요청을 확인할 수 있게 했으면 싶었다.

그리고 데이터 수정, 추가, 삭제 후 결과와 상관없이 바로 list.jsp로 이동 시킨 것도 조금 아쉬웠다.

사용자의 관점으로 봤을때는 이런 사소한 부분이 조금 불편하게 느껴질 것 같았고, 다음에는 좀 더

이러한 사소한 부분도 사용자의 관점에서 볼 수 있도록 신경써야 할 것 같다.

[Spring] RestController

Sponge_ — Wed, 9 Oct 2024 22:04:47 +0900

json과 ajax가 무엇인지 알아보자. 또한, @RestController를 사용해 보자.

JSON : JavaScript Object Notation

자바스크립트 토대로 개발되었으며, 여러 프로그래밍언어에도 사용할 수 있는 독립형 언어이다.

데이터 객체의 형태는 속성 - 값 쌍 형태.

주로, 웹 브라우저와 웹 서버간 비동기 통신, 데이터 교환 등에 사용된다.

home.jsp

<style>
	table {
		border : 2px solid black;
		border-collapse: collapse;
	}
	td {
		padding: 5px 10px;
		border: 1px solid grey;
	}
</style>
</head>
<body>

<h1>day10</h1>

<hr>


<ul>
	<li><a href="ex01">ex01 - ajax(1) 정수반환</a></li>
	<li><a href="ex02">ex02 - ajax(2) 문자열 반환</a></li>
	<li><a href="ex03">ex03 - ajax(3) map 반환</a></li>
	<li><a href="ex04">ex04 - ajax(4) List&lt; DTO 반환(DB 이용 O)</a></li>
</ul>



<div id="root"></div>

<script>
	let url = "https://apis.data.go.kr/6260000/BusanRainfalldepthInfoService/getRainfallInfo";
	
	const param = {
			serviceKey : 'fPywZzdX80yEsvW3nt%2F4DyY9NZVrqZDUOFBN5Kuw7UkhbMsuXNXY%2FzsT4iAZm6Z1ILayJYsElZPCr4JWUooiQg%3D%3D',
			pageNo : '1',
			numOfRows : '25',
			resultType: 'json',
	}
	
	url += '?'
	
	for(let key in param) {
		url += key + '=' + param[key] + '&'
	}
	
	
	fetch(url)				//	지정한 요청 주소로 보낸다
		.then(resp => resp.json())	//	요청 이후 돌아오는 응답을 JSON 객체로 변환한다
		.then(json => {			//	변환된 JSON 객체를 이용하여, { } 블럭 내부 코드를 수행한다 
		//	console.log(json.getRainfallInfo.body.items.item)
	
		const arr = json.getRainfallInfo.body.items.item.map(e => {
			const ob = {}
			ob.clientName = e.clientName
			ob.level6 = e.level6
			return ob
		})
		//	console.log(arr)
		const tr1 = document.createElement('tr')
		const tr2 = document.createElement('tr')
	
		
		for(let i in arr) {
			const td1 = document.createElement('td')
			td1.innerText = arr[i].clientName
			tr1.appendChild(td1)
			
			const td2 = document.createElement('td')
			td2.innerText = arr[i].level6
			tr2.appendChild(td2)
		}
		
		const table = document.createElement('table')
		table.appendChild(tr1)
		table.appendChild(tr2)
		
		const root = document.getElementById('root')
		root.appendChild(table)
		
	})

</script>
</body>
</html>

Ex01Controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class Ex01Controller {

	@GetMapping("/ex01")
	public void ex01() {}

}

ex01.jsp

: 정수 덧셈의 결과를 보여 줌.

이때, 사용된 url 은 ex01Ajax 를 이용하는데, 이것은 AjaxController 에 GetMapping 으로 선언되어있다.

-> const url = '${cpath}/ex01Ajax?n1=' + n1 + '&n2=' + n2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>ex01 - 두 정수의 덧셈</h1>
<hr>

<p>
	<input type="number" name="n1" min="0" max="20" placeholder="n1">
	+
	<input type="number" name="n2" min="0" max="20" placeholder="n2">
	<button id="btn">=</button>
	<span id="result"></span>
</p>

<script>
	const btn = document.getElementById('btn')
	const clickHandler = function() {
		const n1 = document.querySelector('input[name="n1"]').value
		const n2 = document.querySelector('input[name="n2"]').value
		const url = '${cpath}/ex01Ajax?n1=' + n1 + '&n2=' + n2
				
		fetch(url)
			.then(resp => resp.text())
			.then(text => {
				//	실행할 내용 (문서 요소에 응답 내용을 반환한다)
				const result = document.getElementById('result')
				result.innerText = text
			})
	}
	btn.onclick = clickHandler

</script>

</body>
</html>

AjaxController

: @RestController 이용

Ajax 이용한 코드들은 @RestController 선언한 Controller에 모아두어야 한다.

@RestController
: 문서 내용을 응답하지 않고, 순수 데이터를 응답하기 위한 AJAX 전용 컨트롤러
모든 함수에 자동으로 @ResponseBody 가 적용된다 (포워드 및 리다이렉트가 기본값이 아님)
포워딩을 하지 않는다. 요청 받은 그대로를 전달한다.

import java.util.HashMap;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.itbank.model.MemberDTO;
import com.itbank.service.MemberService;




@RestController
public class AjaxController {

	
	@Autowired private MemberService service;
	
	
	//	AJAX 요청에 대응하는 컨트롤러 함수는 기본 자료형 배열, 리스트, 맵, DTO 등 여러타입을 반환할 수 있다
	//	반환값이 viewName 이 아닌, 응답 그 자체임을 명시해야한다 
	@GetMapping("/ex01Ajax")
	@ResponseBody
	public int ex01Ajax(int n1, int n2) {
		return n1 + n2;
	}
	
	
	
	@PostMapping("/ex03Ajax")
	@ResponseBody		//	@ResponseBody : 반환하는 내용 그 자체가 응답이다
	public HashMap<String, Object> ex03Ajax(@RequestBody HashMap<String, Object> param) {	//	@RequestBody : 요청에 담긴 내용이 파라미터로 그대로 사용
																							//	즉, 요청 그 자체가 파라미터이다
		System.out.println("userid : " + param.get("userid"));
		HashMap<String, Object> map = new HashMap<>();
		int count = service.checkDuplicate(param);
		map.put("count", count);
		map.put("msg", count != 0 ? "이미 사용중인 아이디 입니다" : "사용가능한 아이디 입니다");
		
//		String result = objectMapper.writeValueAsString(map);
//		원래는, 자바 객체를 JSON 규칙에 맞춰 문자열로 변환한 후에 반환해야하지만,
//		ObjectMapper 가 자동으로 변환을 처리함 
		
		return map;
	}
	
	
	@GetMapping("/ex04Ajax")
	public List<MemberDTO> ex04Ajax() {
		return service.getMemberList();
	}
	
}

Ex03Controller

objectMapper

: 얘가 자동으로 mapping해서 변환 해주고 있다 생각하면 됨 ( jackson-databind )

objectMapper 를 이용하면 JSON 데이터를 java객체로 변환하거나

java 객체를 JSON 형식으로 변환할 수 있다.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import com.fasterxml.jackson.databind.ObjectMapper;

@Controller
public class Ex03Controller {

	private ObjectMapper objectMapper = new ObjectMapper();		
    
	@GetMapping("/ex03")
	public void ex03() {}
}

ex03.jsp

: 회원가입 중복체크

유의할 점

자바스크립트에서는 -(대시) 를 사용하지 않기 때문에 따옴표('')로 묶어서 처리 한다.

-> 'Content-Type' : 'application/json; charset=utf-8'

[ result 요소 ]

userid가 중복이 아니라면, 파란색 글자로 결과표시

userid 가 중복이라면, 빨강색 글자로 결과표시

AjaxController 에 msg 로 결과 텍스트
-> map.put("msg", count != 0 ? "이미 사용중인 아이디 입니다" : "사용가능한 아이디 입니다");

즉, 중복이 아니라면 '사용가능한 아이디 입니다' (파란색 글씨로)

중복이라면 '이미 사용중인 아이디 입니다' (빨간색 글씨로)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>ex03 - 회원 중복 가입 체크</h1>
<hr>

<p>
	<input type="text" name="userid" placeholder="ID" required autofocus>
	<button id="btn">중복 확인</button>
</p>

<h3 id="result"></h3>
<!-- 주소창에 내용이 노출되지 않는다는 이점  -->
<script>

	//	1) 이벤트의 대상이 될 요소를 불러온다
	const btn = document.getElementById('btn')

	//	2) 이벤트 발생 시 실행할 함수를 정의한다
	const clickHandler = function() {
		const userid = document.querySelector('input[name="userid"]').value
		const url = '${cpath}/ex03Ajax'		//	주소지정
		const opt = {				//	요청의 옵션들을 지정
				method : 'POST',	//	옵션 1) 요청 메서드는 POST
				
                //	옵션 2) POST의 전달 내용은 userid 를 포함하는 객체를 JSON 문자열 형식으로 전달
				body : JSON.stringify({	
					userid: userid
				}),					
				
                //	옵션 3) 헤더, 전송하는 데이터의 형식 및 인코딩을 지정
				headers : {				
					'Content-Type' : 'application/json; charset=utf-8'		
				},
		}
		
		fetch(url, opt)		//	요청 주소와 옵션을 함께 전달한다
			.then(resp => resp.json())
			.then(json => {
				console.log(json)
				const result = document.getElementById('result')
				result.innerText = json.msg
				if(json.count == 0) {
					result.style.color = 'blue'
				}
				else {
					result.style.color = 'red'
				}
			})
	}
	
	//	3) 이벤트 대상의 특정 상황 (클릭, 키, 스크롤 등)을 지정하여 이벤트 함수를 연결
	btn.onclick = clickHandler
</script>

</body>
</html>

Ex04Controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class Ex04Controller {

	@GetMapping("/ex04")
	public void ex04() {}
	
}

ex04.jsp

: 회원목록

DOM (Document Object Model)

: 문서의 내용을 하나하나 객체화하여, 객체의 모델관계로 해석하는 구조

HTML 문서 내부의 태그를 '객체'로 취급하여, 여러 객체가 'Tree' 구조로 나열되어 있는 관계로 해석한다.
문서를 구성하는 각 요소(element) 혹은 객체(object) 를 DOM 이라고 부르기도 함.

-> document.addEventListener('DOMContentLoaded', loadHandler)

window.onload 와 loadHandler는 역할이 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cpath" value="${pageContext.request.contextPath }" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>ex04 - 회원 목록</h1>
<hr>

<div id="root"></div>

<script>
	function loadHandler() {
		const root = document.getElementById('root')		
		const url = '${cpath}/ex04Ajax'

		fetch(url) 
			.then(resp => resp.json()) 
			.then(json => {
				
				const arr = json
				let tag = '<table border="1" cellpadding="10" cellspacing="0">'
				for(let i = 0; i < arr.length; i++) {	//	i : 0, 1, 2, 3 ...
					const dto = arr[i]
					
					tag += '<tr>'
					for(let key in dto) {
						if(key != 'userpw') {
						tag += '<td>' + dto[key] + '</td>'
						}
					}
					tag += '</tr>'
				}
				tag += '</table>'
				root.innerHTML = tag
			})
	}
	
	document.addEventListener('DOMContentLoaded', loadHandler)
	//	window.onload == loadHandler


</script>

</body>
</html>

RestController와 그냥 일반적으로 쓰는 Controller를 나누는 기준은 그냥 단순히

Ajax를 처리하는 부분만 RestController에 작성해주면 된다.

하지만 내가 아직 정확히 이해가 되지 않는 부분은 @ResponseBody이다.

ResponseBody 어노테이션을 사용하면 http요청 body를 자바 객체로 전달 받을 수 있다는데,

이 부분이 정확하게 잘 와닿지 않는다.

이것도 꾸준히 사용해보면서 공부를 더 해봐야 할 것 같다.

[Spring] 설문 투표 및 결과 보기

Sponge_ — Wed, 9 Oct 2024 18:50:55 +0900

이번에는 투표를 할 수 있는 설문지를 만들어 보자.

SurveyDTO

import org.springframework.web.multipart.MultipartFile;

// 	TABLE : SURVEY
//	IDX     NOT NULL NUMBER        
//	TITLE   NOT NULL VARCHAR2(500) 
//	WRITER           VARCHAR2(500) 
//	OPTION1 NOT NULL VARCHAR2(500) 
//	OPTION2 NOT NULL VARCHAR2(500) 
//	IMAGE1  NOT NULL VARCHAR2(500) 
//	IMAGE2  NOT NULL VARCHAR2(500) 

public class SurveyDTO {

	private int idx;
	private String title;
	private String writer;
	private String option1;
	private String option2;
	private String image1;
	private String image2;
	
	private MultipartFile upload1;
	private MultipartFile upload2;
	
	private int responseCount;	// 설문에 참여한 인원의 수
	private int choice1Count;
	private int choice2Count;
	private double choice1Rate;
	private double choice2Rate;
	
	public double getChoice1Rate() {
		return choice1Rate;
	}
	public void setChoice1Rate(double choice1Rate) {
		this.choice1Rate = choice1Rate;
	}
	public double getChoice2Rate() {
		return choice2Rate;
	}
	public void setChoice2Rate(double choice2Rate) {
		this.choice2Rate = choice2Rate;
	}
	public int getChoice1Count() {
		return choice1Count;
	}
	public void setChoice1Count(int choice1Count) {
		this.choice1Count = choice1Count;
	}
	public int getChoice2Count() {
		return choice2Count;
	}
	public void setChoice2Count(int choice2Count) {
		this.choice2Count = choice2Count;
	}
	public int getIdx() {
		return idx;
	}
	public void setIdx(int idx) {
		this.idx = idx;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getWriter() {
		return writer;
	}
	public void setWriter(String writer) {
		this.writer = writer;
	}
	public String getOption1() {
		return option1;
	}
	public void setOption1(String option1) {
		this.option1 = option1;
	}
	public String getOption2() {
		return option2;
	}
	public void setOption2(String option2) {
		this.option2 = option2;
	}
	public String getImage1() {
		return image1;
	}
	public void setImage1(String image1) {
		this.image1 = image1;
	}
	public String getImage2() {
		return image2;
	}
	public void setImage2(String image2) {
		this.image2 = image2;
	}
	public MultipartFile getUpload1() {
		return upload1;
	}
	public void setUpload1(MultipartFile upload1) {
		this.upload1 = upload1;
	}
	public MultipartFile getUpload2() {
		return upload2;
	}
	public void setUpload2(MultipartFile upload2) {
		this.upload2 = upload2;
	}
	public int getResponseCount() {
		return responseCount;
	}
	public void setResponseCount(int responseCount) {
		this.responseCount = responseCount;
	}

}

SurveyController

@RequestMapping (@GetMapping, @PostMapping)
: 특정 주소, 특정 메서드로 요청을 받으면 자동으로 실행되는 이벤트 함수의 성격을 가진다.

@ExceptionHandler
: 예외가 발생하면 @ExceptionHandler 어노테이션이 붙은 함수가 자동으로 실행된다.

이때, 발생하는 예외의 타입에 따라 서로 다른 함수를 실행할 수 있다.

컨트롤러 내부에서도 ExceptionHandler 를 작성할 수 있지만
컨트롤러는 본래, 요청에 따른 처리를 작성하는 클래스이므로,
별도의 클래스를 만들어서 예외만 전문적으로 처리하는 스프링 빈을 작성할 수도 있다.

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.itbank.model.ChoiceDTO;
import com.itbank.model.SurveyDTO;
import com.itbank.service.SurveyService;

@Controller
@RequestMapping("/survey")
public class SurveyController {
	
	@Autowired private SurveyService service;
	
	@ExceptionHandler(DuplicateKeyException.class)
	public ModelAndView dupKey() {
		ModelAndView mav = new ModelAndView("alert");
		mav.addObject("msg", "이미 참여한 투표입니다");
		return mav;
	}

	@GetMapping("/add")
	public void add() {}
	
	@PostMapping("/add")
	public String add(SurveyDTO dto) {
		int row = service.add(dto);
		System.out.println(row != 0 ? "등록 성공" : "등록 실패");
		return "redirect:/";
	}
	
	@GetMapping("/list")
	public ModelAndView list() {
		ModelAndView mav = new ModelAndView();
		List<SurveyDTO> list = service.getList();
		mav.addObject("list", list);
		return mav;
	}
	
	@GetMapping("/vote/{idx}")
	public ModelAndView view(@PathVariable("idx") int idx) {
		ModelAndView mav = new ModelAndView("/survey/vote");
		SurveyDTO dto = service.getSurvey(idx);
		mav.addObject("dto", dto);
		return mav;
	}
	
	@PostMapping("/vote/{idx}")
	public String view(ChoiceDTO dto) {
		int row = service.addChoice(dto);
		System.out.println(row != 0 ? "응답 성공" : "응답 실패");
		return "redirect:/survey/result/{idx}";
	}
	
	@GetMapping("/result/{idx}")
	public ModelAndView result(@PathVariable("idx") int idx) {
		ModelAndView mav = new ModelAndView("/survey/result");
		SurveyDTO dto = service.getResult(idx);
		mav.addObject("dto", dto);
		return mav;
	}
	
}

ServeyService

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.itbank.component.FileComponent;
import com.itbank.model.ChoiceDTO;
import com.itbank.model.SurveyDTO;
import com.itbank.repository.SurveyDAO;

@Service
public class SurveyService {
	
	@Autowired private SurveyDAO dao;
	@Autowired private FileComponent fileComponent;

	public int add(SurveyDTO dto) {
		String image1 = fileComponent.upload(dto.getUpload1());
		String image2 = fileComponent.upload(dto.getUpload2());
		dto.setImage1(image1);
		dto.setImage2(image2);
		return dao.insert(dto);
	}

	public List<SurveyDTO> getList() {
		return dao.selectList();
	}

	public SurveyDTO getSurvey(int idx) {
		return dao.selectOne(idx);
	}

	public int addChoice(ChoiceDTO dto) {
		return dao.insertChoice(dto);
	}

	public SurveyDTO getResult(int idx) {
		return dao.selectResult(idx);
	}

}

SurveyDAO

import java.util.List;

import com.itbank.model.ChoiceDTO;
import com.itbank.model.SurveyDTO;

public interface SurveyDAO {

	int insert(SurveyDTO dto);

	List<SurveyDTO> selectList();

	SurveyDTO selectOne(int idx);

	int insertChoice(ChoiceDTO dto);

	SurveyDTO selectResult(int idx);

}

survey-mapper.xml

SurveyDAO의 상세 쿼리문

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC 
	"-//mybatis.org//DTD Mapper 3.0//EN" 
	"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
	
<mapper namespace="com.itbank.repository.SurveyDAO">
	
	<insert id="insert" parameterType="survey">
		insert into survey (writer, title, option1, option2, image1, image2)
			values (
				#{writer},
				#{title},
				#{option1},
				#{option2},
				#{image1},
				#{image2}
			)
	</insert>
	
	<select id="selectList" resultType="survey">
		select 
		    survey.*,
		    (select count(*) from survey_choice where survey_idx = survey.idx) as responseCount
		        from survey order by survey.idx desc
	</select>
	
	<select id="selectOne" parameterType="int" resultType="survey">
		select * from survey
			where
				idx = #{idx}
	</select>
	
	<insert id="insertChoice" parameterType="choice">
		insert into survey_choice (writer, survey_idx, choice) 
			values (#{writer}, #{survey_idx}, #{choice})
	</insert>
	
	<select id="selectResult" parameterType="int" resultType="survey">
		select 
		    A.*, 
		    trunc(choice1Count * 100 / responseCount, 2) as choice1Rate, 
		    trunc(choice2Count * 100 / responseCount, 2) as choice2Rate
		    from (
		    select 
		    	S.*,
		        (select count(*) from survey_choice where survey_idx = #{idx}) as responseCount,
		        (select count(*) from survey_choice where survey_idx = #{idx} and choice = 1) as choice1Count,    
		        (select count(*) from survey_choice where survey_idx = #{idx} and choice = 2) as choice2Count
		            from survey S
		            where S.idx = #{idx}
		    ) A
	</select>
	
</mapper>

add.jsp

설문조사 추가 , FileComponent 를 이용하여 이미지 업로드도 가능하도록 했다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<style>
	input[type="text"] {
		all: unset;
		border-bottom: 1px solid #dadada;
		padding: 10px 0;
		margin: 10px auto;
	}
	input[name="title"] {
		font-size: 24px;	
		width: 500px;
	}
	div.flex {
		display: flex;
		justify-content: space-around;
		width: 800px;
		margin: 20px auto;
	}
	form div.flex > div {
		box-shadow: 5px 5px 5px grey;
		background-color: #eee;
		padding: 20px;
	}
	form > *:not(.flex) {
		display: flex;
		justify-content: center;
	} 
	
</style>
<h3>추가</h3>

<form method="POST" enctype="multipart/form-data">
	<div><input type="text" name="title" placeholder="설문 제목" required autofocus></div>
	<div class="flex">
		<div>
			<div><input type="file" name="upload1" required></div>
			<div><input type="text" name="option1" placeholder="문항1" required></div>
		</div>
		<div>
			<div><input type="file" name="upload2" required></div>
			<div><input type="text" name="option2" placeholder="문항2" required></div>
		</div>
	</div>
	<input type="hidden" name="writer" value="${login.userid }" readonly>
	<p><input type="submit"></p>
</form>

</body>
</html>

list.jsp

설문 리스트

<style>
	table.surveyList {
		border: 1px solid black;
		border-collapse: collapse;
		width: 800px;
		margin: 20px auto;
	}
	td, th {
		padding: 5px 10px;
	}
	tr {
		border-bottom: 1px solid grey;
	}
	table tr:first-child {
		background-color: #dadada;
	}
	.sb {
		display: flex;
		justify-content: space-between;
	}
</style>

<h3>설문 목록</h3>

<table class="surveyList">
	<tr>
		<th>번호</th>
		<th>제목</th>
		<th>작성자</th>
		<th>참여인원</th>
	</tr>
	<c:forEach var="dto" items="${list }">
	<tr>
		<td>${dto.idx }</td>
		<td>
			<div class="sb">
				<div>${dto.title }</div>
				<div>
					<a href="${cpath }/survey/vote/${dto.idx}"><button>설문참여</button></a>
					<a href="${cpath }/survey/result/${dto.idx}"><button>결과보기</button></a>
				</div>
			</div>
		</td>
		<td>${dto.writer }</td>
		<td>${dto.responseCount }</td>
	</tr>
	</c:forEach>
</table>

</body>
</html>

vote.jsp

설문 참여

input radio 와 value 를 이용하여, choice 값을 선택할 수 있도록 한다.

설문 참여를 하면, 결과값이 insert 되어야한다.

<style>
	div.flex {
		display: flex;
		justify-content: space-around;
		width: 800px;
		margin: 20px auto;
	}
	form div.flex > div {
		box-shadow: 5px 5px 5px grey;
		background-color: #eee;
		padding: 20px;
		border: 3px solid transparent; 
	}
	form > *:not(.flex) {
		display: flex;
		justify-content: center;
	} 
	form div.flex > div.selected {
		border: 3px solid lime; 
	}
	input[type="radio"] {
		display: none;
	}
</style>

<h3>${dto.title }</h3>

<form method="POST">
	<input type="hidden" name="writer" value="${login.userid }">
	<input type="hidden" name="survey_idx" value="${dto.idx }">
	<div class="flex">
		<div>
			<h4>${dto.option1 }</h4>
			<label>
				<img src="${cpath }/upload/${dto.image1}" height="200">
				<input type="radio" name="choice" value="1">
			</label>
		</div>
		<div>
			<h4>${dto.option2 }</h4>
			<label>
				<img src="${cpath }/upload/${dto.image2}" height="200">
				<input type="radio" name="choice" value="2">
			</label>
		</div>
	</div>
	<p align="center"><input type="submit"></p>
</form>

<script>
	const itemList = document.querySelectorAll('.flex > div')

	itemList.forEach(item => item.onclick = function() {
		itemList.forEach(e => e.classList.remove('selected'))
		item.classList.add('selected')
	})
</script>

</body>
</html>

result.jsp

설문 결과

[ choiceCount 구하는 쿼리문 ]

-> select count(*) from survey_choice where survey_idx = #{idx} and choice = 1) as choice1Count

[ choiceRate 구하는 쿼리문 ]

-> trunc(choice1Count * 100 / responseCount, 2) as choice1Rate

<%@ include file="../header.jsp" %>

<style>
	div.flex {
		display: flex;
		justify-content: space-around;
		width: 800px;
		margin: 20px auto;
	}
</style>

<h3>${dto.title }</h3>

<div class="flex">
		<div>
			<h4>${dto.option1 }</h4>
			<img src="${cpath }/upload/${dto.image1}" height="200">
			<div>득표 수 : ${dto.choice1Count } (${dto.choice1Rate }%)</div>
		</div>
		<div>
			<h4>${dto.option2 }</h4>
			<img src="${cpath }/upload/${dto.image2}" height="200">
			<div>득표 수 : ${dto.choice2Count } (${dto.choice2Rate }%)</div>
		</div>
	</div>

</body>
</html>

ExceptionHandler가 초면이라 너무 생소하였다.

알고보니까 JdbcTemplate 가 있어서 사용할 수 있는 것이었다.

비율을 구하는 쿼리문을 작성하는 것이 조금 어려웠다.

[Spring] FileComponent

Sponge_ — Wed, 9 Oct 2024 18:41:27 +0900

저번 HashComponent에 이어, FileComponent를 이용하여 다중 파일 업로드를 구현 해보자.

FileComponent

유의할 점

@component 어노테이션 붙이고 나서 이 클래스에 s 가 붙는지 꼭 확인하자

-> 스프링빈으로 등록되었는지 확인

saveDirectory 지정해두기

import java.io.File;
import java.io.IOException;
import java.util.UUID;

import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

@Component
public class FileComponent {
	
	private String saveDirectory = "C:\\upload";
	
	public FileComponent() {
		File f = new File(saveDirectory);
		if(f.exists() == false) {
			f.mkdirs();
		}
	}
	
	public String upload(MultipartFile f) {
		String originalFileName = f.getOriginalFilename();
		String storedFileName = UUID.randomUUID().toString().replace("-", "");
		String ext = originalFileName.substring(originalFileName.lastIndexOf("."));
		storedFileName += ext;
		
		File dest = new File(saveDirectory, storedFileName);
		
		try {
			f.transferTo(dest);
		} catch (IllegalStateException | IOException e) {
			e.printStackTrace();  
		}
		return storedFileName;
	}
}

Ex04Controller

중첩 커맨드 객체
form 에서 같은 name 을 가지는 input 이 여러개 넘어올때,
dto(= 커맨트 객체) 내부에 필드가 List 타입이라면
같은 이름의 여러값을 리스트 형태로 자동으로 받는다.

이러한 형식을 중첩 커맨드 객체라고 한다.

중첩 커맨드 객체는 checkbox 를 List<String> 으로 받을 때도 사용할 수 있다.
단, dto 없이 (== 커맨드 객체를 사용하지 않고) 매개변수에 List를 지정하면 처리할 수 없다.

요청 처리가 완료되고 나면 redirect 를 이용하여 ex04.jsp로 보냄.

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import com.itbank.model.Upload2DTO;
import com.itbank.service.Ex04Service;

@Controller
@RequestMapping("/ex04")
public class Ex04Controller {

	
	@Autowired private Ex04Service service;
	
	
	@GetMapping
	public void ex04() {}
	
	
	@PostMapping
	public String ex04(Upload2DTO dto) {
		List<MultipartFile> list = dto.getUpload(); // 중첩 커맨드 객체
		
		System.out.println("파일의 개수 : " + list.size());
		System.out.println("각 파일의 이름");
		System.out.println("===================================");
		list.forEach(f -> System.out.println(f.getOriginalFilename()));
		System.out.println("===================================");
		
		int row = service.uploadMultiple(dto);
		
		System.out.println("등록된 레코드 개수 : " + row);
				
		return "redirect:/ex04";
	}	
}

Ex04Service

원본 파일명과 저장할 파일명을 다르게 구분하고 set(저장)

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.itbank.component.FileComponent;
import com.itbank.model.Upload2DTO;
import com.itbank.repository.Ex04DAO;

@Service
public class Ex04Service {

	@Autowired private FileComponent fc;
	@Autowired private Ex04DAO dao;
	
	
	public int uploadMultiple(Upload2DTO dto) {
		int row = 0;
		
		List<MultipartFile> list = dto.getUpload();
		String result = "";
		String ori = "";
		
		for(MultipartFile f : list) {
			ori += f.getOriginalFilename() + " : ";
			result += fc.upload(f) + " : ";
		}
		ori = ori.substring(0, ori.length() - 1);
        
        	//	마지막 콜론 없애기 
		result = result.substring(0, result.length() - 1);	
		
		dto.setOriginalFileName(ori);
		dto.setStoredFileName(result);
		
		row = dao.insertMultiple(dto);
		
		return row;
	}	
}

Upload2DTO

import java.sql.Date;
import java.util.List;

import org.springframework.web.multipart.MultipartFile;

//	upload2 테이블 

//	IDX              NOT NULL NUMBER(38)    
//	MEMO             NOT NULL VARCHAR2(100) 
//	ORIGINALFILENAME NOT NULL VARCHAR2(500) 
//	STOREDFILENAME   NOT NULL VARCHAR2(500) 
//	UPLOADDATE                DATE  


public class Upload2DTO {
	
	private int idx;
	private String memo;
	private String originalFileName;
	private String storedFileName;
	private Date uploadDate;
	
	private List<MultipartFile> upload;

	public int getIdx() {
		return idx;
	}

	public void setIdx(int idx) {
		this.idx = idx;
	}

	public String getMemo() {
		return memo;
	}

	public void setMemo(String memo) {
		this.memo = memo;
	}

	public String getOriginalFileName() {
		return originalFileName;
	}

	public void setOriginalFileName(String originalFileName) {
		this.originalFileName = originalFileName;
	}

	public String getStoredFileName() {
		return storedFileName;
	}

	public void setStoredFileName(String storedFileName) {
		this.storedFileName = storedFileName;
	}

	public Date getUploadDate() {
		return uploadDate;
	}

	public void setUploadDate(Date uploadDate) {
		this.uploadDate = uploadDate;
	}

	public List<MultipartFile> getUpload() {
		return upload;
	}

	public void setUpload(List<MultipartFile> upload) {
		this.upload = upload;
	}
	
}

Ex04DAO

import org.apache.ibatis.annotations.Insert;

import com.itbank.model.Upload2DTO;

public interface Ex04DAO {

	@Insert("insert into upload2(memo, originalFileName, storedFileName) "
			+ "	values(#{memo} , #{originalFileName}, #{storedFileName})")
	int insertMultiple(Upload2DTO dto);

}

ex04.jsp

[ 다중 파일 업로드 ]

1) enctype 은 multipart 로 되어있으면서 2) input file 은 multiple 로 되어있어야 한다.\

<form method="POST" enctype="multipart/form-data">
<input type="file" name="upload" multiple required>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<<c:set var="cpath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<h1>ex04 - 다중 파일 업로드(multiple)</h1>
<hr>

<form method="POST" enctype="multipart/form-data">
	<p><input type="file" name="upload" multiple required></p>
	<p><input type="text" name="memo" placeholder="내용 설명"></p>
	<p><input type="submit" value="업로드"></p>

</form>

</body>
</html>

스프링으로 프로젝트를 진행할 때는 스프링 빈으로 등록이 잘 되어있는지 확인을 하는 것이 중요하다.

빈 등록이 제대로 되어 있지 않다면 오류가 발생할 수 있기 때문에, 위에 작성한 내용대로 확인을 한 번씩 해보자.

[Spring] annotaion

Sponge_ — Wed, 9 Oct 2024 18:32:39 +0900

spring에서 자주 사용되는 어노테이션들을 정리해보았다.

스프링 빈 등록 시 사용

@Controller	지정한 클래스를 스프링 빈으로 등록하고, MVC구조의 컨트롤러 역할을 수행하도록 한다
@Service	지정한 클래스를 스프링 빈으로 등록하고, MVC구조의 서비스 역할을 수행하도록 한다
@Repository	지정한 클래스를 스프링 빈으로 등록하고, MVC구조의 DAO 역할을 수행하도록 한다 해당 클래스에서 발생하는 예외는 SQLException 형식으로 변경하여 throws 한다
@Component	지정한 클래스를 스프링 빈으로 등록한다. 주로 특정 요소에 대한 작업을 전담하는 모듈로 구성한다.
@ControllerAdvice	지정한 클래스를 스프링 빈으로 등록하고, 컨트롤러에서 발생하는 예외를 모아서 처리하도록 한다
@RestController	지정한 클래스를 스프링 빈으로 등록하고, 컨트롤러이면서 내부 메서드는 @ResponseBody를 적용받게 한다

참조 및 연결

@Autowired	필드, setter, 생성자에 붙어서 스프링 빈 간의 의존관계를 자동으로 연결한다 타입(자료형)을 우선으로 탐색하고, 타입이 일치하는 요소가 있다면 id로 판별할 수 있다
@Value	특정 경로의 자원을 Resource 타입으로 받아서 파일을 참조할 수 있도록 한다

메서드 관련

@RequestMapping	value에는 요청 주소를 지정하고, method에는 요청 메서드를 지정한다 일치하는 요청이 발생하면, 메서드를 호출한다 컨트롤러 클래스에 지정하면, 해당 컨트롤러 하위 모든 메서드가 공통 주소를 적용받는다 문자열만 작성하면 value를 지정하는 것이 된다
@GetMapping	@RequestMapping(value="", method=RequestMethod.GET) 과 같다 (스프링 4.1.0 이상에서만 가능)
@PostMapping	@RequestMapping(value="", method=RequestMethod.POST) 과 같다 (스프링 4.1.0 이상에서만 가능)

파라미터 관련

@RequestParam	컨트롤러 메서드에서 파라미터를 전달받을 때 사용한다 보통 생략가능하지만, HashMap으로 파라미터들을 받을때는 반드시 명시해야 한다
@PathVariable	@RequestMapping 상의 특정 구간 주소를 파라미터로 치환해서 받을 수 있다
@RequestBody	파라미터 앞에 붙어서 JSON형식의 파라미터를 객체형태로 변환하여 받도록 한다
@ResponseBody	메서드에 붙어서 반환형이 viewName으로 사용되지 않고, 내용 그대로 반환하도록 한다
@CrossOrigin	컨트롤러 클래스 혹은 내부 메서드에 붙어서 CORS에 대한 정책을 설정한다

쿼리문 관련

@Select	마이바티스 함수에서 select 쿼리를 전달받아 executeQuery()를 수행하고, 결과를 반환한다
@Insert	마이바티스 함수에서 insert 쿼리를 전달받아 executeUpdate()를 수행하고, 정수를 반환한다
@Update	마이바티스 함수에서 update 쿼리를 전달받아 executeUpdate()를 수행하고, 정수를 반환한다
@Delete	마이바티스 함수에서 delete 쿼리를 전달받아 executeUpdate()를 수행하고, 정수를 반환한다