참고 블로그 : https://www.datoybi.com/http-proxy-middleware/ SOP? 자바스크립트 엔진 표준 스펙의 보안 규칙 중, 하나의 출처(Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하는 정책이 있습니다. 그것이 바로 SOP (Same Origin Policy, 동일 출처 정책)입니다. 즉, http://localhost:8000와 http://localhost:8000/posts는 같은 출처라서 상호작용이 가능한데, http://google.com에서 http://localhost:8000를 호출하면 SOP에 위배됩니다. 그렇다면 동일한 출처의 기준은 무엇일까요? 동일 출처의 기준 http://example..
{ //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..
- Total
- Today
- Yesterday
- thymleaf
- Java
- 인터셉터
- 스프링공부
- exception
- 항해99
- hypertexttransferprotocol
- 항해플러스
- BindingResult
- 향해플러스
- jpa api
- 향해99
- 컨트
- 스프링부트
- reject
- rejectValue
- 백엔드 개발자 공부
- React
- ArgumentResolver
- Intercepter
- 리터럴
- 예외처리
- react실행
- HTTP
- filter
- SpringBoot
- 백엔드 개발자 역량
- 향해플러스백엔드
- JPA
- 로그인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |