기존 배포 방식의 문제점

기존에는 Spring Boot 애플리케이션을 배포할 때 아래와 같은 방식을 사용

# 1. 실행 중인 프로세스 확인
ps -ef | grep java

# 2. 프로세스 강제 종료
kill -9 <PID>

# 3. 새 버전 실행
cd /home/ubuntu/myapp
nohup java -jar application.jar --spring.profiles.active=prod > app.log 2>&1 &

# 4. 로그 확인
tail -f app.log

문제점:

• 서버 종료 후 새 서버 시작까지 5-10초의 중단 시간 발생
• 사용자가 페이지 접속 시 502 Bad Gateway 에러 발생
• 배포할 때마다 서비스 중단 불가피

무중단 배포(Zero-Downtime Deployment)는 서비스를 중단하지 않고 새로운 버전을 배포하는 방식

해결 방법

1. 임시 포트로 새 버전 시작: 기존 서버가 실행 중일 때, 다른 포트로 새 버전을 먼저 띄움
2. Health Check: 새 버전이 완전히 준비될 때까지 대기
3. 포트 전환: 기존 서버 종료 후 새 서버를 원래 포트로 재시작
4. Nginx 프록시: 항상 같은 포트만 바라보도록 설정

구현 과정

1. Nginx 설정 파일 생성

로컬 PC에서 nginx_config 파일 생성:

upstream app_backend {
    server 127.0.0.1:8080;
}

server { 
    listen 80; 
    server_name example.com www.example.com; 
    rewrite ^ https://$server_name$request_uri? permanent;
}

server { 
    listen 443 ssl; 
    server_name example.com;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;

    location /api/stream {
        proxy_pass http://app_backend;
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header Host $http_host;

        proxy_buffering off;
        proxy_request_buffering off;
        proxy_cache off;
        gzip off;
        add_header X-Accel-Buffering no always; 
        proxy_read_timeout 3600s; 
        proxy_send_timeout 3600s;

        proxy_http_version 1.1;
        chunked_transfer_encoding on;
    }

    location / { 
        proxy_pass http://app_backend;
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header Host $http_host;
    }
}

• upstream에서 8080 포트만 지정
• Nginx는 항상 같은 포트만 바라보므로 안정적

Nginx 설정 적용

# FileZilla로 nginx_config 파일을 /home/ubuntu/myapp/에 업로드 후

# SSH에서 설정 적용
sudo cp /home/ubuntu/myapp/nginx_config /etc/nginx/sites-enabled/myapp
sudo nginx -t
sudo systemctl reload nginx

2. 무중단 배포 스크립트 작성

로컬 PC에서 deploy.sh 파일 생성:

#!/bin/bash

echo "======================================"
echo "    Zero-Downtime Deployment"
echo "======================================"
echo ""

# Always use port 8080 for final deployment
FINAL_PORT=8080
TEMP_PORT=8081

# Check if port 8080 is running
OLD_PID=$(lsof -ti:${FINAL_PORT})

if [ -n "$OLD_PID" ]; then
    echo "[INFO] Port ${FINAL_PORT} is running (PID: $OLD_PID)"
    echo "[INFO] Starting new version on temporary port ${TEMP_PORT}..."
else
    echo "[INFO] No running process found"
    echo "[INFO] Starting directly on port ${FINAL_PORT}..."
    TEMP_PORT=${FINAL_PORT}
fi

# Move to working directory
cd /home/ubuntu/myapp

# Start new version on temp port
nohup java -jar application.jar \
    --spring.profiles.active=prod \
    --server.port=${TEMP_PORT} \
    > app_temp.log 2>&1 &

NEW_PID=$!
echo "[INFO] New process PID: $NEW_PID"

# Health check
echo "[INFO] Health checking new application..."
RETRY_COUNT=0
MAX_RETRY=30

while [ $RETRY_COUNT -lt $MAX_RETRY ]; do
    sleep 2
    RETRY_COUNT=$((RETRY_COUNT + 1))

    # Check if process is alive
    if ! ps -p $NEW_PID > /dev/null 2>&1; then
        echo "[ERROR] New process failed to start!"
        echo "[ERROR] Check logs: tail -f app_temp.log"
        exit 1
    fi

    # Check HTTP response
    HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:${TEMP_PORT}/ 2>/dev/null)

    # Success if 2xx response
    if [ "$HTTP_STATUS" -ge 200 ] && [ "$HTTP_STATUS" -lt 300 ]; then
        echo "[SUCCESS] New application started successfully! (HTTP ${HTTP_STATUS})"
        break
    fi

    echo "  Waiting... (${RETRY_COUNT}/${MAX_RETRY}) - HTTP Status: ${HTTP_STATUS}"
done

# Timeout check
if [ $RETRY_COUNT -eq $MAX_RETRY ]; then
    echo "[ERROR] New application is not responding!"
    echo "[ERROR] Check logs: tail -f app_temp.log"
    echo "[ERROR] Old process will remain running."
    kill -9 $NEW_PID
    exit 1
fi

# If we used temp port, need to restart on final port
if [ "$TEMP_PORT" = "$FINAL_PORT" ]; then
    echo "[INFO] Already running on port ${FINAL_PORT}"
    mv app_temp.log app_${FINAL_PORT}.log 2>/dev/null
else
    echo "[INFO] Restarting on port ${FINAL_PORT}..."

    # Terminate old process first
    if [ -n "$OLD_PID" ]; then
        echo "[INFO] Terminating old process (PID: $OLD_PID)..."
        kill -15 $OLD_PID

        # Wait for port to be free
        WAIT_COUNT=0
        while [ $WAIT_COUNT -lt 10 ]; do
            if ! lsof -ti:${FINAL_PORT} > /dev/null 2>&1; then
                echo "[SUCCESS] Port ${FINAL_PORT} is now free"
                break
            fi
            sleep 1
            WAIT_COUNT=$((WAIT_COUNT + 1))
        done

        # Force kill if needed
        if lsof -ti:${FINAL_PORT} > /dev/null 2>&1; then
            echo "[WARN] Forcing termination..."
            kill -9 $OLD_PID
            sleep 2
        fi
    fi

    # Stop temp process
    echo "[INFO] Stopping temporary process..."
    kill -15 $NEW_PID
    sleep 2

    # Start on final port
    echo "[INFO] Starting on port ${FINAL_PORT}..."
    nohup java -jar application.jar \
        --spring.profiles.active=prod \
        --server.port=${FINAL_PORT} \
        > app_${FINAL_PORT}.log 2>&1 &

    FINAL_PID=$!

    # Quick health check
    echo "[INFO] Final health check..."
    sleep 5

    if ps -p $FINAL_PID > /dev/null 2>&1; then
        echo "[SUCCESS] Application running on port ${FINAL_PORT}"
        NEW_PID=$FINAL_PID
    else
        echo "[ERROR] Failed to start on port ${FINAL_PORT}"
        echo "[ERROR] Check logs: tail -f app_${FINAL_PORT}.log"
        exit 1
    fi
fi

echo ""
echo "[SUCCESS] Zero-downtime deployment completed!"
echo ""
echo "Runtime Info:"
echo "  - PID: $NEW_PID"
echo "  - PORT: ${FINAL_PORT}"
echo "  - Log file: /home/ubuntu/myapp/app_${FINAL_PORT}.log"
echo ""
echo "View logs: tail -f app_${FINAL_PORT}.log"
echo "======================================"

스크립트 동작 원리

1단계: 임시 포트(8081)로 새 버전 시작
   ↓ (기존 8080 포트는 계속 서비스 중)

2단계: Health Check (최대 60초)
   ↓ (HTTP 200 응답까지 대기)

3단계: 기존 서버(8080) 종료
   ↓ (포트 완전히 해제될 때까지 대기)

4단계: 새 버전을 8080 포트로 재시작
   ↓

완료: 무중단 배포 성공!

스크립트 적용

# FileZilla로 deploy.sh 파일을 /home/ubuntu/myapp/에 업로드 후

# SSH에서 실행 권한 부여
chmod +x /home/ubuntu/myapp/deploy.sh

3. 배포 테스트

실행

cd /home/ubuntu/myapp && ./deploy.sh

실행 결과

======================================
    Zero-Downtime Deployment
======================================

[INFO] Port 8080 is running (PID: 12345)
[INFO] Starting new version on temporary port 8081...
[INFO] New process PID: 12346
[INFO] Health checking new application...
  Waiting... (1/30) - HTTP Status: 000
  Waiting... (2/30) - HTTP Status: 000
  ...
  Waiting... (13/30) - HTTP Status: 000
[SUCCESS] New application started successfully! (HTTP 200)
[INFO] Restarting on port 8080...
[INFO] Terminating old process (PID: 12345)...
[SUCCESS] Port 8080 is now free
[INFO] Stopping temporary process...
[INFO] Starting on port 8080...
[INFO] Final health check...
[SUCCESS] Application running on port 8080

[SUCCESS] Zero-downtime deployment completed!

Runtime Info:
  - PID: 12347
  - PORT: 8080
  - Log file: /home/ubuntu/myapp/app_8080.log

View logs: tail -f app_8080.log
======================================

배포 프로세스 개선

기존 방식 (5단계):

ps -ef | grep java
kill -9 <PID>
cd /home/ubuntu/myapp
nohup java -jar application.jar --spring.profiles.active=prod > app.log 2>&1 &
tail -f app.log

개선 후 (1단계):

cd /home/ubuntu/myapp && ./deploy.sh

트러블슈팅

1. 배포 중 502 에러가 발생하는 경우

원인: 새 애플리케이션이 준비되기 전에 기존 서버가 종료됨

해결: 스크립트의 Health Check이 HTTP 200 응답을 확인한 후에만 전환하므로, 대부분 방지됨. 만약 발생한다면:

# Health Check 대기 시간 늘리기
MAX_RETRY=30 → MAX_RETRY=50

2. 새 버전 배포 실패 시

증상:

[ERROR] New application is not responding!
[ERROR] Old process will remain running.

결과: 기존 버전이 계속 실행되므로 서비스는 정상

확인:

tail -f app_temp.log  # 에러 로그 확인

3. 포트 충돌 문제

확인:

ps -ef | grep java

해결:

# 불필요한 프로세스 종료
kill -9 <PID>

시도한 해결 방법들

1. YAML 설정에 따옴표 추가

• Secret Key에 특수문자(+, /)가 포함되어 YAML 파싱 문제 의심
• secret-key: "abcd/efghijklmnop" 형태로 수정

2. AWS SDK v1 → v2 마이그레이션

• 블로그에서 SDK v1.12.460+ 버전에서 bucket/key 혼용 시 서명 문제 발생한다는 정보 확인
• build.gradle에서 SDK v2로 변경 implementation platform('software.amazon.awssdk:bom:2.20.26') implementation 'software.amazon.awssdk:s3'

3. 새로운 IAM 사용자 및 Access Key 생성

• 기존 Access Key 손상 의심
• s3_user 생성 후 AmazonS3FullAccess 권한 부여
• 새 Access Key 발급

4. application.yaml 중복 설정 제거

• application.yaml에서 환경 변수로 AWS 설정을 덮어쓰고 있던 문제 발견

핵심 원인

** AWS SDK v2의 서명 계산 과정에서:**

1. HTTP 헤더에 metadata가 포함됨 (x-amz-meta-original-filename)
2. 한국어가 URL 인코딩되면서 서명 계산에 사용되는 값이 달라짐
3. 서버에서 검증 시 서명 불일치 → 403 에러

** AWS CLI로 같은 자격 증명 테스트:** AWS_ACCESS_KEY_ID="AKIA..."
AWS_SECRET_ACCESS_KEY="zgTF..."
aws s3 cp test.txt s3://test-buket/test.txt --region ap-northeast-2 → 성공! (자격 증명은 문제 없음을 확인)

최종 해결 방법

metadata에 한국어 파일명 포함으로 인한 서명 문제!

❌ 문제 코드

PutObjectRequest putObjectRequest = PutObjectRequest.builder()
      .bucket(bucketName)
      .key(s3Key)
      .contentType(file.getContentType())
      .metadata(java.util.Map.of("original-filename", originalFilename))  // 한국어!
      .build();

✅ 해결: metadata 제거

PutObjectRequest putObjectRequest = PutObjectRequest.builder()
      .bucket(bucketName)
      .key(s3Key)
      .contentType(file.getContentType())
      .build();

참고 사항

1. AWS SDK v2 추천: v1은 더 이상 유지보수되지 않음
2. IAM 사용자 분리: S3 전용 IAM 사용자를 별도로 생성하는 것이 보안상 좋음
3. metadata 사용 시 주의: 한글/특수문자 포함 시 인코딩 문제 발생 가능

MySQL Workbench의 Data Export 기능으로 덤프를 떴는데, 이모지가 전부 ?로 깨져버림.

→ DB 구조는 utf8mb4인데도 덤프 과정에서 손실이 생김. → Workbench가 세션 인코딩을 utf8(3바이트)로 강제로 바꿔버림.

1차 문제: Workbench export 시 이모지 깨짐

원인: MySQL 5.6 Workbench는 SET NAMES utf8을 기본으로 사용해서 4바이트 문자가 잘려서 덤프됨.

해결: CLI(mysqldump)로 직접 export하기.

/opt/homebrew/opt/mysql-client@8.0/bin/mysqldump \
  -h host\
  -u user \
  -p password \
  --default-character-set=utf8mb4 \
  --skip-set-charset \
  --single-transaction \
  scnew influ \
  > ~/Downloads/influ_utf8mb4.sql

옵션 설명

2차문제 : Import 시 Authentication plugin 'mysql_native_password' cannot be loaded

원인: macOS에 설치된 MySQL 9.x 클라이언트(brew install mysql)가 5.6 서버용 인증 플러그인을 지원하지 않음.

해결: MySQL 8.0 클라이언트 따로 설치 후 그 버전으로 실행.

brew install mysql-client@8.0

설치 후, 다음 경로의 명령어로 실행👇

Import 명령

/opt/homebrew/opt/mysql-client@8.0/bin/mysql \
  -h host \
  -u user \
  -p \
  --default-character-set=utf8mb4 \
  scnew \
  < ~/Downloads/influ_utf8mb4.sql

이모지가 😀 ❤️ 🫶 등으로 정상 표시되면 완벽 성공!

**GUI(Workbench) 대신 CLI를 쓰면, 이모지도 깨지지 않고 인증도 오류 없이 MySQL 5.6 → 8.0 이관 가능

• /mypage 페이지에서 사이드바 서브탭 클릭이 안됨
• /rank/oliveyoung, /rank/amazon 페이지에서도 동일한 증상
• /compstock/order-list 페이지에서도 서브탭이 동작하지 않음

원인 분석

원인 1 : Bootstrap 버전 문법 혼재

• includes/user/sidebar.html 파일에서 Bootstrap 4와 Bootstrap 5 문법이 섞여있음.

<!-- 일부 메뉴는 Bootstrap 4 문법 -->
<a data-toggle="collapse" data-target="#menu-review">

<!-- 일부 메뉴는 Bootstrap 5 문법 -->
<a data-bs-toggle="collapse" data-bs-target="#menu-compstock">

원인 2 : 페이지별 Bootstrap 버전 불일치

• 대부분의 페이지: Bootstrap 5 사용
• rank, order-list 등 일부 페이지: includes/user/head.html을 사용하며, 이 파일은 Bootstrap 4.6.0을 로드
• Bootstrap 4에서는 data-bs-toggle 문법을 지원하지 않음

<!-- head.html (문제가 있던 코드) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- Bootstrap JS가 아예 없음 -->

해결 방법

1. sidebar.html 문법 통일

-> 모든 메뉴를 Bootstrap 5 문법으로 통일

수정 전:
<a class="submenu-toggle collapsed"
   data-toggle="collapse"
   data-target="#menu-review">
수정 후:
<a class="submenu-toggle collapsed"
   data-bs-toggle="collapse" 
   data-bs-target="#menu-review">

2. head.html Bootstrap 버전 업그레이드

-> includes/user/head.html 파일을 Bootstrap 5로 업그레이드

CSS 수정:
<!-- 변경 전 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<!-- 변경 후 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

JS 추가:
<!-- jQuery 로드 후 Bootstrap JS 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

주의

Bootstrap 4 → 5 마이그레이션 시 변경사항

1. 데이터 속성에 bs- 접두사 필수
   • data-toggle → data-bs-toggle
   • data-target → data-bs-target
   • data-dismiss → data-bs-dismiss
2. jQuery 의존성 제거
   • Bootstrap 5는 jQuery가 필수가 아님
   • 하지만 프로젝트에서 jQuery를 사용 중이라면 함께 로드 가능
3. 모달, 드롭다운, collapse 등 모든 컴포넌트에 적용

<div th:replace="~{includes/user/bottom}"></div>
<div th:replace="~{includes/user/bottom::bottom}"></div>

두 구문의 차이는

“파일 전체를 불러오느냐” vs “특정 fragment만 불러오느냐”

1. th:replace="~{includes/user/bottom}"

파일 전체를 그대로 삽입_ includes/user/bottom.html의 최상위 엘리먼트(루트)부터 끝까지 현재 <div> 자리에 통째로 들어감_.

✅ 예시

<div th:replace="~{includes/user/bottom}"></div>

<!-- includes/user/bottom.html -->
<div>
  <footer>푸터 내용</footer>
  <script src="/js/common.js"></script>
</div>

👉 결과: <footer>와 <script> 모두 포함되어 div가 통째로 대체됨.

2. th:replace="~{includes/user/bottom::bottom}"

fragment(일부)만 불러옴. bottom.html 안에서 th:fragment="bottom"으로 정의된 특정 블록만 삽입함.

✅ 예시

<!-- includes/user/bottom.html -->
<div th:fragment="bottom">
  <footer>푸터 내용</footer>
</div>

<div th:fragment="chatbot">
  <script src="/js/chat.js"></script>
</div>

<div th:replace="~{includes/user/bottom::bottom}"></div>

👉 결과: bottom fragment만 가져오며, chatbot은 불러오지 않음.

3. 팁

1. 파일 안에 footer, script, modal 등 여러 섹션이 있을 땐 fragment 방식(::bottom)이 유지보수에 좋음.
2. 단일 블록만 존재하는 단순 템플릿이라면 fragment 없이 써도 무방.
3. 프로젝트 규모가 커질수록 fragment 방식 권장.

• 서버에서 SSE(text/event-stream)로 로그를 실시간 전송하는 API가 있음.

• 브라우저에서는 로그가 바로 안 뜨고 지연되거나, 아예 중간에 끊기는 현상 발생.

원인은 Nginx의 기본 버퍼링 / 압축 때문에 스트리밍이 즉시 전달되지 않음.

2. 해결 과정

1) 원인 분석

• proxy_buffering이 기본 on → 버퍼가 다 찰 때까지 응답을 모아둔다.

• gzip이 on → 압축 버퍼링이 추가로 발생.

=> SSE 특성상 한 줄 한 줄 즉시 전송이 중요한데, 이 두 옵션이 방해.

2) Nginx 설정 수정

• /api/crawl/logs/stream 전용 location 블록을 만들고, 스트리밍 관련 옵션 추가.

• 80 → 443 리다이렉트도 함께 반영.

  # HTTP → HTTPS 리다이렉트
  server {
    listen 80;
    server_name test.co.kr;
    return 301 https://$host$request_uri;
  }
  

HTTPS 서버

server { listen 443 ssl http2; server_name test.co.kr;

ssl_certificate     /etc/letsencrypt/live/test.co.kr/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/test.co.kr/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;

# ★ SSE 전용 API
location /api/crawl/logs/stream {
    proxy_pass         http://localhost:8080;
    proxy_http_version 1.1;

    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;

    # 스트리밍 핵심 옵션
    proxy_buffering           off;   # 버퍼링 금지
    proxy_request_buffering   off;
    proxy_cache               off;
    gzip                      off;   # 압축 금지
    add_header X-Accel-Buffering no always;

    proxy_read_timeout  3600s;
    proxy_send_timeout  3600s;
    chunked_transfer_encoding on;
}

# 일반 API 및 웹
location / {
    proxy_pass         http://localhost:3000;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
}

}

## 3. 테스트 

sudo nginx -t && sudo systemctl reload nginx curl -i -N "https://test.co.kr/api/crawl/logs/stream?jobId=oy-xxxxxxxx"

- 정상: 응답 헤더에 Content-Type: text/event-stream와 X-Accel-Buffering: no 확인

- 본문이 data: 또는 :로 바로 전송됨


![](https://velog.velcdn.com/images/ji_zzu/post/18f4503e-0230-48d6-b744-15fa6fb364a7/image.png)

1. 왜 EC2에서 Lightsail로 옮기게 되었나?

즉, 비용 예측과 절감 그리고 간편하게 관리하기 위해서이다 !

2. 이전 전 준비 사항

• 서비스 규모 & 요구사항 점검

    - 동시 접속자 수, CPU·메모리 사용량, 디스크 I/O, 네트워크 트래픽

• 데이터베이스 위치 결정

  • Lightsail 관리형 DB 사용 vs. RDS 유지

• 보안 그룹 & 방화벽 규칙

  • SSH(22), HTTP(80), HTTPS(443) 포트 열기

• DNS 제공자 확인

  • Route 53 또는 외부(가비아, 카페24 등)

• 백업 계획 수립

  • 이전 과정 중 데이터 손실 방지를 위해 반드시 스냅샷/덤프 수행

3. 마이그레이션 방법

A. 파일 복사 방식 (추천)

1. 새 Lightsail 인스턴스 생성
2. SSH 접속 후 rsync/scp로 코드·정적 파일 전송
3. DB는 mysqldump → Lightsail DB 또는 로컬에 복원
4. 웹서버(nginx/apache)·언어 런타임 설치 후 서비스 시작

✔️ 간단한 웹사이트나 애플리케이션 이전 시 가장 빠르고 직관적

B. 스냅샷 기반 방식

1. EC2 EBS 스냅샷 생성 → S3로 Export
2. Lightsail 스냅샷으로 Import (콘솔에서 클릭 몇 번)
3. 스냅샷으로 Lightsail 인스턴스 생성

✔️ OS 설정·사용자 계정·패키지·데이터베이스까지 완전 복제할 때 유용 ⚠️ S3 버킷, IAM 권한, 디스크 포맷 변환(vmdk) 과정이 추가로 필요

나는 최대한 쉽고 빠르게 이전하고 싶어서 A.파일 복사 방식을 사용해 이전하고자 한다.

Qoo10 리뷰 크롤링 시 페이징 버튼이 화면에 표시되지 않는 문제 때문에 기존의 시각적 버튼 클릭 방식 대신 다른 접근 방식을 사용했다.

공부의 축복이 끝이 없어 ~~!!!!!!!

1. 일반적인 페이징 크롤링 방식의 한계

대부분의 웹 크롤링 튜토리얼에서는 find_element로 "다음" 버튼을 찾아 click()하는 방식으로 페이징을 처리한다.

하지만, 특정 웹사이트(예: Qoo10 리뷰 페이지)에서는 총 리뷰 개수는 많은데도 불구하고, 페이지 하단의 "1, 2, 3, 다음"과 같은 페이징 UI 요소가 아예 HTML에 렌더링되지 않는 문제가 발생할 수 있다.

이는 서버 응답 오류, JavaScript 로딩 실패, 또는 특정 조건(예: 검색 결과 없음)에 따른 의도된 동작일 수 있다고 한다.

이러한 상황에서는 WebDriverWait으로 next_button을 아무리 기다려도 찾을 수 없으므로, 기존 방식으로는 다음 페이지로 넘어갈 수 없다 ㅠㅠ

((개발이 빨리 끝날 줄 알았지만 ... 페이징이 안뜨는 이슈를 못찾아서 삽질만 왕창 ..))

2. 웹사이트의 동적 페이징 원리 파악

페이징 UI가 없더라도, 웹사이트는 다음 페이지의 데이터를 어딘가에서 가져와야 한다. 이는 주로 AJAX(Asynchronous JavaScript and XML) 통신을 통해 이루어진다!!

Qoo10 리뷰 페이지의 경우, HTML 소스코드나 JavaScript 이벤트 리스너를 분석해보면 javascript:opinionList(페이지번호); 와 같은 JavaScript 함수 호출이 다음 페이지 로드를 담당한다는 것을 확인할 수 있었다.

<a href="#" onclick="javascript:opinionList(2); return false;">2</a>

3. 해결책: Selenium의 execute_script를 활용한 JavaScript 함수 직접 호출

Selenium WebDriver는 브라우저의 JavaScript 환경에서 임의의 JavaScript 코드를 실행할 수 있는 driver.execute_script() 메서드를 제공한다.

이 메서드를 활용하여, 웹사이트 내부적으로 다음 페이지를 로드하는 데 사용되는 JavaScript 함수(opinionList())를 우리가 직접 호출하는 방식으로 페이지를 이동시킬 수 있다.

driver.execute_script(f"javascript:opinionList({target_page});")

이 방식은 브라우저가 화면에 특정 요소를 렌더링하기를 기다릴 필요 없이, 필요한 액션을 직접 지시하는 방법이다.

4. 구현 상세 (코드에 포함된 주요 로직)

• 총 리뷰 개수 (opinion_count) 확인:
  • 화면에 페이징 버튼이 없더라도, 총 리뷰 개수는 대부분 표시된다. 이 값을 파싱하여 크롤링해야 할 대략적인 총 페이지 수를 예측한다 (math.ceil(total_reviews / 10)).
  • 이 예측치는 무한 루프에 빠지는 것을 방지하는 중요한 기준이 됩니다.
• execute_script 호출:
  • while 루프 내에서 현재 page 번호에 1을 더한 target_page를 인자로 opinionList() 함수를 호출한다.
  • driver.execute_script(f"javascript:opinionList({target_page});")
• 페이지 로드 및 콘텐츠 변경 대기:
  • JavaScript 함수 호출 후에는 AJAX 통신으로 새로운 데이터가 로드될 시간을 줘야 합니다 (time.sleep(2)).
  • 더 확실한 방법은 WebDriverWait을 사용하여 새로운 리뷰 엘리먼트가 로드될 때까지 기다리거나, 이전 페이지의 리뷰 엘리먼트가 사라지는 것(EC.staleness_of)을 기다린다.
• 무한 루프 방지 로직:
  • last_review_text_on_previous_page 변수를 사용하여, execute_script를 호출했음에도 불구하고 다음 페이지의 첫 번째 리뷰 내용이 이전 페이지의 마지막 리뷰 내용과 동일하다면, 더 이상 새로운 콘텐츠가 없다고 판단하고 크롤링을 종료한다.
  • 미리 정해둔 ABSOLUTE_MAX_PAGES (예: 500페이지) 제한을 두어, 혹시 모를 로직 오류나 웹사이트의 비정상적인 동작으로 인한 무한 루프를 방지한다.
• finally 블록을 통한 WebDriver 종료:
  • 모든 try...except 블록 바깥의 finally 블록에서 driver.quit()을 호출하여 크롤링 성공 여부나 오류 발생 여부와 상관없이 항상 WebDriver(브라우저)를 깔끔하게 종료하고 리소스를 해제한다. 크롤러의 안정성과 시스템 리소스 관리에 매우 중요하다.

5. 이 방법의 장점과 한계

• 장점:
  • 시각적 UI 요소에 의존하지 않고 동적 콘텐츠를 로드할 수 있어, 특정 웹사이트의 까다로운 페이징 문제를 해결할 수 있다.
  • 불필요한 UI 상호작용 없이 직접적인 JavaScript 호출로 효율성을 높일 수 있다.
• 한계/고려사항:
  • 웹사이트의 내부 JavaScript 함수 이름이나 작동 방식이 변경되면 크롤러 코드를 수정해야 한다. (유지보수 필요성)
  • execute_script는 웹사이트의 원래 동작 방식과 다를 수 있으며 문제가 발생할 수도 있다.
  • 무한 루프에 빠지지 않게 방지해야한다.

지금까지는 코드를 짤 때 마다 ChatGpt 한테 이런 경우엔 어떤 방법을 사용해야해? 이런 경우는??? 하고 매번 질문을 던졌다.. 하지만 이런 내가 너무나도 한심해 보였을 뿐이고 .. 이제는 나 혼자서도 방법을 결정 할 수 있는 멋진 개발자로 성장하고 싶은 마음 뿐이다. 매일매일 똑같은 걸 해도 매일매일 까먹는 나를 위해 총정리 해보려고 한다.

1. 주요 용어 및 개념 정의

1. 웹 크롤링(Web Crawling)

정의: 웹사이트의 페이지를 자동으로 탐색하고 데이터를 수집하는 기술 예시: TikTok에서 비디오 조회수를 수집하는 프로그램

2. 웹 스크래핑(Web Scraping)

정의: 웹 페이지의 HTML에서 원하는 정보를 추출하는 과정 예시: TikTok HTML 코드에서 특정 비디오 조회수를 추출

차이점:

• 웹 크롤링은 웹사이트의 여러 페이지를 자동으로 탐색하는 과정 • 웹 스크래핑은 특정 웹페이지에서 원하는 데이터를 추출하는 과정

→ 웹 크롤링을 하면서 웹 스크래핑을 수행할 수 있음!! → 웹 크롤링은 웹 스크래핑을 포함하는 상위 개념임

2. 데이터 수집 방식 비교

크롤링을 하다 보면 자연스럽게 다양한 방법을 사용하게 된다. 나는 주로 Selenium, BeautifulSoup, XPath 이 세 가지를 많이 썼다.

이제 각각 어떤 방식이고, 언제 사용하면 좋은지 정리해보려고 한다.

Selenium vs BeautifulSoup vs XPath 차이점 정리

결론: • JavaScript가 실행되는 사이트 → Selenium • 정적인 HTML에서 빠르게 데이터 추출 → BeautifulSoup • 특정 요소를 정확히 찾고 싶을 때 → XPath

실제 예제 코드 비교

1) Selenium을 사용한 크롤링 (TikTok 조회수 크롤링 예제)

from selenium import webdriver
from selenium.webdriver.common.by import By
import time

options = webdriver.ChromeOptions()
options.add_argument("--headless")  # 브라우저 창 숨기기
driver = webdriver.Chrome(options=options)

driver.get("https://www.tiktok.com/@example/video/123456789")
time.sleep(5)  # 페이지 로딩 대기

# XPath를 사용하여 조회수 가져오기
views = driver.find_element(By.XPATH, "//strong[@data-e2e='video-views']").text
print("조회수:", views)

driver.quit()

- Selenium을 사용하여 실제 브라우저에서 TikTok 페이지를 연다. 
- find_element(By.XPATH, "...")으로 조회수 요소를 찾아 데이터를 가져온다. 
- JavaScript 실행이 필요한 사이트에서 활용 가능

2) BeautifulSoup을 사용한 크롤링 (정적인 HTML에서 데이터 추출)

import requests
from bs4 import BeautifulSoup

url = "https://example.com/news"
response = requests.get(url)
soup = BeautifulSoup(response.text, "html.parser")

# 기사 제목 가져오기
title = soup.find("h1").text
print("기사 제목:", title)

- requests.get(url)을 사용하여 HTML을 가져온 후, BeautifulSoup으로 분석
- .find("h1")을 사용하여 h1 태그 안의 텍스트를 추출
- JavaScript 실행이 필요 없는 정적인 웹페이지에서 사용 가능

3) XPath를 활용한 데이터 추출

from lxml import html

html_code = """<html><body><div class='title'>웹 크롤링 기초</div></body></html>"""
tree = html.fromstring(html_code)

# XPath를 사용하여 제목 가져오기
title = tree.xpath("//div[@class='title']/text()")[0]
print("제목:", title)

- lxml.html을 사용하여 HTML을 XPath 문법으로 파싱
- //div[@class='title']/text()을 사용하여 내부의 텍스트를 가져옴
- 정확한 요소를 찾을 때 사용

이렇게 보였달까 ... 너무 가독성이 떨어지고 사진도 안보이고 !! 도저히 이미지 url 을 사진으로 나타낼 방법이 떠오르지 않았다.

하지만 팀장님의 갑작스런 발견 덕분에 해결 !!

방법은 바로 url 속성으로 가져오던 이미지를 파일과 미디어 속성으로 바꿔서 가져오는 것이다.

원래 가져오던 방식을 보자면

"Image URL": {"url": product['image_url']},

이런식으로 이미지 url을 가져와서 url 자체를 표에 집어 넣는 방식을 선택했다.

왜냐하면 처음에는 파일과 미디어는 무조건 사진 형태로 가져와서 표에 넣어야하고 그건 불가능하다고 생각했기 때문이다. (잘 알아보지 않은 나의 실수다 ..)

하지만 지금 수정한 코드를 보면

"Image URL": {
                "files": [
                    {
                        "name": "product_image",
                        "type": "external",
                        "external": {
                            "url": product['image_url']
                        }
                    }
                ]
            },

이런식으로 files로 url을 감싸서 가져오면 된다!! ((이런 방법이 있다니 ㅠㅠ))

레이아웃도 갤러리로 수정해주고, url을 file로 바꾸니 페이지 카드 미리보기로 페이지 콘텐츠인 Image URL이 보여질 수 있었다.

최종 수정 결과는

더 가독성 좋게 바뀌었다.

어떻게 하면 더 가독성있는 DB가 될까 고민을 했었는데 이런 방법이 있을거라고는 상상도 못했다ㅠㅠ 노션은 그냥 개인적인 기록용으로만 항상 사용했었는데 노션 DB 사용법을 더 익혀야겠다.

const api = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  }
});

이런식으로 axios 연결하고

const handleSearch = async (e) => {
  const barcodePackage = e.target.value;
  setSearchQuery(barcodePackage);

  if (barcodePackage) {
    try {
      const response = await api.get(`/api/products/barcode/${barcodePackage}`);
      setFormData(response.data);
    } catch (error) {
      console.error("Error details:", error.response || error);
      alert('제품을 찾을 수 없습니다.');
    }
  }
};

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await api.patch(`/api/products/${formData.id}`, formData);
    alert('제품 정보가 업데이트되었습니다!');
    console.log('Updated Data:', response.data);
  } catch (error) {
    console.error('Error details:', error.response || error);
    alert('업데이트 중 오류가 발생했습니다.');
  }
};

검색과, 제출 함수도 수정했다. api get 사용해서 spring boot랑 url을 맞게 설정하면 된다길래 드디어 백 프론트 연결을 해본다는 기쁜 마음으로 npm run dev 을 했지만

1. AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

1. code: "ERR_NETWORK"
2. config: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 5000, …}
3. message: "Network Error"
4. name: "AxiosError"
5. request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 5000, withCredentials: false, upload: XMLHttpRequestUpload, …}
6. stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vite/deps/axios.js?v=a5c51f36:1596:14)\n at Axios.request (http://localhost:5173/node_modules/.vite/deps/axios.js?v=a5c51f36:2124:41)\n at async handleSearch (http://localhost:5173/src/components/updatePage.jsx:60:26)"
7. [[Prototype]]: Error updatePage.jsx:140 GET http://localhost:8080/api/products/barcode/8809750463767 net::ERR_CONNECTION_REFUSED

ㅇ ㅖ... 에러 발생..⭐️

1시간을 해결하지 못하고 react 코드, spring boot 코드 둘 다 열심히 수정해보았지만 계속계속 발생하는

AxiosError

도대체 뭐가 문제인건지 모르겠어서 둘이 머리 싸매고 고민했다ㅠㅠ

해결 방법으로

1. 백엔드 서버가 8080 포트에서 실행 중인지

   # Mac/Linux 포트 상태 확인 명령어
   lsof -i :8080

2. API 테스트: Postman이나 브라우저에서 직접 API 호출 테스트:
3. 프론트엔드 개발 서버가 5173 포트에서 실행 중인지
4. 브라우저 콘솔에서 더 자세한 에러 메시지가 있는지

아무리 확인해봐도 API 연결 잘 되어있고, 백엔드 서버 8080에서 실행 중이고, 프론트엔드 개발 서버는 5173포트에서 실행 중이고, 콘솔에는 계속 저 에러만 떠있는데 ㅠㅠㅠ 다른 에러는 없는데 ㅠㅠㅠ 도대체 뭐가 문제인건지 아무것도 모르겠던 그때

문득 스쳐지나간 생각 ..

baseURL: 'http://localhost:8080'

설마 ... 하는 마음으로 확인해보니 localhost 로 되어있는게 아닌가 ㅠㅠㅠㅠㅠㅠ 우리는 지금 서로 다른 컴퓨터로 연결하고 싶어하는데 !!! 'http://localhost:8080'로 연결 백날 해봐라 .. 되냐고 !!!!!!

const api = axios.create({
  baseURL: 'http://백엔드_컴퓨터_IP:8080',  // 예: 'http://192.168.1.100:8080'
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  }
});

이렇게 백엔드 컴퓨터 IP 주소를 localhost 자리에 넣어주어야 연결이 된다..,,,.... 이렇게 우리는 1시간 동안 삽질 후 다시는 헷갈리지 않게 코드를 꼼꼼하게 보게되었다..!! 이렇게 배우면서 성장하는거지 ... 나만 그런거 아니죠 ..?

youtube 구독자를 불러오는데 이런 에러가 계속 발생했다. 처음 보는 에러라 해결하려고 해봤지만,, 해결 불가능ㅠㅠ GPT의 힘을 빌려보기 위해서 질문했는데

SSL 문제 해결

[SSL] record layer failure (_ssl.c:2570) 에러는 SSL 연결을 설정할 때 발생하는 오류입니다. 이미 몇 가지 해결 방법을 제시했지만, 여전히 문제가 발생하고 있다면 SSL 인증서를 우회하거나 다른 방법을 시도할 수 있습니다.

1) SSL 인증서 우회 아래와 같이 requests와 google-api의 SSL 인증서를 우회하도록 코드를 수정할 수 있습니다:

import ssl
import requests

# SSL 인증서 우회 (전체 코드에서 적용)
ssl._create_default_https_context = ssl._create_unverified_context

def send_slack_message(message):
    payload = {"text": message}
    try:
        response = requests.post(SLACK_WEBHOOK_URL, json=payload, verify=False)  # SSL 인증 우회
        if response.status_code != 200:
            print(f"Error sending message to Slack: {response.status_code}")
        else:
            print("Message sent to Slack successfully.")
    except Exception as e:
        print(f"Failed to send message to Slack: {e}")

위 코드는 requests와 google-api 클라이언트 모두에 SSL 우회를 적용하여 인증서 문제를 피할 수 있도록 합니다.

2) requests와 google-api SSL 설정 수정

또한 google-api 클라이언트에서 SSL 오류를 피하기 위해 다음 코드를 사용하여 SSL을 우회할 수 있습니다:

import ssl

# SSL 인증서 우회
ssl._create_default_https_context = ssl._create_unverified_context

# YouTube API 호출 부분
request = youtube.search().list(part="snippet", q=handle, order='relevance', maxResults=5)
response = request.execute()

계속 이렇게만 말하는게 아니겠는가 ... 하라는대로 했는데 문제 해결은 커녕 계속 같은 문제가 반복되었다.

심지어 새로운 에러 발생ㅠㅠ

Python(32365,0x16c40b000) malloc: double free for ptr 0x12e29fa00 Python(32365,0x16c40b000) malloc: *** set a breakpoint in malloc_error_break to debug

"코드를 찬찬히 읽어보자!" 하고 코드를 읽어보다가 갑자기 머릿속을 스쳐가는 생각

!!!!!!!!!!!!!!!!!!!!!! 멀티스레드 !!!!!!!!!!!!!!!!!!!!!!

if __name__ == "__main__":
    ids = get_ids_from_notion()
    with ThreadPoolExecutor(max_workers=1) as executor:
        # for entry in ids["Instagram"]:
        #     executor.submit(get_instagram_followers, entry["id"])
        for entry in ids["YouTube"]:
            executor.submit(get_youtube_followers, entry["id"])
        for entry in ids["TikTok"]:
            executor.submit(get_tiktok_followers, entry["id"])
    print("[INFO] 프로그램 종료.")

팔로워를 자동으로 크롤링해서 업데이트 해주는 프로그램을 만들고 있었는데, 노션 DB 저장되어있는 인플루언서만 거의 4만명 ..? 이들을 다 크롤링 하려면 시간이 너무너무 오래걸려서 멀티스레드 방식을 선택했었다.

찾아보니

1. 공유 자원에 대한 경쟁

멀티스레드를 사용할 때, 여러 스레드가 동일한 자원(예: 메모리, 네트워크 연결 등)을 동시에 접근하려고 할 때 충돌이 발생할 수 있습니다. 이는 메모리 할당 문제나 네트워크 요청에서 발생할 수 있는 malloc 오류와 관련이 있을 수 있습니다.

2. 네트워크 연결 문제

멀티스레드에서 동시에 여러 개의 네트워크 요청을 보내면, 요청들이 서버에서 처리되지 않거나 네트워크 제한에 걸려 SSL 오류가 발생할 수 있습니다. 이 경우, 서버가 동시에 많은 요청을 처리하는데 문제가 생겨 “SSL record layer failure” 오류나 “EOF occurred in violation of protocol” 오류가 발생할 수 있습니다.

3. ThreadPoolExecutor와 Google API

ThreadPoolExecutor를 사용할 때 googleapiclient와 같은 외부 라이브러리가 멀티스레딩을 잘 지원하지 않는 경우가 있습니다. 라이브러리에서 멀티스레드를 처리하는 방식이 적절하지 않으면, 요청을 동시에 처리하면서 문제가 발생할 수 있습니다.

멀티스레드를 사용해서 에러가 발생할 수 있다는게 말이 되는 것이다!!!

스레드 수를 제한하면 출돌을 줄일 수 있다는 말에 max_workers=5 대신 max_workers=2로 줄여보았는데, 에러가 거짓말처럼 사라졌다. 완전히 다 사라진 것은 아니고 절반으로 줄었길래, 아예 멀티스레드를 사용하지 않도록 코드를 다시 수정하고 실행시켰더니 잘 작동되었다ㅠㅠ

TikTok, Instagram 에 비해 Youtube 인플루언서는 정말정말 적었기에, Youtube는 멀티스레드를 사용하지 않고, 순차 처리하게 코드를 수정했다.

if __name__ == "__main__":
    ids = get_ids_from_notion()

    # Instagram과 TikTok은 멀티스레드 처리
    with ThreadPoolExecutor(max_workers=5) as executor:
        # Instagram과 TikTok 처리
        for entry in ids["Instagram"]:
            executor.submit(get_instagram_followers, entry["id"])
        for entry in ids["TikTok"]:
            executor.submit(get_tiktok_followers, entry["id"])

    # YouTube는 순차 처리
    for entry in ids["YouTube"]:
        get_youtube_followers(entry["id"])  # YouTube만 순차 처리

    print("[INFO] 프로그램 종료.")

ㅠㅠ 아무도 날 도와줄 수 있는 사람은 없었지만 ,, 혼자 해결했을 때의 쾌감이란 ,, 그리고 너무 뿌듯했다. 인턴 생활하면서 배우는게 너무너무 많아서 너무 좋다!

1. 앱 생성

1. Slack api > Create an App 버튼 클릭 slack api 에 들어가서 우측 초록색 버튼 Create New App을 클릭

2. From scratch 클릭

3. 앱 이름 & 워크스페이스 선택

앱 이름과 워크스페이스 선택 후 Create App 버튼을 클릭한다.

2. Bot 생성

1. OAuth & Permissions 설정 1) 왼쪽 바에서 OAuth & Permissions를 찾아 클릭한다. 2) 스크롤 하다보면 Scopes 섹션이 나온다. Add an OAuth Scope 버튼을 누르고 필요한 OAuth Scope 을 선택하면 된다.

   권한을 변경시킨 후에는 꼭 다시 app을 재설치하고, 해당 채널에 Bot을 초대시켜주어야만 실행이 된다.

2. Install App to Workspace 페이지의 상단으로 올라가면 이렇게 생긴 Install to WorkSpace 버튼을 발견할 수 있을 것이다. 클릭해보면 위와 같은 권한 요청 창이 뜨는데 허용을 눌러주면 된다. 그러면 이렇게 토큰을 발급 받은 것을 확인 할 수 있다.

발급받은 token 을 사용해서 이런식으로 코드를 작성하면 된다.

def send_to_slack(product_name, channel, screenshot_path, message=""):
    try:
        response = client.files_upload_v2(
            channel=SLACK_CHANNEL,
            file=screenshot_path,
            initial_comment=f"{product_name} ({channel}) - {message}",
        )
        if response.get("ok"):
            print(f"✅ Slack으로 전송 완료: {screenshot_path}")
        else:
            print(f"⚠️ Slack 전송 실패: {response.get('error')}")
    except SlackApiError as e:
        print(f"⚠️ Slack API 오류: {e.response['error']}")

호출 방법이다.

capture_screenshot(product_name, channel, url)

이 함수는 스크린샷을 저장한 뒤에 해당 파일을 Slack에 업로드해주는 방법으로 작동한다.

1. Incoming Webhooks

Incoming Webhooks는 Slack 외부의 애플리케이션이나 서비스가 단순히 메시지를 전송할 수 있게 해주는 가장 기본적인 방식

동작 방식:

• Slack이 제공하는 Webhook URL에 HTTP POST 요청을 보내면, Slack 채널에 메시지가 전송된다.

특징:

• 메시지 전송만 가능
• 상호작용 불가(예: 버튼 클릭, 파일 업로드 등은 지원하지 않음)
• 설정이 간단하고, 추가적인 권한 설정이 필요하지 않음

사용 사례:

• 애플리케이션 상태 알림
• 간단한 로그나 알림 전송
• 빌드 결과나 배포 완료 알림

내 프로젝트의 코드로 예시를 들자면

def send_webhook_message(text):
    payload = {"text": text}
    response = requests.post(SLACK_WEBHOOK_URL, json=payload)
    if response.status_code == 200:
        print("✅ Webhook 메시지 전송 완료")
    else:
        print(f"⚠️ Webhook 메시지 전송 실패: {response.text}")

이런식으로 간단한 상태 알림을 해주는 기능이다.

send_webhook_message("크롤링 작업이 완료되었습니다. 결과를 확인하세요.")

호출할때는 이렇게 호출하면 된다.

2. Slack Bot

Slack Bot은 Slack API를 활용하여 더 복잡하고 상호작용이 가능한 기능을 제공하는 방식

동작 방식:

• Slack API를 사용하여 메시지 전송, 파일 업로드, 채널 정보 읽기, 사용자와 상호작용 등의 작업 수행
• Bot Token을 통해 인증 및 권한 부여

특징:

• 양방향 상호작용 가능(예: 버튼 클릭 이벤트 처리, 대화형 메시지 등)
• 파일 업로드, 데이터 조회, 사용자 입력 처리 등 다양한 기능 지원
• 권한 및 범위 설정이 필요

사용 사례:

• 고객 지원 챗봇
• 워크플로우 자동화
• 프로젝트 관리 및 알림

내 프로젝트의 코드로 예시를 들자면

def send_to_slack(product_name, channel, screenshot_path, message=""):
    try:
        response = client.files_upload_v2(
            channel=SLACK_CHANNEL,
            file=screenshot_path,
            initial_comment=f"{product_name} ({channel}) - {message}",
        )
        if response.get("ok"):
            print(f"✅ Slack으로 전송 완료: {screenshot_path}")
        else:
            print(f"⚠️ Slack 전송 실패: {response.get('error')}")
    except SlackApiError as e:
        print(f"⚠️ Slack API 오류: {e.response['error']}")

이런식으로 스크린샷 file을 보내주는 기능이다.

capture_screenshot(product_name, channel, url)

호출할때는 이렇게 호출하면 된다.

웹사이트 주소(http://localhost:8000/login/)를 생성하기 위해서는 my_project/urls.py 파일에 url 주소 추가

from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', views.login_view, name='login'),  # 로그인 페이지 추가
]

2. 로그인 페이지에서의 해야 할 일 작성

dm/views.py

from django.shortcuts import render

def login_view(request):
    return render(request, 'login.html')
    ```python
from django.shortcuts import render

def login_view(request):
    return render(request, 'login.html')

3. HTML 파일 만들기

templates라는 폴더를 만들고, 그 안에 login.html 파일 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Instagram Login</h1>
    <form method="post">
        {% csrf_token %}
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <button type="submit">Login</button>
    </form>
</body>
</html>

서버 실행하기

python manage.py runserver

1. Django?

Django는 웹사이트를 쉽게 만들도록 도와주는 *“프레임워크” *

웹사이트는 집이라고 생각해보면 이 집을 짓기 위해서는 기둥, 벽, 문 같은 기본 구조가 필요한데 Django는 이 기본 구조를 자동으로 만들어 줘서 우리가 빨리 웹사이트를 만들 수 있게 해준다.

2. 설치해야 할 것들

1. Python

   python --version

2. Django

   pip install django

3. Django로 프로젝트 시작

1. Django 프로젝트 생성:

   django-admin startproject insta_dm_project

1-1) 폴더 구조 

> insta_dm_project/
├── manage.py
├── my_project/
    ├── init.py
    ├── settings.py
    ├── urls.py
    ├── asgi.py
    ├── wsgi.py


•    manage.py: Django 프로젝트를 시작하거나 관리하는 데 사용하는 파일
•    settings.py: 웹사이트에 필요한 설정(예: 언어, 시간대 등)을 저장하는 곳
•    urls.py: 웹사이트의 주소를 관리

2. 앱 만들기

Django에서는 “앱”이라는 작은 기능 단위로 작업을 한다.

앱은 레고 블록의 개념 예를 들어, “로그인 앱”, “DM 앱”처럼 각각의 기능을 만들어 붙이는 거야.

1) 앱 생성 

python manage.py startapp dm

2) 폴더 구조:
이제 dm 폴더 구조 

dm/ ├── admin.py ├── apps.py ├── models.py ├── tests.py ├── views.py ├── init.py └── migrations/

•    views.py: 사용자가 어떤 행동을 하면, 어떻게 반응할지 작성
•    models.py: 데이터를 저장하고 관리(예: 사용자 정보)
•    admin.py: 관리자 페이지를 관리

데이터베이스와 상호작용하며, 데이터의 CRUD(Create, Read, Update, Delete) 작업을 수행한다.

• Repository는 Spring Data JPA와 같은 ORM(Object-Relational Mapping) 기술을 사용하여 데이터베이스에 접근한다.

• 주로 @Repository 어노테이션이 붙은 인터페이스로 정의되며, JpaRepository와 같은 기본 인터페이스를 확장하여 사용한다.

• Repository 메서드를 호출하면, 데이터베이스에서 데이터를 조회하거나 저장하는 작업을 수행한다.

package com.thc.fallsprbasic.repository;


import com.thc.fallsprbasic.domain.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
    User findByUsernameAndPassword(String username, String password);
}

repository 생성시 필수 요소

• @Repository 어노테이션 추가
• extends JpaRepository 추가
• <entity type, entity type의 pk(Id)type> 의 규칙으로 작성

기본적으로 제공되는 메서드

• findAll() : 데이터를 조회할때 사용하는 메서드

기본적으로 제공되지 않는 메서드

• findByUsername(String username) : Username으로 데이터를 조회할 때 사용하는 메서드
• findByUsernameAndPassword(String username, String password) : username과 password로 데이터를 조회할 때 사용하는 메서드

위와 같이 메서드를 직접 생성해서 사용할 수 있다.

1. Page Controller(@Controller)

2. Rest Controller(@RestController)

1. Page Controller(@Controller)

HTML 사용

Page Controller는 주로 HTML 페이지를 반환한다. 이를 통해 사용자에게 웹 페이지를 보여줄 수 있다.

역할

전통적인 웹 애플리케이션에서 사용된다. 클라이언트(주로 웹 브라우저)가 요청을 보내면, 서버는 해당 요청에 맞는 HTML 페이지를 렌더링하여 클라이언트에게 반환한다.

• 예: 사용자가 브라우저에서 http://localhost:8080/board/home를 요청하면, Page Controller는 home.html 파일을 찾아 렌더링한 후, 이 HTML 페이지를 사용자에게 전달한다.

2. Rest Controller (@RestController)

HTML 미사용

Rest Controller는 HTML을 반환하지 않는다. 대신, JSON 또는 XML 형식의 데이터를 반환한다.

역할

RESTful API를 제공하는 데 사용된다. 주로 웹 애플리케이션의 백엔드에서 데이터를 처리하고, 이 데이터를 클라이언트(예: 웹 브라우저, 모바일 앱, 다른 서버)에 전달한다.

• 예: 사용자가 http://localhost:8080/board/list를 요청하면, Rest Controller는 데이터베이스에서 게시글 목록을 가져와 JSON 형식으로 반환한다. 클라이언트는 이 JSON 데이터를 사용하여 필요한 작업을 수행한다.

Controller, Service, Repository, DB 가 존재한다.

<Controller는 쇼핑몰의 웹사이트, Service는 가게의 직원, Repository는 물건을 보관하는 창고와 같은 역할>

Controller

역할

Controller는 클라이언트로부터 들어오는 HTTP 요청을 처리하고, 적절한 서비스를 호출하여 응답을 생성한다.

작동 방식

• 클라이언트가 브라우저 또는 API 클라이언트를 통해 HTTP 요청을 보낸다. 이 요청은 Spring Boot의 내장 웹 서버(예: Tomcat)에 의해 받아들여지며, 적절한 Controller로 라우팅된다.
• Controller는 주로 @RestController 또는 @Controller 어노테이션이 붙은 클래스로 정의된다.
• 특정 URL 패턴과 매핑된 메서드는 @GetMapping, @PostMapping 등과 같은 어노테이션으로 정의되며, 이 메서드가 요청을 처리한다.
• Controller는 Service 계층을 호출하여 비즈니스 로직을 처리한 후, 그 결과를 HTTP 응답으로 변환하여 클라이언트에 반환된다.

Controller는 사용자가 웹사이트에 들어와서 주문을 하는 것과 같다. 사용자가 웹사이트에서 “물건 구매” 버튼을 누르면, 그 요청이 Controller로 간다. Controller는 요청을 받아서, 가게 직원(Service)에게 “이 사람이 이 물건을 사고 싶어해”라고 전달한다.

Controller는 사용자가 웹사이트에 입력하는 것(예: 주문)을 받아서 처리하는 역할을 한다.

Service

역할

Service 계층은 비즈니스 로직을 처리하는 곳이다. 데이터 처리, 계산, 기타 비즈니스 규칙을 실행하며, Repository 계층을 호출하여 데이터베이스와 상호작용한다.

작동 방식

• Controller가 서비스 요청을 받으면, Service 계층의 메서드를 호출한다. Service는 주로 @Service 어노테이션이 붙은 클래스로 정의되며, 비즈니스 로직을 캡슐화한다.
• 서비스 메서드는 비즈니스 로직을 수행하고, 필요 시 Repository 계층을 통해 데이터를 읽거나 쓰는 작업을 한다.
• 처리 결과를 Controller에 반환하여, 최종적으로 클라이언트에게 응답할 수 있도록 한다.

Service는 가게 직원이다. 이 직원은 고객의 요청을 받고, 그 요청을 처리한다. 예를 들어, 고객이 “이 물건을 사고 싶어요”라고 하면, 직원은 그 물건이 있는지 확인하고, 주문을 처리한다. 직원이 할 일은 “물건이 창고에 있는지 확인하고(DB 확인), 있다면 주문을 처리하고, 없다면 ‘재고 없음’이라고 알려주는 것”이다.

Service는 모든 비즈니스 로직을 처리하는 곳이다. “물건을 사고 싶다”는 요청을 받아서, 처리하기 위해 필요한 일을 한다.

DAO(Repository)

역할

Repository 계층은 데이터베이스와 상호작용하며, 데이터의 CRUD(Create, Read, Update, Delete) 작업을 수행한다.

작동 방식

• Repository는 Spring Data JPA와 같은 ORM(Object-Relational Mapping) 기술을 사용하여 데이터베이스에 접근한다.
• 주로 @Repository 어노테이션이 붙은 인터페이스로 정의되며, JpaRepository와 같은 기본 인터페이스를 확장하여 사용한다.
• Repository 메서드를 호출하면, 데이터베이스에서 데이터를 조회하거나 저장하는 작업을 수행한다.
• 이 계층은 데이터베이스와의 직접적인 상호작용을 추상화하여, 상위 계층에서 데이터 접근의 복잡성을 숨긴다.

Repository는 가게의 창고이다. 모든 물건(데이터)이 여기 저장되어 있다. 가게 직원(Service)은 필요한 물건이 있는지 이 창고에 물어본다. 창고에서는 “이 물건이 있습니다/없습니다”라고 대답한다. 이 창고는 물건을 꺼내주기도 하고(데이터를 읽기), 물건을 새로 넣어주기도 하고(데이터 저장), 오래된 물건을 폐기하기도 한다(데이터 삭제).

Repository는 데이터베이스와 상호작용하는 곳이다. 데이터를 저장하고, 읽고, 업데이트하고, 삭제하는 역할을 한다.

전체 작동 흐름

1. HTTP 요청이 클라이언트로부터 들어오면, Spring Boot의 Controller가 이 요청을 받아들인다.

2. Controller는 요청을 처리하기 위해 Service 계층의 메서드를 호출한다.

3. Service 계층은 비즈니스 로직을 수행하며, 필요 시 DAO(Repository)를 호출하여 DB와 상호작용한다.

4. Repository 계층은 DB에 접근하여 필요한 데이터를 읽어오거나 저장 작업을 수행한다.

5. Service 계층은 이 데이터를 이용해 비즈니스 로직을 마무리한 후, 결과를 Controller로 반환한다.

6. Controller는 처리 결과를 HTTP 응답으로 변환하여 클라이언트에 반환한다.