2023년/멋쟁이사자처럼 팀프로젝트 (12) 썸네일형 리스트형 [팀 프로젝트] SockJS를 활용한 STOMP 방식 채팅방에서 채팅내역 저장과 읽음처리 기능 구현하기 요구사항 채팅방에서 채팅한 내역들에 대해서 저장하고 불러오기 한사람이 읽었던 위치 저장하고 불러오기 개요 개발환경 및 채팅방 환경은 아래와 같습니다. https://koopi.tistory.com/39 [팀프로젝트] SockJs를 활용한 STOMP 방식 채팅방에서 실시간 사용자 체크하는 기능 구현하기 요구 사항 채팅방 사용자가 실시간으로 접속한 유저를 알 수 있게 구현 입장 또는 활동 시 유저목록 내 UI 초록색 퇴장 시 유저목록 내 UI 빨간색 새로 가입 시 리스트 추가 개요 개발환경 에디터 koopi.tistory.com ERD 여러 사용자가 참여한 채팅방에서 채팅 내역을 어떻게 저장할 수 있을까 라는 고민에 엔티티와의 관계를 그려보았다. 고안한 ERD 로 하여금 엔티티를 구성하였으며, 참여 관련된 .. [팀프로젝트] SockJs를 활용한 STOMP 방식 채팅방에서 실시간 사용자 체크하는 기능 구현하기 요구 사항 채팅방 사용자가 실시간으로 접속한 유저를 알 수 있게 구현 입장 또는 활동 시 유저목록 내 UI 초록색 퇴장 시 유저목록 내 UI 빨간색 새로 가입 시 리스트 추가 개요 개발환경 에디터 : Intellij Ultimate 개발 툴 : SpringBoot 2.7.7 자바 : JAVA 11 빌드 : Gradle 서버 : AWS EC2, AWS RDS, AWS S3 CI/CD : Docker, Gitlab 데이터베이스 : MySql, Redis 필수 라이브러리 : Spring Data JPA, Lombok, Spring Security, thymeleaf, JWT, WebSocket, OAuth2.0, Email ETC : Git, IntelliJ, JS, KakaoMap API 채팅방 환경 Soc.. [팀 프로젝트] 1명의 USER 가 n개의 모임에 참여했는지 여부를 파악하는 방법 구현하기 요구 사항 User(사용자) 는 1개의 Crew(모임) 에 참여 할 수 있다. Crew(모임) 의 작성자는 참여 신청한 사용자를 조회/승인/반려 할 수 있다. User(사용자) 는 상세페이지에 접근했을때, 참여 상태에 따른 버튼이 달라져야한다. 진행 사항 플로우 차트 및 UI 화면 엔티티 설계 참여 라는 엔티티를 만들어 User Crew 를 FK 로 받고 status 를 나타냄 public class Participation { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "user_id") private User user;.. [팀프로젝트] datepicker / Timepicker 적용하기 https://timepicker.co/ jQuery Timepicker jQuery Timepicker is a plugin to help users easily input time entries. It can parse the most used time representations allowing you and your users to enter time using their prefered way for writing it. Also, if writing is not your thing, you can also choos timepicker.co 사용하라고 편하게 설명되어있다. 헤더부분에 다음과 같은 소스를 추가해주고 jquery-ui 와 jquery , jquery.js 를 받아와준다. html .. [팀프로젝트] STOMP 활용한 프로젝트 채팅방 구현 프로젝트 간 구현해야될 내용이나 발생한 이슈들에 대해서의 자세다. 불편하니까 고쳐앉고 정신차리도록 하자 STOMP 활용한 실시간 채팅 구현 STOMP 가 뭐지? Simple Text Oriented Messaging Protocol 의 약자. WebSocket 위에서 동작하는 텍스트 기반 메세징 프로토콜이다. 클라이언트와 서버가 전송할 메세지 유형, 형식, 내용들을 정의하는 매커니즘 STOMP는 HTTP 위에서 동작하는 Frame 기반 프로토콜 Frame 은 아래와 같은 형식을 가짐 COMMAND header1:value1 header2:value2 Body^@ Frame 이란 Frame : 통신 상 가장 작은 단위 Message : 다수의 Frame 으로 이루어진 구조 Stream : 클라이언트 - 서.. [팀프로젝트] Spring Boot에서 jwt + 쿠키를 활용한 로그인 구현과 비동기 방식 처리 spring boot 에서 jwt 토큰을 발급 받은 뒤 어떤식으로 처리하면 좋을까에 대한 생각을 적은 글 주의 : 이론적 설명을 제외하고 어떻게 사용할까에 대한 담은 글입니다. 참고용도로만 적용해주시고 실무에서는 꼭 보안규칙을 따져가면서 꼼꼼히 작성하셔야합니다! jwt 토큰은 user 정보가 들어있기 때문에 매우 신중히 고려해서 다뤄줘야됨 구글링으로 찾은 내용으로,, jwt 를 저장하는 방식으로는 1. 로컬스토리지 저장 2. 쿠키에 저장 +a. httpSession 활용 간략히 이렇게 나타나 있는데, 각자의 장단점 및 이론에 대해서는 추후 정리하고 일단 어떻게 사용하는지에 대해서 설명함. 보통 jwt 값이 백엔드에서는 위와 같이 리턴되게 될텐데 (jwt 를 string 방식으로 반환해준 것) 로컬 스토리.. [팀프로젝트] 비동기 방식 통신 + 스프링부트 RestController 활용한 웹 페이지 보호되어 있는 글입니다. [팀프로젝트] 깃허브 워크플로우 이전 1 2 다음 목록 더보기
