CODESYUN

[Spring] Google Cloud Vision API로 이미지에서 텍스트 추출하는 기능 만들기

s_ih_yun — Tue, 21 Oct 2025 02:26:32 +0900

포켓몬슬립 식재료 가방을 캡쳐해서 올리면 식재료 수량이 저장되면 좋겠다...
하면 되겠다!

1. Vision API

1.0. Google Cloud Vision API 란?

Google에서 제공하는 머신러닝 기반 이미지 분석 AI
- 이미지 인식, 객체 검출 등에서 매우 효과적으로 사용할 수 있는 API 제공
아래 사이트에서 다음과 같이 샘플로 분석해볼 수 있다
- https://cloud.google.com/vision?hl=ko

잘 하네!

1.1. Vision AI 환경 준비

https://chung-develop.tistory.com/47

Google Vision AI(이미지분석 API) 적용-이미지 내 텍스트 추출하기(OCR)-1편

Google Vision AI(이미지분석) 적용하기-이미지 내 텍스트 추출하기(OCR)-1편 1. Google Vision AI API란? 구글에서 제공해주는 머신러닝 기반의 이미지 분석 API이다. 이 Vision API를 이용하면 이미지를 이용해

chung-develop.tistory.com

요런 글들을 참고하여 Vision API에서 다음 과정을 거쳤다!

프로젝트 새로 만들기
프로젝트 결제 등록
Vision API 사용 설정
서비스 계정 등록
서비스 계정 비공개 키 받기
- JSON 파일 저장!

1.2. Vision API 키 환경 변수 등록

위에서 발급받은 Vision API의 인증 키(JSON 파일)을 환경 변수로 등록
환경 변수 GOOGLE_APPLICATION_CREDENTIALS를 Google Cloud SDK가 자동으로 읽어 사용한다

1.2.1. 개발 환경변수 등록 : IntelliJ

Run/Debug Configurations > Environment variables
- Name : GOOGLE_APPLICATION_CREDENTIALS
- Value : 인증 키 JSON 파일 위치

1.2.2. 운영 환경변수 등록

운영 서버 /opt/posleep/keys/vision-sa.json 위치에 인증 키 JSON 파일을 올려두었다
app.env에 다음과 같이 인증 키 등록
- docker-compose.yml에 지정해둔 api의 env_file
- 컨테이너 내부에서 읽기 가능!

GOOGLE_APPLICATION_CREDENTIALS=/opt/posleep/keys/vision-sa.json

2. Spring에서 Vision API 사용하기

2.0. 의존성 추가 및 서비스 호출

의존성 추가 (build.gradle)

dependencies {
	...
    implementation 'com.google.cloud:google-cloud-vision:3.35.0'
}

화면 ~ 백엔드 API
- 브라우저에서 이미지 업로드(<input type="file" .../>) 후 백엔드 API 호출 (ingredients/ocr)
- Controller에서는 MultipartFile로 이미지 받아 검증 후, Service로 전달
- Service에서 Vision API 호출!

2.1. Vision API 사용하기

아래와 같은 메소드(callVision)을 작성하여 Vision API를 호출하여 이미지 → 텍스트 변환

2.1.1. 메서드 코드

private String callVision(MultipartFile image) throws Exception {
    ByteString imgBytes = ByteString.copyFrom(image.getBytes());
    Image img = Image.newBuilder().setContent(imgBytes).build();

    Feature feat = Feature.newBuilder()
            .setType(Feature.Type.TEXT_DETECTION)
            .build();

    AnnotateImageRequest request = AnnotateImageRequest.newBuilder()
            .addFeatures(feat)
            .setImage(img)
            .build();

    try (ImageAnnotatorClient client = ImageAnnotatorClient.create()) {
        BatchAnnotateImagesResponse response = client.batchAnnotateImages(List.of(request));
        AnnotateImageResponse res = response.getResponses(0);

        if (res.hasError()) {
            throw new IllegalStateException(res.getError().getMessage());
        }

        return res.getFullTextAnnotation().getText();
    }
}

2.1.2. 코드 라인별 설명

ByteString imgBytes = ByteString.copyFrom(image.getBytes());

Vision API는 내부적으로 gRPC를 이용하기 때문에 ByteString 형태로 변환

Image img = Image.newBuilder().setContent(imgBytes).build();

Vision API에서 사용하는 Image protobuf 객체 생성

Feature feat = Feature.newBuilder()
        .setType(Feature.Type.TEXT_DETECTION)
        .build();

setType() : OCR 기능 지정
Feature.Type.TEXT_DETECTION : 문자 인식 모드

AnnotateImageRequest request = AnnotateImageRequest.newBuilder()
        .addFeatures(feat)
        .setImage(img)
        .build();

Vision API에 보낼 실제 요청 객체 : 분석 기능, 인식할 이미지 지정

try (ImageAnnotatorClient client = ImageAnnotatorClient.create()) {

Vision API에 연결할 gRPC 클라이언트 생성
내부적으로 인증(환경변수 GOOGLE_APPLICATION_CREDENTIALS)과 통신 자동 처리
try (...) 문으로 사용 끝나면 자동으로 세션 종료 및 리소스 해제

BatchAnnotateImagesResponse response = client.batchAnnotateImages(List.of(request));

실제 API 호출 부분 (한 번에 여러 이미지 요청 가능)
서버로 gRPC 호출 → Vision API가 이미지 처리 후 응답 반환

AnnotateImageResponse res = response.getResponses(0);

if (res.hasError()) {
    throw new IllegalStateException(res.getError().getMessage());
}

return res.getFullTextAnnotation().getText();

응답 중 첫 번째를 꺼내 예외 검증 후, 문자열 반환

2.2. 파싱 및 DB 업로드를 포함한 코드

callVision(image) : Vision API 호출하여 이미지 → 텍스트 변환
parseNameCounts(fullText) : 추출된 텍스트 파싱 및 정제
@Transactional + setQuantity() : 엔티티가 영속 상태가 되어 메서드 정상 종료시 Commit (Update)
- 이미지에 있는 식재료 → 이미지 인식된 수량 등록, 이미지에 없는 식재료 → 수량 0으로 등록

@Transactional
public void processAndApply(MultipartFile image) throws Exception {
    String fullText = callVision(image);

    Map<String,Integer> ocrResults = parseNameCounts(fullText);
    List<Ingredient> ingredients = repo.findAll();

    for (Ingredient ing : ingredients) {
        String name = ing.getName();
        Integer parsedCount = ocrResults.get(name);
        if (parsedCount != null) {
            ing.setQuantity(parsedCount);
            ing.setIsRegistered(true);
        } else {
            ing.setQuantity(0);
        }
    }
}

private Map<String, Integer> parseNameCounts(String fullText) {
    Deque<Integer> counts = new ArrayDeque<>();
    Deque<String> names = new ArrayDeque<>();
    Map<String, Integer> result = new LinkedHashMap<>();

    List<String> rawLines = Arrays.stream(fullText.split("\\R"))
            .map(String::trim)
            .toList();
    int startIdx = findStartIndex(rawLines, START_ANCHOR);
    int endIdx = findEndIndex(rawLines, startIdx, END_ANCHORS);

    List<String> lines = rawLines.subList(startIdx, endIdx);
    for (String raw : lines) {
        String line = normalizeLine(raw);
        if (line.isEmpty()) continue;

        Matcher m = COUNT_LINE.matcher(line);
        if (m.matches()) {
            int c = Integer.parseInt(m.group(1));
            counts.addLast(c);
        }
        if (isName(line)) {
            names.addLast(line);
        }

        while (!counts.isEmpty() && !names.isEmpty()) {
            result.put(names.removeFirst(), counts.removeFirst());
        }
    }
    return result;
}

전체 코드가 궁금하다면 하단의 깃허브로!
Vision API 사용 코드 : /backend/src/main/java/com/syun/posleep/service/IngredientOcrService.java

3. ⭐️ 성공 ⭐️

아래와 같은 이미지 업로드 시, 재료 수량 자동 업데이트!

포켓몬슬립 가방 스크린샷

업로드 > 파일 선택 > 업로드/분석 기능 실행 후

https://github.com/syun32/2025-posleep

GitHub - syun32/2025-posleep

Contribute to syun32/2025-posleep development by creating an account on GitHub.

github.com

[AWS] EC2 인스턴스 SSH Connection timed out : 탄력적 IP 연결 및 요금 주의

s_ih_yun — Tue, 21 Oct 2025 01:06:23 +0900

0. 상황

기존에 EC2에 SSH(port 22) 접속에는 문제가 없었음
웹 서버를 구축해서 오픈한 뒤 접속이 타임아웃!
- 하지만 간헐적으로 될 때도 있다

1. 예상 원인

퍼블릭 IP 변경에 따른 DNS/접속 지연 문제
- 인스턴스를 중지/시작하거나 리부트 하는 경우 IP가 변경될 수 있음
- VPC 설정이나 퍼블릭 IP 갱신 등 영향으로 IP 변경 가능
신규 인바운드 포트가 열리면서 보안그룹, 네트워크 ACL 설정이 추가됐을 가능성
- 또는 트래픽이 증가했을 때 간헐적인 불안정성 야기
탄력적 IP 적용으로 고정된 주소를 사용하여 IP 변경 리스크를 제거하고 SSH 접속 안정성을 확보하자!

2. 탄력적 IP 적용

2.1. 탄력적 IP 생성

2.2. 탄력적 IP 주소 연결

탄력적 IP 주소 선택 → 탄력적 IP 주소 연결 → 인스턴스 선택 → 연결

2.3. ⭐️ 성공 ⭐️

탄력적 IP는 고정된 퍼블릭 IPv4 주소
- 외부에서도 항상 같은 IP로 접속하게 되므로 보안그룹, DNS, 캐시 등 변동 요인 감소
퍼블릭 IP가 변경되거나 불안정한 문제 제거되어 SSH 접속 안정성 확보!

3. ⚠️ 과금 주의

3.1. AWS Public IPv4 요금 변경

https://aws.amazon.com/ko/blogs/korea/new-aws-public-ipv4-address-charge-public-ip-insights/

공지 – AWS Public IPv4 주소 요금 변경 및 Public IP Insights 기능 출시 | Amazon Web Services

AWS에서 퍼블릭(Public) IPv4 주소에 대한 새로운 요금이 도입됩니다. 2024년 2월 1일부터 서비스 연결 여부에 관계없이 모든 퍼블릭 IPv4 주소에 대해 시간당 IP당 0.005 USD의 요금이 부과됩니다. 계정에

aws.amazon.com

프리티어 유저로서 과금의 위험을 피하기 위해 주의하던 탄력적 IP 요금 정책이 모르던 새 바뀌었다!
(기존) 탄력적 IP에 연결된 인스턴스가 없을 때 과금
- 공용 IP 자원을 소모하므로 미사용 상태의 탄력적 IP 방지를 위한 정책
(2024년 2월 1일 이후) 서비스 연결 여부에 관계없이 시간당 IP당 0.005달러 부과...!
- 프리티어는 1년 동안 매월 750시간의 퍼블릭 IPv4 주소 사용이 포함된다
- 그래도 1개의 탄력적 IP 주소는 무료로 사용할 수 있다!
인스턴스 제거 시에 탄력적 IP도 꼭 릴리즈하도록 주의하자

3.2. 퍼블릭 IP 인사이트 : 사용 중인 퍼블릭 IP 점검

Amazon VPC IP Address Manager > 퍼블릭 IP 인사이트
RDS가 퍼블릭 접근 허용되어 있는지, 연결되지 않은 탄력적 IP는 없는지 점검해보자

I'm Ok

[Spring] @Controller와 @RestController, 공통 응답 포맷

s_ih_yun — Mon, 20 Oct 2025 23:50:04 +0900

[Next.js] Thymeleaf 기반 구조 Next.js로 리팩토링 : Next.js 준비 및 설정 / Docker 컨테이너화 / Nginx 프록시 설정

이전 Thymeleaf로 간단한 페이지를 제공하던 프로젝트에서 Next.js 프론트를 추가하면서
백엔드 컨트롤러를 @Controller에서 @RestController로 변경했습니당
그러면서 JSON 응답의 일관성을 위해 공통 응답 포맷 적용ㄱ

1. @Controller

전통적은 Spring MVC의 컨트롤러 어노테이션
주로 View(화면)을 반환하기 위해 사용
- @ResponseBody 어노테이션을 활용하여 JSON 형태 데이터 반환 가능

@Controller
@RequestMapping("/ingredients")
public class IngredientController {
    ...
    @PostMapping("/update")
    public String update(@Valid @ModelAttribute("form") IngredientForm form,
                         BindingResult br,
                         RedirectAttributes ra,
                         Model model) {

        if (br.hasErrors()) {
            model.addAttribute("ingredients", svc.listAllOrdered());
            return "ingredientList";
        }
        svc.update(form);
        ra.addFlashAttribute("msg", "저장되었습니다.");

        return "redirect:/ingredients";
    }
    ...

2. @RestController

Restful Web Service에서 사용되는 컨트롤러 어노테이션
@Controller + @ResponseBody가 합쳐진 형태로, JSON 형태의 객체 데이터 반환
- 객체를 ResponseEntity로 감싸서 반환

@RestController
@RequestMapping("/ingredients")
public class IngredientController {
    ...
    @PostMapping(
            path = "/update",
            consumes = MediaType.APPLICATION_JSON_VALUE
    )
    public ResponseEntity<?> update(@Valid @RequestBody IngredientForm form,
                                 BindingResult br) {

        if (br.hasErrors()) {
            return ResponseEntity.badRequest().body(br.getAllErrors());
        }

        svc.update(form);
        return ResponseEntity.ok().build();
    }
    ...

3. 공통 응답 포맷 사용하기

3.0. 사용 이유

다음과 같은 일관된 백엔드 응답을 제공하고자 할 때, Controller의 리턴 타입을 반복적으로 작성해야 한다..!
- 코드 중복을 피해 공통 응답 코드를 작성해두고 반환하자

{
    "status": "success",
    "data": {
    }
    "meta": null
}

3.1. [BE] API Response DTO

다음과 같이 공통 Response Class 작성
- 공통 ExceptionHandler도 작성하여 Exception 발생 시에도 유형에 따라 처리하자

package com.syun.posleep.dto.response;

import java.util.Map;

public record ApiResponse<T>(
        String status,
        T data,
        Map<String, Object> meta
) {
    public static <T> ApiResponse<T> success(T data) {
        return new ApiResponse<>("success", data, null);
    }
    public static <T> ApiResponse<T> success(T data, Map<String,Object> meta) {
        return new ApiResponse<>("success", data, meta);
    }
}

다음과 같이 컨트롤러의 응답에 사용

@RestController
@RequestMapping("/ingredients")
public class IngredientController {
    ...
    @GetMapping
    public ApiResponse<List<IngredientSheetRow>> getPage() {
        List<IngredientSheetRow> list = svc.listAllOrdered();
        return ApiResponse.success(list);
    }
    ...

3.2. [FE] 공통 API 응답 타입

공통 API 응답 타입 선언

// 공통 API 응답 타입 (frontend/src/types/api.ts)
export type ApiResponse<T> = {
  status: string;            // "success" | "error" 등
  data: T;                   // 실제 데이터
  meta?: Record<string, unknown>; // 페이징, 총 개수 등 부가 정보
};

다음과 같이 응답타입 사용

// 목록 조회 (frontend/src/app/ingredients/page.tsx)
useEffect(() => {
    (async () => {
        try {
            setLoading(true);
            const res = await fetch(`${BASE}/ingredients`, { cache: 'no-store' });
            if (!res.ok) throw new Error();
            const json: ApiResponse<Ingredient[]> = await res.json();
...

References

https://mangkyu.tistory.com/49

https://backendcode.tistory.com/213#google_vignette

https://velog.io/@tkdwns414/Spring-Boot-%EA%B3%B5%ED%86%B5-%EC%9D%91%EB%8B%B5%EC%9A%A9-ApiResponse-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://deveun.tistory.com/entry/SpringBoot-%EA%B3%B5%ED%86%B5-Response-%ED%8F%AC%EB%A7%B7-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

[Next.js] Thymeleaf 기반 구조 Next.js로 리팩토링 : Next.js 준비 및 설정 / Docker 컨테이너화 / Nginx 프록시 설정

s_ih_yun — Mon, 20 Oct 2025 18:39:19 +0900

기존 프로젝트는 Thymeleaf 기반의 간단한 페이지로 구성되어 있었는데
프론트 협업을 대비해서 연습해보고 싶어서 Next.js 기반으로 리팩토링‼

1. Next.js 란?

React를 위해 만든 오픈 소스 JavaScript 웹 프레임워크
React에는 없는 기능 제공
- 서버 사이드 렌더링(SSR; Server-Side Rendering)
- 정적 사이트 생성(SSG; Static Site Generation)
- 증분 정적 재생성(ISR; Incremental Static Regeneration)

1.1. SSR vs CSR

	SSR (Server-Side Rendering)	CSR (Client-Server Rendering)
JavaScript 로딩	서버에서 JS 로딩 → 완성된 HTML 클라이언트로 전달 (초기 로딩 속도 빠름)	브라우저에 JS 정보 가진 빈 HTML 전달 → 브라우저가 JS 로딩하여 UI 빌드 (초기 로드 완료되면 렌더링 빠름)
SEO (Search Engine Optimization)	HTML 파일에 모든 정보가 포함되어 있어 봇이 데이터 수집 가능	초기 HTML 파일이 비어있어 봇이 데이터 수집하기 어려움

1.2. React vs Vue vs Next.js

	React	Vue	Next.js
개발 유형	라이브러리	프레임워크	React 기반 프레임워크
학습 곡선	중간	낮음	중간
렌더링 방식	CSR	CSR	SSR, SSG
라우팅	별도 라이브러리 필요	Vue Router 필요	파일 기반 라우팅
상태 관리	Redux, Context API	Vuex	Redux, Context API
사용 사례	대규모 SPA	소규모~중규모 프로젝트	SEO가 필요한 프로젝트
커뮤니티 및 생태계	매우 활발	활발	활발 (React 기반)

2. Next.js 프로젝트 준비

2.0. 최종 목표 디렉토리

2025-posleep/
├─ backend/
├─ frontend/     # ← Next.js 프로젝트 추가
├─ infra/
│  ├─ docker-compose.yml
│  └─ nginx/
│     └─ nginx.conf
└─ ...

SpringBoot + Thymeleaf 구조 →→→ Next.js + 백엔드 API (SpringBoot)
모노레포 (Monorepo)
- CI/CD 통합을 위한 구성
- frontend, backend API 프로젝트를 하나의 레포지토리에서 관리
Spring root를 2025-posleep → 2025-posleep/backend로 변경

2.1. 설치 및 프로젝트 생성

nvm + Node 20 LTS 설치
프로젝트 생성 : npm create-next-app
- 프로젝트 이름 : frontend
- Turbopack : Next.js 팀이 만든 Rust 기반 초고속 번들러 → 협업 대비 연습이기 때문에 안정성 중요하여 설치 ❌

syun@SyunMac 2025-posleep % npx create-next-app@latest frontend \
  --ts --eslint --tailwind --app --src-dir --import-alias "@/*"
Need to install the following packages:
create-next-app@15.5.3
Ok to proceed? (y) y

✔ Would you like to use Turbopack? (recommended) … No / Yes

2.2. 로컬 백엔드 API 연동

개발 중에는 백엔드(로컬 8080)로 붙도록 환경 변수 사용 (.env.local)
- 환경변수를 process.env로 자동으로 로드 (ex. process.env.NEXT_PUBLIC_BACKEND_URL)
- 운영 환경 백엔드 URL은 docker-compose.yml 에 설정하여 주입 (3.3 참고)

# frontend/.env.local
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080

개발 중 CORS 없이 호출하도록 next.config.ts에 rewrites 추가

import type { NextConfig } from "next";
import { PHASE_DEVELOPMENT_SERVER } from "next/constants";

const base: NextConfig = {
  reactStrictMode: true,
};

// 개발 모드에서만 /api → 8080 프록시
const config = (phase: string): NextConfig => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      ...base,
      async rewrites() {
        return [
          { source: "/api/:path*", destination: "http://localhost:8080/:path*" },
        ];
      },
    };
  }
  return base;
};

export default config;

2.3. 개발 서버 실행

cd frontend
npm run dev

3. 프론트엔드 Docker 컨테이너화

3.1. standalone 빌드 설정

next.config.ts 파일에서 standalone 빌드 설정
- 빌드 시 .next/standalone 디렉토리 생성 : 서버 실행에 필요한 최소한의 파일만 분리
- EC2나 Docker 같은 서버 환경에서 가볍고 빠르게 실행 가능

import type { NextConfig } from "next";
import { PHASE_DEVELOPMENT_SERVER } from "next/constants";

const base: NextConfig = {
  reactStrictMode: true,
  output: "standalone",
};

const config = (phase: string): NextConfig => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      ...base,
      async rewrites() {
        return [
          { source: "/api/:path*", destination: "http://localhost:8080/:path*" },
        ];
      },
    };
  }
  return base;
};

export default config;

3.2. Dockerfile 작성

frontend/Dockerfile

# ========= 1) Build stage =========
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
# 프로덕션 빌드 (standalone 산출물 생성)
RUN npm run build

# ========= 2) Runtime stage =========
FROM node:20-alpine AS runner
WORKDIR /app

ENV NODE_ENV=production
ENV PORT=3000
EXPOSE 3000

# 보안상 node 유저 사용
RUN addgroup -S nodejs && adduser -S nextjs -G nodejs

# standalone 서버 코드 & 정적 리소스 복사
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

USER nextjs
CMD ["node", "server.js"]

3.3. docker-compose에 프론트 추가

infra/docker-compose.yml

version: "3.9"
services:
  api:
    image: syun32/posleep-api:prod
    container_name: posleep-api
    env_file:
      - /opt/posleep/app.env
    volumes:
      - /opt/posleep/keys:/opt/posleep/keys:ro
    expose:
      - "8080"
    restart: unless-stopped
    environment:
      - JAVA_OPTS=-XX:MaxRAMPercentage=75 -XX:+UseG1GC
      - TZ=Asia/Seoul
    networks:
      - posleep-net

  frontend:
    build:
      context: ../frontend
      dockerfile: Dockerfile
    image: syun32/posleep-frontend:prod
    container_name: posleep-frontend
    expose:
      - "3000"
    restart: unless-stopped
    environment:
      - NEXT_PUBLIC_API_BASE_URL=http://api:8080
      - TZ=Asia/Seoul
    networks:
      - posleep-net
    depends_on:
      - api

  nginx:
    image: nginx:1.27-alpine
    container_name: posleep-nginx
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    ports:
      - "80:80"
    restart: unless-stopped
    depends_on:
      - frontend
      - api
    networks:
      - posleep-net

networks:
  posleep-net:
    driver: bridge

4. Nginx 프록시 설정

infra/nginx/nginx.conf
프록시 설정
- 기본 트래픽 → 프론트 (외부에는 80만 오픈, 3000은 컨테이너 내부 네트워크 통신)
- /api → 백엔드 (외부에 8080 오픈 유지: 테스트용)

worker_processes auto;

events { worker_connections 1024; }

http {
  upstream frontend {
    server posleep-frontend:3000;
  }

  upstream api {
    server posleep-api:8080;
  }

  server {
    listen 80;
    server_name _;

    # Next.js 프론트
    location / {
      proxy_pass http://frontend;
      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_set_header X-Forwarded-Proto $scheme;
    }

    # Spring Boot API
    location /api/ {
      proxy_pass http://api/;
      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_set_header X-Forwarded-Proto $scheme;
    }
  }
}

5. GitHub Actions Workflow 변경

.github/workflows/cicd.yml 변경
- 서버 env에 프론트 이미지 이름/태그 추가
- 프론트 빌드/푸시 Job 추가
- deploy Job은 두 이미지(BE / FE) 모두 푸시된 후에 실행

99. 접속 테스트 ⭐️ 성공 ⭐️

EC2-IP/ → 프론트엔드(Next.js) 접속 성공

EC2-IP/api → 백엔드(Spring) 접속 성공

https://github.com/syun32/2025-posleep

GitHub - syun32/2025-posleep

Contribute to syun32/2025-posleep development by creating an account on GitHub.

github.com

References

https://subtlething.tistory.com/115#google_vignette

https://velog.io/@attosisss_/CSR-%EA%B3%BC-SSR%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EA%B7%B8%EB%A6%AC%EA%B3%A0-SEO

https://velog.io/@hyunnzl/React-Vue-Next.js-%EC%84%A4%EB%AA%85%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://velog.io/@milkboy2564/Next.js-env%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%A0%95%EB%A6%AC

[React] 리액트의 프로퍼티(props) / useState / 이벤트 핸들러(onChange, onClick)

s_ih_yun — Wed, 17 Sep 2025 22:59:02 +0900

1. 프로퍼티(Props)

1.1. 프로퍼티(props)란?

properties의 줄임말
상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용 (단방향)
수정할 수 없다 (자식 입장에서 읽기 전용)
[Example] props
- text=”Click”이 props
- 자식 컴포넌트(Button)이 이 값을 받아 사용

<Button text="Click" />

1.2. 컴포넌트에 props 전달하기

1.2.1. 자식 컴포넌트에 props 전달

App.js : 부모 컴포넌트
- person(객체)와 money(숫자) 전달

import Content from "./components/Content";

export default function App() {
  return (
    <div className="App">
      <Content
        person={{ name: "홍길동", color:"blue"}}
        money={65000}
      />
    </div>
  );
}

1.2.2. 자식 컴포넌트 내부에서 props 읽기

여러 개 프로퍼티 읽기

function Content({ person, money }) {
    return <h1 style={{color:person.color}}>{person.name}은 {money}원을 가지고 있습니다.</h1>;
}

export default Content;

하나의 인자(props 객체)
- 사실 props는 컴포넌트에 대한 유일한 인자!

function Content(props) {
    let person = props.person;
    let money = props.money;
    return <h1 style={{color:person.color}}>{person.name}은 {money}원을 가지고 있습니다.</h1>;
}

export default Content;

1.2.3. 기본값 설정

money prop이 없거나 money={undefined}로 전달될 때 사용
- money={null} 또는 size={0}은 해당 X

function Content({ person, money = 1000 }) {
	// ...
}

1.3. children : 자식을 JSX로 전달하기

다음과 같이 자체 컴포넌트를 중첩하고 싶을 때

<Content>
	<Button />
</Content>

JSX 태그 내 콘턴츠를 중첩하면, 부모 컴포넌트는 해당 콘텐츠를 children이라는 prop으로 받는다
App.js

import Content from "./components/Content";
import Button from "./components/Button";

export default function App() {
  return (
    <div className="App">
      <Content>
        <Button name="홍길동" color="blue"/>
      </Content>
    </div>
  );
}

Content.js

export default function Content({ children }) {
    return (
        <div className="content">
            {children}
        </div>
    )
}

1.4. 조건부 렌더링

if문 사용

export default function App({ isLoggedIn }) {
  let msg;
  if (isLoggedIn) {
    msg = "로그인";
  } else {
    msg = "로그아웃";
  }
  return (
    <div>
      {msg}
    </div>
  )
}

삼항 연산자 사용

export default function App({ isLoggedIn }) {
  let msg = isLoggedIn ? "로그인" : "로그아웃";
  return (
    <div>
      {msg}
    </div>
  )
}

&& 연산자 사용 : else 분기가 필요하지 않은 경우

export default function App({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && "로그인"}
    </div>
  )
}

2. useState

2.1. 상태(State)란?

리액트에서의 State는 리액트 Component의 상태를 의미
- state 값이 변경되었을 경우, 해당 컴포넌트를 리렌더링
자신이 속한 컴포넌트에 종속적
- 같은 컴포넌트를 여러 번 렌더링하면 각각 컴포넌트는 고유한 State를 가짐

2.2. useState란?

컴포넌트에 state 변수를 추가할 수 있는 React Hook
- state의 **초기값(initialValue)**를 넘겨줄 수 있다
- state와 setter 함수를 하나의 배열로 반환

const [state, setState] = useState(initialState)

// example
const [name, setName] = useState('Gildong');

2.3. 예제로 알아보기

useState를 호출하여 state 변수(count) 선언 : 초기값 0
set 함수(setCount)를 통해 state 변수(count) 업데이트
- 리액트는 다음 state를 저장하고 새로운 값으로 컴포넌트 다시 렌더링

import { useState } from "react";

export default function App() {

  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      <p>현재 값 : {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

3. 이벤트 핸들러

클릭, 마우스 호버, 폼 인풋 포커스 등 사용자 상호작용에 따라 유발되는 사용자 정의 함수
- handle로 시작하고 그 뒤에 이벤트명을 붙인 함수명
함수를 정의하고 JSX 태그에 prop 형태로 전달
주로 컴포넌트 내부에서 정의

3.1. 이벤트 핸들러 사용하기

3.1.1. 함수를 전달하기

컴포넌트(Button) 내부에 이벤트 함수(handleClick) 선언
함수 내부 로직 구현
JSX 태그에 함수 전달
- 이벤트 핸들러로 전달한 함수들은 호출이 아닌 전달되어야 한다

 <button onClick={handleClick}>클릭</button>     // 올바른 예시 
 <button onClick={handleClick()}>클릭</button>   // 잘못된 예시

3.1.2. JSX 안에 익명함수 쓰기

이벤트 핸들러를 인라인으로 정의 가능
- 인라인 함수 또한 함수 호출이 아닌 전달되어야 한다

<button onClick={() => alert("Clicked")}>클릭</button>  // 올바른 예시
<button onClick={alert("Clicked")}>클릭</button>        // 잘못된 예시

3.2. onChange

input의 텍스트가 바뀔 때 발생하는 이벤트
e.target.value를 통해 이벤트 객체에 담긴 input 값을 읽어올 수 있다

import { useState } from "react"

export default function App() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
}

3.3. onClick

버튼 또는 특정 요소가 클릭될 때 실행되는 이벤트

export default function App() {
  return (
    <div>
      <button onClick={() => alert("알림창입니다.")}>Button</button>
    </div>
  )
}

References

https://ko.react.dev/learn

https://ko.react.dev/learn/describing-the-ui

https://velog.io/@rookieand/React의-state-그리고-useState에-대해-더-알고-싶어졌다

https://ko.react.dev/reference/react/useState

https://velog.io/@ko9612/React-이벤트-처리

[React] 리액트(React)란? : 정의 / 실행환경 구축 / JSX 기본 문법

s_ih_yun — Wed, 17 Sep 2025 16:22:34 +0900

0. React (리액트)

0.1. React란?

리액트(React) : SPA을 위한 자바스크립트 라이브러리
- 웹 UI를 작성하기 위한 목적
- 재사용을 위해 ‘컴포넌트’라는 작은 단위 기반 개발
- 여러 개의 컴포넌트를 조합하여 UI 작성
SPA(Single Page Application) : 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트
- HTML, CSS, JavaScript 파일을 최초 1회만 로드
- 이후에는 JS 파일을 통해 DOM 또는 필요한 HTML 파일을 조작

0.2. React의 특징

0.2.1. 리액트 컴포넌트

UI의 특정 부분과 관련된 기능을 컴포넌트 단위로 개발 (JavaScript)
- 재사용 가능
- 여러 컴포넌트를 모아 웹 서비스를 만든다
[Example]

// SimpleComponent.js

// import React from 'react'; // React 17부터는 생략 가능

const SimpleComponent = () => {
  return <div>Hello World!</div>;
};

export default SimpleComponent;

Hello World! 라는 텍스트를 출력하는 컴포넌트

// App.js

import SimpleComponent from './SimpleComponent';

const App = () => {
  return (
    <div>
      <h2>Welcome to my React App!</h2>
      <SimpleComponent />
    </div>
  );
};

export default App;

부모 컴포넌트에서 랜더링하여 사용

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM.render를 사용하여 App 컴포넌트를 렌더링하여 화면에 나타남

0.2.2. JSX 문법

const SimpleComponent = () => {
  return <div>Hello World!</div>;
};

export default SimpleComponent;

HTML 마크업처럼 보이는 코드는 JavaScript 확장 문법인 JSX(JavaScript XML)
- 뷰를 선언형으로 작성 가능
- SPA의 단점인 자바스크립트 코드로 화면 렌더링을 제어해야 하는 불편함 해결
- HTML 마크업과 유사하여 협업에 편리

0.2.3. 가상 DOM (Virtual DOM) 방식

사용 배경
- 리액트 컴포넌트는 최종적으로 UI를 위한 DOM 요소를 생성하고 조작
- DOM에 변화 생기면 브라우저는 랜더링 → 성능 문제 원인 가능
가상 DOM
- 상태 변화가 일어나면 먼저 VDOM에서 연산하고 달라진 부분만 DOM에 전달
- 모든 변화를 한 번에 묶어서 전달 → 렌더링 규모가 크지만 딱 한 번만 렌더링

0.2.4. 단방향 데이터 바인딩

리액트에서 뷰가 바뀌는 과정 : 자바 스크립트 객체인 State로 시작 → State 기반으로 Components 생성 → Components 기반으로 가상 DOM 그림 → 실제 DOM하여 화면에 뿌림
뷰에서 사용자가 입력 필드에 타이핑한 값이 상태를 변경하는 것은 불가능 ❌

1. React 실행 환경 구축

1.1. npm & node 설치 확인

이전에 설치해두었기에 version update만 진행!
version 확인

node -v
npm -v

1.2. React 프로젝트 생성

Facebook에서 제공하는 Create React App 도구 : 초기 설정 자동으로 해줌!

npx create-react-app myreact

프로젝트 디렉토리로 이동하여 실행 → localhost:3000 열림

cd myreact
npm start

1.3. 디렉토리 구조

public/ : 정적 파일이 위치하는 폴더 (ex. index.html)
src/ : 실제 개발을 진행하는 폴더 (React 컴포넌트, JS 파일 위치)
node_modules/ : 프로젝트에 필요한 모든 npm 패키지가 설치되는 폴더
package.json : 프로젝트 설정과 의존성 목록 포함된 파일

2. React 컴포넌트 만들기

2.1. 컴포넌트 정의

src 폴더 내에 components 폴더 생성
그 안에 Hello.js 파일 생성

export default function Hello() {
  return <h1>Hello</h1>;
}

2.2. App.js에서 불러오기

Hello 컴포넌트를 불러와서 사용

import Hello from "./components/Hello";

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

2.3. 여러 컴포넌트 조합하기

작은 컴포넌트들을 가져와서 큰 컴포넌트를 만드는 React 패턴 보여주기
Header.js

function Header() {
    return <h1>안녕하세요! 이것은 헤더입니다.</h1>;
}

export default Header;

Content.js

function Content() {
    return <p>여기가 본문입니다.</p>;
}

export default Content;

Footer.js

function Footer() {
    return <small>© 2025 Syun</small>;
}

export default Footer;

App.js

import Header from "./components/Header";
import Content from "./components/Content";
import Footer from "./components/Footer";

function App() {
  return (
    <div className="App">
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

export default App;

3. JSX 문법

3.1. 변수 선언 및 넣기

변수 선언
1. const : 바뀌지 않는 값(상수) 선언 시
2. let : 값이 바뀌는 변수 선언 시
변수 바인딩 : {변수}

export default function Hello() {
    const name = "gildong";
    let age = 20;
    return (
        <h1>Hello, {name}! You are {age} years old.</h1>
    );
}

3.2. 태그의 class 이름

HTML 객체 태그의 클래스는 기존의 class가 아닌 className으로 표기

<div className="클래스이름">
...
</div>

3.3. 인라인 CSS 스타일

기존 CSS 문법에서 대쉬(-) 빼고 카멜 표기법으로 변경 (ex. background-color → backgroundColor)

function App() {
    const myStyle = {
        backgroundColor : 'red',
        fontSize : 18
    }
  return (
    <div style={myStyle}>
      ...
    </div>
  );
}

3.4. 조건문

컴포넌트 return 외부에선 if 사용 가능
- 컴포넌트 return 내부에선 if 사용 불가능

function MyComponent() {
    if (true) {
        return(<div>참 입니다.</div>)
    }else{
        return(<div>거짓 입니다.</div>)
    };
}

컴포넌트 return문 내부에서는 삼항연산자 사용

export default function Hello() {
    const age = 20;
    return (
        <div>
            { age >= 20 ? (
                <p>성인입니다.</p>
            ):(
                <p>미성년자입니다.</p>
            )}
        </div>
    );
}

3.5. 반복문

return문 안에는 for / forEach문 사용 불가 ❌
map 메서드

export default function Week() {
    const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
    return (
        <p>
            {weekArr.map((week, index) => (
                <span key={index}>
                    {week}<br />
                </span>
            ))}
        </p>
    );
}

함수 호출

export default function Week() {
    const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];

    const rendering = () => {
        const result = [];
        for (let i = 0; i < weekArr.length; i++) {
            result.push(<span key={i}>{weekArr[i] + " / "}</span>);
        }
        return result;
    }

    return (
        <p>{rendering()}</p>
    );
}

References

https://coding-factory.tistory.com/1085

https://space-engineers-developer.tistory.com/55#google_vignette

https://contentstoaster.tistory.com/entry/react-must-know-commands#google_vignette

https://codingbroker.tistory.com/123

[CI/CD] EC2-Docker-GitHub Actions CI/CD 구성 (2) : GitHub Actions workflow 및 Build & Deploy를 위한 파일 설정

s_ih_yun — Fri, 12 Sep 2025 23:57:22 +0900

이전 글에 이어서 CI/CD 구성을 이어서 함미다
이전 글 : [CI/CD] EC2-Docker-GitHub Actions CI/CD 구성 (1) : EC2 / RDS / Docker 세팅

1. EC2 서버 환경 설정

배포 디렉터리 생성

sudo mkdir -p /opt/posleep
sudo chown ec2-user:ec2-user /opt/posleep  # 소유자/그룹 변경

애플리케이션 환경변수 설정
- 위치 : /opt/posleep/app.env

cat > app.env <<'EOF'
SPRING_PROFILES_ACTIVE=prod
SPRING_DATASOURCE_URL=jdbc:mariadb://<RDS-Endpoint>:3306/posleep?useUnicode=true&characterEncoding=utf8
SPRING_DATASOURCE_USERNAME=<RDS-Master-계정>
SPRING_DATASOURCE_PASSWORD=<RDS-Master-암호>
SERVER_PORT=8080
EOF

2. Repo에 설정 파일 추가

2.0. Repo 구조

.
├─ posleep/
│  ├─ Dockerfile                   # 1.컨테이너 빌드 정의
│  ├─ .dockerignore                # 2.도커 빌드에서 제외할 파일들
│  └─ src/...                      # 기존 애플리케이션 소스
│
├─ src/main/resources/
│  └─ application-prod.properties  # 3.운영 환경의 Spring 환경 설정
│  └─ application.properties
│
├─ deploy/
│  └─ docker-compose.yml           # 4.컨테이너 실행을 자동화하는 설정
│
└─ ~~.github/workflows/~~
   └─ ~~cicd.yml~~                     # ~~GitHub Actions에서 등록 예정~~

2.1. Dockerfile

위치 : <repo>/posleep/Dockerfile
역할 : 애플리케이션 배포용 이미지(DockerImage)를 생성하기 위한 스크립트
- 소스코드를 빌드(gradlew) → .jar 패키징

# ---- Build stage ----
FROM eclipse-temurin:17-jdk-jammy AS build
WORKDIR /app

# gradle wrapper 먼저 복사(캐시 최적화)
COPY gradlew gradle/ ./
RUN chmod +x gradlew

# 전체 소스 복사
COPY . .

RUN ./gradlew clean bootJar --no-daemon

# ---- Runtime stage ----
FROM eclipse-temurin:17-jre-jammy
WORKDIR /app
COPY --from=build /app/build/libs/*.jar app.jar

EXPOSE 8080
ENTRYPOINT ["java","-jar","/app/app.jar"]

빌드 스테이지 (Build Stage)
- JDK가 들어있는 이미지에서 Gradle로 소스를 빌드해서 실행 jar 생성
  - bootJar 결과물은 보통 build/libs/xxxx.jar에 생성
- 빌드에 필요한 도구(JDK, Gradle 캐시 등)는 이 단계에서만 쓰이고 최종 이미지에는 X
런타임 스테이지 (Runtime Stage)
- JRE만 들어있는 가벼운 이미지에, 앞에서 만든 JAR 하나만 복사 → 작고 빠른 배포용 이미지
- 컨테이너는 java -jar /app/app.jar로 애플리케이션 실행

2.2. .dockerignore

위치 : <repo>/posleep/.dockerignore
역할 : 도커 컨텍스트에서 제외할 파일 지정
- 빌드 속도 ↑, 이미지 캐시 효율 ↑

.git
.gradle
build
out
.idea
*.iml
Dockerfile
docker-compose.yml

2.3. application-prod.properties

위치 : <repo>/src/main/resources/application-prod.properties
역할 : 운영 환경에서 실행할 때의 Spring 설정 파일

server.port=${SERVER_PORT:8080}

# --- DataSource ---
spring.datasource.url=${SPRING_DATASOURCE_URL}
spring.datasource.username=${SPRING_DATASOURCE_USERNAME}
spring.datasource.password=${SPRING_DATASOURCE_PASSWORD}
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver

# --- JPA/Hibernate ---
spring.jpa.hibernate.ddl-auto=none
spring.jpa.open-in-view=false

# --- LOG ---
logging.level.com.syun.posleep=INFO
logging.level.org.hibernate.SQL=INFO
spring.jpa.properties.hibernate.format_sql=true

(기존) application.properties : 개발용 Spring 설정 파일 (로컬 DB, 로그레벨 DEBUG 등)
(신규) application-prod.properties : 운영용 Spring 설정 파일 (RDS DB, 로그레벨 INFO 등)
운영 배포 시에는 SPRING_PROFILES_ACTIVE=prod 환경변수로 이 파일 활성화
DB 연결정보 등 환경 변수를 app.env에서 정의한 값으로 불러오도록 설정
- 코드 / GitHub에서 민감 정보 노출 X

2.4. docker-compose.yml

위치 : <repo>/deploy/docker-compose.yml
역할 : EC2에서 컨테이너 실행을 자동화하는 설정

version: "3.8"

services:
  app:
    image: syun32/posleep:prod
    container_name: posleep
    env_file:
      - ./app.env
    ports:
      - "8080:8080"
    restart: unless-stopped

docker compose up -d 명령어 한번으로 환경변수, 포트, 이미지 등 실행 옵션 적용
app.env 파일에서 환경변수 불러와 컨테이너에 적용
- application-prod.properties의 ${…} 자리에 매핑

3. GitHub Actions 설정

3.1. GitHub Secrets 등록

Settings > Security > Secrets and variables > Actions > Repository secrets > New repository screts

DOCKERHUB_USERNAME : <Docker-USERNAME>
DOCKERHUB_TOKEN : <Docker-Hub-Personal-Access-Token> (이전에 복사해둔 것)
EC2_HOST : <EC2-퍼블릭-IP>
EC2_USER : (보통) ec2-user
EC2_SSH_KEY : <EC2 .pem 키 내용 전체>
- cat <key-name>.pem 명령어로 키 내용 확인 가능
- -----BEGIN... / -----END... + 줄바꿈 포함해야 함! (내용물만 넣었다가 오류남,,,)

$ cat <key-name>.pem

-----BEGIN OPENSSH PRIVATE KEY-----
MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcw...
...
-----END OPENSSH PRIVATE KEY-----

3.2. GitHub Action workflow 생성

repo의 Actions 탭에서 [set up a workflow yourself]
cicd.yml 파일 생성
- 코드 푸시 → 도커 이미지 빌드/푸시 → EC2 배포까지를 자동화

name: CI-CD

on:
  push:
    branches: [ "main" ]
  workflow_dispatch:

env:
  IMAGE_NAME: syun32/posleep
  IMAGE_TAG: prod

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # (멀티스테이지 Dockerfile이 빌드까지 처리한다는 전제)
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build & Push (posleep module)
        uses: docker/build-push-action@v6
        with:
          context: ./posleep
          file: ./posleep/Dockerfile
          platforms: linux/amd64
          push: true
          tags: |
            ${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
            ${{ env.IMAGE_NAME }}:${{ github.sha }}

  deploy:
    needs: build-and-push
    runs-on: ubuntu-latest
    steps:
      - name: Checkout (to get compose file)
        uses: actions/checkout@v4

      - name: Upload docker-compose.yml to EC2
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_KEY }}           # -----BEGIN OPENSSH PRIVATE KEY-----
          source: "deploy/docker-compose.yml"
          target: "/opt/posleep/"

      - name: SSH Deploy on EC2
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.EC2_HOST }}
          username: ${{ secrets.EC2_USER }}
          key: ${{ secrets.EC2_SSH_KEY }}
          script: |
            set -e
            cd /opt/posleep

            # docker-compose.yml 위치 표준화
            if [ -f /opt/posleep/deploy/docker-compose.yml ]; then
              mv -f /opt/posleep/deploy/docker-compose.yml /opt/posleep/docker-compose.yml
              rmdir /opt/posleep/deploy 2>/dev/null || true
            fi

            # Private repo면 로그인 필요
            if [ -n "${{ secrets.DOCKERHUB_USERNAME }}" ] && [ -n "${{ secrets.DOCKERHUB_TOKEN }}" ]; then
              docker login -u "${{ secrets.DOCKERHUB_USERNAME }}" -p "${{ secrets.DOCKERHUB_TOKEN }}"
            fi

            # 최신 이미지 pull 후 재기동
            docker pull ${{ env.IMAGE_NAME }}:${{ env.IMAGE_TAG }}
            docker compose down || true
            docker compose up -d

            # 오래된 이미지 정리
            docker image prune -f

3.3. GitHub Actions 실행 흐름

3.3.1. Trigger

main 브랜치로 push 되면 자동 실행
Actions > Run workflow으로 수동 실행

3.3.2. CI (build-and-push job)

Source Check-Out : 저장소 코드 내려받기
Docker Buildx 준비
DockerHub 로그인 : Secrets에 등록된 값으로 로그인
Dockerfile로 빌드 & Docker Hub에 Push

3.3.3. CD (deploy job)

EC2로 docker-compose.yml 업로드
SSH로 접속 : Secrets에 등록된 정보으로 접속
배포 스크립트 실행(SSH)
1. 최신 이미지 pull
2. docker compose up -d 재기동
3. 오래된 이미지 청소

999. ⭐️ 성공 ⭐️

하핫 Dockerfile, docker-compose 파일을 나중에 올려서 Action 부터 생성한 첫번째 workflow는 실패
But 다 올린 최신 workflow는 성공

⭐️ 배포 성공 ⭐️
⭐️ 브라우저 접속 성공 ⭐️

Project GitHub

https://github.com/syun32/2025-posleep

GitHub - syun32/2025-posleep

Contribute to syun32/2025-posleep development by creating an account on GitHub.

github.com

References

https://spongecake.tistory.com/189?category=709735

https://velog.io/@sysy123/Github-Actions-CICD

https://sjh9708.tistory.com/237#google_vignette

[CI/CD] EC2-Docker-GitHub Actions CI/CD 구성 (1) : EC2 / RDS / Docker 세팅

s_ih_yun — Fri, 12 Sep 2025 20:34:11 +0900

포켓몬 슬립 게임하면서 취미로 요리 레시피 계산기 사이트를 만들고 있었는데
CI/CD 구성을 해보고 싶더라구요
전체적인 네이밍은 무심코 설정했던 posleep!
렛츠고

0. CI/CD 구성

0.1. 구성 요소

GitHub (소스 저장소 + Actions)
- Actions 트리거 : main 브랜치에 push
- .github/workflows/cicd.yml 파일에 빌드/배포 파이프라인 정의
Docker Hub (이미지 저장소)
- GitHub Actions가 빌드한 Spring 애플리케이션 이미지를 push
- EC2는 최신 이미지를 pull 받아서 실행
AWS EC2 (애플리케이션 서버)
- Docker + Docker Compose로 컨테이너 실행
- /opt/posleep/docker-compose.yml 기준으로 애플리케이션 구동
AWS RDS (데이터베이스)
- EC2에서 접근하는 DB

0.2. 동작 흐름

개발 & Commit
- 로컬에서 코드 작성 후 원격 저장소로 push
GitHub Actions (CI 단계)
- Docker 이미지 빌드 (posleep.jar → Docker image)
- 빌드된 이미지를 Docker Hub에 push (<userName>/posleep:prod)
GitHub Actions (CD 단계)
- scp-action으로 deploy/docker-compose.yml을 EC2 /opt/posleep 경로에 업로드
- ssh-action으로 EC2 ssh 접속하여 Docker Compose 재배포
EC2
- 최신 이미지 실행 (8080 포트 바인딩)
- RDS와 연결하여 서비스 동작
사용자
- 브라우저에서 http://<EC2-IP>:8080 접속
- Spring 애플리케이션 응답

1. AWS EC2 세팅

1.1. EC2 인스턴스 생성

AMI : Amazon Linux 2023 kernel-6.1 AMI (64비트 x86_64)
보안 그룹 인바운드 규칙
- SSH(22), HTTP(80), HTTPS(443), 사용자 지정 TCP(8080)
키 페어 생성(pem) : SSH 접속을 위한 키
- 키 파일 내용 출력을 위한 터미널 명령어 : cat <key-name>.pem

1.2. 서버 기본 세팅

1.2.1. JDK 설치

sudo dnf install java-17-amazon-corretto

1.2.2. Docker 설치

sudo yum install -y docker
sudo systemctl enable --now docker
sudo usermod -aG docker ec2-user
newgrp docker

1.2.3. Docker Compose 설치

배포 스크립트 + 실행환경 정의서 역할
docker-compose.yml 파일에 실행환경 정의
app.env 같은 환경변수를 compose에서 자동 주입 (RDS 접속 정보 등)

sudo mkdir -p /usr/local/lib/docker/cli-plugins
sudo curl -L "<https://github.com/docker/compose/releases/download/v2.29.2/docker-compose-linux-x86_64>" \\
  -o /usr/local/lib/docker/cli-plugins/docker-compose
sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose
docker compose version

2. AWS RDS 세팅

2.1. RDS 인스턴스 생성

엔진 : MariaDB
마스터 계정/비밀번호 설정
보안 그룹 인바운드 규칙
- EC2 보안그룹에 3306 포트 오픈

2.2. 초기 테이블 세팅

EC2를 통해 RDS 접속
- RDS를 프라이빗하게 유지해두기 위해, EC2를 통해 접속
DB 스키마 실행하여 초기 테이블 생성
- Flyway 같은 마이그레이션 도구 사용 가능
Example. Squel Pro에서 접속 (평소에 쓰던 DB관리 툴)
- MySQL Host : <RDS-Endpoint>
- Username : <DB-Master-계정>
- Password : <DB-Master-비밀번호>
- Port : 3306
- SSH Host : <EC2-IP-address>
- SSH User : ec2-user
- SSH Key : pem-key 파일 불러오기

3. Docker 세팅

Docker hub에 리포지토리 생성 (posleep)
Access Token 생성
- Account settings > Personal access tokens > Generate new token
- Access permissions : Read & Write
- ‼️ 한 번만 보여주니깐 복사해두기 → GitHub Actions에 저장해두고 Docker Access에 사용

이후 GitHub Actions, Dockerfile, docker-compose 등의 설정은
다음 게시글에 이어서

다음 글 : [CI/CD] EC2-Docker-GitHub Actions CI/CD 구성 (2) : GitHub Actions workflow 및 Build & Deploy를 위한 파일 설정

[CI/CD] EC2-Docker-GitHub Actions CI/CD 구성 (2) : GitHub Actions workflow 및 Build & Deploy를 위한 파일 설정

1. EC2 서버 환경 설정배포 디렉터리 생성sudo mkdir -p /opt/posleepsudo chown ec2-user:ec2-user /opt/posleep # 소유자/그룹 변경애플리케이션 환경변수 설정위치 : /opt/posleep/app.envcat > app.env :3306/posleep?useUnicode=true

codesyun.tistory.com

Project GitHub

https://github.com/syun32/2025-posleep

GitHub - syun32/2025-posleep

Contribute to syun32/2025-posleep development by creating an account on GitHub.

github.com

References

https://spongecake.tistory.com/189?category=709735

https://velog.io/@sysy123/Github-Actions-CICD

https://sjh9708.tistory.com/237#google_vignette

[Spring] 영속성 컨텍스트(Persistence Context) : 정의 / 사용 / FetchType

s_ih_yun — Thu, 11 Sep 2025 16:54:22 +0900

1. 영속성 컨텍스트 (Persistence Context)

1.1. 영속성 컨텍스트란?

JPA가 데이터베이스와 직접 연결하지 않고 엔티티 객체를 관리하는 메모리 공간
- 엔티티를 관리하는 1차 캐시(저장소)
- 매번 DB-JPA 직접 통신하지 않고, 엔티티를 보관하면서 변경 사항 추적

1.2. 엔티티의 생명주기

1.2.1. 비영속 (new/transient)

영속성 컨텍스트와 전혀 관계가 없는 상태

Member member = new Member();
member.setId("member1");
member.setUsername("홍길동");

1.2.2. 영속 (managed)

영속성 컨텍스트에 저장된 상태

EntityManager em = EntityManagerFactory.createEntityManager();
em.getTransaction.begin();

Member member new Member();
member.setId("member1");
member.setUsername("홍길동");

// 객체를 영속성 컨텍스트에 저장 (영속)
em.persist(member);

1.2.3. 준영속 (detached)

영속성 컨텍스트에 저장되었다가 분리된 상태
- 1차 캐시, 쓰기 지연, 변경 감지, 지연 로딩 등 영속성 컨텍스트의 기능 동작 X
- 식별자 값을 가지고 있다

// 엔티티를 영속성 컨텍스트에서 분리 (준영속)
em.detach(member);

1.2.4. 삭제 (removed)

삭제된 상태

// 엔티티를 영속성 컨텍스트와 데이터베이스에서 삭제 (삭제)
em.remove(member);

1.3. 영속성 컨텍스트의 특징

영속성 컨텍스트의 식별자 값
- 영속성 컨텍스트는 엔티티를 식별자 값으로 구분
영속성 컨텍스트와 데이터베이스 저장
- 보통 트랜잭션을 커밋하는 순간, 새로 저장된 엔티티를 DB에 반영 (flush)
1차 캐시
- 키는 식별자 값(DB의 기본 키)이고 값은 엔티티 인스턴스
- 1차 캐시에 있으면 조회하여 반환 없으면 DB에서 조회하고 1차 캐시에 저장하고 반환
동일성(identity) 보장 : 동일한 트랜잭션에서는 같은 객체 반환
트랜잭션을 지원하는 쓰기 지연 (Transactional write-behind)
- 엔티티 매니저는 트랜잭션 커밋 전까지 내부 쿼리 저장소에 INSERT SQL 모아둠
- 트랜잭션 커밋 시 모아둔 쿼리를 DB에 보낸다
변경 감지(Dirty Checking)
- 영속 상태의 엔티티를 수정하면 트랜잭션이 끝날 때 DB에 자동 반영

2. 영속성 컨텍스트의 사용

2.0. EntityManager

대부분 EntityManager를 통해 영속성 컨텍스트 사용
- JPA에서 영속성 컨텍스트를 활용하려면 EntityManager를 사용해야 함
Spring Boot 환경에서는 @Transactional과 Spring Data JPA를 활용하면 EntityManager 없이도 가능

2.1. INSERT : persist()를 사용하여 엔티티 저장

DB에 즉시 저장되지 않고 영속성 컨텍스트에 먼저 저장
트랜잭션이 끝나면 JPA가 자동으로 DB에 INSERT SQL 실행

Member member = new Member();
member.setName("유진");

em.persist(member);  // 영속성 컨텍스트에 등록

2.2. SELECT : find()를 사용하여 엔티티 조회

먼저 영속성 컨텍스트에서 찾고, 없으면 DB에서 가져온다
같은 id의 엔티티를 여러 번 조회하면, DB에서 다시 조회하지 않고 같은 객체 반환

@Transcational
public void findUser() {
	User user = entityManager.find(User.class, 1L);
}

2.3. UPDATE : 엔티티 값을 변경하면 자동 반영

JPA는 변경 감지(dirty checking) 기능이 있어 값을 바꾸면 자동으로 UPDATE 쿼리 실행
persist() 없이 값만 바꿔도 트랜잭션 종료 시 자동 저장 (flush())

@Transactional
public void updateUser() {
	User user = entityManager.find(User.class, 1L);
	user.setName("홍길동");
	
	// flush() 자동 실행 -> 변경 내용이 DB에 UPDATE

2.4. DELETE : remove()를 사용하여 엔티티 삭제

remove()를 호출하면 영속성 컨텍스트에서 제거
트랜잭션이 끝나면 자동으로 DELETE SQL 실행

@Transactional
public void deleteUser() {
	User user = entityManager.find(User.class, 1L);
	entityManager.remove(user);
	
	// 트랜잭션이 끝나면 DELETE SQL 실행
}

2.5. 관리 해제 : detach()를 사용하여 영속성 컨텍스트에서 분리

JPA가 이 객체를 관리하지 않으며, 이후에 변경해도 DB에 반영 X

@Transactional
public void detachUser() {
	User user = entityManager.find(User.class, 1L);
	entityManager.detach(user);
	
	user.setName("김평강");  // 변경했지만 DB에 반영되지 않음
}

3. Fetch Type : EAGER / LAZY

3.1. Fetch Type이란?

JPA가 하나의 Entity를 조회를 할 때, 연관관계에 있는 객체들을 어떻게 가져올 것이냐
Default 값
- @xxToOne에서는 EAGER
- @xxToOne에서는 LAZY

3.2. 즉시 로딩 (Eager)

데이터를 조회할 때, 연관된 모든 객체의 데이터까지 한 번에 불러오는 것
필요하지 않은 데이터까지 조회되어 성능 이슈가 발생 가능

@ManyToOne(fetch = FetchType.EAGER);

3.3. 지연 로딩 (LAZY)

필요한 시점에 연관된 객체의 데이터를 불러오는 것
최초 로드 시 실제 엔티티가 아닌 ‘엔티티의 프록시(Proxy)’ 먼저 로드
- 프록시는 실제 객체의 생성을 지연하기 위해 사용
- 프록시가 target 엔티티의 메서드를 호출

@ManyToOne(fetch = FetchType.LAZY);

References

https://velog.io/@neptunes032/JPA-영속성-컨텍스트란

https://ittrue.tistory.com/254

https://itconquest.tistory.com/entry/Spring-Boot-JPA-영속성-컨텍스트-완벽-이해

https://velog.io/@jinyeong-afk/기술-면접-즉시-로딩과-지연-로딩의-차

[Spring] Spring AOP로 Log 기록하기 : @Around / @Before / @After

s_ih_yun — Tue, 9 Sep 2025 23:46:21 +0900

1. Spring AOP

AOP (Aspect-Oriented Programming) : 관점 지향 프로그래밍을 지원하는 기술
로깅, 보안, 트랜잭션 관리 등과 같은 공통 관심사를 모듈화
- 코드 중복을 줄이고 유지 보수성 향상
핵심 로직과 부가 기능 분리

1.1. 주요 용어

용어	설명
Aspect	공통적인 기능들을 모듈화한 것을 의미
Target	Aspect가 적용될 대상 (메소드, 클래스 등이 해당)
Join point	Aspect가 적용될 수 있는 시점 (메소드 실행 전, 후 등)
Advice	Aspect의 기능을 정의한 것
Point cut	Advice를 적용할 메소드의 범위를 지정

1.2. 주요 어노테이션

어노테이션	설명
@Aspect	해당 클래스를 Aspect로 사용하겠다는 명시
@Before	대상 메소드가 실행되기 전에 Advice 실행
@AfterReturning	대상 메소드가 정상적으로 실행되고 반환된 후 Advice 실행
@AfterThrowing	대상 메소드에서 예외가 발생했을 때 Advice 실행
@After	대상 메소드가 실행된 후에 Advice 실행
@Around	대상 메소드 실행 전, 후 또는 예외 발생 시 Advice 실행

2. Spring AOP로 Log 기록하기

2.1. Spring AOP 환경 설정

build.gradle에 의존성 추가

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-aop'
}

2.2. AOP 클래스 작성

2.2.1. @Before / @After : 메소드 호출 전 / 후 로깅

package com.syun.posleep.aspects;

import lombok.extern.slf4j.Slf4j;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.*;
import org.springframework.stereotype.Component;

@Slf4j
@Aspect
@Component
public class ApiLoggingAspect {

    @Pointcut("execution(* com.syun.posleep.web..*(..))")   // 적용 범위 정의
    public void controller() {
    }
    
    /* 메소드 호출 전 실행 */
    @Before("controller()")
    public void logBeforeTest(JoinPoint joinPoint) throws Throwable {
        log.info("Controller Before");
    }
    
    /* 메소드 호출 후 실행 */
    @After("controller()")
    public void logAfterTest(JoinPoint joinPoint) throws Throwable {
        log.info("Controller After");
    }
}

JoinPoint : Aspect가 적용될 시점을 의미
- 호출되는 대상 객체, 메서드, 전달 파라미터 목록에 접근 가능한 메서드 제공
Log

2.2.2. @Around : 메소드 호출 전 / 후 / 예외상황 로깅

package com.syun.posleep.aspects;

import lombok.extern.slf4j.Slf4j;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.*;
import org.springframework.stereotype.Component;

@Slf4j
@Aspect
@Component
public class ApiLoggingAspect {

    @Pointcut("execution(* com.syun.posleep.web..*(..))")
    public void controller() {
    }

    @Around("controller()")
    public Object logAroundTest(ProceedingJoinPoint joinPoint) throws Throwable {
        log.info("Controller Before - Around");       // 메소드 호출 전
        try {
            Object result = joinPoint.proceed();
            log.info("Controller Success - Around");  // 메소드 호출 후(성공)
            return result;
        } catch (Throwable e) {
            log.info("!! Controller Fail - Around");  // 메소드 호출 후(예외발생)
            throw e;
        }
    }
}

Proceeding JoinPoint : JoinPoint를 상속 받아 추가 기능을 제공
- @Around에서만 지원
- proceed() 메소드를 통해 target 실행제어가 가능 (반드시 호출해야 타겟이 실행 가능)
- 반드시 Object를 리턴
  - 타겟 메소드가 리턴하는 값을 그대로 반환
  - void를 리턴타입으로 할 경우 : 타겟의 응답이 사라져 API가 동작하지 않음

References

https://adjh54.tistory.com/133

https://velog.io/@youjung/Spring-AOP

https://velog.io/@jjeongdong/Spring-AOP를-활용한-Logging-구현

https://ivory-room.tistory.com/86