Project [iLanD]

# of Posts

1 more property

Gallery

[Spring][iLanD] [빌드] Jar 빌드 이후 실행 시 타임리프 트러블슈팅

[Spring][iLanD] [프로젝트완료] 각 기능 구현 시연

[Spring][iLanD] [프로젝트완료] 타OS 실행환경 구축가이드

[Spring][iLanD] [Mini Game] 가위바위보 게임 기능 넣기

[Spring][iLanD] [Base64] Video 파일 추가, Img 포스터와 분리, Video 파일 처리 로직 분리, 인코딩 후 이미지 출력, Video 태그를 통한 영상 재생

실시간 채팅 기능이 어느정도 구현되었으니 다듬기를 들어간다.  
원하는건 채팅의 구분이 안되는것과 안내와 같은 부분이 부족하다.
카톡과 비슷하게 구현해보고싶다. 구현된 모습은 우선 다음과 같다. 다른 브라우저를 통해서 로그인된 유저와 로그인되지 않은 유저의 상황을 연출했다.
웹소켓 메신저 구현.mp4
chatting.js
전반적으로 코드가 복잡해지긴한다. 로그인시 생성되는 클라이언트 쿠키로부터 사용자 이름을 받아오도록했다. 다른 방법들로 user의 Authentication을 받아오는 것을 구현해보고 싶다.
const client = new StompJs.Client({
    brokerURL: 'ws://192.168.0.2:8080/websocket'
    // 브로커주소를 서버 IP로 수정해야한다.
    // brokerURL: 'ws://localhost:8080/websocket'
});

client.onConnect = (frame) => {
    setConnected(true);
    console.log('Connected: ' + frame);
    client.subscribe('/chatMessage', (chatting) => {
        showChatting(JSON.parse(chatting.body).content);
    });
};

client.onWebSocketError = (error) => {
    console.error('Error with websocket', error);
};

client.onStompError = (frame) => {
    console.error('Broker reported error: ' + frame.headers['message']);
    console.error('Additional details: ' + frame.body);
};

function setConnected(connected) {
    $("#chatConnect").prop("disabled", connected);
    $("#chatDisconnect").prop("disabled", !connected);
    $("#message").html("");

    // 연결 상태에 따라 메시지 추가
    var message = connected ? "[System] 채팅방에 연결되었습니다." : "[System] 채팅방에서 나갔습니다.";
    showChatting(message);
}

function connect() {
    client.activate();
}

function disconnect() {
    client.deactivate();
    setConnected(false);
    console.log("Disconnected");
}

// 클라이언트에서 토큰을 추출하는 함수 정의
function extractUsernameFromToken(token) {
    try {
        const base64Url = token.split('.')[1];
        const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));

        const payload = JSON.parse(jsonPayload);
        return payload.sub; // 토큰에서 유저 이름 추출
    } catch (error) {
        console.error('Error extracting username from token:', error);
        return null;
    }
}

// 토큰 가져오기 함수 정의
function getJwtToken() {
    // 여기에서 실제로 토큰을 가져오는 로직을 작성해야 함
    // 예시로 쿠키에서 토큰을 가져오는 방식 사용
    const name = "Authorization=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookieArray = decodedCookie.split(';');

    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i].trim();
        if (cookie.indexOf(name) === 0) {
            return cookie.substring(name.length, cookie.length);
        }
    }

    return null;
}

// 토큰이 없을 경우 "[Unknown]" 반환하는 함수
function getUsernameOrUnknown() {
    const token = getJwtToken();
    return token ? extractUsernameFromToken(token) : "Unknown";
}

// 채팅 메시지 전송 시 유저 이름을 함께 전송
function sendMessage() {
    const chattingMessage = $("#chattingMessage").val();
    const username = getUsernameOrUnknown(); // 수정: getUsernameOrUnknown 사용

    if (username) {
        const messageToSend = `[${username}] ${chattingMessage}`;

        // 전송할 메시지 구성
        client.publish({
            destination: "/app/chat",
            body: JSON.stringify({'chattingMessage': messageToSend})
        });

        // 텍스트 입력 부분으로 커서 이동 및 내용 비우기
        $("#chattingMessage").val('').focus();
    } else {
        console.error('Username not available.');
    }
}

function showChatting(message) {
    // 메시지를 추가할 div 요소 선택
    var conversationDiv = $("#conversation");

    // 메시지를 담을 새로운 div 생성
    var messageDiv = $("<div>").addClass("chat-message").text(message);

    // 현재 유저인지 확인
    const isCurrentUser = message.includes(`[${getUsernameOrUnknown()}]`);

    // 오른쪽 정렬이면 클래스 추가
    if (isCurrentUser) {
        messageDiv.addClass("current-user");
    }

    // conversationDiv에 messageDiv 추가
    conversationDiv.append(messageDiv);

    // 스크롤을 최하단으로 이동 (새 메시지가 보이도록)
    conversationDiv.scrollTop(conversationDiv.prop("scrollHeight"));
}

$(function () {
    $("#chatConnect").click(() => connect());
    $("#chatDisconnect").click(() => disconnect());
    $("#messageSend").click(() => sendMessage());

    // textarea에서 엔터 키 감지
    $("#chattingMessage").keydown(function (e) {
        if (e.which === 13 && !e.shiftKey) {
            e.preventDefault(); // 엔터 키 기본 동작 방지
            $("#messageSend").click(); // 전송 버튼 클릭

            // 텍스트 입력 부분으로 커서 이동 및 내용 비우기
            $(this).val('').focus();
        }
    });
});

[Spring][iLanD] [Web Socket] 실시간 채팅 기능 다듬기

웹 소켓을 활용한 채팅 기능 구현 과정
웹소켓을 활용한 채팅 기능을 구현하고자한다.
Getting Started | Using WebSocket to build an interactive web application
의존성 추가build.gradle 에 의존성 추가
// websocket
	implementation 'org.springframework.boot:spring-boot-starter-websocket'
Configuration 추가
@Configuration // 스프링 프레임 워크 설정 클래스로 등록
@EnableWebSocketMessageBroker // 웹소켓 서버 활성화하는데 사용한다.
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
// =>  웹소켓 설정을 사용자 정의한다.

	@Override
	public void configureMessageBroker(MessageBrokerRegistry config) {
		config.enableSimpleBroker("/chatMessage");
		//chatMessage 로 시작하는 목적지 메시지 관리
        config.setApplicationDestinationPrefixes("/app");
        //목적지가 /app 시작 메시지 라우팅
	}

	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		registry.addEndpoint("/websocket");
		// URL을 웹소켓 엔드포인트로 등록한다. 클라이언트는 이 URL을 통해 웹소켓 연결을 초기화
	}
}
뷰 컨트롤러 추가

[Spring][iLanD] [Web Socket] 실시간 채팅 기능 구현

[Spring][iLanD] [File] TroubleShooting - 파일 인코딩해서 조회하기

[Spring][iLanD] MVP - [AboutUs] @media 태그를 이용한 반응형 오버레이 텍스트박스

[Spring][iLanD] MVP - [File] 파일 업로드 프로젝트 경로이동 및 미리보기 구현

[Spring][iLanD] MVP - [File] 파일 업로드 업데이트 API 구현

[Spring][iLanD] [프로젝트완료] 외부 접속 환경 구성 완료 모습

[Spring][iLanD] MVP - [File] 공지 연관관계 삭제시 파일 삭제 구현

[Spring][iLanD] MVP - [File] 파일 업로드 API 구현

[Spring][iLanD] 인트라넷 실행 환경 간단 테스트

[Spring][iLanD] MVP - [Notice] 페이징 처리 구현

[Spring][iLanD] MVP - [Admin] 로그인 프론트 연결 및 관리자 페이지 구현

웹 소켓을 활용한 실시간 그림판 기능
[명우니닷컴] 웹 실시간 그림판 만들기(4)
모바일 터치 반응이 없어서 제외됨
JS로 게임을 넣는게 쉬운편, 게임 자체만으로 하나의 프로젝트급이라 해당 프로젝트에서는 구현 어려움
웹 소켓을 활용한 채팅서버 기능
[Spring] 웹소켓으로 실시간 채팅 구현
WebSocket을 이용한 실시간 채팅 구현하기 1: 서버

[Spring][iLanD] 심화 기능 레퍼런스 탐색

[Spring][iLanD] MVP - [Home] @media 태그를 이용한 메인 페이지 반응형 메뉴 변경 적용

참고자료
스프링 부트 파일 업로드 / 파일 다운로드
•MultipartFile 클래스 사용
•자동으로 MultipartConfigElement 클래스를 빈으로 등록
•파일명 중복되지 않도록 UUID 사용
스프링 부트 프로젝트에서 파일 업로드 / 다운로드 예제
파일 업로드
•파일명 중복되지 않도록 파일 이름 변경해서 업로드

[Spring][iLanD] MVP - [File] 파일 업로드 API 레퍼런스 탐색

[Spring][iLanD] MVP 프론트엔드와 API 연결 1차 기본 CRUD, Ajax로 동적 네비게이션 구현

[Spring][iLanD] MVP - [Video] 영상 CRUD API

[Spring][iLanD] MVP - [Info] 정보 API

[Spring][iLanD] MVP - [Boards] 게시판 CRUD API

[Spring][iLanD] MVP - [Notice] 공지 CRUD API

게시판 - 게시글(4종) - 파일
모든 콘텐츠는 사실 게시글이라 볼 수 있다. 그 컬럼의 내용이 달라지거나 위치만 달라질 뿐, 파일이 있는것 없는것 추후에 추가가 필요할것을 고려하여 파일 테이블을 별도로 분리하고 연관관계로 처리했다.
Board.java
게시판의 틀이되는 게시판 엔티티이다. 각 게시글들의 종류를 @OneToMany 연관관계를 통해서 각 리스트들을 가져오도록 설정했다.
package com.yzpocket.iland.entity;

import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;

@Entity
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Table(name = "boards")
public class Board extends TimeStamped{
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column
    private String title;

    @Column
    @Enumerated(value = EnumType.STRING)
    private BoardTypeEnum type;

    @ManyToOne
    @JoinColumn(name = "user_id")
    private User user;

    @OneToMany(mappedBy = "board")
    List<Notice> noticeList = new ArrayList<>();

    @OneToMany(mappedBy = "board")
    List<Video> videoList = new ArrayList<>();

    @OneToMany(mappedBy = "board")
    List<Info> infoList = new ArrayList<>();

    @OneToMany(mappedBy = "board")
    List<Info> gameList = new ArrayList<>();
}
Notice.java
첫번째 게시글의 엔티티인 공지 게시글이다. 게시판:공지게시글 은 1:N 연관관계를 가지고 있다. 이것과 동일하게 Info, Video, Game 게시글이 동일한 컬럼, 연관관계를 가지고 있다고 생각하면 된다. 대표적으로 Notice부분의 코드는 다음과 같다.
package com.yzpocket.iland.entity;

import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;

@Entity
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Table(name = "notices")
public class Notice extends TimeStamped {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long noticeId;

    @Column
    private String noticeTitle;

    @Column
    private String noticeWriter;

    @Column
    private String noticeContents;

    @Column
    @Enumerated(value = EnumType.STRING)
    private NoticeTypeEnum noticeType;

    @ManyToOne
    @JoinColumn(name = "board_id")
    private Board board;

    @OneToMany(mappedBy = "notice")
    List<File> fileList = new ArrayList<>();
}

[Spring][iLanD] MVP - 주요 엔티티 생성 및 연관관계 구성

전체 과정
의존성 추가
UserDetailsImpl 생성
UserRepository 추가
UserDetailsService 생성
JWT유틸 클래스 추가
JWT필터 추가
스프링 시큐리티 설정

[Spring][iLanD] MVP - [Auth] SpringSecurity JWT+쿠키 방식 로그인 기능 구현

회원 가입, 수정, 탈퇴 API 구현
•비밀번호는 SpringSecurity의 BCryptPasswordEncoder를 통해 기본 단방향 해시 알고리즘 BCrypt 로 복호화 불가능한 암호화 기능을 활용
•기본적으로 입력값의 유효성 검사는 다음과 같음
•usertype은 프론트에서 드롭다운박스로 value를 0,1,2 를 전달하도록 설계할 예정
UserSignupRequestDto.java
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Setter
@Builder
public class UserSignupRequestDto {

    @Email
    @NotBlank
    private String useremail;

    //@Pattern(regexp = "(?=.*[0-9])(?=.*[a-zA-Z]).{4,10}", message = "아이디 4~10자 영문 소문자, 숫자를 사용하세요.")
    @Pattern(regexp = "^[가-힣]{2,4}$", message = "이름은 한글로 2글자에서 4글자까지 입력하세요.")
    private String username;

    @Pattern(regexp = "^(?=.*[a-zA-Z])((?=.*\\d)|(?=.*\\W)).{8,15}+$", message = "비밀번호는 8~15자 영문 대 소문자, 숫자를 사용하세요.")
    private String password1;

    private String password2;

    @Builder.Default
    private long usertype = 0;

    @Builder.Default
    private String token = "";
}
UserUpdateRequestDto.java
@Data
@Builder
public class UserUpdateRequestDto {

    @Pattern(regexp = "^(?=.*[a-zA-Z])((?=.*\\d)|(?=.*\\W)).{8,15}+$", message = "비밀번호는 8~15자 영문 대 소문자, 숫자를 사용하세요.")
    private String password1;
    private String password2;

}

[Spring][iLanD] MVP - [Users] 회원 CUD API

✅ 회원 가입 및 로그인 구현  - staff only (비회원은 모든 유저)
•회원 가입 양식
•로그인
✅ Notice 공지게시판
•CREATE - admin or staff only (중요공지컬럼필요)
•READ
•UPDATE - admin or staff only
•DELETE - admin or staff only

[Spring][iLanD] 기능 분류

[Spring][iLanD] 기초 프로젝트 구조 생성 및 의존성 주입, 테스트

[Spring][iLanD] 데이터베이스 설계 1차(ERD)

프론트엔드 컨셉 디자인
주요 컨텐츠 디자인

[Spring][iLanD] 프로젝트 랜딩 미팅, 프론트엔드 디자인 구현 상태, 코드 확인, 과업 범위 확인

[Spring][iLanD] 프로젝트 진행 로드맵 작성

[Spring][iLanD] Git, Github 저장소 연결 관리

프로젝트 추진 이유
주변 네트워크를 통해 작지만 실전과 같은 경험 도움을 주겠다는 제의가 들어왔으며 감사한 마음을 다해 최선을 다해 배운 것들을 토대로 프로젝트를 진행해보고자 합니다.
교육과정에서의 여러 팀 프로젝트와 달리 본인 스스로 어느정도 개발 할 수 있을지, 어느 부분들이 부족한지 실전으로 경험하고 싶었으며 팀 프로젝트 특성상 분업과정에서 직접 못 다루어본 여러 기능들을 스스로 구현해 볼 수 있는 좋은 기회라고 생각했습니다.
본인의 개발 범위, 현황 파악
•간단한 Figma를 통해 제작된 컨셉 디자인은 있으나 백엔드 API 구성은 전혀 없는 상태
•API 개발이 필요하며 이에 따라 프론트엔드의 코드 또는 구성이 변경될 가능성이 있음
•디자인과 컨셉, 요구 기능은 최대한 유지
•데이터베이스 설계 필요
•Java 기반의 SpringBoot 프레임워크를 사용하는 것이 개발자의 경험적, 기간적, 간편성에 적합

[Spring][iLanD] 개발 계약 체결 및 추진 이유, 범위