Work file file테이블의 parentes_no는 work 테이블의 work_no를 외래키로 삼아 끌어온다. 처음부터 구축할 경우에는 이렇게 진행하지 않겠지만, 옛날 방식으로 몇번 보였던 방식이다. 이럴 경우 엔티티 입장에서 OneToMany로 긁어 오는 방법이다. work package com.loopcreative.web.entity; import jakarta.persistence.*; import org.springframework.format.annotation.DateTimeFormat; import java.time.LocalDateTime; import java.util.ArrayList; import java.util.List; @Entity @Table(name="tbl_work..
컴포넌트의 Lifecycle 페이지에 장착되기도 하고(mount) 가끔 업데이트도 되고(update) 필요없으면 제거되고 (unmount) 위의 내용을 알면 중간중간 간섭이 가능하다. (코드실행) 예전 리액트 컴포넌트 문법은 이렇게 코딩이 가능했다. class Detatil2 extends React.Component{ componentDidMount(){ //컴포넌트 mount시 여기 코드 실행됨 } componentDidUpdate(){ //컴포넌트 update시 여기 코드 실행됨 } componentWillUnmount(){ //컴포넌트 unmount시 여기 코드 실행됨 } } 요즘 문법으로는 useEffect를 제공한다. (mount, updatet 코드를 실행해준다.) useEffect(()=>..
npm install styled-components 를 입력해서 설치한다. import styled from 'styled-components'; 사용하려는 js에 임폴트 한다. 만약 이쁜 버튼을 만들고 싶다면? import { useParams } from "react-router-dom"; import styled from 'styled-components'; let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` let Box = styled.div` background : grey; padding : 20px; ` function Detail(props){ let {id} = useParams(); ..
이렇게 url 중에 :id를 넣으면 import { useParams } from "react-router-dom"; function Detail(props){ let {id} = useParams(); console.log(id); return ( {props.shoes[id].title} {props.shoes[id].content} {props.shoes[id].price} 주문하기 ); } export default Detail; useParam();을 이용해서 받을 수 있다.
페이지 나누는 법 (리액트 사용) 1. 컴포넌트 만들어서 상세페이지 내용 채움 2. 누가 /detail접속하면 그 컴포넌트 보여줌 이걸 도와주는 라이브 러리를 설치한다. (react-router-dom) npm install react-router-dom@6 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); BrowerRouter 태그로 App을 감싸준다. 그 후에 App.js에 다음 라이브러리를 임폴트 시킨다. import { Routes, Route, Link } from 'react-router-dom' 사용하는 방법은 이렇다 return ( import './App.css'; import {Navba..
https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 이곳에서 get Started를 누르면 설치 명령어 등이 나온다. 참고로 css경로를 잡아준 뒤에 import를 시켜서 예제 컴포넌트 등을 사용할 수 있다. 예: import logo from './logo.svg'; import './App.css'; import {Navbar,Container,Nav,Button} from 'react-bootstrap'; function App() { return ( Navbar Home Fe..
{console.log(e.target.value)}}> 이벤트 안에 매개변수 e를 잡으면 안의 함수에서 e.target.value로 input의 value값을 가져올 수 있다. {setModal(!modal); setTitle(i)}}>{a} { let dda = [...따봉]; dda[i] += 1; 따봉변경(dda); e.stopPropagation(); }}> 👍 {따봉[i]} 2월 17일 발행 위의 코드의 경우 span을 클릭해도 3번의 이벤트가 일어난다 span이벤트-> h4 이벤트 -> div 이벤트 순이다. 클릭이벤트는 상위 html로 퍼진다. 이것을 이벤트 버블링이라 한다. 이걸 막기 위해서는 원하는 이벤트에 e.stopPropagation()을 사용하면 된다. 같은 이벤트안에서 스테이트..
- Total
- Today
- Yesterday
- 백엔드 개발자 역량
- 스프링공부
- jpa api
- ArgumentResolver
- 컨트
- 항해플러스
- 향해플러스
- JPA
- Java
- 리터럴
- exception
- React
- 로그인
- 항해99
- Intercepter
- BindingResult
- hypertexttransferprotocol
- 스프링부트
- 향해플러스백엔드
- react실행
- filter
- SpringBoot
- 인터셉터
- rejectValue
- 예외처리
- 향해99
- HTTP
- reject
- thymleaf
- 백엔드 개발자 공부
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |