![]()
이 분의 강의를 들으면서 작성했다. https://youtu.be/l58zLT5l6BY?si=_Sn2XwiYUtKAaaqi 처음에 JWT토큰을 만들고, 필터를 만든 뒤 config를 만들었다. package imsh.project.domain.provider; import io.jsonwebtoken.Claims; import io.jsonwebtoken.Jwts; import io.jsonwebtoken.SignatureAlgorithm; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import java.time.Instant; import java.tim..
![]()
npm install react-redux npm install @reduxjs/toolkit // Store.js // 액션 export const increase = () => ({type : "INCREMENT"}); // 증가 export const decrease = () => ({type: "DECREMENT"}); // 감소 // 상태 const initstate = { number : 3, // 기본값,,, Top에 있는 number } const reducer = (state = initstate, action) => { switch(action.type){ case "INCREMENT": return {number : state.number + 1}; // 리턴 되면 호출한 쪽에서 받는..
import React, { useState } from 'react'; import styled from 'styled-components'; const StyledItemBoxDiv = styled.div` display: flex; justify-content: space-between; border: 1px solid black; padding: 10px; height: 100px; margin: 20px; align-items: center; `; const ListPage = () => { const [no,setNo] = useState(6); const [post,setPost] = useState({ id:no, title : "", content : "" }); const handleW..
페이지 이동할 때 사용하는 라이브러리 a태그를 사용하면 새로고침이 되기 때문에 Link를 사용함. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( {/** BrowserRouter로 감싸기 */} ); // If you want to ..
import React, { useEffect, useState } from 'react'; import Header from '../components/Header'; import Footer from '../components/Footer'; import Home from '../home/Home'; const HomePage = () => { // http 요청(fetch, axios(다운)) const [boards, setBoards] = useState([]); // 빈 배열 한번만 실행 useEffect(()=>{ // 다운로드 가정 = fetch(), axios(), ajax() let data = [ {id:1,title:"제목1",content:"내용1"}, {id:3,title:"제목..
![]()
VS코드 터미널을 열어서 설치 # with npm npm install styled-components // import logo from './logo.svg'; import styled from 'styled-components'; import './App.css'; import { Title } from './MyCss'; // useRef (디자인) // dom을 변경할 때 사용 // const a = { // backgroundColor: 'red', // }; // const Title = styled.h1` // font-size: 1.5em; // text-align: center; // color: #BF4F74; // `; 외부 파일로 꺼낼 수 있음. MyCss에 코드 작성 functi..
