고래씌

※ Route 의 역할은 특정 주소의 특정 컴포넌트를 보여주겠다! ⇒ 해당하는 페이지만 보여줌.페이지 이동을 위해서는 “Link” 를 이용한다! 태그는 사용하지 않는다. 이것을 사용하게 된다면 페이지가 새로 로딩되기 때문에 사용하지 않는다. 2. 파라미터와 쿼리※ 파라미터와 쿼리는 어떤 주소의 동적인 값을 읽어올때 사용. App.jsimport React from "react";import { Route, Routes, Link } from "react-router-dom";import Home from './Home';import About from "./About";import Profile from "./Profile";function App() { return ( ..

1. Sass(Syntactically awesome stylesheets)https://sass-lang.com/guide⇒ Sass 가이드 페이지⇒ 이것을 설치해야 프로젝트에서 sass를 사용할 수 있음※ scss를 사용할때 변수를 사용할때는 “ $ “ 를 사용함. 1-2. size props 설정CSS 클래스 이름을 동적으로 넣어주고 싶으면 이렇게 설정className={Button ${size}}- 하지만, 조건부로 CSS 클래스를 넣어주고 싶을때 이렇게 문자열을 직접 조합해주는 것 보다 classnames 라는 라이브러리를 사용하는 것이 훨씬 편하다.- classNames 를 사용하면 다음과 같이 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 손쉽게 문자열을 조합 할..

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..