학습 목표 import React, { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }) } const handleSubmit = () => { if (state.author.length < 1) { // focus authorInput.c..

만들어 볼 것 import { useState } from "react"; const DiaryEditor = () => { // author는 state, setAuthor는 상태변화를 주도하는 함수 const [author, setAuthor] = useState("이정환"); return ( 오늘의 일기 { console.log(e.target.value); console.log(e.target.name); setAuthor(e.target.value); }} /> ); }; export default DiaryEditor; DiaryEditor.js import './App.css'; import DiaryEditor from './DiaryEditor'; function App() { retur..

// 상태 사용하겠다. import React, { useState } from "react"; const Counter = (props) => { console.log(props); const [count, setCount] = useState(props.initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; return ( {count} + - ); } export default Counter; Counter.js import React from "react"; import Counter from "./Counter"; // import './App..

State - 계속해서 변화하는 특정 상태 상태, 상태에 따라 각각 다른 동작을 함 컴포넌트의 state가 변경이 되면, 그 컴포넌트는 rerender가 된다. // 상태 사용하겠다. import React, { useState } from "react"; const Counter = () => { console.log('호출'); const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; const [count2, setCount2] = useState(0); const onIncrease2 = () => { s..

9-1 성능이란  성능 - 클라이언트 요청에 대한 응답시간(Response Time)과 시간당 처리 할 수 있는 처리량(Throughput) - -  성능의 특성 - 경합부하 구간에서 Response Time이 급격하게 늘어나게 된다 -  성능 측정 대상 - 목표 TPS 를 산정하고 정해진 응답시간 이내에 모든 요청이 처리되는지 확인해야 함 -  TPS(Transaction per Second) - 1초당 처리할 수 있는 트랜잭션의 개수 9-2 데이터베이스와 병목의 관계  데이터베이스 병목의 원인 - 취급하는 데이터 양이 가장 많다. - 시스템에서 처리하는 데이터는 영속적으로 보유해야 하는 데이터일 확률이 크다. - 데이터의 총 크기는 지속적으로 증가한다. - 동시성을 보장하는 등의 문제로 무조..