any

목표:상품 상세 페이지에서 구매자가 판매자에게 1:1 채팅WebSocket(STOMP)을 통해 실시간으로 메시지 주고받기JWT 토큰으로 WebSocket 연결을 인증하여 안전한 통신을 보장사용자는 자신이 참여하고 있는 모든 채팅방 목록을 조회 1. 데이터베이스 모델링 (Entity 설계) ChatRoom.java@Entity@Getter@EntityListeners(AuditingEntityListener.class)public class ChatRoom { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name..

Spring Boot와 React 사이에 실시간 통신 채널을 구축한 것을 기반으로, 그 채널을 통해 날아오는 데이터를 사용자에게 보여주기 1. 전역 알림 아이콘: 화면 우측 하단에 전역적으로 표시되는 종(🔔) 아이콘2. 읽지 않은 알림 배지: 읽지 않은 알림이 있을 경우 종 아이콘 위에 숫자로 개수 표시3. 알림 목록 모달: 종 아이콘을 클릭하면 나타나는 알림 목록 창 ## 전체 아키텍처1. [수신] useNotifications 훅이 서버의 개인 토픽 채널로부터 새로운 알림 메시지를 받는다2. [전달] NotificationContext가 제공하는 addNotification 함수를 호출하여 수신한 데이터를 전달한다3. [상태 변경] NotificationContext는 전달받은 데이터로 내부 not..

Spring Boot와 React 간에 실시간으로 데이터를 주고받을 수 있는 WebSocket 연결 구축 하기 STOMP(Simple Text Oriented Messaging Protocol) 를 WebSocket 위에서 동작시켜, 마치 채팅방의 토픽을 구독(Subscribe)하듯 메시지를 주고받는 발행/구독(Pub/Sub) 모델을 구현하기 사용자가 로그인했을 때 WebSocket 연결을 맺고, 특정 채널을 구독하는 과정 서술하기 ## 전체 흐름 (전체 시나리오)1. HTTP Handshake: 프론트엔드(React)가 백엔드(Spring Boot)의 특정 주소(/ws)로 최초의 HTTP 연결을 요청한다2. 프로토콜 업그레이드: 서버는 이 요청을 받아, 일반 HTTP 연결을 WebSocket 연결로 전..

CI/CD 파이프라인을 통해 Spring Boot/React 애플리케이션을 도커화하고 배포했지만이후 추가 기능 구현 계획으로 다시 로컬 환경에서 개발하기 1. 운영 환경과 개발 환경의 분리기존의 운영용 docker-compose.yml과 별개로 개발 전용 docker-compose.dev.yml 파일을 생성하여 환경을 분리하기 2. 개발 워크플로우를 위한 Docker Compose 설정1) Volume Mounts: 로컬 호스트의 소스코드 디렉터리를 실행 중인 컨테이너 내부의 작업 디렉터리와 실시간으로 동기화 하기2) Build Stage Targeting: Multi-stage build로 구성된 Dockerfile에서, 최종 운영 이미지가 아닌 개발 도구가 포함된 중간 단계의 builder 스테이지를..

# 증상API를 통해 전달받은 이미지 URL이 화면에서 렌더링되지 않음 (엑박)파일 업로드 후 생성되는 이미지 미리보기가 렌더링되지 않음브라우저 개발자 도구의 네트워크 탭에서 해당 이미지 리소스 요청이 404 상태 코드를 반환함 # 클라이언트 측 원인과 해결 1. 요청 URL의 Origin 불일치개발 환경에서 React (http://localhost:3000)와 Django (http://localhost:8000)는 서로 다른 Origin에서 실행된다React 코드에서 /media/image.jpg와 같은 상대 경로로 리소스를 요청하면, 브라우저는 Django가 아닌 React 서버(http://localhost:3000/media/image.jpg)에 요청을 보내므로 404 에러가 발생한다 Crea..

1. 로그인 플로우 2. 로그아웃 플로우 3. 회원가입 + 자동 로그인 플로우 4. 토큰 갱신 자동 처리 플로우

로컬에서 코드를 수정 후 git push 시 GitHub이 GitHub Actions을 시켜 EC2 서버에 자동으로 배포한다더 이상 SSH로 접속해서 git pull, docker compose up 같은 명령어를 직접 칠 필요가 없다 1단계: EC2 서버에 접속할 비밀 정보 등록 (GitHub Secrets)Actions Runner가 EC2 서버에 SSH로 접속할 수 있도록 비밀번호와 같은 접속 정보를 안전하게 등록한다 1. GitHub 프로젝트 저장소로 이동2. [Settings] > [Secrets and variables] > [Actions] 메뉴로 이동3. [New repository secret] 버튼을 클릭하여 아래 3개의 비밀 정보를 차례대로 등록4. (1) HOST (서버 주소)- N..

EC2 인스턴스에서 실행되는 MySQL 컨테이너는 Docker의 내부 가상 네트워크에 격리되어 있어, 외부의 로컬 PC에서 직접 접근할 수 없다 로컬 PC의 MySQL Workbench 같은 GUI 툴로 접속하려면, EC2 호스트의 특정 포트를 컨테이너 내부의 MySQL 포트(3306)로 포워딩(매핑)하고, 해당 호스트 포트에 대한 AWS 보안 그룹 방화벽의 접근을 허용해야 한다 1단계: Docker 포트 포워딩 설정 (docker-compose.yml 수정)services: db: image: mysql:8.0 ports: - "3307:3306" # EC2 호스트의 3307 포트를 컨테이너의 3306 포트로 매핑 container_name: shop-mysql-db-loca..

# 스택인프라: AWS EC2 (t3.small), AWS RDS (MySQL)백엔드: Spring Boot (Java)프론트엔드: React배포/서빙: Docker, Docker Compose, Nginx 1단계: AWS 인프라 구축하기 (EC2, RDS, 보안 그룹) 1. RDS 데이터베이스 생성- AWS 콘솔 > RDS > 데이터베이스 생성- 엔진 유형: MySQL 선택- 템플릿: 프리 티어 (테스트용으로 비용 최소화)- 설정: DB 인스턴스 식별자, 마스터 사용자 이름(admin), 암호를 입력합니다. 이 암호는 나중에 .env 파일에 사용되니 기억- 스토리지/연결: 기본값으로 두되, '퍼블릭 액세스'를 '예'로 설정. (배포 초기 단계에서 로컬 PC 접속 테스트를 위해 유용. 배포 완료 후에는 ..

Spring Boot 백엔드, React 프론트엔드, MySQL 데이터베이스로 구성된 전체 애플리케이션 스택을 Docker Compose를 사용하여 컨테이너화하는 과정을 다룬다 # Backend 도커화 (Spring Boot) 1. Dockerfile 작성: 애플리케이션 이미지 설계backend/Dockerfile# 1단계: 빌드를 위한 임시 컨테이너 (JDK 21 + Maven)FROM maven:3.9.6-eclipse-temurin-21 AS builderWORKDIR /appCOPY pom.xml .RUN mvn dependency:go-offlineCOPY src ./srcRUN mvn package -DskipTests# 2단계: 실제 실행을 위한 최종 컨테이너 (JRE 21)FROM ecli..