직장인 백엔드개발자로 재취업하기

프로필로 상대찾기 페이지는 총 4가지 기능으로 구성이 되어있습니다. 1. 메뉴 선택시 알맞은 3명의 회원의 프로필을 추천 2. 프로필 선택시 채팅방 생성 및 연결 3. 표시된 3명의 프로필이 맘에 안들거나 채팅중인 상대방이 맘에 안들 시 다른상대찾기를 통해 새로운 3명의 회원의 프로필을 열람 4. 채팅중인 상대방이 마음에 들 시 상대방 좋아요 및 채팅방 저장 기능 이전 게시물https://easycoading.tistory.com/47에서 1,2번을 구현을 하였습니다. 이번 게시물에서는 3,4번을 구현을 하도록 하겠습니다. 3번 다른상대찾기 기능입니다.다른 상대 찾기 다른상대 찾기 버튼은 위 코드와 같이 구성을 하였고 클릭시 스크립트부분의 findAnotherUser() 함수가 실행이 되게 됩니다. //..

프로필로 상대찾기 메뉴를 선택했을 때 다음 사진과 같이 알고리즘에 의해 기준에 부합하는 3명의 사용자의 프로필을 임의로 표시한 뒤 마음에드는 상대방을 선택했을 때 그 상대방과 채팅방을 생성하는 기능을 구현해보겠습니다. 프로필로 상대찾기 메뉴는 총 4가지 기능으로 구성이 되어있습니다. 1. 메뉴 선택시 알맞은 3명의 회원의 프로필을 추천 2. 프로필 선택시 채팅방 생성 및 연결 3. 표시된 3명의 프로필이 맘에 안들거나 채팅중인 상대방이 맘에 안들 시 다른상대찾기를 통해 새로운 3명의 회원의 프로필을 열람 4. 채팅중인 상대방이 마음에 들 시 상대방 좋아요 및 채팅방 저장 기능 다음 4가지 기능을 구현 할 수 있도록 코드를 구성해 보겠습니다. 채팅방과 채팅 내용에 관한 관한 entity와 dto 코드 구성..

좋아요 누르고 채팅방 저장하기 버튼을 누르게 되면 현재 하고 있었던 채팅을 저장 한 뒤에 상대방에게 좋아요표시를 할 수 있는 기능을 구현 해 보았습니다. 먼저 서비스로직부터 작성해 보겠습니다. 먼저 좋아요 기능입니다.public void likeUserByUidAndId(String likerUid, Long likedUserId) { // liker는 UID로 조회 User liker = userRepository.findByUid(likerUid) .orElseThrow(() -> new RuntimeException("사용자를 찾을 수 없습니다: " + likerUid)); // likedUser는 ID로 조회 User likedUser = userRepos..

실시간 채팅 화면입니다. 여기서 다른상대 찾기 버튼을 클릭하면 다른 상대로 바꿀 수 있게 구성을 해보겠습니다. 먼저 서비스로직을 구성하겠습니다.public ChatRoomDTO matchAndCreateNewRoom(String userUid) { return matchAndCreateRoom(userUid);} 이렇게 uid를 이용하여 전에 구성해 놓았던 메소드인  matchAndCreateRoom(userUid)을 반환하게 해준다. public ChatRoomDTO matchAndCreateRoom(Long userId) { User currentUser = userRepository.findById(userId) .orElseThrow(() -> new RuntimeE..

실시간 채팅을 구현하는 과정에서 웹소켓을 어떻게 연결해야 하는 지 구성을 해 보았습니다. 먼저 웹소켓 라이브러리를 다운로드 해줍니다.//websocketimplementation 'org.springframework.boot:spring-boot-starter-websocket'implementation 'org.springframework.security:spring-security-messaging:6.0.4'implementation 'org.json:json:20210307' 그러고 난 뒤 저는 applicationpropertiies를 통해 웹소켓 설정을 해 주었습니다.spring.websocket.message-broker.enabled=truespring.websocket.message-br..

메인페이지에서 실시간 채팅하기 메뉴를 선택하게 되면 컨트롤러를 통해 실시간 채팅 페이지로 이동 할 수 있게 controller도 구성을 해 보았습니다. @PostMapping("/match")public ModelAndView matchAndRedirect(String interestName, Model model) { // 인증 객체로부터 현재 로그인한 사용자 정보 가져오기 Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); if (authentication != null && authentication.isAuthenticated()) { model.addAttribu..

이전 글에서 데이터를 저장 할 entity와 데이터베이스와 메핑을 해줄 수 있는 repository를 작성한 후 데이터를 전달해 줄 dto를 작성을 하였습니다. 이제 서비스 로직을 작성을 해 보겠습니다. 상대방과 임의로 매칭 한 뒤 채팅방을 만드는 로직입니다.public ChatRoomDTO matchAndCreateRoom(Long userId) { User currentUser = userRepository.findById(userId) .orElseThrow(() -> new RuntimeException("User not found with userId: " + userId)); // 현재 사용자의 관심사 목록 List userInterests = current..

실시간 채팅 프런트를 구성한 것을 바탕으로 백엔드도 구성을 해 보았습니다. 먼저 table부터 설계하였습니다. 채팅방에 관련된 chatroom테이블 입니다. @Entity@Data@NoArgsConstructor@AllArgsConstructor@Builderpublic class ChatRoom { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long roomid; private String roomname; // 두 명의 사용자와 ManyToOne 관계 @ManyToOne @JoinColumn(name = "user1_id") private User user1; @ManyToOne ..

이전 게시물 https://easycoading.tistory.com/39 에 이어서 이제는 다른 상대 찾기와 채팅방 좋아요 및 저장 기능을 구현하기 위한 스크립트 코드를 구성을 해 보았습니다. function findAnotherUser() { // 서버로 새로운 상대 찾기 요청 fetch(`/chat/findAnotherUser/${loggedInUserId}`, { method: 'POST' }) .then(response => { if (!response.ok) { throw new Error('새로운 상대를 찾을 수 없습니다. 다시 시도해 주세요.'); } return ..

웹소켓 라이브러리를 이용하여 실시간 채팅을 구현하는 코드를 구성을해 보았습니다. 먼저 웹소켓 라이브러리를 등록을 해 줍니다.  웹소켓 연결에 관한 스크립트 코드 입니다.function connect() { if (stompClient !== null) { stompClient.disconnect(); // 기존 WebSocket 연결을 끊음 } console.log("roomId로 WebSocket 연결 시도:", roomId); const socket = new SockJS('/ws'); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { conso..