rexondex's blog

핵심 기능 요약 :웹소켓 공간으로 여러 유저가 동시 접속 가능나의 움직임 및 상대방의 위치 확인채팅박스 통해 접속자간 자유로운 채팅 기능Phaser.js 를 통해 비교적 유연한 게임공간 확장 및 변경OAuth2 적용으로 접속자 인증 기능게임 접속 전 다양한 정보를 확인할 수 있는 프리뷰 페이지 제공 [ 메인화면 ]   [ Oauth2 구글 로그인 화면  ]   [ 구현 방법 ] 스프링부트 생성 (스프링 시큐리티 및 웹소켓 등 필요 의존성 임포트)게임 화면을 구성할 game.html 작성 (Phaser.js)로그인 전 메인화면을 구성할 index.html 작성  에셋 이미지, SSH 인증을 위한 keystore.pfx 제외 전체 코드를 깃허브에 업로드했습니다.https://github.com/rakaso5..

준비물 :1.GitHub Pages 리포지토리2.AWS Lambda (Serverless 구현)3.Paypal 결제 API 깃허브 페이지 도메인으로 접속하면 깃허브 리포지토리의 렌더링된 정적 리소스들을 확인할 수 있습니다.여기서 궁금한 점이 생겼습니다. 1. 정적 리소스는 서버 및 DB로직 없이 렌더링될 수 있다.2. (HTML + CSS + JS) 웹 표준 기술을 사용해 정적 리소스에서도 통신이 가능할까? 첫번째로 서버의 처리 없이 바닐라 HTML 만으로 깃허브 페이지에서 통신이 가능한지 의문이 생겼습니다. 그리고 두번째 의문도 생겼습니다. 3. 정적 리소스여도 서버 및 DB 로직 없이 사용자의 간단한 데이터를 저장할 수 있지 않을까?4. 그렇다면 정적 리소스에서 외부 API를 호출하여 데이터를 불러와..

프로젝트 목표실시간 웹 기반 상호작용 공간 구현2D 환경에서 고유 캐릭터로 참여실시간 채팅을 통한 사용자 간 커뮤니케이션기술 스택Phaser.js: 게임 로직과 캐릭터 움직임, 물리 엔진WebSocket: 실시간 채팅 및 캐릭터 위치 동기화Spring Boot: 서버 측 WebSocket 관리HTML/CSS/JavaScript: UI 및 게임 인터페이스기능 소개사용자 ID 부여: 각 사용자는 고유 6자리 ID를 통해 식별캐릭터 움직임: 화살표 키를 사용해 캐릭터 이동실시간 동기화: WebSocket을 통한 여러 브라우저 간 캐릭터 동기화채팅 기능: 사용자 간 실시간 텍스트 기반 채팅 가능  긴 세션ID를 6자리로 줄인 문자열을 ID 및 캐릭터로 사용했습니다.검은 화면에 떠있는 6자리 코드는 방향키로 움직..

이 프로젝트는 스프링부트를 활용하여 웹소켓을 통해 실시간 채팅 기능을 구현한 간단한 단일 HTML 페이지입니다. 프로젝트의 주요 기능 및 기술 스택은 다음과 같습니다:웹소켓을 이용한 실시간 채팅: 클라이언트와 서버 간의 실시간 데이터 전송을 위해 웹소켓을 사용하여 사용자가 입력한 메시지를 즉시 다른 사용자에게 전달할 수 있습니다.스프링부트: 백엔드 프레임워크로 스프링부트를 사용하여 서버를 구성하고 웹소켓 핸들러를 설정했습니다.OAuth를 통한 로그인 및 보안 연결: 사용자 인증을 위해 OAuth를 구현하였으며, 안전한 데이터 전송을 위해 SSL 인증서를 적용하였습니다.포트 설정 및 SSL 구성: SSL 연결을 위해 포트 8443을 사용하고, 키 저장소 및 암호와 같은 SSL 관련 설정을 포함하여 HTTP..

스프링부트 프로젝트 내부에 리액트를 설치하는 방법을 순서대로 정리해 보겠습니다 !  1) 스프링부트 프로젝트를 생성합니다.( 또는 기존의 스프링부트 프로젝트를 사용합니다 )​https://start.spring.io/ 2) Node.js 를 다운받아 설치합니다.​Node.js — Download Node.js® (nodejs.org)   3) 스프링 프로젝트의 ' src/main ' 경로에서 React 프로젝트를 생성합니다.// npx create-react-app (설치할 프로젝트 이름)npx create-react-app frontend​스프링부트 프로젝트의 src/main 폴더로 들어간 다음 폴더 바탕 여백에 우클릭하여'터미널에서 열기' 또는 '여기에 PowerShell 열기' 를 눌러 파워쉘을 켭..

REST란 무엇인가? REST 아키텍처 스타일을 따르는 웹 API(또는 웹 서비스)를 REST API (또는 RESTful API) 라고 합니다. https://restfulapi.net/   REST는 REpresentaitional State Transfer의 약자이며 분산형 하이퍼미디어 시스템을 위한 아키텍처 스타일입니다. 웹 기반 API를 구축하는 데 가장 널리 사용되는 접근 방식 중 하나입니다.​REST는 '프로토콜'이나 '표준'이 아니라 '아키텍처 스타일'입니다. 개발 단계에서 API 개발자는 다양한 방식으로 REST를 구현할 수 있습니다.​다른 아키텍처 스타일과 마찬가지로 REST에도 지침 원칙과 제약이 있습니다. 서비스 인터페이스를 RESTful 이라고 부르려면 이러한 원칙을 충족해야 합니..

​스프링의 REST 컨트롤러를 데이터 교류를 위한 인터페이스로 삼고서버로부터 반환받은 데이터를 리액트에서 렌더링하여 최종 사용자에게 보여주는 방법을 선택했습니다.​1) REST로 구현된 스프링 서버가 필요하며,2) 리액트를 스프링 내부에 설치하고,3) 최종 사용자에게 어떻게 보여줄지 생각해봅니다.  :: SSR에서 CSR 방식으로 전환한 이유 ::​이전까지는 서버에서 웹에 표현할 정보와 요소들을 모두 처리하려고 했으나 어려움을 겪었습니다.​화면 하나하나와 기능을 모두 서버에서 웹으로 성공적으로 넘기기만 하면 수월하게 작동할 줄 알았으나비동기 방식으로 간단히 처리할 수 있는 기능임에도 SSR방식을 택하면 복잡하게 선언된 변수와 데이터 교환을 위한 DTO 클래스를 상황에 따라 많이 생성해야만 했습니다.​이 ..

​'좋아요' 기능이란 게시물의 '하트 버튼'을 클릭하면 숫자가 카운트로 +1 되며 게시물 속성인 'LIKE_COUNT' 숫자를 누적시키는 기능입니다.​유저당 게시물 1개에 1개의 좋아요를 줄 수 있으며 이미 누른 게시물은 채워진 하트, 누르지 않은 게시물은 채워지지 않은 하트로 보이게 하는게 조건입니다.​​​ 행( 레코드 )이 2개 저장되어 있기 때문에 웹에서 보이는 게시물도 2개입니다.​'POST_ID = 82' 를 가진 게시물의 경우 하트를 누르면 LIKE_COUNT가 1 증가하며 테이블에 반영됩니다.​한번 더 누르면 LIKE_COUNT가 1 감소하며 테이블에 반영됩니다.​​​Caused by: org.hibernate.NonUniqueResultException: Query did not retur..

두 테이블과 엔터티를 비교해 보면 추상 클래스인 BaseTimeEntity를 제외하고 정확히 테이블만큼의 엔터티를 생성했습니다. ( BaseTimeEntity 는 엔터티 클래스의 createAt , updateAt 속성 데이터를 생성하기 위한 추상 클래스입니다 )​( Post / PostTag / Tag ) 에서 PostTag 테이블을 연결고리로 다대다 관계를 설정하였으므로 이 세 테이블을 중심으로 살펴보겠습니다.​​​@NoArgsConstructor@Data@Entity@Table(name = "post")public class Post { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long postId; @C..

OAuth 2.0 (Open Authorization 2.0)은 인증을 위한 개방형 표준 프로토콜입니다.이 프로토콜은 제3자 프로그램이 리소스 소유자를 대신하여 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임받는 방식을 제공합니다. 곧 구현하려는 기능은 소셜 로그인을 통해 현재 진행중인 프로젝트에 로그인 기능을 구현하는 것입니다.  1. 사용자가 웹에 접근했을 때2. 로그인이 필요한 곳이나 특정 페이지에서 로그인화면으로 이동(구글 로그인 등)3. 소셜 로그인 인증 후 다시 원래 접근했던 곳이나 로그인이 필요했던 기능으로 리다이렉트 를 구현하는 것이 목표입니다.​​  gradle에서 oauth2 관련 의존성을 추가하고,config 패키지와 oauth 패키지를 생성하여 클래스들을 구성하였습니다. de..