dev_0hoon

{ //axios 사용 axios.get('https://codingapple1.github.io/shop/data'+dataNum+'.json').then((result)=>{ console.log(result); let data = result.data; let copy = [...shoes,...data]; //기본 배열에 추가하는 방법 setShoes(copy); let numCopy = dataNum; numCopy = numCopy + 1; setDataNum(numCopy); }).catch( setResultShoes(false) //제품이 더이상 없을 시에 발동 ) }}>버튼 위와 같인 코드를 작성했다. 문제 1. 3번 클릭시에 404오류가 화면에 표시 되었다. 문제 2. 1번만 클릭해도..

서버야 웹툰 줘 1. 방법(GET/POST) 2. 어떤자료(URL) 보내달라 데이터를 받을 때에는 GET 데이터를 줄 때에는 POST ajax중 라이브러리 axios를 사용하겠다. npm install axios 터미널에 입력해서 인스톨 받아준다. app.js 상단에 추가 import axios from 'axios'; 사용방법 { //axios 사용 axios.get('https://codingapple1.github.io/shop/data2.json').then((result)=>{ let data = result.data; let copy = [...shoes,...data]; //기본 배열에 추가하는 방법 setShoes(copy); }) }}>버튼 그 외에 Post 등의 요청 { //axios ..

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