bright jazz music

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

- 컨텍스트는 리액트가 제공하는 가장 막강한 기능- 컨텍스트는 리액트 라우터, 리덕스 등 많은 라이브러리 설계의 근간이 됨. 컨텍스트란?컴포넌트의 속성(props)은 부모 컴포넌트가 자식 컴포넌트로 어떤 정보를 전달하려고 할 때 사용하는 메커니즘이다. 그런데 부모 컴포넌트가 직계 자식이 아닌, 손자나 증손자 컴포넌트에 정보를 전달하려고 하면 아래와 같이 번거로운 props 전달을 해야 한다.리액트는 이런 속성 전달의 번거로움을 해소하고자 context라는 메커니즘을 구현하였다.리액트나 리액트 네이티브에서 컨텍스트는 createContext나 useContext로 이뤄진다. 이 둘의 관계는 아래의 그림처럼 표현할 수 있다.컨텍스트 기능을 사용하는 리액트와 리액티브 코드는 항상 이름에 'Provider'가 ..

npx create-react-app ch02_1 --template typescript 문서객체모델(DOM, Document Object Model)이란? 웹브라우저는 HTML 형식의 문자열을 화면에 추력할 때 문자열을 분석(parsing)하여 특별한 형식의 자바스크립트 객체 조합으로 바꾼다. 이 특별한 형식의 자바스크립트 객체는 모두 자신의 특징에 맞는 인터페이스를 구현하는데 이들 인터페이스를 '총칭'하여 문서객체모델이라고 한다. (여러 가지 인터페이스가 있고 이들을     window 객체: 웹브라우저의 자바스크립트 엔진은 window라는 이름의 전역변수를 기본으로 제공한다.여기서 window는 웹브라우저의 특정 웹페이지를 의미하는 객체이다.  window 객체는 Window 타입 객체로서 Wind..

/src/index.js// /src/index.jsimport React from "react";// import ReactDOM from "react-dom/client";import "./index.css";import App from "./App";import reportWebVitals from "./reportWebVitals";import { createRoot } from "react-dom/client";// 라우터 경로가 들어있는 RouterApp.js파일 추가하기import AppRouter from "./AppRouter";/*//기존//ReactDOM을 사용한다.const root = ReactDOM.createRoot(document.getElementById("root"));r..

package com.example.reactspringtodo.controller;import com.example.reactspringtodo.dto.ResponseDTO;import com.example.reactspringtodo.dto.UserDTO;import com.example.reactspringtodo.entity.UserEntity;import com.example.reactspringtodo.security.TokenProvider;import com.example.reactspringtodo.service.UserService;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Au..

//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("#"); // ..