bright jazz music

AlarmSendPage: 알람 발송을 예약하는 페이지. 여러 개의 셀렉트 박스와 '수신자'라는 textarea 있다. AlarmAndSmsModal: '개인회원' 또는 '법인회원'을 검색하기 위한 모달창. 알람발송과 문자발송 페이지에서 공통으로 사용한다. 기본적으로 이 모달은 검색창, 검색버튼, 테이블 헤더로 이루어져 있다. 검색어를 넣고 검색하면 결과가 테이블 헤더 밑에 행으로 보여진다. 이 행들은 기본적으로 가장 좌측에 체크박스를 가지고 있다. handleCheckboxChange(el.user_id)} /> 만약 사용자가 특정 행의 체크박스를 체크했을 경우, 사용자 아이디가 이 모달의 부모 컴포넌트인 AlarmSendPage의 '수신자' textarea에 보여져야 한다. 이 때 보여지는 값은 'u..

//App.js function App() { //기본 스테이트를 객체로 설정하였다. const [items, setItems] = useState([]); //백엔드에 보낼 요청 옵션 const requestOptions = { method: "GET", headers: { "Content-Type": "application/json" }, }; //fetch를 통해 요청 발송 fetch("http://localhost:8080/todo", requestOptions) .then((response) => response.json()) .then( (response) => { setItems(response.data); }, (error) => {} ); //... cors 오류 발생. cors를 가능케..

import { Container, List, Paper } from '@mui/material'; import './App.css'; import Todo from './Todo'; import React, { useState } from 'react'; import AddTodo from './AddTodo'; function App() { const [items, setItems] = useState([ // { // id: "0", // title: "Hello World 1", // done: true // }, // { // id: "1", // title: "Hello World 2", // done: true // } ]); //2. TodoList에 목록 추가하기 const addItem..

App.js -> 추가 -> AddTodo.js -> Todo.js -> 수정/삭제/체크 -> 재 렌더링(App.js) // App.js import "./App.css"; import Todo from "./Todo"; import AddTodo from "./AddTodo"; import React, { useState } from "react"; import { Paper, List, Divider, Container } from "@mui/material"; function App() { //기본 스테이트를 객체로 설정하였다. const [items, setItems] = useState([]); //Todo에서 쓰레기통 아이콘을 클릭하면 삭제된다. 이걸 를 호출할 때 넣어준다. 위를 봐라. co..

material-ui 라이브러리 설치 npm install @mui/material @emotion/react @emotion/styled npm install @mui/material @mui/styled-engine-sc styled-components npm install @fontsource/roboto npm install @mui/icons-material axios 설치 npm install axios react-router-dom 설치 npm install react-router-dom index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import Main from..

1. App.js 작성 import axios from "axios"; import { useState, useEffect } from "react"; function NameAndAge(props) { if (props.data !== null) { // 입력받은 props.data 에서 직접 값을 가져오는 경우 const name = props.data.name; const age = props.data.age; console.log("##name: " + name + ", ##age: " + age); console.log( typeof props.data.age, ": props.data.age와 그 값을 입력받은 age 모두 number 타입이다. " ); console.log("#"); // ..

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에 전부 집어넣었다. 리덕스 툴킷은 이러한 슬라..