오늘은 게시판에서 게시글이 많을 때 게시판의 가독성적인 부분이나 정리된 화면을 위한 페이지네이션 기능을 구현했다. 페이지네이션(Pagination)이란? 게시판에서 모든 게시글을 한 화면에 모두 보여준 게 아니라 페이지를 나눠서 제공하는 것을 의미한다. 정렬 방식과 페이지의 크기, 그리고 몇 번째 페이지인지의 요청에 따라 정보를 전달해주는 것이 Pagination이다. 구현 목표 화면 한 화면에 게시글은 총 10개만 출력이 되고 넘어갈 시 다음 페이지 버튼이 생성된다. 한 화면에 보여주는 페이지 버튼은 총 10개(게시글 100개) 게시글이 100개가 넘어갈 시 다음 페이지(11페이지)로 이동할 수 있는 "다음"버튼이 생성된다. 만약 게시글이 100개가 존재하지 않는다면 다음 버튼은 생성되지 않는다. 11..

오늘은 카테고리별 게시판을 만들어 봤다. 일단 카테고리별로 출력되는 게시글이 달라져야 했기 때문에 쿼리 스트링을 사용해서 카테고리의 아이디 값을 얻어와 카테고리에 포함된 모든 게시글들을 출력하도록 했다. localhost:8080/posts?category=1 여기서 (?category=1) 이 부분을 쿼리 스트링이라고 불린다. 그러면 위와 같은 path에서 쿼리만 가져오는건 어떻게 할 수 있을까?? useLocation 우선 useLocation을 사용해서 쿼리를 받아오는 방법을 알아보자. const location = useLocation(); useLocation을 이용해 location을 콘솔 창에 찍어보면 아래와 같은 결과가 나온다. 그중 search를 보면 우리가 원하는 정보인 쿼리("? ca..

오늘도 아샬 님이 오셔서 라이브 코딩을 하며 여러 가지 꿀팁을 전달해주시고 가는데 그중에서 오늘 내 코드에 적용한 것들만 정리해 봤다. Controller는 간단하게 Controller는 최대한 간단하게 만드는 게 좋다고 해주셨다. 그에 반해 나의 Controller는 상당히 복잡했다. 그 이유가 post라는 게시글에 전달해줘야 할 정보가 post객체뿐만 아니라 comment 같은 부가적인 객체들도 같이 전달해줘야 했기 때문에 여러 서비스를 호출해서 전달해줬는데 이것 때문에 복잡한 Controller가 만들어진 것이었다. controller를 최대한 간단하게 만들기 위해서 하나의 Action에서는 하나의 Application Service가 호출되어야 한다. 그래서 여러 개의 서비스를 불러서 전달해주던 ..

월요일은 한주의 스프린트가 끝나는 날로 트레이너님과 스프린트 점검과 이번 주의 작업 계획을 다시 세우는 날이다. 저번 주와 다르게 이번 주는 채팅 기능 구현하는데 시간을 많이 소비해 구현해야 할 태스크들을 전부 끝내지 못한 상태라 찝찝함이 남아있는 상태로 스프린트 점검 시간을 기다리고 있었는데 아샬 님이 직접 내려오셔서 동료 한분이 쓰신 기획서를 모두 같이 보면서 피드백을 들었다. 그중에는 동료 한분에게만 국한되는 이야기가 아니라 프로젝트를 진행하고 있는 모두가 공감할만한 이야기와 알아두면 좋을 내용들도 너무 많이 이야기해주셨다. 기획서 작성할 때 가장 힘들었던 사용자 스토리 부분에 대해서 우선 말을 해주셨는데 가치 중심으로 썼다고 생각했던 나의 사용자 스토리가 정말로 가치 중심인지 다시 한번 생각하게 ..

오늘 드디어 Spring + React를 이용해서 실시간 채팅 기능을 구현했다. WebSocket으로 채팅방 하나인 1:1 채팅 기능은 구글링 조금만 하면 금방 구현할 수 있었는데 채팅방이 여러 개를 구현하기 위해 STOMP를 사용해야 할 때부터 막히기 시작했었다. 구글링 하면 정보는 많았지만 STOMP를 전혀 알지 못한 채 알아보려니까 이게 맞는 정보인지 틀린 정보인지 판별이 되지 않아 하나씩 전부 읽어보면서 확인하는 작업을 하는데 너무 오랜 시간이 걸렸다... ㅠㅠ 솔직히 실시간 채팅 하나 구현하는데 4일이나 걸릴 줄은 몰랐지만 포기하지 않고 어떻게든 구현했다는 사실과 채팅을 구현하는데 최적의 코드는 아닐지라도 이것저것 해보면서 실시간 채팅을 구현했다는 사실만으로도 너무 기뻤다. 아무튼 어제는 Spr..

채팅 기능을 아직 구현하지는 못했지만 오늘 배우고 이해한 STOMP에 대해서 정리해보려고 한다. STOMP를 사용하게 되면 text와 binary 두가지 유형의 메시지만 정의하는게 아니라 규격을 갖춘 메시지를 전달할 수 있다. COMMAND header1:value1 header2:value2 Body^@ COMMAND : SEND, SUBSCRIBE를 지시할 수 있다. header : WebSocket만으로는 표현이 불가능한 header를 작성할 수 있다. destination: 이 헤더로 메시지를 보내거나 구독을 할 수 있다. (pub/sub 구현) 예를 들어 아래 코드와 같이 유저A는 3번 채팅방을 구독할 수 있다. SUBSCRIBE destination: /subscribe/chat/room/3 ..