Inheritance?

• 현실 상속? : 부모가 자식에게 물려주는 행위, 부모가 자식 선택

• 자바 상속? : 부모 클래스가 자식 클래스에게 멤버를 물려주는 행위, 자식 클래스가 부모 클래스 선택

private 멤버는 상속에서 제외 !! 부모 클래스와 자식 클래스가 다른 패키지에 존재하는 경우 >> default도 상속에서 제외 !!

Inheritance 장점

Inheritance 단점

• 상속은 자식 클래스가 부모 클래스에 강하게 의존 : 결합도 높아짐
• 캡슐화가 잘 지켜지지 않음 : 부모 클래스의 코드를 수정했을 때, 그 멤버를 사용하는 자식 클래스의 코드도 변경해야 하는 경우 생길 수 있음 : 불필요한 메서드도 상속받는 경우 생길 수 있음 ex) public class Stack extends Vector

      -> add 메서드 : 순서 상관 없이 특정 인덱스에 원소 추가 가능
      -> 사실 Vector의 add를 상속받은 것
      기대하지 않은 결과 생성

Composition

사실 조합이라는 단어가 익숙치 않다 뿐, 사용하고 있었음

Composition?

기존 클래스를 확장하는 대신에 새로운 클래스를 만들고 private 필드로 기존 클래스의 인스턴스를 참조하도록 만드는 설계 그리고 인스턴스의 메서드를 호출

Composition 장점

• 새로운 클래스는 기존 클래스의 내부 구현 방식의 영향에서 벗어남 (기존 클래스에 새로운 메서드가 추가되더라도 전혀 영향을 받지 않음) (부분 객체의 내부 구현이 공개되지 않음)

• 메서드를 호출하는 방식으로 동작하기 때문에 캡슐화를 깨뜨리지 않음

• 상위 클래스에 의존하지 않기 때문에 변화에 유연함

Composition 단점

비교

ex) public class Stack extends Vector -> public class CompositionStack { private Vector vector = new Vector<>(); } Stack에 필요했던 메서드만 Vector의 public 메서드를 호출해 새로 구현

@Component
@RequiredArgsConstructor
public class UserRepositoryQueryImpl implements UserRepositoryQuery {

    private final JPAQueryFactory jpaQueryFactory;


    @Override
    public List<User> searchUserByKeyword(UserSearchCond cond) {
        return searchByKeyword(cond, user.username);
    }

    @Override
    public List<User> searchNickByKeyword(UserSearchCond cond) {
        return searchByKeyword(cond, user.nickname);
    }

    private List<User> searchByKeyword(UserSearchCond cond, StringPath field) {
        var query = jpaQueryFactory.selectFrom(user)
                .where(containsKeyword(field, cond.getKeyword()));
        query.setHint(AvailableHints.HINT_READ_ONLY, true);
        return query.fetch();
    }

    private BooleanExpression containsKeyword(StringPath field, String keyword) {
        return StringUtils.hasText(keyword) ? field.containsIgnoreCase(keyword) : null;
    }
}

Jpa 쿼리 메서드를 이용해 검색했을 때

UserService.java

    @Transactional(readOnly = true)
    public SearchUserResponseDto searchUserByKeyword(UserSearchCond userSearchCond) {
            List<User> u1 = userRepository.findAllByUsernameContaining(userSearchCond.getKeyword());
            List<User> u2 = userRepository.findAllByNicknameContaining(userSearchCond.getKeyword());

            List<SimpleUserInfoDto> result = mergeUserResultLists(u1, u2)
                .stream()
                .map(SimpleUserInfoDto::new)
                .toList();

        return new SearchUserResponseDto(result);
    }

문제

기존 코드는 QueryDSL을 사용하지 않아도 된다. (간단한 검색이고 동적인 쿼리를 만들 필요가 없기 때문) 오히려 Jpa 쿼리 메서드를 사용하는 쪽이 빠르다.

시도

1. QueryDSL의 쿼리를 하나로 합친다.

UserRepositoryQueryImpl.java

@Component
@RequiredArgsConstructor
public class UserRepositoryQueryImpl implements UserRepositoryQuery {

    private final JPAQueryFactory jpaQueryFactory;

    @Override
    public List<User> search(UserSearchCond cond) {
        var query = jpaQueryFactory.selectFrom(user)
                .where(
                        Objects.requireNonNull(containsKeyword(user.username, cond.getKeyword()))
                                .or(containsKeyword(user.nickname, cond.getKeyword()))
                );
        query.setHint(AvailableHints.HINT_READ_ONLY, true);
        return query.fetch();
    }

    private BooleanExpression containsKeyword(StringPath field, String keyword) {
        return StringUtils.hasText(keyword) ? field.containsIgnoreCase(keyword) : null;
    }
}

훨씬 빠르게 동작하는 것을 확인할 수 있다.

2. query select문에 필요한 정보만 가져오도록 수정한다.

UserProfile.java 필요한 정보만 담을 dto

@Component
@NoArgsConstructor
@Getter
public class UserProfile {
    private Long userId;
    private String username;
    private String nickname;

    public UserProfile(Long id, String username, String nickname) {
        this.userId = id;
        this.username = username;
        this.nickname = nickname;
    }
}

더 빠르게 동작하는 것을 확인할 수 있다. 사용자를 검색하는 경우는 채팅방에 초대할 때 뿐이므로 다른 정보를 조회하지 않는 편이 낫다고 판단해 위와 같이 수정했다.

장점

• 메모리 기반의 저장소로 데이터에 접근하는 속도가 빠름
• 다양한 type의 아키텍처를 지원함
  • String, Hash, List, Set, Sorted Set, Map 등의 구조 활용 가능
• 데이터를 분할하여 여러 서버에 분산 저장, 처리할 수 있음

단점

• 데이터가 휘발성이라 서버 재시작이나 장애 상황 발생 시 데이터 보존 어려움
• 복잡한 쿼리 지원하지 않음
• 단일 스레드 환경에서 동작
  • 다중 처리나 동시성이 요구되는 작업에는 적합하지 않을 수 있음
• 용량이 큰 데이터에 적합하지 않음
• 유지 보수가 어려움

결론

• Map 형식으로 채팅방과 채팅 내용을 저장하기 위해 채팅 관련 데이터는 Redis에 저장하려 했으나 휘발성 메모리이기 때문에 데이터 유실 가능성 있음
• 채팅 중에는 redis pub/sub 사용, 처음 데이터 불러올 때만 MySQL에서 가져오도록 변경

🚨 DefaultSerializer requires a Serializable payload but received an object of type [ChatRoom]

문제

• ChatRoom을 만들고 redis에 저장할 때 위와 같은 에러 발생

원인

• Redis 는 data를 hash 해서 저장하기 때문에 redis에 저장할 객체는 Serializable을 implements 해야함

해결

• ChatRoom 이 Serializable을 implements 하도록 함

• ChatRoom.java

    @Getter
    public class ChatRoom implements Serializable {
  
        @Serial
        private static final long serialVersionUID = 6494678977089006639L;
  
        private String roomId;
        private String name;
  
        public static ChatRoom create(String name) {
            ChatRoom chatRoom = new ChatRoom();
            chatRoom.roomId = UUID.randomUUID().toString();
            chatRoom.name = name;
            return chatRoom;
        }
    }

프로젝트 환경

• embeded redis

  • build.gradle

      // redis
      implementation 'org.springframework.boot:spring-boot-starter-data-redis'
      // embedded-redis
      compileOnly group: 'it.ozimov', name: 'embedded-redis', version: '0.7.2'

• redis 설정

  • application.properties

      spring.profiles.active=local
      spring.data.redis.port=6379
      spring.data.redis.host=localhost

• 다른 환경에서 테스트가 필요할 경우

  • application-alpha.yml

    • alpha 서버용 환경 설정 파일

        spring:
          profiles:
            active: alpha
          redis:
            host: redis가 설치된 서버 호스트
            port: redis가 설치된 서버 포트

기능

Redis (Embedded Redis)

• Redis에는 공통 주제(Topic)에 대하여 구독자(Subscriber)에게 메세지를 발행(Publish) 하는 기능이 있음

  • topic - 채팅방
  • pub/ sub - 메세지 보내기, 메세지 받기

• EmbeddedRedisConfig.java

  • @PostConstruct, @PreDestroy - 채팅 서버가 실행될 때 Embedded Redis 서버도 동시에 실행될 수 있도록

  • @Profile(”local”) - local 환경에서만 실행되도록

    @Profile("local")
    @Configuration
    public class EmbeddedRedisConfig {
    
      @Value("${spring.redis.port}")
      private int redisPort;
    
      private RedisServer redisServer;
    
      @PostConstruct
      public void redisServer() {
          redisServer = new RedisServer(redisPort);
          redisServer.start();
      }
    
      @PreDestroy
      public void stopRedis() {
          if(redisServer != null) {
              redisServer.stop();
          }
      }
    }

• RedisConfig.java

  • MessageListener 추가 - Redis의 pub/sub 이용

  • RedisTemplate 설정 - 어플리케이션에서 redis 사용

    @Configuration
    public class RedisConfig {
    
      /*
          redis pub/sub 메세지를 처리하는 listener 설정
       */
      @Bean
      public RedisMessageListenerContainer redisMessageListenerContainer(RedisConnectionFactory connectionFactory) {
          RedisMessageListenerContainer container = new RedisMessageListenerContainer();
          container.setConnectionFactory(connectionFactory);
          return container;
      }
    
      /*
          어플리케이션에서 사용할 redisTemplate 설정
       */
      @Bean
      public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory connectionFactory) {
          RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
          redisTemplate.setConnectionFactory(connectionFactory);
          redisTemplate.setKeySerializer(new StringRedisSerializer());
          redisTemplate.setValueSerializer(new Jackson2JsonRedisSerializer<>(String.class));
          return redisTemplate;
      }
    }

• RedisPublisher.java

  • 채팅방에 입장 후 메세지 작성

    → 메세지를 Redis Topic에 발행

```java
@RequiredArgsConstructor
@Service
public class RedisPublisher {

    private final RedisTemplate<String, Object> redisTemplate;

    /*
        채팅방에 입장 후 메세지 작성
        -> 해당 메세지 Redis Topic에 발행
        -> 대기하고 있던 redis 구독 서비스가 메세지 처리
     */
    public void publish(ChannelTopic topic, ChatMessage message) {
        redisTemplate.convertAndSend(topic.getTopic(), message);
    }
}
```

• RedisSubscriber.java

  • Redis에 메세지 발행이 될 때까지 대기

  • 발행되면 해당 메세지 읽어 처리

    • Redis 발행 메세지 → ChatMessage 변환 → messagingTemplate으로 채팅방의 모든 클라이언트에게 메세지 전달

    @Slf4j(topic = "RedisSubscriber")
    @RequiredArgsConstructor
    @Service
    public class RedisSubscriber implements MessageListener {
    
      private final ObjectMapper objectMapper;
      private final RedisTemplate redisTemplate;
      private final SimpMessageSendingOperations messagingTemplate;
    
      /*
          Redis에서 메세지가 발행(publish)
          -> 대기하고있던 onMessage() 가 해당 메세지 처리
       */
      @Override
      public void onMessage(Message message, byte[] pattern) {
          try {
              // redis 에서 발행된 데이터 받아 deserialize
              String publishMessage = (String) redisTemplate.getStringSerializer().deserialize(message.getBody());
              // ChatMessage 객체로 매핑
              ChatMessage roomMessage = objectMapper.readValue(publishMessage, ChatMessage.class);
              // Websocket 구독자에게 ChatMessage 발송
              messagingTemplate.convertAndSend("/sub/chat/room/" + roomMessage.getRoomId(), roomMessage);
          } catch (Exception e) {
              log.error(e.getMessage());
          }
    
      }
    }

Redis

• Embedded Redis가 아닌 Redis 사용

• RedisConfig.java

    @Configuration
    public class RedisConfig {
  
        @Value("${redis.host}")
        private String redisHost;
  
        @Value("${redis.port}")
        private int redisPort;
  
        // Redis 저장소와 연결
        @Bean
        public RedisConnectionFactory connectionFactory() {
            return new LettuceConnectionFactory(redisHost, redisPort);
        }
  
        /*
            redis pub/sub 메세지를 처리하는 listener 설정
         */
        @Bean
        public RedisMessageListenerContainer redisMessageListenerContainer() {
            RedisMessageListenerContainer container = new RedisMessageListenerContainer();
            container.setConnectionFactory(connectionFactory());
            return container;
        }
  
        /*
            어플리케이션에서 사용할 redisTemplate 설정
         */
        @Bean
        public RedisTemplate<String, Object> redisTemplate() {
            RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
            redisTemplate.setConnectionFactory(connectionFactory());
            // RedisTemplate을 사용할 때 Spring-Redis 간 데이터 직렬화/역직렬화 시 사용하는 방식이 jdk 직렬화 방식
            // 동작에는 문제가 없지만 redis-cli를 통해 데이터를 확인할 때 알아볼 수 없는 형태로 출력되기 때문
            redisTemplate.setKeySerializer(new StringRedisSerializer());
            redisTemplate.setValueSerializer(new Jackson2JsonRedisSerializer<>(String.class));
            return redisTemplate;
        }
    }

Chat

• ChatController.java

  • enterChatRoom() - 클라이언트 입장 시 채팅방(topic)에서 대화 가능하도록 리스너 연동

    • 채팅방에 발행된 메세지 → 서로 다른 서버에 공유하기 위해 redis의 topic으로 발행

    @RequiredArgsConstructor
    @Controller
    @Slf4j(topic = "ChatController")
    public class ChatController {
    
      private final RedisPublisher redisPublisher;
      private final ChatRoomRepository chatRoomRepository;
    
      /*
          Websocket "/pub/chat/message"로 들어오는 메세지 처리
       */
      @MessageMapping("/chat/message")
      public void message(ChatMessage message) {
          // 입장 메세지일 경우
          if (ChatMessage.MessageType.ENTER.equals(message.getType())) {
              chatRoomRepository.enterChatRoom(message.getRoomId());
              message.setMessage(message.getSender() + "님이 입장하셨습니다.");
          }
    
          // Websocket 에 발행된 메세지 redis 로 발행 (publish)
          redisPublisher.publish(chatRoomRepository.getTopic(message.getRoomId()), message);
      }
    }

• ChatRoomRepository.java

  • 채팅방 정보가 초기화되지 않도록 생성시 Redis Hash에 저장

    @RequiredArgsConstructor
    @Repository
    public class ChatRoomRepository {
    
      // 채팅방 (topic)에 발행되는 메세지 처리할 listener
      private final RedisMessageListenerContainer redisMessageListener;
      // 구독 처리 서비스
      private final RedisSubscriber redisSubscriber;
      // Redis
      private static final String CHAT_ROOMS = "CHAT_ROOM";
      private final RedisTemplate<String, Object> redisTemplate;
      private HashOperations<String, String, ChatRoom> opsHashChatRoom;
      // 채팅방의 대화 메세지를 발행하기 위한 redis topic 정보
      // 서버별로 채팅방에 매치되는 topic 정보를 Map에 넣어 roomId로 찾을 수 있도록
      private Map<String, ChannelTopic> topics;
    
      @PostConstruct
      private void init() {
          opsHashChatRoom = redisTemplate.opsForHash();
          topics = new HashMap<>();
      }
    
      public List<ChatRoom> findAllRoom() {
          return opsHashChatRoom.values(CHAT_ROOMS);
      }
    
      public ChatRoom findRoomById(String id) {
          return opsHashChatRoom.get(CHAT_ROOMS, id);
      }
    
      /*
          채팅방 생성 : 서버간 채팅방 공유를 위해 redis hash에 저장
       */
      public ChatRoom createChatRoom(String name) {
          ChatRoom chatRoom = ChatRoom.create(name);
          opsHashChatRoom.put(CHAT_ROOMS, chatRoom.getRoomId(), chatRoom);
          return chatRoom;
      }
    
      /*
          채팅방 입장 : redis 에 topic 을 만들고 pub/sub 통신을 하기 위해 listener 설정
       */
      public void enterChatRoom(String roomId) {
          ChannelTopic topic = topics.get(roomId);
          if(topic == null) {
              topic = new ChannelTopic(roomId);
              redisMessageListener.addMessageListener(redisSubscriber, topic);
              topics.put(roomId, topic);
          }
      }
    
      public ChannelTopic getTopic(String roomId) {
          return topics.get(roomId);
      }
    }

• ChatRoom.java

  • Serializable

    • Redis에 저장되는 객체들은 Serialize 가능해야함
    • serialVersionUID

    @Getter
    public class ChatRoom implements Serializable {
    
      @Serial
      private static final long serialVersionUID = 6494678977089006639L;
    
      private String roomId;
      private String name;
    
      public static ChatRoom create(String name) {
          ChatRoom chatRoom = new ChatRoom();
          chatRoom.roomId = UUID.randomUUID().toString();
          chatRoom.name = name;
          return chatRoom;
      }
    }

테스트

다중 서버 채팅 테스트

• 두 개의 서버를 실행시켜 테스트 성공
• cmd로 실행
  • 프로젝트 폴더로 이동
  • 실행 파일 만들기
    • **gradlew.bat build**
  • 실행 파일이 생성된 위치로 이동
    • **cd build/libs**
  • 포트 번호 새로 설정 후 실행
    • **java -jar -Dserver.port=8090 websocket-prac-0.0.1-SNAPSHOT.jar**
  • 실행 종료 후 빌드 된 파일 삭제
    • **gradlew.bat clean**

• 포트 지정 실행
  • java -jar
    • java -jar -Dserver.port={포트번호} {파일명.jar}
  • Gradle
    • —server 앞에 공백 필수
    • ./gradlew bootrun —args ‘ —server.port={포트번호}’
  • Maven
    • mvn spring-boot:run -Dspring-boot.run.jvmArgument=’-Dserver.port={포트번호}’

• 채팅방 만들기 까지 됐지만 채팅방 상세화면으로 넘어갈 때 아래와 같은 에러 발생

시도

• 시도 1

  • 기존 roomdetail.html

    <!-- JavaScript -->
    <script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3-1/stomp.min.js"></script>

  • 수정 1

    • 라이브러리 버전 삭제

    <!-- JavaScript -->
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>

• 시도 2

  • 기존 roomdetail.html

    <!-- JavaScript -->
    <script src="/webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3-1/stomp.min.js"></script>

  • 수정 2

    • 라이브러리 버전 build.gradle과 맞추기

    <!-- JavaScript -->
    <script src="/webjars/sockjs-client/1.5.1/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/2.3.4/stomp.min.js"></script>

원인

• 위와 같은 오류는 정적 파일을 불러와야 하는데 해당 파일을 찾을 수 없다는 오류
• 경로에는 문제가 없다고 생각했는데 script에 버전을 다르게 적어서 파일을 찾을 수 없던 것으로 예상
• build.gradle의 sockjs, stomp는 현재 참고하고 있는 프로젝트를 시도해보기 전에 추가했던 버전

해결

• 채팅을 잘 불러옴

프로젝트 환경

• stomp 추가

• sockjs : websocket을 지원하지 않는 낮은 버전의 브라우저에서도 websocket 사용할 수 있도록

• webjar : 채팅 웹 화면 구현 관련 js 로드

• freemarker, vue.js : 프론트 웹 개발

  • build.gradle

          implementation 'org.springframework.boot:spring-boot-starter-freemarker'
          implementation 'org.springframework.boot:spring-boot-devtools'
          // 채팅 웹 화면 구현 js
          implementation 'org.webjars.bower:bootstrap:4.3.1'
          implementation 'org.webjars.bower:vue:2.5.16'
          implementation 'org.webjars.bower:axios:0.17.1'
          // sockjs
          implementation 'org.webjars:sockjs-client:1.5.1'
          // stomp
          implementation 'org.webjars:stomp-websocket:2.3.4'
          // gson
          implementation 'com.google.code.gson:gson:2.9.0'

• static 파일 개발할 때 서버를 재시작 하지 않고 수정한 내용이 반영되도록

  • application.properties

      spring.devtools.livereload.enabled=true
      spring.devtools.restart.enabled=false
      spring.freemarker.cache=false

기능

Stomp

• WebSocketConfig.java

  • Stomp를 사용

    • **@EnableWebSocketMessageBroker** 선언
    • **WebSocketMessageBrokerConfigurer** 상속

  • pub/ sub 구현

    • 메세지 발행 요청 prefix → /pub
    • 메세지 구독 요청 prefix → /sub

  • Stomp websocket 의 endpoint → /ws-stomp

    • 접속 주소 : ws://localhost:8080/ws-stomp

    @Slf4j(topic = "WebSocketChatHandler")
    @Component
    public class WebSocketChatHandler extends TextWebSocketHandler {
    
      @Override
      protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
          String payload = message.getPayload();
          log.info("payload {}", payload);
          TextMessage textMessage = new TextMessage("입장하셨습니다.");
          session.sendMessage(textMessage);
      }
    }

Chat

• 간단하게 ChatRoom을 Map으로 관리하도록 구현

  → 서비스에서는 DB 혹은 다른 저장 매체에 저장하도록 구현

  • ChatRoomRepository.java

    • ChatService → ChatRoomRepository

      @Repository
      public class ChatRoomRepository {
      
        private Map<String, ChatRoom> chatRoomMap;
      
        @PostConstruct
        private void init() {
            chatRoomMap = new LinkedHashMap<>();
        }
      
        public List<ChatRoom> findAllRoom() {
            // 채팅방 생성 순서 최신 순으로 반환
            List<ChatRoom> chatRooms = new ArrayList<>(chatRoomMap.values());
            Collections.reverse(chatRooms);
            return chatRooms;
        }
      
        public ChatRoom findRoomById(String id) {
            return chatRoomMap.get(id);
        }
      
        public ChatRoom creaetChatRoom(String name) {
            ChatRoom chatRoom = ChatRoom.create(name);
            chatRoomMap.put(chatRoom.getRoomId(), chatRoom);
            return chatRoom;
        }
      }

• **@MessageMapping** 을 통해 Websocket으로 들어오는 메세지 발행 처리

  • ChatController.java

    • WebSocketChatHandler → ChatController

      /*
        publisher 구현
      */
      @RequiredArgsConstructor
      @RestController
      @RequestMapping("/chat")
      @Slf4j(topic = "채팅방 생성/ 조회")
      public class ChatController {
      
        private final SimpMessageSendingOperations messagingTemplate;
      
        /*
            @MessageMapping -> websocket 으로 들어오는 메세지 발행 처리
         */
        @MessageMapping("/chat/message")
        public void message(ChatMessage message) {
            // 1. 클라이언트 - prefix 붙여 "/pub/chat/message"로 발행 요청
      
            // 입장 메세지일 경우
            if(ChatMessage.MessageType.ENTER.equals(message.getType())){
                message.setMessage(message.getSender() + "님이 입장하셨습니다.");
            }
      
            // 2. "/sub/chat/room/{roomId}"로 메세지 발송
            // 클라이언트 : "/sub/chat/room/{roomId}" 를 구독하고 있다가 메세지가 전달되면 화면에 출력
            messagingTemplate.convertAndSend("/sub/chat/room/" + message.getRoomId(), message);
        }
      }

• 채팅방 관련 controller 생성

  • ChatRoomController.java

      @RequiredArgsConstructor
      @Controller
      @RequestMapping("/chat")
      public class ChatRoomController {
    
          private final ChatRoomRepository chatRoomRepository;
    
          // 채팅 리스트 화면
          @GetMapping("/room")
          public String rooms(Model model) {
              return "room";
          }
    
          // 모든 채팅방 목록 반환
          @GetMapping("/rooms")
          @ResponseBody
          public List<ChatRoom> room() {
              return chatRoomRepository.findAllRoom();
          }
    
          // 채팅방 생성
          @PostMapping("/room")
          @ResponseBody
          public ChatRoom createRoom(@RequestParam String name) {
              return chatRoomRepository.createChatRoom(name);
          }
    
          // 채팅방 입장 화면
          @GetMapping("/room/enter/{roomId}")
          public String roomDetail(Model model, @PathVariable String roomId) {
              model.addAttribute("roomId", roomId);
              return "roomdetail";
          }
    
          // 특정 채팅방 조회
          @GetMapping("/room/{roomId}")
          @ResponseBody
          public ChatRoom roomInfo(@PathVariable String roomId) {
              return chatRoomRepository.findRoomById(roomId);
          }
      }

프론트

• 프론트 코드는 샘플 코드 그대로 가져옴

• room.html

    <!doctype html>
    <html lang="en">
    <head>
        <title>Websocket Chat</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- CSS -->
        <link rel="stylesheet" href="/webjars/bootstrap/4.3.1/dist/css/bootstrap.min.css">
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="container" id="app" v-cloak>
        <div class="row">
            <div class="col-md-12">
                <h3>채팅방 리스트</h3>
            </div>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <label class="input-group-text">방제목</label>
            </div>
            <input type="text" class="form-control" v-model="room_name" v-on:keyup.enter="createRoom">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" @click="createRoom">채팅방 개설</button>
            </div>
        </div>
        <ul class="list-group">
            <li class="list-group-item list-group-item-action" v-for="item in chatrooms" v-bind:key="item.roomId" v-on:click="enterRoom(item.roomId)">
                {{item.name}}
            </li>
        </ul>
    </div>
    <!-- JavaScript -->
    <script src="/webjars/vue/2.5.16/dist/vue.min.js"></script>
    <script src="/webjars/axios/0.17.1/dist/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                room_name : '',
                chatrooms: [
                ]
            },
            created() {
                this.findAllRoom();
            },
            methods: {
                findAllRoom: function() {
                    axios.get('/chat/rooms').then(response => { this.chatrooms = response.data; });
                },
                createRoom: function() {
                    if("" === this.room_name) {
                        alert("방 제목을 입력해 주십시요.");
                        return;
                    } else {
                        var params = new URLSearchParams();
                        params.append("name",this.room_name);
                        axios.post('/chat/room', params)
                            .then(
                                response => {
                                    alert(response.data.name+"방 개설에 성공하였습니다.")
                                    this.room_name = '';
                                    this.findAllRoom();
                                }
                            )
                            .catch( response => { alert("채팅방 개설에 실패하였습니다."); } );
                    }
                },
                enterRoom: function(roomId) {
                    var sender = prompt('대화명을 입력해 주세요.');
                    if(sender != "") {
                        localStorage.setItem('wschat.sender',sender);
                        localStorage.setItem('wschat.roomId',roomId);
                        location.href="/chat/room/enter/"+roomId;
                    }
                }
            }
        });
    </script>
    </body>
    </html>

• roomdetail.html

    <!doctype html>
    <html lang="en">
    <head>
        <title>Websocket ChatRoom</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="/webjars/bootstrap/4.3.1/dist/css/bootstrap.min.css">
  
        <!-- JavaScript -->
        <script src="/webjars/vue/2.5.16/dist/vue.min.js"></script>
        <script src="/webjars/axios/0.17.1/dist/axios.min.js"></script>
        <script src="/webjars/sockjs-client/1.5.1/sockjs.min.js"></script>
        <script src="/webjars/stomp-websocket/2.3.4/stomp.min.js"></script>
  
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="container" id="app" v-cloak>
        <div>
            <h2>{{room.name}}</h2>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <label class="input-group-text">내용</label>
            </div>
            <input type="text" class="form-control" v-model="message" v-on:keypress.enter="sendMessage">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" @click="sendMessage">보내기</button>
            </div>
        </div>
        <ul class="list-group">
            <li class="list-group-item" v-for="message in messages">
                {{message.sender}} - {{message.message}}</a>
            </li>
        </ul>
        <div></div>
    </div>
  
    <script>
        //alert(document.title);
        // websocket & stomp initialize
        var sock = new SockJS("/ws-stomp");
        var ws = Stomp.over(sock);
        var reconnect = 0;
        // vue.js
        var vm = new Vue({
            el: '#app',
            data: {
                roomId: '',
                room: {},
                sender: '',
                message: '',
                messages: []
            },
            created() {
                this.roomId = localStorage.getItem('wschat.roomId');
                this.sender = localStorage.getItem('wschat.sender');
                this.findRoom();
            },
            methods: {
                findRoom: function() {
                    axios.get('/chat/room/'+this.roomId).then(response => { this.room = response.data; });
                },
                sendMessage: function() {
                    ws.send("/pub/chat/message", {}, JSON.stringify({type:'TALK', roomId:this.roomId, sender:this.sender, message:this.message}));
                    this.message = '';
                },
                recvMessage: function(recv) {
                    this.messages.unshift({"type":recv.type,"sender":recv.type=='ENTER'?'[알림]':recv.sender,"message":recv.message})
                }
            }
        });
  
        function connect() {
            // pub/sub event
            ws.connect({}, function(frame) {
                ws.subscribe("/sub/chat/room/"+vm.$data.roomId, function(message) {
                    var recv = JSON.parse(message.body);
                    vm.recvMessage(recv);
                });
                ws.send("/pub/chat/message", {}, JSON.stringify({type:'ENTER', roomId:vm.$data.roomId, sender:vm.$data.sender}));
            }, function(error) {
                if(reconnect++ <= 5) {
                    setTimeout(function() {
                        console.log("connection reconnect");
                        sock = new SockJS("/ws-stomp");
                        ws = Stomp.over(sock);
                        connect();
                    },10*1000);
                }
            });
        }
        connect();
    </script>
    </body>
    </html>

테스트

뷰 페이지

• 두 개의 브라우저로 테스트 성공

(참고 : https://www.daddyprogrammer.org/post/4691/spring-websocket-chatting-server-stomp-server/)

• 클라이언트 서버에 접속 → 개별적으로 WebSocket session 가지게 됨
• 채팅방에 클라이언트의 session 정보 저장
• 서버에 전달된 메세지를 채팅방의 sessionList로 발송

Chat

• ChatMessage.java

  • 클라이언트 메세지 DTO

    @Getter
    @Setter
    public class ChatMessage {
    
      // 메세지 타입 : 입장, 채팅
      public enum MessageType {
          ENTER, TALK
      }
    
      private MessageType type;
      private String roomId;
      private String sender;
      private String message;
    }

• ChatRoom.java

  • 채팅방

    • 채팅방 정보
    • 채팅방 내 메세지 전송 메서드

    @Getter
    public class ChatRoom {
      private String roomId;
      private String name;
    
      // 입장한 클라이언트들의 session 정보
      private Set<WebSocketSession> sessions = new HashSet<>();
    
      /* 생성자 */
      @Builder
      public ChatRoom(String roomId, String name) {
          this.roomId = roomId;
          this.name = name;
      }
    
      public void handleActions(WebSocketSession session, ChatMessage chatMessage, ChatService chatService) {
          // 채팅방에 입장했을 때
          if (chatMessage.getType().equals(ChatMessage.MessageType.ENTER)) {
              sessions.add(session);
              chatMessage.setMessage(chatMessage.getSender() + "님이 입장했습니다.");
          }
    
          sendMessage(chatMessage, chatService);
      }
    
      public <T> void sendMessage(T message, ChatService chatService) {
          // 채팅방의 모든 클라이언트에게 메세지 전송
          sessions.parallelStream().forEach(session -> chatService.sendMessage(session, message));
      }
    }

ChatService

• ChatController.java

  • 채팅방 생성 및 전체 채팅방 조회

    @RequiredArgsConstructor
    @RestController
    @RequestMapping("/chat")
    @Slf4j(topic = "채팅방 생성/ 조회")
    public class ChatController {
    
      private final ChatService chatService;
    
      @PostMapping
      public ChatRoom createRoom(@RequestParam String name) {
          return chatService.createRoom(name);
      }
    
      @GetMapping
      public List<ChatRoom> findAllRoom() {
          return chatService.findAllRoom();
      }
    
    }

• ChatService.java

  • 채팅 서비스

    • 컨트롤러에서 사용할 메서드
    • 채팅 handler에서 사용할 메서드

    @Slf4j(topic = "ChatService")
    @Service
    @RequiredArgsConstructor
    public class ChatService {
    
      private final ObjectMapper objectMapper;
    
      // 생성된 모든 채팅방 정보 roomId - ChatRoom
      private Map<String, ChatRoom> chatRooms;
    
      @PostConstruct
      private void init() {
          chatRooms = new LinkedHashMap<>();
      }
    
      /**
       * 모든 채팅방 조회
       *
       * @return
       */
      public List<ChatRoom> findAllRoom() {
          return new ArrayList<>(chatRooms.values());
      }
    
      /**
       * 채팅방 조회
       *
       * @param roomId 조회할 채팅방 id
       * @return 채팅방
       */
      public ChatRoom findRoomById(String roomId) {
          return chatRooms.get(roomId);
      }
    
      /**
       * 채팅방 생성
       *
       * @param name 생성할 채팅방 이름
       * @return 채팅방
       */
      public ChatRoom createRoom(String name) {
          String randomId = UUID.randomUUID().toString();
          ChatRoom chatRoom = ChatRoom.builder()
                  .roomId(randomId)
                  .name(name)
                  .build();
    
          chatRooms.put(randomId, chatRoom);
          return chatRoom;
      }
    
      /**
       * 메세지 발송
       *
       * @param session 목적지 session
       * @param message 발송할 message
       * @param <T>     type
       */
      public <T> void sendMessage(WebSocketSession session, T message) {
          try {
              session.sendMessage(new TextMessage(objectMapper.writeValueAsString(message)));
          } catch (IOException e) {
              log.error(e.getMessage(), e);
          }
      }
    }

Handler

• WebSocketChatHandler.java

  • handler 수정

    • 기본 입장 메세지 삭제 후 ChatMessage, ChatRoom 사용하도록 수정

      TextMessage textMessage = new TextMessage("채팅 입장");
      session.sendMessage(textMessage);

```java
@Slf4j(topic = "WebSocketChatHandler")
@Component
@RequiredArgsConstructor
public class WebSocketChatHandler extends TextWebSocketHandler {

    private final ObjectMapper objectMapper;
    private final ChatService chatService;

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        log.info("payload : {}", payload);

        // 클라이언트로부터 채팅 메세지를 전달받아 ChatMessage 객체로 변환
        ChatMessage chatMessage = objectMapper.readValue(payload, ChatMessage.class);
        // 메세지 속의 roomId로 채팅방 조회
        ChatRoom room = chatService.findRoomById(chatMessage.getRoomId());
        // 해당 채팅방에 있는 클라이언트들에게 메세지 발송
        room.handleActions(session, chatMessage, chatService);
    }
}
```

테스트

채팅방

• 채팅방 생성

• 채팅방 조회

채팅

• simple websocket client 두 개를 열어 채팅

(참고 : https://www.daddyprogrammer.org/post/4077/spring-websocket-chatting/)

프로젝트 환경

• websocket 의존성 추가

  • build.gradle

      // websocket
      implementation 'org.springframework.boot:spring-boot-starter-websocket'

Websocket Handler

• socket 통신은 서버와 클라이언트가 1:N

  → 서버에는 여러 클라이언트가 발송한 메세지를 받아 처리해줄 Handler 필요

• WebSocketChatHandler.java

  • 클라이언트 메세지 송신

    → console.log 출력

    → 클라이언트로 메세지 전송

```java
@Slf4j(topic = "WebSocketChatHandler")
@Component
public class WebSocketChatHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        log.info("채팅 log : payload {}", payload);
        TextMessage textMessage = new TextMessage("입장하셨습니다.");
        session.sendMessage(textMessage);
    }
}
```

• WebSocketConfig.java

  • WebSocket 활성화

    • @EnableWebSocket 선언

    • endpoint 설정(”/ws/chat”)

    • CORS : setAllowedOrigins(”*”)

      → 도메인이 다른 서버에서도 접속 가능

```java
@Slf4j(topic = "WebSocketChatHandler")
@Component
public class WebSocketChatHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        log.info("payload {}", payload);
        TextMessage textMessage = new TextMessage("입장하셨습니다.");
        session.sendMessage(textMessage);
    }
}
```

테스트

Simple Websocket Client

• Websocket 테스트를 위한 클라이언트가 없을 때 사용할 수 있는 chrome 확장 프로그램

Simple WebSocket Client

(참고 : https://www.daddyprogrammer.org/post/4077/spring-websocket-chatting/) (참고 : https://terianp.tistory.com/146) (참고 : https://gnaseel.tistory.com/11)

1. AWS 설정

S3 버킷 생성 > IAM 사용자 생성

2. 로컬 환경 설정

Spring Boot 연결

build.gradle

//  aws s3
implementation 'org.springframework.cloud:spring-cloud-starter-aws:2.2.6.RELEASE'

application.properties : 배포하지 않을 예정이기 때문에 application.properties에 한꺼번에 적어둠 : IAM 사용자의 access key를 발급받아 붙이기

#S3
cloud.aws.credentials.accessKey={IAM-access-key}
cloud.aws.credentials.secretKey={IAM-secret-key}
cloud.aws.s3.bucket={bucket-name}
cloud.aws.region.static={region}
cloud.aws.s3.bucket.url=https://s3.ap-northeast-2.amazonaws.com/{bucket-name}
cloud.aws.stack.auto=false

AmazonS3Config.java

@Configuration
public class AmazonS3Config {

    @Value("${cloud.aws.credentials.accessKey}")
    private String accessKey;

    @Value("${cloud.aws.credentials.secretKey}")
    private String secretKey;

    @Value("${cloud.aws.region.static}")
    private String region;

    // S3 버킷에 접근할 수 있는 client 객체
    @Bean
    public AmazonS3Client amazonS3Client() {
        BasicAWSCredentials awsCredentials = new BasicAWSCredentials(accessKey, secretKey);

        return (AmazonS3Client) AmazonS3ClientBuilder.standard()
                .withRegion(region)
                .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
                .build();
    }

}

구현

업로드 기능

AwsS3FileUpload.java

@Slf4j(topic = "AwsS3Service")
@RequiredArgsConstructor
@Component
public class AwsS3FileUploadImpl implements AwsS3FileUpload {

    @Value("${cloud.aws.s3.bucket}")
    private String bucket;

    private final AmazonS3Client amazonS3Client;

    @Override
    public String upload(MultipartFile multipartFile, String dirName) throws IOException {
        File uploadFile = convert(multipartFile)
                .orElseThrow(() -> new IllegalArgumentException("MultipartFile -> File로 전환이 실패했습니다."));

        // 현재 dirName 은 profile 만 받을 예정
        String fileName = dirName + "/" + uploadFile.getName();
        String uploadImageUrl = putS3(uploadFile, fileName);
        removeNewFile(uploadFile);
        return uploadImageUrl;
    }

    @Override
    public String putS3(File uploadFile, String fileName) {
        // bucket 권한때 설정한 것 중 하나
        amazonS3Client.putObject(
                new PutObjectRequest(bucket, fileName, uploadFile)
                        .withCannedAcl(CannedAccessControlList.PublicRead)
        );
        return amazonS3Client.getUrl(bucket, fileName).toString();
    }

    @Override
    public void removeNewFile(File localSavedFile) {
        if (localSavedFile.delete()) {
            log.info("로컬에 저장된 파일 삭제");
        } else {
            log.info("로컬에 저장된 파일 삭제 실패");
        }
    }

    @Override
    public Optional<File> convert(MultipartFile file) throws IOException {
        File convertFile = new File(file.getOriginalFilename());
        log.info("convertFile = " + convertFile);

        if (convertFile.createNewFile()) {
            try (FileOutputStream fos = new FileOutputStream(convertFile)) {
                fos.write(file.getBytes());
            }
            return Optional.of(convertFile);
        }
        return Optional.empty();
    }
}

UserService.java

    @Override
    public void uploadProfileImage(MultipartFile multipartFile, User user) throws IOException {
        fileUpload.upload(multipartFile, "profile");
    }

UserController.java

    @PostMapping("/profileImg")
    public ResponseEntity<ApiResponseDto> uploadProfileImage(
            @RequestPart (required = false) MultipartFile multipartFile,
            @AuthenticationPrincipal UserDetailsImpl userDetails
            ) throws IOException {
        userService.uploadProfileImage(multipartFile, userDetails.getUser());
        return ResponseEntity.status(201).body(new ApiResponseDto("프로필 사진이 업로드 되었습니다.", HttpStatus.CREATED.value()));
    }

프로필 이미지를 변경할 때 이미지 파일과 요청한 사용자 정보만 필요하기 때문에 위와 같이 작성함

테스트

API 에서 content type을 Image/{확장자명} 으로 설정해야함 -> 설정하지 않는다면 415 Unsupported MediaType ERROR 발생

profile 폴더에 들어간 것을 확인할 수 있음

기존 코드

UserController.java

    @GetMapping("/search")
    public ResponseEntity<SearchUserResponseDto> searchUserByUsername(
            @RequestParam("keyword") String keyword
    ) {
        log.info("사용자 찾기 컨트롤러");
        SearchUserResponseDto result = userService.searchUserByUsername(new UserSearchCond(keyword));
        return ResponseEntity.ok().body(result);
    }

index.js

function clickSearchUserIcon() {
    console.log('사용자 검색 클릭');
    let userSearchKeyword = $('#searchKeywordInput').val();
    console.log(userSearchKeyword);

    if (userSearchKeyword.trim() === '') {
        alert('검색어를 입력하세요');
        return;
    }

    let data = {
        keyword: userSearchKeyword
    };

    $.ajax({
        type: "GET",
        url: `/api/users/search`,
        contentType: "application/json",
        data: JSON.stringify(data),
        headers: {
            'Authorization': document.cookie
        },
        success: function (response) {
            console.log('검색 요청 성공');
            console.log(response);
        },
        error: function(response) {
            console.log('검색 요청 실패');
            console.log(response);
        }
    })
}

에러 메세지

invalid character found in the request target
the valid characters are defined in rfc 7230 and rfc 3986

에러메세지 안에 /api/users/search? 라고 뜨며 body에 보낸 data가 암호화 되어 보내졌다는 것을 알 수 있음

해결

UserController.java

    @GetMapping("/search")
    public ResponseEntity<SearchUserResponseDto> searchUserByUsername(
            @RequestParam("keyword") String keyword
    ) {
        log.info("사용자 찾기 컨트롤러");
        SearchUserResponseDto result = userService.searchUserByUsername(new UserSearchCond(keyword));
        return ResponseEntity.ok().body(result);
    }

index.js

$.ajax({
        type: "GET",
        url: `/api/users/search?keyword=${userSearchKeyword}`,
        headers: {
            'Authorization': document.cookie
        },
        success: function (response) {
            console.log('검색 요청 성공');
            console.log(response);
        },
        error: function (response) {
            console.log('검색 요청 실패');
            console.log(response);
        }
    })

원인

GET 요청은 간단한 데이터를 url에 넣도록 설계된 방식으로 데이터를 보내는 양에 한계가 있음 url 의 길이가 정해져있기 때문에 많은 양의 정보를 전달할 수 없음 url 형식에 맞지 않는 값은 인코딩되어 전달되어야 함

헤더의 내용 중 body의 데이터 타입을 설명하는 content-type 헤더필드도 들어가지 않음

따라서 필요한 데이터가 있다면 QueryParam 을 통해 전달

html 파일 내 script

<li class="list-group-item" id="${boardId}">${boardName}</li>

$(document).on("click", ".list-group-item", function () {
        var clickedBoardId = $(this).attr('id');
        var clickedBoardName = $(this).text();

        console.log('Clicked Board ID:', clickedBoardId);
        console.log('Clicked Board Name:', clickedBoardName);
})

java와 유사하게 this를 사용하면 선택한 요소의 id와 속의 text를 가져올 수 있다.

thymeleaf

view controller

    @GetMapping("/mypage")
    public String getMyPage(Model model, @AuthenticationPrincipal UserDetailsImpl userDetails) {
        LoginUserProfileDto profileDto = new LoginUserProfileDto(userDetails.getUser());
        model.addAttribute("profile", profileDto);
        return "mypage";
    }

mypage.html

<h2><span id="nickname" th:text="${profile.nickname}">${profile.nickname}</span>의 페이지</h2>
    <p><span id="username" th:text="${profile.username}">${profile.username}</span></p>

전에는 text만 model로 전달했었는데 이렇게 dto를 만들어 통째로 보내는 것도 가능하다.

현재 로그인 된 유저의 정보가 마이페이지에 반영될 수 있도록 했다.

modal

script

const changeNicknameButton = document.getElementById('changeNickname');
    const closeNicknameModalButton = document.getElementById('closeNicknameModal');
    const registerNicknameModal = document.getElementById('registerNicknameModal');
    const nicknameModalOverlay = document.getElementById('nicknameModalOverlay');

    changeNicknameButton.addEventListener('click', function () {
        registerNicknameModal.style.display = 'block';
        nicknameModalOverlay.style.display = 'block';
    });
    closeNicknameModalButton.addEventListener('click', function () {
        registerNicknameModal.style.display = 'none';
        nicknameModalOverlay.style.display = 'none';
    });

modal은 'display=none'과 'display=block'으로 사용할 수 있다. (none으로 시작)

2중 ajax

$.ajax({
            url: 'http://localhost:8080/api/boards/' + clickedBoardId + '/columns',
            type: 'GET',
            contentType: 'application/json',
            headers: {
                'Authorization': document.cookie // 클라이언트 쿠키의 값을 전달
            },
            success: function (response) {
                console.log(response);
                let temp_htmls = '';
                $('#listContainer').empty();

                response.forEach((a) => {
                    let columnId = a['id'];
                    let columnTitle = a['title'];


                    let temp_html = `
                        <div class="list" id="${columnId}" draggable="true">
                            <div class="list-header">${columnTitle}
                                   <button onclick="DeleteColumnBtn(${columnId})" style="float: right; margin-right: 5px;" class="bi bi-trash3 fs-20"></button>
                                   <button onclick="modifyColumnBtn(${columnId})" style="float: right; margin-right: 5px;" class="bi bi-pencil fs-20"></button>
                            </div>

                            <div class="card" draggable="true">Card 1</div>
                            <div class="card" draggable="true">Card 2</div>
                        </div>
                    `;

                    temp_htmls += temp_html;
                });
                console.log('forEach문 끝');
                $('#listContainer').append(temp_htmls);
            },
            error: function () {
                console.log('AJAX 요청 실패');
            }
        });

column 속 card들도 붙여오려면 2중으로 ajax 요청을 보내야 할 것 같다. 아직 해결하지 못함.

설치

설치 후 -> 작업 관리자 > 서비스 탭에서 확인 가능 만약 실행되지 않았다면 -> 설치경로 > redis-server.exe 파일 수동 실행

redis-cli.exe 통해 명령어 사용 (참고 : https://inpa.tistory.com/entry/REDIS-%F0%9F%93%9A-%EA%B0%9C%EB%85%90-%EC%86%8C%EA%B0%9C-%EC%82%AC%EC%9A%A9%EC%B2%98-%EC%BA%90%EC%8B%9C-%EC%84%B8%EC%85%98-%ED%95%9C%EB%88%88%EC%97%90-%EC%8F%99-%EC%A0%95%EB%A6%AC?category=918728) (참고 : https://inpa.tistory.com/entry/REDIS-%F0%9F%93%9A-Window10-%ED%99%98%EA%B2%BD%EC%97%90-Redis-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0) (설치 : https://github.com/microsoftarchive/redis/releases)

Spring 로그인

(참고 : https://wildeveloperetrain.tistory.com/57)

Redis 추가

RedisConfig.java 생성

@Configuration
public class RedisConfig {

    @Value("${redis.host}")
    private String redisHost;

    @Value("${redis.port}")
    private int redisPort;

    // Redis 저장소와 연결
    @Bean
    public RedisConnectionFactory connectionFactory() {
        return new LettuceConnectionFactory(redisHost, redisPort);
    }

    /***
     * Redis 서버와 통신
     * StringRedisTemplate를 사용하여 Key, value를 모두 문자열로 저장
     */
    @Bean
    public StringRedisTemplate redisTemplate() {
        final StringRedisTemplate redisTemplate = new StringRedisTemplate();

        // RedisTemplate을 사용할 때 Spring-Redis 간 데이터 직렬화/역직렬화 시 사용하는 방식이 jdk 직렬화 방식
        // 동작에는 문제가 없지만 redis-cli를 통해 데이터를 확인할 때 알아볼 수 없는 형태로 출력되기 때문
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new StringRedisSerializer());

        redisTemplate.setConnectionFactory(connectionFactory());
        return redisTemplate;
    }
}

(참고 : https://wildeveloperetrain.tistory.com/59)

@Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

        String accessToken = jwtUtil.getJwtFromCookie(request);

        if (StringUtils.hasText(accessToken)) {
            accessToken = jwtUtil.substringToken(accessToken);
            log.info("액세스 토큰 값 : " + accessToken);

            <<시도 2. 요청을 받을 때마다 새로운 토큰 발급>>

            if (!jwtUtil.validateToken(accessToken)) {
                log.info("액세스 토큰 유효하지 않음");

                <<시도 1. 만료됐다면 새로운 토큰 발급>>

                return;
            }

            log.info("body의 사용자 정보 꺼내기");
            Claims info = jwtUtil.getUserInfoFromToken(accessToken);

            try {
                // token 생성 시 subject에 username 넣어둠
                log.info(info.getSubject());
                setAuthentication(info.getSubject());
            } catch (Exception e) {
                return;
            }
        }

        filterChain.doFilter(request, response);
    }

문제

시도

1. 토큰이 만료됐다면 새로운 access token 발급

-> 요청을 2번 보내야 원하는 작업 할 수 있음 (1번 : 새로운 토큰 발급/ 2번 : 새로운 토큰으로 작업)

2. 요청이 들어올 때마다 새로운 access token 발급 (1.의 문제 해결)

JwtAuthorizationFilter.java의 doFilterInternal

 @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

        String accessToken = jwtUtil.getJwtFromCookie(request);

        if (StringUtils.hasText(accessToken)) {
            accessToken = jwtUtil.substringToken(accessToken);
            log.info("액세스 토큰 값 : " + accessToken);

            String newAccessToken = jwtUtil.reissueAccessToken(accessToken);
            if (newAccessToken != null) {
                jwtUtil.addJwtToCookie(newAccessToken, response);
            }

            if (!jwtUtil.validateToken(accessToken)) {
                log.info("액세스 토큰 유효하지 않음");
                return;
            }

            log.info("body의 사용자 정보 꺼내기");
            Claims info = jwtUtil.getUserInfoFromToken(accessToken);

            try {
                // token 생성 시 subject에 username 넣어둠
                log.info(info.getSubject());
                setAuthentication(info.getSubject());
            } catch (Exception e) {
                log.info("오류 발생");
                return;
            }
        }
        filterChain.doFilter(request, response);
    }

• 다른 Redis Java 클라이언트에 비해 가벼움
• 적은 기능을 제공하지만 많은 양의 메모리 처리 가능
• 동기 통신 지원
• Jedis pool 이용하면 멀티 스레드 환경에서 동작 가능 (모든 풀이 사용 중일 경우 요청과 응답 사이 블로킹이 발생해 어느 정도의 유휴상태에 빠질 수 있음) -> 동기적 연결만 지원한다면 트래픽이 몰렸을 때 병목현상 발생할 수 있음 (https://github.com/redis/jedis) (https://github.com/spring-projects/spring-session/issues/789)

Lettuce

• 확장성 높음, Spring 2.0 부터 기본 Redis가 jedis -> lettuce로 변경
• non-blocking 기능
• 동기, 비동기, 리액티브 프로그래밍 모델 지원
• cluster, sentinel, pipelining, codecs 지원
• 다중 연결 처리
• Jedis에 비해 사용이 어려움 (https://lettuce.io/core/release/reference/)

기능

• Cluster Distributed Redis Setup 과 상호작용 할 수 있는 api set 제공 클러스터 노드 자동으로 발견 토폴로지 변경 처리 적절한 노드로 명령 라우팅 가능

• Sentinel Redis 설정에 문제가 발생했을 때 모니터링, 알람, 자동 페일 오버 제공 분산 환경에서 Redis와 함께 동작 Redis 전체적인 상태와 신뢰성 유지

• Codecs 레디스에 데이터가 어떤 형식으로 저장될지 결정하는 직렬화, 역직렬화 기법 선택 가능

• Pipeline 여러개의 요청을 pipeline에 담아 한 번에 요청 (https://redis.io/docs/manual/pipelining/)

• Auto-reconnect and timeout handling 어플리케이션의 연속성 보장 레디스가 한 작업을 오래 잡고 있는 것 방지

Spring에서 사용

(https://docs.spring.io/spring-data/data-redis/docs/current/reference/html/)

lettuce 선택 이유

• TPS/CPU/Connection 개수/응답속도 등 성능 jedis < lettuce
• 확장성이 높음

(https://jojoldu.tistory.com/418) (https://gist.github.com/warrenzhu25/1beb02a09b6afd41dff2c27c53918ce7#why-lettuce)

메모를 생성하는 기능을 테스트하기 위한 코드 status code 201로 기대했지만 415가 반환

@PostMapping("")
    public ResponseEntity<MemoResponseDto> createMemo(@RequestBody MemoRequestDto requestDto, @AuthenticationPrincipal UserDetailsImpl userDetails) {
        MemoResponseDto result = memoService.createMemo(requestDto, userDetails.getUser());
        return ResponseEntity.status(201).body(result);
    }

시도

// when - then
        mvc.perform(post("/api/memos")
                        .content(memoInfo)
                        .contentType(MediaType.APPLICATION_JSON)
                        .principal(mockPrincipal))
                .andExpect(status().isCreated());    // 415 나옴

jakarta.servlet.ServletException: Request processing failed: org.springframework.http.converter.HttpMessageConversionException: Type definition error: [simple type, class com.example.springmemoreview.memo.dto.MemoRequestDto]

accept를 contentType으로 바꿔봤더니 이전과는 다른 type definition error가 발생

• contentType : 요청과 응답 모두 보낼 데이터의 형식을 알려주는 헤더
• accept : 클라이언트에서 서버로 요청시 요청메세지에 담기는 헤더

@Test
    @DisplayName("컨트롤러 - 메모 불러오기")
    void getMemosTest() throws Exception {
        mvc.perform(get("/api/memos")
                        .accept(MediaType.APPLICATION_JSON)
                )
                .andExpect(status().isOk());
    }

같은 컨트롤러 안에 반환타입이 같은 get 요청의 테스트는 통과하는 것으로 보아 post로 보낸 내용에 문제가 있는 듯 함

Junit Test 실행 불가능

InitializationError
Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...)

debug org.springframework.boot.test.autoconfigure.jdbc.jdbctestcontextbootstrapper - neither @contextconfiguration nor @contexthierarchy found for test class [jdbctemplatetest]: using springbootcontextloader

원인

1. Application 패키지 구조와 Test 패키지 구조가 다른 경우 (application context가 따라가지 못함)

2. @SpringBootApplication으로 선언된 Class명과 Test Class명이 다른 경우

해결

1. 패키지 구조를 맞추기 application configuration 정보가 넘어옴

2. 테스트 클래스에 아래의 어노테이션 추가

   @ContextConfiguration(classes = Application.class)

   추가 후

   @JdbcTest // Jdbc Slice Test
   @ContextConfiguration(classes = Application.class)
   @AutoConfigureTestDatabase(replace = AutoConfigureTestDatabase.Replace.NONE) // 테스트용 DB 쓰지 않도록
   @Rollback(value = false) // Transactional 에 있는 테스트 변경은 기본적으론 롤백 하도록 되어있다.
   public class JDBCTemplateTest 

나의 경우는 1번만으로 해결

문제

String password = passwordEncoder.encode(requestDto.getPassword());
String confirmPassword = passwordEncoder.encode(requestDto.getConfirmPassword());

if(!passwordEncoder.matches(password, confirmPassword)) {
      throw new IllegalArgumentException("비밀번호를 다시 확인해주세요.");
}

시도

1. 둘 다 암호화 되어있어서 받아온 password 값과 confirmPassword 값은 항상 다를 수 밖에 없다는 것을 깨달았다.

   String confirmPassword = requestDto.getConfirmPassword();

   confirmPassword는 저장할 데이터가 아니기 때문에 이 값을 암호화하지 않은 채로 가져왔다.

하지만 여전히 matches 함수는 false값이 나왔다.

2. PasswordEncoder.matches()는 Spring Security Java에서 제공하는 메서드이다. 이 함수는 암호화 된 비밀번호와 평문의 비밀번호가 일치하는지 확인할 때 사용된다.

boolean matches(CharSequence rawPassword, String encodedPassword);

• rawPassword : 평문
• encodedPassword : 암호화된 비밀번호

matches() 메서드의 첫 번째 인자는 평문이어야 한다.

해결

String password = passwordEncoder.encode(requestDto.getPassword());
String confirmPassword = requestDto.getConfirmPassword();

if(!passwordEncoder.matches(confirmPassword, password)) {
      throw new IllegalArgumentException("비밀번호를 다시 확인해주세요.");
}

confirmPassword는 requestDto에서 평문 상태 그대로 가져오고 matches 메서드의 첫 번째 인자로 넣었다.

알게된 점

PasswordEncoder 인터페이스에는

String encode(CharSequence rawPassword);
boolean matches(CharSequence rawPassword, String encodedPassword);
default boolean upgradeEncoding(String encodedPassword) {
        return false;
    }

세 가지 메서드가 있다.

matches 메서드에는 평문 비밀번호, 암호화된 비밀번호 순서대로 들어가야 한다.

: 계층간 데이터 교환을 위해 사용하는 객체 : 로직을 가지지 않음 (getter, setter, toString, equals 등 작성 가능)

DAO (Data Access Object)

: 데이터베이스의 데이터에 접근하기 위한 객체 : 데이터베이스에 접근하기 위한 로직, 비즈니스 로직을 분리하기 위해 사용

만약 유저가 입력한 데이터를 db에 저장하려는 상황 -> 유저가 입력한 데이터를 dto를 통해 받음 -> 서버는 dto를 받아 dao를 이용해 데이터베이스에 저장

VO (Value Object)

: read-only (setter x)

• 서버에서 데이터를 보내 웹 서비스를 만드는 방법

  • Single Page Application
  • Server Side Rendering

• HTML과 데이터를 결합해 만들 수 있도록 도와주는 도구

Thymeleaf

build.gradle에 dependency 추가

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

html 태그에 추가

<html lang="ko" xmlns:th="http://www.thymeleaf.org"

• xmlns:th : 타임리프의 th 속성을 사용하기 위해 선언된 네임스페이스 : 순수 HTML로만 이루어진 페이지의 경우 선언하지 않아도 됨

• th:text : JSP의 EL 표현식인 ${}처럼 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근 : 일반 텍스트 형식으로 출력됨

• th:fragment : < head> 태그에 해당 속성을 사용해 fragment의 이름 지정 : fragment는 다른 HTML에서 include 또는 replace 속성을 사용해 적용할 수 있음

• th:href : < a> 태그의 href 속성과 동일 : 웹 어플리케이션을 구분하는 context path를 포함

• th:action : < form> 태그 사용시 해당 경로로 요청 보내기

• th:object : < form> 태그에서 submit을 할 때 데이터가 th:object에 설정해둔 객체로 받아짐 : 컨트롤러와 뷰 사이의 dto 클래스 객체

  <form class="form-horizontal" th:action="@{/board/register.do}" th:object="${board}" method="post">

• th:field : th:object 속성을 이용하면 th:field를 이용해 HTML 태그에 멤버 변수를 매핑할 수 있음 : th:field를 이용한 사용자 입력 필드(input, textarea 등)는 id, name, value 속성 값 자동 매핑됨 : ${} 표현식이 아닌 *{} 표현식 사용 : th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달받은 경우에만 사용 가능

• th:checked : 체크박스, 조건이 true면 체크

• th:inline="javascript" : < script> 태그에 th:inline 속성을 javascript로 지정해야 javascript 사용 가능

===log town 팀 프로젝트=== HomeController.java

 @GetMapping("/home/onepost/{postId}")
    public String getOnePost(@PathVariable Long postId, Model model) {
        model.addAttribute("postId", postId);

        return "onepost";
    }

onepost.html

th:text="${postId}

이번에는 postId만 넘겨줬지만 다음에는 더 효율적인 방법으로 구현할 수 있는지 알아봐야겠다.