개발 낙서장

오늘의 학습 키워드📚 리액트에서 스프링으로 Params 넘기기 @GetMapping("/search") public ResponseEntity searchCommunityPost( @ModelAttribute CommunityPostListRequest request) { return ResponseEntity.ok(communityPostService.searchCommunityPost(request)); } 커뮤니티 글을 조회하는 API이다. ModelAttribute로 동적으로 Params를 받는데 페이지네이션이 돼야 하기 때문에 page에 관한 정보와 검색어, 카테고리 등에 대한 정보가 들어간다. 리액트에서 동적으로 Params를 받은 Json 형태 객체를 api 메소드 파라미터로 넘겨주고 axi..

오늘의 학습 키워드📚 배열 상태 업데이트 채팅 관련 UI를 작업하던 중 알게 된 내용이다. 리액트에서는 특정 변수의 상태 변화를 useState라는 포맷?으로 관리한다. 어떤 값의 상태와 상태를 변경하는 set 메소드로 이루어져있다. 해당 값이 단일 값인 경우 그냥 set 메소드를 실행하면 상태 변화가 되지만 배열 같이 여러 값을 가진 상태라면 값을 추가하는 방식으로 구현해야 한다. 하지만 useState는 상태를 변경하는 것이기에 add 같은 함수가 없는데 그래서 리액트에서는 이전 상태라는 개념을 제공한다. const [chatMessages, setChatMessages] = useState(messages); 채팅 메세지에 대한 상태이다. 처음에는 채팅 방에 있는 메세지들을 받아오기에 JSON 배열..

오늘의 학습 키워드📚 Axios 공통 설정 리액트에서 axios를 이용해 API 통신이 가능하다. axios .get(`/api/chat-rooms`) .then(response => { console.log(response.data); }) .catch(error => { console.error('Failed. Status: ' + error.response.status); }); axios.{HTTP 메소드}.then(성공 시 로직).catch(실패 시 로직) 이런식으로 API를 호출하고 로직을 처리한다. 하지만 API 개수가 수십, 수백개이고 전부 하드코딩을 한다면 나중에 수정이 생겼을 때 찾기가 굉장히 힘들 거고 공통 헤더 등을 설정하는 것도 고려를 해야 한다. 이런 설정을 할 수 있는 것이 a..

오늘의 학습 키워드📚 리액트란? 메타에서 개발한 오픈 소스 자바스크립트 라이브러리. 프론트엔드 개발자 사이에서 AngularJS, Vue.js와 더불어 많은 인기를 얻고 있다. GitHub Star 수와 npm 패키지 다운로드 수는 React가 가장 많다. SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며..

오늘의 학습 키워드📚 JQuery에서 li 동적 수정 SSE를 이용해 채팅방의 수정 사항을 즉각 반영하는 부분이다. 이벤트를 통해 수정 API가 호출되면 수정된 정보를 받는 것까진 완료했는데 이걸 프론트에서 보여줘야 했다. // 방 목록 가져오기 함수 function getRoomList() { $.ajax({ url: "/api/chat-rooms", type: "GET", dataType: "json", success: function (rooms) { let roomListUl = $("#find-rooms-list"); roomListUl.empty(); rooms.forEach(function (room) { let li = $("").data("chat-room-id", room.chatRoo..

오늘의 학습 키워드📚 SSE를 사용해 클라이언트가 채팅방에 대한 변경 사항을 즉각 조회할 수 있도록 했다. 우선 임시로 채팅방이 생성될 경우 클라이언트가 알 수 있도록 콘솔 로그를 찍어봤다. JavaScript 부분 클라이언트에서 서버로 SSE 연결 요청을 하는데 EventSource 객체를 통해 연결하고 서버가 보내주는 데이터를 받을 수 있다. // SSE 이벤트 구독 const eventSource = new EventSource( `http://localhost:8080/api/chat-rooms/sse?userId=` + localStorage.getItem('userId') ); eventSource.addEventListener('createChatRoom', event => { let dat..

오늘의 학습 키워드📚 SSE 채팅방을 구현하면서 다른 사람의 채팅 메세지를 수신하고 보내는 양방향 통신으로 웹소켓 프로토콜인 STOMP를 사용했다. 채팅방 안에서 메시지를 주고 받고 누가 보낸 메세지인지는 알 수 있었지만 채팅 방에 없을 경우에는 어떻게 해야 될지 고민이 생겼다. 폴링 방식 웹소켓 방식 SSE 폴링(Polling) 폴링 기법은 클라이언트에서 서버에 주기적으로 HTTP 요청을 보내 지속적으로 데이터를 받는 방법이다. 주기를 짧게 할 수록 데이터를 자주 받을 수 있기 때문에 실시간 통신인 '척'은 할 수 있지만 그만큼 서버에 부하가 가는 방법이다. 그래서 나온 방법이 롱 폴링 기법인데 서버에 요청을 보내놓고 대기를 하다가 서버에서 이벤트를 발생시켜 응답을 보내주면 다시 요청을 보내 대기하는 ..

오늘의 학습 키워드📚 JPQL concat 채팅방에 대한 키워드 검색, 해시태그 검색 기능을 구현하던 중 배운 정보이다. 보통 특정 키워드나 태그로 검색을 한다면 like를 많이 사용한다. 채팅방의 제목이나 설명이 ~~ 키워드인 채팅방들을 조회하는 SQL은 다음과 같다. select cr1_0.chat_room_id, cr1_0.chat_room_name, cr1_0.cover_image, cr1_0.created_at, cr1_0.description, cr1_0.modified_at, cr1_0.owner_id from chat_room_tb cr1_0 where cr1_0.chat_room_name like '%?%' escape '' or cr1_0.description like '%?%' esc..