wdym 님의 블로그

프로젝트 진행 상황2일차까지는 Spring Boot를 이용해 게시글 CRUD API를 구현하고, Postman을 통해 요청과 응답이 정상적으로 동작하는지 확인하였다. 하지만 실제 웹 애플리케이션에서는 사용자가 Postman을 사용하는 것이 아니라, 브라우저 화면에서 버튼을 클릭하거나 값을 입력하면서 서버와 통신한다. 따라서 3일차의 목표는 프론트엔드와 백엔드를 연결하여 React 화면에서 Spring Boot API를 직접 호출 하는 것이다. 즉, 이번 3일차의 핵심은 "Postman에서 확인한 API를 실제 프론트엔드 화면과 연결하는 것" 이다. 오늘 구현 목표- React에서 게시글 목록 조회하기- React에서 게시글 작성 요청 보내기- React에서 게시글 삭제 요청 보내기- Spring Boot..

프로젝트 진행 상황지난 글에서는 프로젝트 구조와 주제를 정리하였다. 이번에는 Spring Boot를 이용하여 게시글 CRUD 기능을 구현하였다. 오늘 구현 목표- 게시글 작성- 게시글 목록 조회- 게시글 상세 조회- 게시글 수정- 게시글 삭제 아키텍쳐 이번 프로젝트는 MVC 패턴을 기반으로 Controller, Service, Repository 계층을 분리하여 구현하였다. View 역할은 추후 React가 담당하지만, 현재 단계에서는 Postman을 이용해 API 요청을 테스트하였다. Controller는 클라이언트 요청을 받아 Service를 호출하고, Service는 게시글 작성, 조회, 수정, 삭제와 같은 핵심 로직을 처리한다. Repository는 JPA를 이용해 데이터베이스와 직접 통신하며,..

SSE를 이용한 실시간 알람 기능 구현에 대해 글을 작성해 보고자 한다. 기본적인 구현 방법과 내가 직접 작성한 코드를 통해 어떻게 구현 했는지 포스팅 해보려고 한다. 관련 이론은 다른 글에 포스팅해 놓았다. 여기를 클릭하면 확인할 수 있다. 구현 환경 : Spring boot + Next.js 개요SSE(Server-Sent Events)는 서버에서 클라이언트로 데이터를 지속적으로 전송할 수 있는 단방향 실시간 통신 기술이다. 클라이언트는 EventSource 객체를 이용하여 서버에 구독 요청을 보내고, 서버는 text/event-stream 형식으로 연결을 유지한 채 데이터를 지속적으로 전달한다. 아래 그림은 SSE의 기본 동작 흐름이다. SSE 네트워크 프로토콜연결(구독, Subscribe)Cl..

이전 글에서는 Polling 방식은 실시간 기능 구현이 가능하다는 장점이 있었지만, 대부분의 경우 새로운 데이터가 존재하지 않음에도 클라이언트가 지속적으로 서버에 요청을 보내야 한다는 비효율 문제가 존재한다고 했다. 이러한 문제를 해결하기 위해 이후 SSE(Server-Sent Events)와 WebSocket 같은 실시간 통신 기술이 등장하게 되었다. SSE(Server-Sent Events) 방식SSE(Server-Sent Events)는 클라이언트와 서버가 연결을 유지한 상태에서, 서버가 클라이언트에게 지속적으로 이벤트(Event)를 전달할 수 있도록 만든 기술이다. SSE 동작 방식SSE는 HTTP 기반으로 동작하지만, 기존 HTTP처럼 요청과 응답 이후 연결을 종료하지 않는다.클라이언트는 ..