고래씌

1. 메세지 추가 ① 웹소켓 작업을 위해 새터미널을 열고 다음과 같이 설치 진행 ② StompConfig.java 클래스 파일 생성 ※ Stomp - MessageBroker방식 처리 - publih 발행 / subscribe 구독 패턴 - 특정 url을 '구독'하는 사용자들에게 메세지를 '발행'해줌 shift+alt+ S 단축키를 이용해 Override/Implements Method...클릭후 아래 메소드 추가 ▶ StompConfig.javapackage com.kh.api.model.websocket.config; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp...

1. React 스프링부트에 연동(채팅방 상세보기) ▶ App.js => 위에 태그로 묶기 ▶ ChattingRoomList.js => 사용자들이 채팅방에 참여할수있도록 참여버튼 추가 => 채팅방참여 함수 생성 추가 let navi = useNavigate(); function 채팅방참여(채팅방번호){ navi('/chat/detail/'+채팅방번호); } ▶ ChattingRoom.js => 사용자의 접속상태를 표시하는데 웹소켓과 연동해서 실시간으로 바뀌게 할 예정 => userNo를 가져와야하는데 redux에서 꺼내오는 방법이 있음. useSelector를 이용하여 꺼내옴 => 채팅방 번호는 파라미터 값을 이용하여 가져옴import { useEffect } from "react" import axio..

1. 채팅방 생성 ▶ ChattingRoomList.jsimport { useEffect } from "react"; import { useState } from "react"; import axios from 'axios'; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; export default function ChattingRoomList(){ let [채팅방목록, 채팅방목록변경] = useState([]); let [모달, 모달창오픈] = useState(false); useEffect(() => { axios .get("http://localhost:3000/api/chatRoom..

1. React에 스프링부트 연동(게시판) => 메뉴앱 프로젝트 생성 => 사용할 패키지 다운받기 cd .\menuapp\ ① axios를 사용하기 위해 패키지 다운 npm install --save axios ② bootstrap 사용하기 위해 다운 npm install --save bootstrap ③ npm start => public폴더안에 css폴더와 images 폴더 그대로 복사하여 붙여놓기 해줌 => css폴더안에 있는 style.css는 모두 App.css로 옮김 ▶ src > components폴더 > Hedader.js 파일 생성export default function Header(){ return ( Menu ) } ▶ GetMenu.jsimport {useState} from "r..

1. 메뉴 삭제 ▶ index.jsp 메뉴 삭제하기(DELETE) 메뉴번호를 사용해 해당메뉴정보를 삭제함. $("#menuDeleteFrm").submit( function(e) { e.preventDefault(); const id = $("[name=id]" , e.target).val(); if(!id) return; $.ajax({ url : `${contextPath}/menu/\${id}`, method : 'delete' , success : function(data) { const {msg} = data; alert(msg); }, error : function(xhr) { const {status} = xhr; // 200, 400, 500 if(status == 404) { alert(..

1. 메뉴 검색 ▶ index.jsp 메뉴 수정하기(PUT) 메뉴번호를 사용해 해당메뉴정보를 수정함. 한식 중식 일식 매운맛 순한맛 ▶ MenuController.java //메뉴 검색 @GetMapping("/menu/{id}") public ResponseEntity selectOneMenu(@PathVariable int id){ Menu menu = menuService.selectOneMenu(id); ResponseEntity res = null; if(menu == null) { res = ResponseEntity.notFound().build(); // 404에러가 있었음 ← notFound // 404 반환 }else { res = ResponseEntity.ok().body(menu)..

1. 메뉴 추가 => POST 방식 ▶ index.jsp 메뉴 등록하기(POST) 한식 중식 일식 매운맛 순한맛 $("#menuEnrollFrm").submit( e => { e.preventDefault(); // 기본 이벤트 방지 const $frm = $(e.target); const restaurant = $frm.find("[name=restaurant]").val(); const name = $frm.find("[name=name]").val(); const price = $frm.find("[name=price]").val(); const type = $frm.find("[name=type]:checked").val(); const taste = $frm.find("[name=taste]:c..

1. 필터링하여 메뉴 목록 조회 ▶ index.jsp => 추가 - index.jsp 전체코드 Menu 전체메뉴조회기능(GET) 추천메뉴(GET) 모두 한식 중식 일식 모두 매운맛 순한맛 ▶ MenuController.java //타입 선택에 따른 메뉴 조회 @GetMapping("/menus/{type}/{taste}") public List menus(@PathVariable String type, @PathVariable String taste) { Map param = new HashMap(); param.put("type", type); param.put("taste", taste); List list = menuService.selectMenusByTypeAndTaste(param); retu..

1. index.jsp 페이지 보이도록 하기 => com.kh.springboot 패키지아래에 HomeController class 파일 생성 ▶ HomeController.java package com.kh.springboot; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/") public String home() { return "forward:index.jsp"; } } => index.jsp로 이동된 것을 확인 => 그리고 버전이 17버전이라서 sql..

1. 스프링부트 환경설정 => 이사이트로 들어가서 Windows 버전으로 설치 https://spring.io/tools Spring | Tools spring.io => 다운로드를 하면 sts폴더가 생기는데 /dev 폴더로 옮김 => C드라이브 아래에 SpringBootWorkspace폴더 생성후, 파일 열기 => Spelling, UTF-8로 변경 => main 폴더 아래에 webapp폴더, resources폴더 생성 => pom.xml에 추가 ▶ springboot/pom.xml - 메이븐 레파지토리가서 필요한 의존성 다운을 위해 pom.xml에 추가후, 버전은 지워줌 => 버전 그대로감 => 버전은 지워줌 => 그리고 ojdbc6 추가 org.springframework.boot spring-bo..