분류 전체보기 338

React_useParams와 useSearchParams를 활용한 PathVariable/QueryString

import HomePage from "./pages/Home" import Products from "./pages/Products" import RootLayout from "./pages/root"; import Error from "./pages/Error"; import ProductDetail from "./pages/ProductDetail" //ProductDetail 페이지 연결 import ProductDetail2 from "./pages/ProductDetail2" //ProductDetail2 페이지 연결 import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowser..

React_동적 라우팅_useParams

import { Link } from "react-router-dom" //Link 추가 const ProductList = [ { id: "p1", title: "Product 1"}, { id: "p2", title: "Product 2"}, { id: "p3", title: "Product 3"}, ]; export default function Products(){ return( The Products Page {/* App.js 수정 */} {ProductList.map((row, idx) => { let link="/products/"+row.id; //그냥 입력할 경우 // let link=`/products/${row.id}`; //백틱을 사용할 경우 return( {row.title} )..

Spring 팀플) 20240219 스프링전환

org.mybatis mybatis 3.4.6 org.mybatis mybatis-spring 1.3.2 org.springframework spring-jdbc 5.0.8.RELEASE org.apache.commons commons-dbcp2 2.5.0 com.jslsolucoes ojdbc6 11.2.0.1.0 mvc 패턴 사용 및 프로젝트 작성을 위한 디펜던시 추가 servlet-context classpath:com/config/MemberMapper.xml com.dto.MemberDTO root-context.xml contextConfigLocation /WEB-INF/spring/root-context.xml org.springframework.web.context.ContextLoade..

React_라우터_링크 시 효과 부여(NavLink) / 버튼 이벤트 링크(useNavigate)

import { NavLink } from "react-router-dom"; //(Link에서 NavLink로 변경) import classes from "./MainVanigation.module.css"; //Alias처럼 사용 export default function MainNavigation(){ return( //수정(Link에서 NavLink로 변경) {/* Home //기존 Products Error */} {/* 링크 시 효과 부여 */} { return isActive ? classes.menu : undefined}}>Home isActive ? classes.menu : undefined}>Products ) } import { Link, useNavigate } from "rea..

20240320_익명 게시판의 좋아요와 싫어요

jsp에서 좋아요 / 싫어요를 누른다(이하 좋아요) jsp 자체에서는 ajax로 인해 이미지 변경 + val()이 변경된다 - val()이 변경된 상태면 더이상 추천이 눌리지 않음(ajax로 글자 확인으로 처리) ajax - 유저 식별키와 해당 게시글, 좋아요 여부를 가져온다 - map : 게시글 번호 : 좋아요 - 쿠키: 유저 식별키+like : map - like가 들어왔다면 update를 통해 해당 게시글의 추천수를 1만큼 증가시킨다. 컨트롤러 - 쿠키를 통해 현재 유저 번호를 확인한다 - 쿠키를 통해 현재 유저 번호+like를 key에 넣어 value를 가져온다 --> map(key= 게시글 번호 : value = 좋아요 여부) - 현재 게시글 번호와 key 값이 동일하면 좋아요를 mav에 넣어서..

메모 2024.03.20

팝오버 이벤트

원래 닉네임을 클릭하면 팝오버 이벤트가 출력되고 title에 "이 닉네임으로 검색할까요?", data-Content에 "검색", "취소"를 만들 예정이었다. 우선 부트스트랩 홈페이지 예제를 그대로 사용하는 것으로는 작동되질 않아, 결국 강사님의 예제를 가져온 다음에야 팝오버가 작동하기 시작했다. 안 되는 이유 - 모름 팝오버 이벤트의 data-Content의 글자는 우선 , 이 적용되질 않았다. 클릭 이벤트도 적용되질 않고, 오직 하이퍼링크만 적용. 우선 검색 기능 자체는 구현이 가능하다. JSP, EL태그 모두 적용되기 때문에 루트 컨텍스트에 Get링크를 넣으면 기존 검색 기능을 사용하여 닉네임으로 글 검색 자체가 가능하다. 그러나 이 다음에 글 작성 등의 기능을 사용하고자 할 때 주소가 뒤틀려 사용이..

메모 2024.03.20

스프링부트 팀플) 20240320_날짜 형식 변경

https://readystory.tistory.com/55 [JAVA] Date to String / String to Date 변환(SimpleDateFormat) 프로그래밍을 하다 보면 시간이나 날짜를 사용할 일이 많은데, 아마 대부분 Date 클래스를 사용했을 겁니다. 예를 들어 현재 시간을 가져오는 코드는 다음과 같습니다. import java.util.Date; public class readystory.tistory.com https://enterkey.tistory.com/391 JSTL 에서 MAP 접근, 출력 (KEY로 바로 값 추출) 검색어 : how to map value by key jstl 문법이고 뭐고 이럴땐 대략... 대신 중요단어를 적당히 넣어 물어보면 된다. ( 검색 결과..

React_라우터_링크와 에러페이지

App import HomePage from "./pages/Home" import Products from "./pages/Products" import RootLayout from "./pages/root"; import Error from "./pages/Error"; import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowserRouter( //여러 사이트를 연결하기 때문에 배열로 정렬 [{ path: "/", element: , errorElement: , //연결되지 않은 페이지일 경우, 이동 children: [ {path: "/", element: }, {path: "/pro..

React_router

npm install react-router-dom을 통해 라우터 설치 App import HomePage from "./pages/Home" import Products from "./pages/Products" import { createBrowserRouter, RouterProvider } from "react-router-dom" const router = createBrowserRouter( //여러 사이트를 연결하기 때문에 배열로 정렬 [ {path: "/", element: }, {path: "/products", element: } ] ); export default function App(){ //1. npm install react-router-dom return( App ) } Ho..