springboot + react

spring security + react 로그인 예제 

https://joshua-dev-story.blogspot.com/2020/01/react-spring.html

누구나 쉽게 따라하는 React, Spring 연동하기 1

https://velopert.com/3621

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG

도움이 되었다 

--> 찾아본 예제 

--> 이것은 spring과 react를 연동해서?? 써서 벤 

https://www.baeldung.com/spring-security-login-react

Spring Security Login Page with React | Baeldung

 

another example 

https://www.devdiaries.net/blog/Spring-Boot-2-PostgreSQL-JWT-React-Part-3/

Spring Boot 2 + PostgreSQL + JWT + React - Full Stack Web Development - Part 3 Spring Security with JWT

위의 예제를 따라해봄. 

매우 좋음....

 

 

https://corini.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EC%97%B0%EB%8F%99%ED%95%98%EC%97%AC-CRUD-%EA%B5%AC%ED%98%84-10-VO-Controller-Config-Mapper-%EC%9E%91%EC%84%B1-10n?category=836393

[리액트, 스프링부트 연동하여 CRUD 구현] #10 - VO, Controller, Config, Mapper 작성 (10/10)

 

springboot react 따로따로 만들어서 restapi 통신 

 

getmapping test 하려고 했는데, 내가 만든적없는 

화면 나타남. 

spring security에서 자동 지원해주는 것 

https://openeg.co.kr/481

[시큐어코딩실습] 스프링 시큐리티 시작하기 LAB

이걸보고 알게되었다. 

build.gradle 에서 security 관련 부분을 일단 삭제해줌 

 

일이 잘 안풀릴 때는 import를 잘못한것은 아닌지 생각해보자. 

 

 

 

authorization 추가해서 나오는거 확인했다. 

그런데 왜 react에서는 나오지 않는가. 

-> 그것은 내가 App.js에 빠트린것이 있었기 때문 

 

const tableRows = this.state.currencies.map((currency, index)=> 
            <tr key={index}>
                <td>{currency.name}</td>
                <td>{currency.code}</td>
                <td>{currency.amount}</td>
                <td>{currency.rate}</td>
            </tr>
        
        );
        return(
            <div className = "App">
                <table>
                    <tbody>{tableRows}</tbody>
                </table>
            </div>
        );

중간 코드 써두기 

 

react-table 이 import 안됨 

https://stackoverflow.com/questions/59467778/import-issue-for-react-table

Import Issue for React-Table

도움 

 

componentDidMount(){
        fetch('http://localhost:8080/currencies', 
        {headers: { "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5NTk4Njc4MH0.0dPkzhbNG4ftdCOc0jsfZuYHi1ExCc_2xbYsruvMNKf66IWdRfYXHxMQ0ozxVEX_JKAQ-i_hi77ZgUh2Zuc7vA"}})
        .then((response)=>response.json())
        .then((responseData)=>{
            this.setState({
                currencies: responseData
            })
        })
        .catch(err => console.error(err))
    }

코드 중간 기록 

fetchCurrencies = () => {
        fetch('http://localhost:8080/currencies', 
        {headers: { "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5NTk4Njc4MH0.0dPkzhbNG4ftdCOc0jsfZuYHi1ExCc_2xbYsruvMNKf66IWdRfYXHxMQ0ozxVEX_JKAQ-i_hi77ZgUh2Zuc7vA", 
            "Content-Type":"application/json"}})
        .then((response)=>response.json())
        .then((responseData)=>{
            this.setState({
                currencies: responseData
            })
        })
        .catch(err => console.error("error: " + err));
    }

위에꺼는 안되는 코드 

 

addCurrency 는 어디에 

-> 로그인 이후에 나오는 것 같다 

 

예제 코드에서 왜 이렇게 했지? 했던 것 

https://programmers.co.kr/learn/questions/25

관계연산자에서 ==와 ===의 차이 질문입니다.

 

Currencies.js 코드 중간 저장 --> 여기까지는 정상 동작 

import React, {Component} from 'react';
import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';
import AddCurrency from './AddCurrency';

class Currencies extends Component {
    constructor(props){
        super(props);
        this.state = {currencies:[]};
    }

    componentDidMount(){
        fetch('http://localhost:8080/currencies', 
        {headers: { "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5NTk4Njc4MH0.0dPkzhbNG4ftdCOc0jsfZuYHi1ExCc_2xbYsruvMNKf66IWdRfYXHxMQ0ozxVEX_JKAQ-i_hi77ZgUh2Zuc7vA"}})
        .then((response)=>response.json())
        .then((responseData)=>{
            this.setState({
                currencies: responseData
            })
        })
        .catch(err => console.error(err))
    }

    fetchCurrencies = () => {
        fetch('http://localhost:8080/currencies', 
        {headers: { "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5NTk4Njc4MH0.0dPkzhbNG4ftdCOc0jsfZuYHi1ExCc_2xbYsruvMNKf66IWdRfYXHxMQ0ozxVEX_JKAQ-i_hi77ZgUh2Zuc7vA", 
            "Content-Type":"application/json"}})
        .then((response)=>response.json())
        .then((responseData)=>{
            this.setState({
                currencies: responseData
            })
        })
        .catch(err => console.error("error: " + err));
    }

    onDelClick = (id) => {
        if(window.confirm('Are you sure to delete currency?')){
            fetch('http://localhost:8080/currencies/' + id, {
                method : 'DELETE', 
                headers : new Headers({
                    "Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5NTk4Njc4MH0.0dPkzhbNG4ftdCOc0jsfZuYHi1ExCc_2xbYsruvMNKf66IWdRfYXHxMQ0ozxVEX_JKAQ-i_hi77ZgUh2Zuc7vA"
                }) 
            }).then(res => this.fetchCurrencies())
                .catch(err => console.error(err));
        }
    }

    updateCurrency(currency){
        fetch('http://localhost:8080/currencies', {
            method : 'PUT', 
            headers : {
                "Authorization" : "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU5NTk4Njc4MH0.0dPkzhbNG4ftdCOc0jsfZuYHi1ExCc_2xbYsruvMNKf66IWdRfYXHxMQ0ozxVEX_JKAQ-i_hi77ZgUh2Zuc7vA",
                "Content-Type" : "application/json"
            }, 
            body : JSON.stringify(currency)
        })
            .then(res => this.fetchCurrencies())
            .catch(err => console.log(err))
    }

    editable = (cell) => {
        return(
            <div
                style = {{backgroundColor:"#fafafa"}} contentEditable suppressContentEditableWarning onBlur={e=> {
                    const curr = [...this.state.currencies];
                    curr[cell.index][cell.column.id] = e.target.innerHTML;
                    this.setState({currencies:curr});
                }}
                dangerouslySetInnerHTML={{__html:this.state.currencies[cell.index][cell.column.id]}}
            />
        );
    };

    render(){
        
        const columns =[{
            Header : 'Currency', 
            accessor : 'name', 
            Cell : this.editable
        }, {
            Header : 'Code', 
            accessor : 'code', 
            Cell : this.editable
        }, {
            Header : 'Amount', 
            accessor : 'amount'
        }, {
            Header : 'Rate', 
            accessor : 'rate'
        },{
            sortable:false, 
            filterable:false, 
            width:100, 
            Cell:row => (
                <div>
                    <button onClick={() => this.onDelClick(row.original.id)}>Delete</button>
                </div>
            )
        },{
            sortable:false, 
            filterable:false, 
            width:100, 
            Cell:row => (
                <div>
                    <button onClick={()=>this.updateCurrency(row.original)}>Save</button>
                </div>
            )
        }
        ,];

        return (
            <div>
                <AddCurrency addCurrency={this.addCurrency} fetchCurrencies = {this.fetchCurrencies}/>
                <ReactTable data={this.state.currencies} columns={columns} filterable={true}/>
            </div>
        );
    }
}

export default Currencies;

 

Add Currency 가 안된다. 

postman 에서는 잘 되므로 react 의 문제 

chrome F12 로 봤더니 

415 error 

application/json 에서 오타가 있었다. 

 

성공함