bright jazz music

React에서 axios를 사용하여 POST 요청을 보내는 방법을 알려드리겠습니다. 먼저, `axios` 패키지를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 패키지를 설치합니다. npm install axios 설치가 완료되었다면, POST 요청을 보내는 React 컴포넌트에서 `axios`를 import합니다. import axios from 'axios'; 그리고 POST 요청을 보낼 함수를 만듭니다. 함수에서 `axios.post()`를 사용하여 요청을 보냅니다. 다음은 간단한 예시입니다. import React from 'react'; import axios from 'axios'; class MyComponent extends React.Component { constructo..

https://swapi.dev/api/ 1. App.js 작성 import { useEffect, useState } from "react"; import axios from "axios"; function App() { const [people, setPeople] = useState([]); const [error, setError] = useState(null); const [ok,setOk] = useState(null); // 동기처리 // useEffect(() => { // axios.get('https://swapi.dev/api/people/') // .then((data) => { // console.log('##data', data) // setPeople(data.data?.res..

1. 설치 및 환경설정 PS D:\react-workspace\nextjs-test> npx create-next-app@latest . √ Would you like to use TypeScript with this project? ... No / Yes √ Would you like to use ESLint with this project? ... No / Yes √ Would you like to use Tailwind CSS with this project? ... No / Yes √ Would you like to use `src/` directory with this project? ... No / Yes √ Use App Router (recommended)? ... No / Yes √ Wo..

1. redux toolkit 설치 /*기존 프로젝트에 리덕스 툴킷 설치*/ $npm install @reduxjs/toolkit /*새 프로젝트 생성 시 리덕스 툴킷 설치 */ $npx create-react-app test-app --template redux 2. App.js 작성 import React from "react"; import {Provider, useDispatch, useSelector} from 'react-redux' //툴킷 임포트 import {configureStore, createSlice} from '@reduxjs/toolkit'; //슬라이스는 작은 store를 뜻한다. 여러 개 만들 수 있다.기존에는 하나의 store에 전부 집어넣었다. 리덕스 툴킷은 이러한 슬라..

1.App.js 작성 import React from "react"; import {createStore} from 'redux'; import {Provider, useDispatch, useSelector} from 'react-redux' //1. redux를 사용하기 위한 reducer 함수 function reducer(state, action){ if(action.type === 'up') { return {...state, value:state.value + action.step} } return state; //상태 반환 } const initialState = { value : 0 } //2. store 생성 const store = createStore(reducer, initialSt..

1. redux와 react-redux 설치 $npm install redux react-redux 2. App.js 작성 import React, {useState} from "react"; import "./style.css"; import {createStore} from 'redux'; // import {configureStore} from 'redux'; import {Provider, useSelector, useDispatch, connect} from 'react-redux' /* 스토어를 생성할 때 reducer를 생성한다. 리듀서는 스토어에 있는 스테이트의 변경 여부를 결정하는 역할을 한다. 따라서 reducer는 2개의 파라미터를 받는다. 첫 번째는 현재 스테이트 값인 current..

1. App.js 작성 import React, {createContext, useContext, useEffect, useReducer, useState} from "react"; function App(){ // const [count, setCount] = useState(0); const [count, countDispatch] = useReducer(countReducer, 0); //countReducer: 회계직원, 0:초깃값 const [number, setNumber] = useState(1) function countReducer(oldCount, action){ //old가 접두어인듯, action은 예약어 if(action.type === 'UP'){ return oldCount +..

1. style.css 작성 .root, .root div{ border: 10px solid gray; margin: 10px; padding: 10px; } 2. App.js 작성 // Context API: 전역적으로 상태를 공유할 수 있도록 하는 도구 // 리액트에서 컨텍스트를 만들려면 createContext라는 함수를 임포트 해야 한다. import React, {createContext, useContext} from "react"; import "./style.css"; const themeDefault = {border: '10px solid red'}; // 컨텍스트의 기본값이 themeDefault가 되었다. const themeContext = createContext(themeDe..

1. styled components 설치 $npm install styled-components //오류날 경우 $npm install styled-components@latest 2. App.js 작성 import React from "react"; import styled from 'styled-components'; const SimpleButton = styled.button` color:white; background-color:green; `; const LargeButton = styled(SimpleButton)` font-size:50px; `; const ReactButton = (props) => { console.log('props', props) // return {props.c..

1. react-router-dom 설치 $npm install react-router-dom 2. index.js 작성(내가 수정한 버전. var를 const 또는 let으로 변경) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter, Route, Routes, HashRouter, Link, NavLink, useParams } from 'react-router-dom'; function Home() { return ( Home Home... ); } // 원래는 a..