밀집 검색(유사도)과 희소 검색(키워드) 두가지 방법을 융합하여 검색 정확도를 향상시키는 대표적인 기법

• 희소 검색: 정확한 검색 용이
• 밀집 검색: 맥락에 알맞는 검색 용이

Dense Vector(조밀 벡터)

• 의미적 유사성에 강함
• 대부분의 값이 0이 아닌 실수
• 예: "How to catch fish" -> "fishing techniques"매칭

Sparse Vector(희소 벡터)

• 정확한 키워드 매칭에 강함
• 대부분의 값이 0, 일부만 0이 아님
• BM25, TF-IDF 기반
• 예: "Alaskan Pollock" -> 정확히 "Alaskan Pollock" 매칭

어떻게 검색 결과를 합칠까?

두 검색 결과를 합치는 과정에서 다양한 알고리즘이 존재하지만 RRF 방식 가장 선호

• 직접 구현 X - vector DB나 Langchain에서 제공

• 두 리트리버의 비중을 고려해야할 때, Langchain에서 제공하는 앙상블 리트리버 같은 모듈을 사용해볼 수 있다.

Multi Query Retriever

• 하나의 질문으로 여러 관점의 검색을 동시에 수행하는 방식으로, LLM 기반 성능 향상 기법

• LLM을 사용해 원본 쿼리에서 다양한 관점의 여러 쿼리를 자동 생성하는 기법

• 여러 쿼리를 자동생성하여 검색하면 놓칠 수 있는 관련 문서 추가 발견 가능하여 단일 쿼리 검색의 한계의 문제점 극복

• 랭체인에서 초기부터 사용했음 → 검색 성능을 높이는데 좋기 때문

• 멀티쿼리를 만들 때 LLM에 적절한 프롬프트를 주는게 가장 중요하다.

1. 주어진 질문이 모호할 때 구체적으로!
   2. 복합한 쿼리를 단순하게
   3. 동일한 질문에 대해서 같은 용어들이 다르게 표현되는 것에 초점을 두고 다양한 표현방법으로 표현

왜 Multi-Query Retriever가 필요한가?

기존 RAG 시스템의 한계점

• 단일 쿼리의 제약: 사용자의 질문이 모호하거나 불완전할 때 관련 문서를 놓칠 수 있음
• 의미적 표현의 다양성: 같은 의마라도 다양한 표현 방식으로 인해 검색 성능이 제한됨
• 검색 범위의 한계: 하나의 쿼리로는 복합적인 정보 요구사항을 충족하기 어려움

  Multi-Query Retriever 의 장점

• 검색 범위 확장: 여러 관점에서 동일한 정보를 검색하여 누락 방지
• 의미적 다양성: 다양한 표현으로 쿼리를 생성하여 검색 정확도 향상
• 컨텍스트 풍부화: 다각도의 검색 결과를 통합하여 더 완전한 답변 생성
• 견고성 증대: 단일 쿼리 실패 시에도 다른 쿼리들이 보완 역할 수행

- 검색이 실패하는 확률이 줄어든다! - LLM모델은 가벼운 것을 쓰는게 좋다.

RAG Fusion

여러 쿼리를 통해 검색된 문서의 중복을 제거하고, 유사도 기준으로 재정렬하는 RAG Fusion 방식도 활용 - Reranker + Multiquery의 조합

Self Query Retriever

• 주어진 사용자의 질문을 벡터DB를 조회할 필터링 쿼리로 변환하여 검색하는 방식
• 자연어 쿼리 → 쿼리 구성 LLM이 쿼리 작성 → 벡터 저장소 검색 및 필터링에 활용
• 사용자의 질문만으로 벡터 DB 검색이 제대로 이뤄지지 않을 수 있는 메타데이터 중심 질문을 처리하기에 적합
• 핵심은 쿼리 생성기와 쿼리 번역기이다. 벡터 DB에 알맞은 필터링 쿼리 생성을 위해 번역이 필요하다.

• Agentic RAG일 경우, 여러 Retriever를 두고 LLM이 선택해서 쓸 수 있게 해줄 수 있다.
• 논문에 사용하기 좋을 듯 - '장르' 등 특정 키워드 등 메타데이터 중심의 질문에 사용

가상환경 진입

conda create -n nlp python=3.10 -y
conda activate nlp # 가상환경 진입
pip3 install torch torchvision torchaudio --index-url # 파이토치 설치

파이토치 설치

import torch

torch.cuda.is_available() # TRUE 가 나오는지 확인

conda 환경 구축 conda-forge github에서 window 버전 다운.

• 터미널 환경. 토글에서 powershall이 아닌 cmd 로 변경. base는 깨끗하게 유지. 보통 c드라이브 혹은 사용자 안 dev > 폴더명 에 위치

conda create -n 폴더명 python=3.12
conda env list # 현재 설치된 파일 확인 가능
conda deactivate → base 로 바꾸기

!주의사항. ⇒ \설치된 pip를 실행시킬때 해당 경로의 인터프리터 변경

** FAST API 를 통한 Serving **

pip install fastapi uvicorn python-multipart
uvicorn main:app --reload # reload: 수정 시 바로 반영

ex ) http://127.0.0.1:8000/docs - API test 가능

FastAPI의 핵심 특징

1. 고성능 (Fast!)

• arlette(비동기 웹 서버)와 Pydantic(데이터 검증 라이브러리)을 기반으로 구현 비동기(Async) 기능을 기본적으로 지원해서 동시 요청 처리 성능이 뛰어나다. 성능은 Node.js 및 Go 수준으로 빠름.

2. 문서화 (Swagger UI, ReDoc)

• API를 만들면 자동으로 문서화(Swagger UI, ReDoc) 제공 /docs (Swagger UI) → API를 직접 테스트 가능 /redoc (ReDoc) → 깔끔한 API 문서 제공

3. 타입 기반 요청 & 응답 검증

• Pyantic을 활용해서 요청 데이터와 응답 데이터의 타입을 강력하게 검증할 수 있다. 덕분에 버그를 줄이고, 코드 가독성이 높아짐. 비동기(Async) 지원
• async/await을 기본적으로 지원해서 IO-bound 작업(데이터베이스, API 호출 등)에서 성능이 뛰어남.

1. Python 패키지설치

Anaconda

수학과 과학 분야에서 사용되는 여러 패키지들을 묶어 놓은 파이썬 배포판에 포함되어 있는 패키지 매니저이자 가상환경 관리 프로그램. 아나콘다(Anaconda)는 기존 파이썬에 비해 매우 용량이 크지만 데이터 분석을 위한 다양한 라이브러리를 갖춘 파이썬을 배포한다. 주요 패키지가 설치가 되어있다.

• 200명 이상의 직원이 있는 기업 또는 정부 조직이 Anaconda Repository를 사용하는 경우 유료

• conda : 패키지 매니저

  conda-forge

  conda-forge는 수천명의 기여자로 구성되어 있는 커뮤니티 채널이다. conda-forge는 PyPI와 비슷하지만 통합된 자동화 빌드 인프라와 더 많은 레시피 검토가 이루어진다.

• open source

• mini-forge

  • 기본(그리고 유일한) 채널로 conda-forge를 사용.
  • 표준 Python 인터프리터(일명 "CPython") 대신 PyPy에 대한 지원.
  • 콘다보다 더 빠른 맘바(mamba)도 지원.
  • 다양한 CPU 아키텍처(x86_64, ppc64le, Apple M1을 포함한 aarch64)지원.

2. mini-forge 설치방법(주의)

1. 기존에 파이썬이 있다면, 설치 시 오류가 날 수 있기 때문에 지워야한다.

2. Advanced Installation Options-> 두번째 Add 추가해줘야함 -> 시스템환경변수편집>환경변수>...사용자변수>Path 에 ..\miniforge.. 5개정도 추가된지 확인!

3. vscode에서 사용방법(주의)

1.terminal - cmd 로 실행 -> powershell은 파이썬과 궁합이 맞지 않음 2. 에디터, 터미널에서 conda 가상환경 이름 맞춰주기 -> vscode에서는 PyCharm과 달리 터미널에서 가상환경을 만들어도 에디터에 바로 바뀌지않기때문에 수동으로 바꿔줘야한다.

python main.py                        # main.py 파일 실행
conda env list                        # base 경로 실행(더럽히면 안됨)
conda create -n proj1 python=3.12    # 가상환경명(proj1:폴더명) / 파이썬 버전설정가능
conda activate proj1                # 설치 후 가상 환경 활성화

4. MediaPipe 연습

MediaPipe 솔루션 가이드 : https://ai.google.dev/edge/mediapipe/solutions/guide?hl=ko

• 객체감지 : EfficientDet-Lite0, EfficientDet-Lite2 모델 사용

  • EfficientDet-Lite2 사용이유: 하기 사진에서 사람이 몇명인지 구할 때, EfficientDet-Lite0 모델은 2명만 찾았기때문에

• 이미지 분류 : EfficientNet-Lite0 모델 사용

• github https://github.com/cjmin-n/Python/tree/main/proj1

• 손 랜드마크 감지 / 얼굴 랜드마크 감지 / 얼굴 인식 연습

• github https://github.com/cjmin-n/Python/tree/main/practice

5. InsightFace AI

github: https://github.com/deepinsight/insightface PyPI: https://pypi.org/project/insightface/

PyPI - windows 설치 에러해결방법

• 23년 이후로 업데이트 되지않았기 때문에
• Microsoft C++ Build Tools 설치 https://visualstudio.microsoft.com/visual-cpp-build-tools/ ** : C++를 사용하여 데스크톱 개발 체크 후 설치**
• 마지막 에러 시 onnxruntime 설치 : onnxruntime 추론기 기반의 모델이기때문

  pip install insightface
  ...
  pip install onnxruntime 

• 같은 사람 비교 / 다른 사람 비교 결과가 0.4 이상 시 같은 사람으로 보는데, 아무리 닮은 사람도 0.4이상이 나오지 않고 같은 사람의 앞모습, 옆모습을 비교해도 0.4이상이 나왔다. 이미지사이즈가 작을 경우 오류가 생긴다. -> github : https://github.com/cjmin-n/Python/tree/main/proj2

AI 참고할 문서

1. https://paperswithcode.com/ : ai관련 논문(해당 코드)
2. https://elseif-2022.kakao.com/2022/session/13 : 얼굴인식
3. https://github.com/xinyu1205/recognize-anything : 다양한 물체를 찾아주는 모델 (얼굴인식 검증 시 활용..)

• 알림 flutter_local_notifications: ^18.0.1
• 권한 permission_handler: ^11.3.1
• 알람시간(한국시간-정확한 한국시간) flutter_timezone: ^4.0.0

2. 앱아이콘 경로 android/app/src/main/res/drawble/ 확장자명 png

3. AndroidManifest.xml 에 추가

    <uses-permission android:name="android.permission.VIBRATE" />
    <!-- 앱이 진동 기능을 사용할 수 있게 허용 -->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <!-- 다른 앱 위에 알림창을 띄울 수 있게 허용 -->
    <uses-permission android:name="android.permission.SET_EXACT_ALARM" />
    <!-- 정확한 알람을 설정할 수 있게 허용 (Android 12 이상) -->
    <uses-permission android:name="android.permission.REQUEST_SCHEDULE_EXACT_ALARM" />
    <!-- 정확한 알람을 예약할 수 있는 권한을 요청 (Android 12 이상) 사용자에게 정확한 알람 권한을 요청하는 데 필요 -->
    <uses-permission android:name="com.android.alarm.permission.SET_ALARM" />
    <!-- 기본 알람 앱을 설정할 수 있게 허용 -->
    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
    <!-- 정확한 알람을 예약할 수 있게 허용 (Android 12 이상)  실제 알람 예약 및 실행을 위해 필요-->
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
    <uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY" />

• receiver : 알림을 트리거하는 역할 application 내부에 있어야함

  <application>
    <receiver android:exported="false" android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver" />
  </application>

Firebase console

1. 앱등록 패키지 이름만 입력 android/app/src/build.gradle - android/namespace
2. 구성파일 다운로드 google-services.json을 android/app 하위 에넣음
3. groovy 1)루트 - > settings.gradle /plugins 에 추가 id 'com.google.gms.google-services' version '4.4.2' apply false 2)android/app/build.gralde / plugins 에 추가 id 'com.google.gms.google-services'

• pubspec.yaml - dependencies 추가

  firebase_core: ^3.8.1
  firebase_messaging: ^15.1.6
  http: ^1.2.2  # http 패키지 추가
  flutter_local_notifications: ^18.0.1
  permission_handler: ^11.3.1

android/프로젝트 설정

• 서비스 계정 / java / 새 비공개 키 생성

• fir-test-app-91e51-firebase-adminsdk-g4aw0-45f9777b36.json*

• .gitignore 에 추가하기 !!

• 자세히 알아보기 서버에 Firebase Admin SDK 추가 / SDK 추가 / 자바 dependencies 에 추가

  dependencies {
  implementation 'com.google.firebase:firebase-admin:9.4.1'
  }

연락처

1. 권한허용

permission_handler -installing dependencies: permission_handler: ^11.3.1 2. 연락처 flutter_contact

• installing dependencies: flutter_contacts: ^1.1.9+2

-> yaml / dependencies 에 추가

<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>

-> android\app\src\main\AndroidManifest.xml 에 추가

카메라

image_picker

• installing dependencies: image_picker: ^1.1.2

-> yaml / dependencies 에 추가

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

flutter 버전 확인 C:\flutter_windows_3.24.5-stable\flutter\bin

flutter --version

안드로이드 스튜디오 다운로드

1. More Actions -> SDK manager - SDK tools

2. More Actions -> Virtual Device Manager

Medium Phone - VanilaIceCream

3. Plugins -> Flutter / Dart install

flutter doctor # 플러터 설치 시 필요한게 다 깔렸는지 확인
flutter doctor --android-licenses # 이후 전부 y

4. Device Manger

-> Edit -> Show Advanced Settings -> Emulated Performance - Boot option : Cold boot 더 빨리 됨

어플리케이션에 @EnableEurekaServer추가

server:
    port: 8761 #Eureka 기본 포트

spring:
    application:
        name: eureka-server # 서비스 간의 식별을 위한 이름

eureka:
    client:
        register-with-eureka: false # 단일 유레카서버 - false / 유레카 서버 증설 시 (트래픽이 늘어나면) true
        fetch-registry: false # 다른 서버와 동기화 하지 않음 (단일 서버) / 유레카서버끼리 통신을 하려면 true
    server:
        enable-self-preservation: false # 자기 보호 기능    

2.api-gateway

InteliJ project build : Reactive Gateway / Eureak Discovery Client / Spring Boot Devtools

server:
    port: 8080

spring:
    cloud:
        gateway:
            routes:
                - id: user-service
                  uri: lb://USER-SERVICE
                  predicates:
                    - Path=/user/**
                - id: order-service
                  uri: lb://ORDER-SERVICE
                  predicates:
                    - Path=/order/**

Eureka server에 관한 내용은 bootstrap.yml 에서 설정해야한다.

eureka:
    client:
        service-url:
            defaultZone: http://localhost:8761/eureka/
    instance:
        prefer-ip-address: true # DNS 없이 ip면 true

3. user-service

InteliJ project build : Eureak Discovery Client / Spring Web / Spring Boot Devtools

server:
    port: 8081

spring:
    application:
        name: user-service # Gateway 에 설정한 이름이랑 같아야함

eureka:
    client:
        service-url:
            defaultZone: http://localhost:8761/eureka/ # 유레카서버 알려줌

4. order-service

InteliJ project build : Eureak Discovery Client / Spring Web

server:
    port: 8082

spring:
    application:
        name: order-service

eureka:
    client:
        service-url:
            defaultZone: http://localhost:8761/eureka/

5. order-service2 InteliJ project build : Eureak Discovery Client / Spring Web

server:
    port: 8083

spring:
    application:
        name: order-service

eureka:
    client:
        service-url:
            defaultZone: http://localhost:8761/eureka/spring.application.name=order-service2

-> 똑같은 이름의 서버를 띄우면 서로 번갈아가면서 동작한다.

** 실행순서 - eureka server 가 제일 먼저 실행되야한다. -> user-service / order-service 프로젝트 내에 컨트롤러 만들어서 gateway 포트로 접속해서 요청 전송되는지 확인

• 타입 A에 포트포워딩한 내 외부아이피
• ZERO SSL서 SSL 발급받고 CNAME 타입 입력해줌

5. ZERO SSL 에서 zip 파일 (crt, key) 받아서 crt2개를 pem 으로 합쳐서 그거를 p12로 변환

• SSL 인증서 Generate jks(Keystore) from .crt and .key ref: https://velog.io/@yebali/Linux-Generate-jksKeystore-from-.crt-and-.key (명령어 cat 대신 type 씀)
• OpenSSL 설치 ref: https://bskwak.tistory.com/182
• OpenSSL 환경변수 설치 ref: https://san91.tistory.com/12

6. 인텔리제이 resources/ 에 p12 파일 넣고 yml 작성

   server:
    ssl:
        enabled: true
        key-store: classpath:certificate.p12
        key-store-password: 1234
        key-store-type: PKCS12

7. @Configration 만들어서 http 요청으로 온거를 https 로 보내줌

8. Corsconfig -> 프론트 서버 연결

localhost 도커컨테이너로 젠킨스 이미지를 띄워서 로컬호스트로 접속해서 젠킨스 컨테이너의 비밀번호 입력 후 왼쪽 기본 설정 설치

• 계정만들기 계정명: jenkinstest / 이름 : jenkins / 메일(gmail) / 비번

• 인텔리제이 프로젝트 의존성 spring web / Springboot devtools / mySql / jpa

FROM eclipse-temurin:17
RUN mkdir /opt/app
COPY build/libs/jenkins_test_app-0.0.1-SNAPSHOT.jar /opt/app/test_app.jar
CMD ["java", "-jar", "/opt/app/test_app.jar"]
EXPOSE 8082

• github settings webhook - Payload URL (젠킨스 주소)

• http://112.221.66.174:50001//github-webhook/

• github가 젠킨스 서버를 찾을 수 있게 젠킨스서버를 포트포워딩해줌

로컬로 띄운 젠킨스 페이지

• DashBoard -> Jenkins 관리-> Plugins -> Avaliable plugins -> docker / docker pipeline

• DashBoard -> Tools -> Gradle (Add gradle - name:gradle) Docker (Add docker - name:docker / Install automatically/ Add Installer-> download for docker.com)

• DashBoard -> Credentials -> global -> add Credentials

1. kind: secret file / application-db.yml 첨부 / id 파일명과 똑같이 ! -> id 기준으로 찾음
2. id:dockerhub_id / Username/password-> dockerhub 아이디 비번
3. Username:github 아이디/password:github 토큰 / id:jeongmin_github_token
   • Github Settings - Developer Settings - Tokens 발급

• DasheBoard - new Item - pipeline
• General

1. 설명: 해당 파이프라인에 대한 설명
2. Do not allow concurrent builds : 순차적으로 빌드
3. Do not allow the pipeline to resume if the controller restarts : 중단된 위치에서 재개하지 않게 -> 처음부터 다시 시작
4. github project : 만든 깃헙 레파지토리 주소
5. Pipeline speed/durability override : 속도 최적화 (빠르게하면 문제 시 대처를 못함)
6. Throttle builds : 빌드의 병렬 실행 (한번에 여러개 실행하지 못하도록 / 1로 해두면 한개만 가능)
7. 오래된 빌드 삭제 : 빌드 이력 유지 기간(일) 15 /보관할 최대갯수 7
8. Build Trigger : GitHub hook trigger for GITScm polling (깃허브에 등록한 웹훅)

• Pipeline

Pipeline

pipeline{
    agent any 

    environment{
        DOCKER_REGISTRY = 'docker.io'
        DOCKER_IMAGE_NAME = 'jeongmin1213/jenkins-test:latest'
        DOCKER_CONTAINER_NAME = 'jenkins-test-container'
        DOCKER_CREDENTIALS_ID = 'dockerhub_id'
    }

    tools{
        gradle 'gradle'
        dockerTool 'docker'
    }

    stages{

        stage('Github Clone'){
            steps{
                git branch: 'main',
                url: 'https://github.com/cjmin-n/jenkins-test-app.git',
                credentialsId: 'jeongmin_github_token'
            }
        }

        stage('Download secret.yml File'){
            steps{
                withCredentials([file(credentialsId:'application-db.yml', variable:'dbConfigFile')]){
                    script{
                        sh "cp $dbConfigFile src/main/resources/application-db.yml"
                    }
                }
            }
        }

        stage('Build with Gradle'){
            steps{
                sh 'gradle build'
            }
        }

        stage('Docker Build and Push'){
            steps{
                script{
                    withCredentials([usernamePassword(credentialsId:"$DOCKER_CREDENTIALS_ID", usernameVariable: 'DOCKER_USERNAME', passwordVariable: 'DOCKER_PASSWORD')]){
                        sh "docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD"
                        sh "docker build -t $DOCKER_IMAGE_NAME -f Dockerfile ."
                        sh "docker push $DOCKER_IMAGE_NAME"
                    }
                }
            }
        }

        stage('Deploy Docker Container'){
            steps{
                script{
                    sh '''
                    if [ "$(docker ps -q -f name=$DOCKER_CONTAINER_NAME)" ]; then
                        docker stop $DOCKER_CONTAINER_NAME
                        docker rm $DOCKER_CONTAINER_NAME
                    fi
                    '''

                    sh "docker run -d -p 8082:8082 --name $DOCKER_CONTAINER_NAME -e ENV_VARIABLE=value $DOCKER_IMAGE_NAME"
                }
            }
        }
    }

    post{
        always{
            sh 'docker logout'
        }
    }

}

• 변수를 써야하는 경우 "" 사용
• if문 쓰려면 sh ''' ''' 안에 사용하고 fi 로 마침
• if문 [ ]에 처음,마지막에 띄워쓰기 필수
• cp 는 copy

• 도커 버전 확인

  C:\Users\803-01>docker --version
  Docker version 27.3.1, build ce12230

• 환경변수 path 에서 docker 추가되었는지 확인
• Springboot 프로젝트 생성 후 Dockerfile 만들기

FROM eclipse-temurin:17
RUN mkdir /opt/app
COPY build/libs/docker-test-app-0.0.1-SNAPSHOT.jar /opt/app/cjmin_app.jar
CMD ["java", "-jar", "/opt/app/cjmin_app.jar"]
EXPOSE 8080
#포트명은 명시적인 것이고 강제성을 가지지않음

docker hub 에서 본인이 정한 jar 파일명으로 create repository

C:\20240801-gangnam\docker\docker-test-app>gradlew build
C:\20240801-gangnam\docker\docker-test-app>docker build -t cjmin_app:latest .
C:\20240801-gangnam\docker\docker-test-app>docker images
C:\20240801-gangnam\docker\docker-test-app>docker run -d -p 8080:8080 --name cjmin_container cjmin_app:latest
# -d : 백그라운드에서 실행(없으면 cmd에서 바로 실행됨
# -p : 포트 설정

#도커로그확인
C:\20240801-gangnam\docker\docker-test-app>docker logs cjmin_container

docker desktop 에서 Containers -> Files/opt/app/cjmin_app.jar 확인

• 컨테이너는 가상의 공간에 있어서 외부와 소통불가...

C:\20240801-gangnam\docker\docker-test-app>docker login
#태그이름지어주기
C:\20240801-gangnam\docker\docker-test-app>docker tag cjmin_app:latest jeongmin1213/cjmin_app:latest
C:\20240801-gangnam\docker\docker-test-app>docker push jeongmin1213/cjmin_app:latest

#다른 사람꺼 찾기
C:\20240801-gangnam\docker\docker-test-app>docker search jeongmin1213
#다른사람꺼 풀 받기
C:\20240801-gangnam\docker\docker-test-app>docker pull seoyeonon/seoprog_app:latest
#다른사람꺼 띄우기 (포트번호 알아야함 - 예시)
C:\20240801-gangnam\docker\docker-test-app>docker run -d -p 8081:8081 --name seoyeon_container seoyeonon/seoprog_app:latest

Dependencies

• Spring Boot DevTools
• Spring Web
• Thymeleaf : java 와 html 연결할 때 필요

프로젝트 경로

• java Application 건드리지 않음
• resources application.properties : 설정 정보 : db 연결 정보들 static : 정적 파일(html,css,img 등) -> index.html 실행 시 첫 페이지 templates: index외 html파일들 - view resolver가 templates부터 찾음

메인 메소드 실행 localhost:8080 : 톰캣 기본 서버

기본적으로 변수의 기본 스코프는 메소드 이기 때문에 다른 페이지(서블릿) 로 데이터를 공유할 수 없다. 하지만 forward 방식은 request 와 response 를 포함하여 위임하므로 request 에 정보를 저장하여 forward 하면 위임받은 서블릿에서도 위임한 서블릿의 정보를 받아올 수 있다. forward 받은 서블릿의 존재를 클라이언트가 알 필요가 없기 때문에 url 자체는 변경되지 않는다. forward 방식의 또 다른 특징은 요청 시 서버로 전송한 데이터가 남아있는 상태로 새로고침(재요청)을 하면 동일한 요청을 반복하여 데이터베이스에 insert 하는 등의 행위 등이 중복된 행이 삽입될 가능성이 있다. 따라서 그런 경우는 다른 페이지 전환 방식인 redirect 를 이용한다.

package com.ohgiraffers.section01.forward;

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

import java.io.IOException;

@WebServlet("/forward")
public class ReceiveInformationServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String userId = req.getParameter("userId");
        String password = req.getParameter("password");

        System.out.println("userId = " + userId);
        System.out.println("password = " + password);

        // 다른 서블릿으로 데이터를 request 의 setAttribute 로 전달한다.
        req.setAttribute("userId", userId);

        // print 라는 경로로 요청을 넘기기 위한 객체 생성
        // 이 경로는 서블릿이나 JSP 모두 가능
        RequestDispatcher rd = req.getRequestDispatcher("print");

        rd.forward(req, resp);


    }
}

위의 /forward 서블릿에서 속성을 포워드해서 /print에서 뿌려준다.

package com.ohgiraffers.section01.forward;

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

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

@WebServlet("/print")
public class PrintLoginSuccessServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String userId = (String)req.getAttribute("userId");
        System.out.println(userId);

        String userId2 = req.getParameter("userId");
        System.out.println(userId2);

        // 응답에 필요한 데이터가 준비되면 동적인 웹 페이지를 생성한다.
        StringBuilder responseText = new StringBuilder();
        responseText.append("<!DOCTYPE html>\n")
                .append("<html>\n")
                .append("<head>\n")
                .append("</head>\n")
                .append("<body>\n")
                .append("<h3 align=\"center\">")
                .append(userId)
                .append("님 환영합니다. </h3>\n")
                .append("</body>\n")
                .append("</html>");

        resp.setContentType("text/html; charset=UTF-8");

        PrintWriter out = resp.getWriter();
        out.print(responseText);
        out.flush();
        out.close();

    }
}

2. redirect

redirect 하면 url 이 재작성되어 새로고침할 때 redirect 된 페이지에 대한 요청을 반복한다. 즉, 이전 요청에 포함된 정보는 남아있지 않고, url 이 변경되는 것이 redirect 의 특징이다. 첫 요청 시의 request 와 현재 redirect 된 페이지의 request 는 서로 다른 객체이므로 redirect 를 쓰면 이전 서블릿의 값을 공유해서 사용할 수 없다. http 요청은 요청 시 잠시 connection 을 맺고 응답 시에도 잠시 connection 을 맺으며 요청 단위 당 request 객체는 한 개만 생성된다.

• 다른 사이트로 리다이렉트

  package com.ohgiraffers.section01.othersite;
  

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

import java.io.IOException;

@WebServlet("/othersite") public class OtherSiteRedirectServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("get 요청 후 naver 로 redirect");

    resp.sendRedirect("https://www.naver.com");
}

}

- 다른 서블릿으로 리다이렉트
``` java
package com.ohgiraffers.section02.otherservlet;

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

import java.io.IOException;

@WebServlet("/otherservlet")
public class OtherServletRedirectTest extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("get 요청 정상 수락");
        System.out.println(resp); // org.apache.catalina.connector.ResponseFacade@5c5717be
        resp.sendRedirect("redirect");
    }
}

• otherservlet 서블릿에서 redirect 서블릿으로 리다이렉트

package com.ohgiraffers.section02.otherservlet;

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

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

@WebServlet("/redirect")
public class RedirectServlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        System.out.println("이 서블릿으로 redirect 성공");
        System.out.println(resp); // org.apache.catalina.connector.ResponseFacade@70daeadb

        resp.setContentType("text/html; charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.print("<h1>이 서블릿으로 redirect 성공</h1>");
        out.flush();
        out.close();


    }

}

package com.ohgiraffers.section01.exception;

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

import java.io.IOException;

@WebServlet("/show404error") public class Show404ErrorServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.sendError(404, "페이지를 찾을 수 없습니당");
}

}

- 500 Error
``` java
package com.ohgiraffers.section01.exception;

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

import java.io.IOException;

@WebServlet("/show500error")
public class Show500ErrorServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.sendError(500, "500번 에러는 누구 잘못? 개발자!");
    }
}

• Exception Handler

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
         version="6.0">

    <error-page>
        <error-code>404</error-code>
        <location>/showErrorPage</location>
    </error-page>
    <error-page>
        <error-code>500</error-code>
        <location>/showErrorPage</location>
    </error-page>
</web-app>

• xml 에 error page code와 location 정의해서 하기 서블릿에서 처리

package com.ohgiraffers.section01.exception;

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

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;

@WebServlet("/showErrorPage")
public class ExceptionHandlerServlet extends HttpServlet {


    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Enumeration<String> attrName = req.getAttributeNames();
        while(attrName.hasMoreElements()){
            System.out.println(attrName.nextElement());
        }
        /*
        jakarta.servlet.forward.request_uri
        jakarta.servlet.forward.context_path
        jakarta.servlet.forward.servlet_path
        jakarta.servlet.forward.mapping
        jakarta.servlet.error.message
        jakarta.servlet.error.servlet_name
        jakarta.servlet.error.request_uri
        jakarta.servlet.error.status_code
        * */
        // forward : 요청을 다른 서블릿으로 넘겨서 처리
        // - url 주소창은 바뀌지 않음

        // request_uri : 요청이 포워딩 되었을 때 원래 요청의 uri
        String forwardRequestURI = (String)req.getAttribute("jakarta.servlet.forward.request_uri");

        // context_path : 요청이 포워딩 되었을 때 원래 요청의 컨텍스트 경로
        String contextPath = (String)req.getAttribute("jakarta.servlet.forward.context_path");

        // 어떤 서블릿에 의해 요청이 처리되었는지
        HttpServletMapping mapping = req.getHttpServletMapping();

        // status_code : 요청 처리 중 발생한 오류의 상태 코드
        Integer statusCode = (Integer)req.getAttribute("jakarta.servlet.error.status_code");

        // message : 요청 처리 중 발생한 오류 메시지
        String message = (String)req.getAttribute("jakarta.servlet.error.message");

        // servlet_name : 오류를 발생시킨 서블릿의 이름
        String servletName = (String)req.getAttribute("jakarta.servlet.error.servlet_name");

        System.out.println(forwardRequestURI); // /show404error
        System.out.println(contextPath); //
        System.out.println(mapping); // org.apache.catalina.core.ApplicationMapping$MappingImpl@6157ccb4
        System.out.println(statusCode); // 404
        System.out.println(message); // 페이지를 찾을 수 없습니당
        System.out.println(servletName); // com.ohgiraffers.section01.exception.Show404ErrorServlet
        System.out.println((String)req.getAttribute("jakarta.servlet.forward.servlet_path")); // /show404error
        System.out.println((String)req.getAttribute("jakarta.servlet.error.request_uri")); // /show404error

        StringBuilder errorPage = new StringBuilder();
        errorPage.append("<!doctype html>\n")
                .append("<html>\n")
                .append("<head>\n")
                .append("</head>\n")
                .append("<body>\n")
                .append("<h1>")
                .append(statusCode)
                .append(" - ")
                .append(message)
                .append("</h1>\n")
                .append("</body>\n")
                .append("</html>");
        resp.setContentType("text/html; charset=UTF-8");
        PrintWriter out = resp.getWriter();

        out.print(errorPage);
        out.flush();
        out.close();
    }

}

헤더의 종류는 전통적으로 4가지 카테고리로 구분된다.

1. General header : 요청 및 응답 모두 적용되지만 body 와는 관련 없는 헤더
2. Request header : fetch 될 리소스나 클라이언트 자체에 대한 상세 정보를 포함하는 헤더
3. Response header : 위치나 서버 자체와 같은 응답에 대한 부가적인 정보를 갖는 헤더
4. Entity header : 컨텐츠 길이나 엔티티 body 에 대한 상세 정보를 포함하는 헤더

출력 시 나오는 헤더는 요청헤더(Request header) 이다.

package com.ohgiraffers.section01.headers;

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

import java.io.IOException;
import java.util.Enumeration;

@WebServlet("/headers")
public class RequestHeaderPrintServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        Enumeration<String> headerNames = req.getHeaderNames();
        while (headerNames.hasMoreElements()) {
            System.out.println(headerNames.nextElement());
        }

        // accept : 요청을 보낼 때 서버에게 요청할 응답 타입 명시
        System.out.println("accept : " + req.getHeader("accept"));
        // text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7

        // accept-encoding : 응답 시 원하는 인코딩 방식
        System.out.println("accpet-encoding : " + req.getHeader("accpet-encoding"));
        // null

        // accept-language : 응답 시 원하는 언어
        System.out.println("accept-language : " + req.getHeader("accept-language"));
        // ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

        // connection : HTTP 통신이 완료된 후에 네트워크 접속을 유지할지 결정(기본값 - keep-alive = 연결유지)
        System.out.println("connection : " + req.getHeader("connection"));
        // keep-alive

        // host : 서버의 도메인 네임과 현재 Listening 중인 TCP 포트 지정
        System.out.println("host : " + req.getHeader("host"));
        // localhost:8080

        // referer : 이 페이지 이전에 대한 주소
        System.out.println("referer : " + req.getHeader("referer"));
        //  http://localhost:8080/

        // sec-fetch-dest : 요청 대상
        System.out.println("sec-fetch-dest : " + req.getHeader("sec-fetch-dest"));
        // document

        // sec-fetch-mode : 요청 모드
        System.out.println("sec-fetch-mode : " + req.getHeader("sec-fetch-mode"));
        // navigate

        // sec-fetch-user : 사용자가 시작한 요청일 때만 보내짐
        System.out.println("sec-fetch-user : " + req.getHeader("sec-fetch-user"));
        // ?1

        // cache-control : 캐시 설정
        System.out.println("cache-control : " + req.getHeader("cache-control"));
        // null

        // user-agent : 현재 사용자가 어떤 클라이언트를 이용해 보낸 요청인지 명시
        System.out.println("user-agent : " + req.getHeader("user-agent"));
        // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

    }
}

2. response

서블릿이 하는 역할은 크게 3가지 이다.

1. 요청 받기 - HTTP method get/post 등 요청에 따라 parameter 로 전달받은 데이터를 꺼내올 수 있다.
2. 비즈니스 로직 처리 - DB 접속과 CRUD 에 대한 로직 처리
3. 응답하기 - 문자열로 동적인 웹페이지를 만들어 내보낸다.

package com.ohgiraffers.section01.response;

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

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

@WebServlet("/response")
public class ResponseTestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        // 문자열을 이용해 사용자에게 내보낼 페이지를 작성한다.
        StringBuilder responseBuilder = new StringBuilder();
        responseBuilder.append("<!DOCTYPE html>\n")
                .append("<html>\n")
                .append("<head>\n")
                .append("</head>\n")
                .append("<body>\n")
                .append("<h1>안녕 servlet response</h1>\n")
                .append("</body>\n")
                .append("</html>");

        // 브라우저로 내보낼 데이터의 타입을 설정

        // 기본적으로 content-type의 기본값은 null 이다.
        System.out.println("default response type : " + resp.getContentType());
        // text/plain 으로 설정하면 html 태그를 단순 문자열로 인식한다.
        // resp.setContentType("text/html");

        // 브라우저로 내보낼 데이터의 인코딩 방식을 설정
        // 별도로 인코딩을 지정해 주지 않으면 기본 설정된 방식을 따른다.(UTF-8)
        System.out.println("default response encoding : " + resp.getCharacterEncoding());

        // response.setCharacterEncoding("UTF-8");

        // 두 설정을 한 번에 할 수 있다.
        resp.setContentType("text/html; charset=UTF-8");

        // 서버가 클라이언트에게 보낼 출력용 클래스
        // 이 객체를 사용해 클라이언트로 데이터를 전송할 수 있다.
        // 사용자 브라우저에 응답하기 위해서는 HttpServletResponse 의
        // getWriter() method 로 PrintWriter 인스턴스를 반환받는다.
        PrintWriter out = resp.getWriter();

        // 데이터를 출력한다.
        out.print(responseBuilder);
        // 버퍼 - 데이터를 임시로 저장하는 공간입니다.

        // 버퍼에 잔류한 데이터를 강제로 밀어넣는다.
        // 버퍼에 남아 있는 데이터를 강제로 클라이언트에게 전송
        out.flush();

        // 닫아준다.
        out.close();
    }
}

• Response Header

  package com.ohgiraffers.section02.headers;
  

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

import java.io.IOException; import java.io.PrintWriter; import java.util.Collection; import java.util.Iterator;

@WebServlet("/headers") public class ResponseHeaderPrintServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html; charset=UTF-8");

    PrintWriter out = resp.getWriter();

    long currentTime = System.currentTimeMillis();
    // currentTimeMillis() 함수는 1970년 1월 1일 0시를 기준으로 현재까지 경과한 시간을 1000분의 1초(밀리초)로 반환한다.
    out.print("<h1>" + currentTime + "</h1>");
    out.close();

    Collection<String> responseHeaders = resp.getHeaderNames();
    Iterator<String> iter = responseHeaders.iterator();

    while(iter.hasNext()) {
        String headerName = iter.next();
        System.out.println(headerName + " : " + resp.getHeader(headerName));
        /*
        Content-Type : text/html;charset=UTF-8
        Content-Length : 22
        Date : Thu, 17 Oct 2024 08:41:39 GMT
        Keep-Alive : timeout=20
        Connection : keep-alive
        * */
    }
}

}

- status
```java
package com.ohgiraffers.section03.status;

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

import java.io.IOException;

@WebServlet("/status")
public class StatusCodeServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // 특정 상황에 에러를 만들어 보내준다.
        // resp.sendError(404, "없는 페이지 입니다. 경로를 확인 해주세요."); // sendError(에러코드, 메시지)

        // 404 : 클라이언트의 잘못된 요청으로 나타난 에러
        resp.sendError(500, "서버 내부 오류입니다. 서버 오류는 개발자의 잘못이고, 개발자는 여러분입니다.");
        // 500 : 서버 에러
    }
}

• getParameter() : 요청 시 전달한 값을 getParameter() 로 추출 / input의 name
• getParameterMap() : 모든 데이터를 key, value 형태로 일괄 반환

  package com.ohgiraffers.section01.querystring;
  

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

import java.io.IOException; import java.util.Arrays; import java.util.Iterator; import java.util.Map;

@WebServlet("/querystring") public class QueryStringTestServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    // service 로 부터 전달받은 HttpServletRequest 는
    // 요청 시 전달한 값을 getParameter() 로 추출할 수 있다..
    // 이 때 인자로 input 태그에 지정한 name 속성의 값을 문자열 형태로 전달하면 된다..

    String name = req.getParameter("name");
    System.out.println("이름 : " + name);

    int age = Integer.parseInt(req.getParameter("age"));
    System.out.println("나이 : " + age);

    java.sql.Date birthday = java.sql.Date.valueOf(req.getParameter("birthday"));
    System.out.println("생일 : " + birthday); // 2024-10-13

    // radio 태그는 여러 값 중 선택된 하나의 값만 전달된다.
    String gender = req.getParameter("gender");
    System.out.println("성별 : " + gender);

    // selectbox 도 동일하다.
    String national = req.getParameter("national");
    System.out.println("국적 : " + national);

    // checkbox 는 다중으로 입력을 받을 수 있어, 선택된 값이 문자열 배열로 전달된다.
    System.out.print("취미 : ");
    String[] hobbies = req.getParameterValues("hobbies");
    String[] hobbies2 = req.getParameter("hobbies").split(", ");

    for(String hobby : hobbies){
        System.out.print(hobby + " ");
    }
    System.out.println();

    /*
    * getParameterMap() - 모든 데이터를 key, value 형태로 일괄 반환
    * */
    Map<String, String[]> requestMap = req.getParameterMap();

    Iterator<String> iterator = requestMap.keySet().iterator();

    /*while(iterator.hasNext()){
        String key = iterator.next();
        String[] values = requestMap.get(key);
        System.out.print(key + " : ");
        for (int i = 0; i < values.length; i++) {
            System.out.print(values[i] );
        }
        System.out.println();
    }*/

    while(iterator.hasNext()){
        String key = iterator.next();
        String[] values = requestMap.get(key);
        if(key.equals("name")){
            System.out.print("이름 : ");
        }else if(key.equals("age")){
            System.out.print("나이 : ");
        }else if(key.equals("birthday")){
            System.out.print("생일 : ");
        }else if(key.equals("gender")){
            System.out.print("성별 : ");
        }else if(key.equals("national")){
            System.out.print("국적 : ");
        }else if(key.equals("hobbies")){
            System.out.print("취미 : ");
        }

        System.out.println(Arrays.toString(values));


    }

}

}

````

- 요청 하는 JSP

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Parameter</title>
</head>
<body>
<h1>Request Parameter</h1>
<h3>GET 방식의 요청</h3>
<h4>form태그를 이용한 get 방식 요청</h4>
<form action="querystring" method="get">
    <label>이름 : </label><input type="text" name="name">
    <br>
    <label>나이 : </label><input type="number" name="age">
    <br>
    <label>생일 : </label><input type="date" name="birthday">
    <br>
    <label>성별 : </label>
    <input type="radio" name="gender" id="male" value="M"><label for="male">남자</label>
    <input type="radio" name="gender" id="female" value="F"><label for="female">여자</label>
    <br>
    <label>국적 : </label>
    <select name="national">
        <option value="ko">한국</option>
        <option value="ch">중국</option>
        <option value="jp">일본</option>
        <option value="etc">기타</option>
    </select>
    <br>
    <label>취미 : </label>
    <input type="checkbox" name="hobbies" id="movie" value="movie"><label for="movie">영화</label>
    <input type="checkbox" name="hobbies" id="music" value="music"><label for="music">음악</label>
    <input type="checkbox" name="hobbies" id="sleep" value="sleep"><label for="sleep">취침</label>
    <br>

    <input type="submit" value="GET 요청">
</form>

<h4>a태그의 href 속성에 직접 파라미터를 쿼리스트링 형태로 작성하여 get 방식 요청</h4>
<a href="querystring?name=홍길동&age=20&birthday=2021-01-08&gender=M&national=ko&hobbies=movie&hobbies=music&hobbies=sleep">쿼리스트링을
    이용한 값 전달</a>

<h4>form태그를 이용한 post 방식 요청</h4>
<form action="formdata" method="post">
    <label>이름 : </label><input type="text" name="name">
    <br>
    <label>나이 : </label><input type="number" name="age">
    <br>
    <label>생일 : </label><input type="date" name="birthday">
    <br>
    <label>성별 : </label>
    <input type="radio" name="gender" id="male2" value="M"><label for="male2">남자</label>
    <input type="radio" name="gender" id="female2" value="F"><label for="female2">여자</label>
    <br>
    <label>국적 : </label>
    <select name="national">
        <option value="ko">한국</option>
        <option value="ch">중국</option>
        <option value="jp">일본</option>
        <option value="etc">기타</option>
    </select>
    <br>
    <label>취미 : </label>
    <input type="checkbox" name="hobbies" id="movie2" value="movie"><label for="movie2">영화</label>
    <input type="checkbox" name="hobbies" id="music2" value="music"><label for="music2">음악</label>
    <input type="checkbox" name="hobbies" id="sleep2" value="sleep"><label for="sleep2">취침</label>
    <br>

    <input type="submit" value="POST 요청">
</form>
</body>
</html>

2. formdata - post 방식

package com.ohgiraffers.section02.formdata;

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

import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

@WebServlet("/formdata")
public class FormDataTestServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // 톰캣 서버 기본 인코딩 설정 방식
        System.out.println(req.getCharacterEncoding()); // UTF-8

        // 인코딩 방식 지정 가능
        req.setCharacterEncoding("UTF-8"); 

        String name = req.getParameter("name");
        System.out.println("name = " + name);
        // 인코딩을 제외한 값들은 GET 방식과 동일하게 꺼낼 수 있다.

        Map <String, String[]> requestMap = req.getParameterMap();
        Set<String> keySet = requestMap.keySet();
        Iterator<String> keyIter = keySet.iterator();

        while(keyIter.hasNext()){
            String key = keyIter.next();
            String[] value = requestMap.get(key);

            System.out.println("key : " + key);
            for (int i = 0; i < value.length; i++) {
                System.out.println("value[" + i + "] : " + value[i]);
            }
        }
    }

}

• service() 는 확인차 사용

package com.ohgiraffers.section01.servicemethod;

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

import java.io.IOException;

@WebServlet("/request-service")
public class ServiceMethodTestServlet extends HttpServlet {


    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        HttpServletRequest httpRequest = (HttpServletRequest) req;
        HttpServletResponse httpResponse = (HttpServletResponse) res;
        // HttpServlet 으로 받았기 때문에 사용하려면 ServletRequest req, servletResponse res 를 다운캐스팅해야한다.

        // httpRequest 의 getMethod() 는 어떠한 http method 요청이 들어온건지
        // 문자열로 반환한다.
        String httpMethod = httpRequest.getMethod();
        System.out.println("http method : " + httpMethod);

        // 구현이 되어있기 때문에 따로 해줄 필요 없음
        if(("GET").equals(httpMethod)){
            doGet(httpRequest, httpResponse);
        }else if(("POST").equals(httpMethod)){
            doPost(httpRequest, httpResponse);
        }

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("GET 요청을 처리할 메소드 호출");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("POST 요청을 처리할 메소드 호출");
    }


}

1. xml 방식

• 과거 방식으로, web.xml 파일에 서블릿을 등록하고 매핑하는 방식
• 단점 : 장황함, 유연성 부족, 가독성 저하

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
         version="6.0">

    <servlet>
        <servlet-name>xmlmapping</servlet-name>
        <!-- 이름 지정 -->
        <servlet-class>com.ohgiraffers.section01.xml.LifeCycleTestServlet</servlet-class>
        <!-- 클래스 경로 지정 -->
        <load-on-startup>1</load-on-startup>
        <!-- 서버가 시작될 때 인스턴스를 생성한다. 태그 안의 숫자가 낮을 수록 서블릿의 우선순위가 높다. -->
    </servlet>
    <!--  *서블릿 만듦  -->
    <servlet-mapping>
        <servlet-name>xmlmapping</servlet-name>
        <!-- 어느 서블릿에 연결할지 -->
        <url-pattern>/xml-lifecycle</url-pattern>
        <!-- 연결할 요청 -->
    </servlet-mapping>
    <!-- * 요청에 서블릿 매핑 -->

</web-app>

package com.ohgiraffers.section01.xml;

import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.http.HttpServlet;

import java.io.IOException;

public class LifeCycleTestServlet extends HttpServlet {

    private int initCount = 1;
    private int serviceCount = 1;
    private int destroyCount = 1;


    // 서블릿 컨테이너에 의해 최초 요청에만 실행되는 메소드
    //  - 서블릿을 처리하기 전에 준비 (DB 연결 등)
    @Override
    public void init() throws ServletException {
        System.out.println("xml 매핑 init() 호출 : " + initCount++);
    }


    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        System.out.println("xml 매핑 service() 호출 : " + serviceCount++);
        // 최초 요청 시에는 init() 이후에 동작하고,
        // 두 번째 요청 부터는 init() 호출 없이 바로 호출된다.
    }
    // 모든 HTTP 요청이 먼저 전달되는 메소드이다.
    // 요청의 HTTP 메소드에 따라 적절하게 doGet(), doPost() 등을 호출한다. - 따로 오버라이드 안해도 됨


    // 컨테이너가 종료될 때 호출되는 메소드이며, 주로 자원을 반납하는 용도로 사용한다.
    @Override
    public void destroy() {
        System.out.println("xml 매핑 destroy() 호출 : " + destroyCount++);
    }


}

2. annotation 방식

• 현대적 방식으로 서블릿 클래스 위에 @WebServlet 어노테이션을 사용하여 직접 매핑하는 방식
• 장점 - 간결함, 유지보수 용이, 가독성 향상

package com.ohgiraffers.section02.annotation;

import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;

import java.io.IOException;


@WebServlet(value = "/annotation-lifecycle", loadOnStartup = 2)
//@WebServlet(value = "/annotation-lifecycle")
//loadOnStartUp 이 없으면 실행 시 init됨
public class LifeCycleTestServlet extends HttpServlet {

    private int initCount = 1;
    private int serviceCount = 1;
    private int destroyCount = 1;


    // 서블릿 컨테이너에 의해 최초 요청에만 실행되는 메소드
    //  - 서블릿을 처리하기 전에 준비 (DB 연결 등)
    @Override
    public void init() throws ServletException {
        System.out.println("annotation 매핑 init() 호출 : " + initCount++);
    }


    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        System.out.println("annotation 매핑 service() 호출 : " + serviceCount++);
        // 최초 요청 시에는 init() 이후에 동작하고,
        // 두 번째 요청 부터는 init() 호출 없이 바로 호출된다.
    }
    // 모든 HTTP 요청이 먼저 전달되는 메소드이다.
    // 요청의 HTTP 메소드에 따라 적절하게 doGet(), doPost() 등을 호출한다. - 따로 오버라이드 안해도 됨


    // 컨테이너가 종료될 때 호출되는 메소드이며, 주로 자원을 반납하는 용도로 사용한다.
    @Override
    public void destroy() {
        System.out.println("annotation 매핑 destroy() 호출 : " + destroyCount++);
    }
}

• new project
• Generator : Jakarta EE (대용량 자바 프로젝트)
• Template : Web Application
• Application server: New-> Tomcat Server-> Home(Tomcat설치한 폴더경로)
• Build System: Gradle
• Group: com.ohgiraffers (그룹명 지정)

edit configurations (한글 깨질 때)

• Server / vm options : -Dfile.encoding=UTF-8
• Deployment / Application context : / (주소값 '/'로 줄임)

기본 사용 방법

let promise = fetch(url, [option]); // 반환값은 promise 객체

url : 접근하고자 하는 url option : http method 나 headers, body 내용을 객체로 지정할 수 있다.. 아무것도 넣지 않으면 기본 get 요청으로 전송한다..

-- 샘플 api https://jsonplaceholder.typicode.com

async function callApi(){

    const promise = fetch("https://jsonplaceholder.typicode.com/users");

    const response = await promise;
    console.log(response);

    console.log(`응답 상태 : ${response.status}`); // 200: 정상, 성공 / 404: 서버 요청한거 찾을수없을때(요청이 잘못됐을때) / 500: 서버 자체 잘못(개발자 잘못)

    console.log("응답 헤더"); // headers: 사용자,서버가 소통할 때 도움이 될만한 정보를 담고 있다.. ex.어떤 데이터형식/응답날짜시간/응답본문길이 등
    for(let [key, value] of response.headers){
        console.log(`${key} : ${value}`);
    }

    const json = await response.json(); // 응답 본문을 json 형식으로 반환한다.
    console.log(json);

    json.forEach(element => {
        console.log(element,"\n=======================");
    })

}

callApi();

JSON

JSON (Javascript Object Notation) 은 데이터를 구조화하여 교환하기 위한 경량 데이터 형식이다.. 사람과 기계 모두 읽고 쓰기 쉽게 설계되어 있으며 주로 웹 어플리케이션에서 서버와 클라이언트 사이의 데이터 전송에 사용된다.. 특징으로는

1. 텍스트 기반의 형식
2. 키 - 값 쌍으로 데이터를 표현
3. 다양한 언어에서 지원
4. 다양한 데이터 타입을 지원

Axios / Fetch 비교

Axios : 요청 처리에 대한 여러 가지 기능을 제공해준다.. 따라서 패키지 크기가 상대적으로 더 크고 무겁다..

Fetch : 기본 브라우저 내장 API 이다.. 가볍고 빠르다. 하지만 여러 처리를 수동으로 해주어야 한다.

import axios from "axios";

const callApi = () => {

    fetch("https://jsonplaceholder.typicode.com/users")
    .then(r=>r.json()).then(d=>console.log(d));
}

const axiosCall = () => {

    axios.get("https://jsonplaceholder.typicode.com/users") 
    .then(res=>console.log(res.data));
    // axios 요청이 자동으로 제이슨 처리해준다. 
    // axios로 받은값.data->body의 내용들을 제이슨으로 꺼내준다.
}

const AxiosCallComponent = () => {
    return (
        <>
            <button onClick={callApi}>fetch 요청</button>
            <button onClick={axiosCall}>axios 요청</button>
        </>
    )
}

export default AxiosCallComponent;

동기 작업 : 하나의 작업을 실행하고 마친 후에 작업을 순차적으로 실행

비동기 작업 : 메인 흐름은 멈추지 않은 상태에서 특정 작업들을 백그라운드에서 처리하며 동시에 처리하는 것 처럼 실행

const sayHello = () => {
    console.log("안녕");
}

setTimeout(sayHello, 3000); // 순서 2
console.log("end"); // 순서 1

setTimeout은 비동기 함수로 주어진 시간 후에 특정 코드를 실행하도록 예약하지만 기다리는 동안 나머지 코드는 계속 실행된다.. 즉 비동기적으로 동작하여 코드의 흐름을 블록하지 않고 다음 작업을 이어간다.

function increase(number, callback){
    setTimeout(()=>{
        const result = number + 10;
        if(callback){ // callback = truthy
            callback(result);
        }
    }, 1000);
}

increase(0, result=>{
    console.log(result);
    increase(result, result => {
        console.log(result);
        increase(result, result=> {
            console.log(result);
        })
    })
})

여러번 순차적으로 결과물을 콜백 함수로 전달하기 위해서는 중첩을 사용해서 호출할 수 있다.. 하지만 이러한 형태는 가독성도 좋지 않고, 유지보수도 힘들기 때문에 피해야 하는 패턴 중 하나이다.. 이러한 형태를 콜백 지옥이라고 한다..

그래서 비동기 함수를 왜 쓰나?

1. 시간이 오래 걸리는 작업을 처리하기 위해서

2. 사용자 인터페이스가 중단되지 않기 위해서..

3. 여러 작업을 동시에 처리하기 위해서 (실제로는 자바스크립트는 그렇게 동작하지 않지만, 이벤트 루프를 통해 동시에 처리되는 것 처럼 보임)

4. 콜백 지옥을 해결하기 위해서

결국 느린 작업이 전체 프로그램의 흐름을 막지 않도록 하기 위함.. 이러면 사용자에게 더 나은 경험을 제공할 수 있고, 특히 네트워크 요청, 파일 입출력, 타이머 같은 시간이 오래 걸리는 작업에서 큰 효과를 발휘한다..

Promise 객체

promise 는 콜백 지옥과 같은 코드가 형성되지 않게 (비동기 통신 간의 순서를 정하기 쉽게) 하는 방안으로 ES6 에서 도입되었다..

promise 객체 생성 이유?

1. 비동기 처리 함수를 실행 시 성공, 실패에 대한 처리가 용이하다..
2. promise 객체가 제공하는 메소드를 사용하기 위함 (콜백 지옥 상황을 해소해 주기 때문.. 가독성이 좋고, 메소드 체이닝 방식 제공)

const increase = number => {
    const promise = new Promise((resolve, reject)=>{ 
        setTimeout(()=>{
            const result = number + 10;
            if(result > 50){
                const e = new Error("numberToBig");
                return reject(e); // return 생략 가능
            }
            resolve(result);
        }, 1000);
    });
    return promise;
}
// Promise 객체 내부 내용을 동기로 처리한다. (기다려줌) 함수의 인자로 원하는 작업을 하고 값을 return해준다. - 성공 : resolve(값), 실패: reject(값)

console.log(increase(0)); // Promise { <pending> } // 값을 반환하는게 아니라 비동기로 처리한 약속자체를 반환해준다.

// 체이닝
// promise 객체는 then 메소드를 사용하여 비동기 작업의 결과를 처리할 수 있다..

increase(0).then(number => {
    console.log(number)
    return increase(number);
}).then(number => {
    console.log(number);
    return increase(number);
}).catch(e=>console.log(e, "가 발생했네")); // then() 인자로 결과값을 받아옴..

1. resolve 값 반환 -> increase() 의 인자값 40이하 넣었을 때 값 출력

2. reject 값 반환 -> increase() 의 인자값 41이상 일때 에러발생 catch에 넣어둔 값 발생 Error: numberToBig

    at Timeout._onTimeout (c:\20240801-gangnam\07_react\04_async\src\01_intro\03_promise.js:17:27)
    at listOnTimeout (node:internal/timers:581:17)
    at process.processTimers (node:internal/timers:519:7) 가 발생했네

async / await

• Promise : 비동기 작업의 결과를 처리하는 객체
• async/await : 비동기 작업을 동기적으로 실행하는 것 처럼 보이게 만드는 구문 then() 과 await : promise 의 결과를 사용할 때 then() 을 사용하거나, async 함수 내에서 await 로 처리할 수 있음..

function increase (number){
    const promise = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            const result = number + 10;
            if(result > 50){
                const e = new Error("number to big");
                return reject(e);
            }
            resolve(result);
        }, 1000);
    });
    return promise;
}


// async : 비동기 함수를 정의
async function run(){
    try{
        // resolve 값 받음
        let result = await increase(1); // await : 결과값을 기다렸다가 반환
        console.log(result);

        result = await increase(2);
        console.log(result);

        result = await increase(3);
        console.log(result);

        result = await increase(4);
        console.log(result);

        result = await increase(5);
        console.log(result);

        result = await increase(6);
        console.log(result);

        return result;
    }catch(e){
        // reject 값 받음
        console.log(e, "가 발생함");
    }
}

const value = async () => {
    const runValue = await run();
    console.log("value " + runValue);
}

const result = value();
/* console.log(result); // Promise { <pending> } */