[230607] Proxy

Proxy 

클라이언트에서 서버로 접속할 때 직접 접속하지 않도록 "중간에서" 대신 전달하는 서버입니다. 

 = 중개 서버 역할

 

 

 

>>  왜 굳이 Proxy 서버가 중간에서 중개역할을 하는 건가요?

_[1] 캐시 수행 

Proxy 서버에서는 서버로부터 응답받은 내용을 Proxy 서버의 캐시에 저장합니다. 

클라이언트에서도 동일한 내용을 요청할 때 Proxy 서버는 캐시에 저장해두었던 응답을 반환할 수 있습니다. 

 

      * 불필요한 네트워크 요청 ↓

      * 속도 ↑

 

 

_[2] 보안 기능 수행 

클라이언트의  IP를 감출 수 았고 서버로부터   오는 응답을 가려줄 수 있습니다. 

 

      * 보안 기능 수행 

 

 

 

 

Proxy로 api 데이터 받아서 뿌리기 

 

과제를 하다가 api2 에서 데이터를 받아와서 뿌리는 것 까지는 "삼항 연산자"를 사용해서 컴포넌트를 재사용해서 코드를 구성했다. 그런데  ' CreateBook ' 컴포넌트에서 새로운 데이터 추가가 되지 않는다. 

 

const CreateBook = ({ change, onChangeForm, handleSubmit, handleToSubmit }) => {


    return(
        <div className="form-wrapper">
            <div className="form">
                <form>
                    <div className="input-group">
                        {change === false ?
                            (
                                <>
                                    <label>book</label>
                                    <input 
                                        type="text" 
                                        onChange={(e) => onChangeForm(e)} 
                                        name="book" 
                                        placeholder="book" 
                                    />
                                </>
                            ):
                            (
                                <>
                                    <label>To Do LIST</label>
                                    <input 
                                        type="text" 
                                        onChange={(e) => onChangeForm(e)} 
                                        name="todo" 
                                        placeholder="todo" 
                                    />
                                </>
                            )
                        }
                        
                    </div>
                    <div className="input-group">
                        <label>category</label>
                        <input 
                            type="text" 
                            onChange={(e) => onChangeForm(e)} 
                            name="category" 
                            placeholder="category" 
                        />
                    </div>
                    <div className="input-group">
                        {change === false ?
                        (
                            <>
                                <label>author</label>
                                <input 
                                    type="text" 
                                    onChange={(e) => onChangeForm(e)} 
                                    name="author"
                                    placeholder="author" 
                                />
                            </> 
                        ): 
                        (
                            <>
                                <label>complete</label>
                                <input 
                                    className="checkbox"
                                    type="checkbox" 
                                    onChange={(e) => onChangeForm(e)} 
                                    name="isComplete" 
                                />
                            </> 

                        )
                        }
                    </div>
                    {change === false ? 
                    (
                        <button 
                        className="submit-button"
                        onClick= {() => handleSubmit()}
                        >Submit
                         </button> 
                    ) : 
                    (
                        <button 
                        className="submit-button"
                        onClick= {() => handleToSubmit()}
                        >Submit
                        </button>
                    )}
                    
                </form>
            </div>
        </div>
    )
}

export default CreateBook;

 

import { useState } from 'react';
import './App.css';
import Header from './components/Header';
import BookTable from './components/BookTable';
import DisplayBoard from './components/DisplayBoard';
import CreateBook from './components/CreateBook';
import { getAllBooks, createBook , getAllTodos, createTodo} from './services/BookService';
import Footer from './components/Footer';

function App () {

  const [bookShelf, setBookShelf] = useState({});
  const [todoList, setTodoList] = useState({});
  const [todos, setTodos] = useState([]);
  const [books, setBooks] = useState([]);
  const [numberOfBooks, setNumberBooks] = useState(0);
  const [numberOfTodos, seetNumberTodos] = useState(0);
  const [change, setChange] = useState(false);

  const handleSubmit = () => {
      createBook(bookShelf)
        .then(() => {
          setNumberBooks(numberOfBooks+1);
      });
  }

  const handleTosubmit = () => {
    createTodo(todoList)
      .then(() => {
        seetNumberTodos(numberOfTodos+1);
      })
  }

  const getAllBook = () => {
    getAllBooks()
      .then(data => {
        setBooks(data);
        setNumberBooks(data.length);
      });
  }

  const getAllTodo = () => {
    getAllTodos()
      .then(data => {
        setTodos(data);
        seetNumberTodos(data.length);
      });
  }

  const handleOnChangeForm = (e) => {
      let inputData = bookShelf;
      if (e.target.name === 'book') {
        bookShelf.book = e.target.value;
      } else if (e.target.name === 'category') {
        bookShelf.category = e.target.value;
      } else if (e.target.name === 'author') {
        bookShelf.author = e.target.value;
      }
      setBookShelf(inputData);
  }

  const handleOnChangeToDoForm = (e) => {
    let inputData = todoList;
    if(e.target.name === 'todo'){
      todoList.todo = e.target.value;
    }else if (e.target.name === 'category'){
      todoList.category = e.target.value;
    }else if (e.target.name === 'isComplete'){
      todoList.isComplete = e.target.value;
    }
    setTodoList(inputData);
  }


  const changeForm = () => {
    setChange(!change);
  }
  
  return (
    <div className="main-wrapper">
      <div className="main">
        <Header /><button className="app-btn" onClick={changeForm}>TODO</button>
        { change === false ? 
        ( 
        <>
          <CreateBook 
            change={change}
            bookShelf={bookShelf}
            onChangeForm={handleOnChangeForm}
            handleSubmit={handleSubmit}
          />
          <DisplayBoard 
            change ={change}
            numberOfBooks={numberOfBooks} 
            getAllBook={getAllBook} 
          />
          <BookTable change={change} books={books} />
        </>
        )  
        : 
        ( 
          <>
            <CreateBook 
              change = {change}
              todoList={todoList}
              onChangeForm={handleOnChangeToDoForm}
              handleToSubmit={handleTosubmit}
            />
            <DisplayBoard 
              change={change}
              numberOfTodos={numberOfTodos} 
              getAllTodo={getAllTodo} 
            />
            <BookTable
            change={change} 
            books={todos} />
          </>
          )  
      }
        
        <Footer />
      </div>
    </div>
  );
}

export default App;

 

 

 

원인을 고민 좁 해봐야 할 것 같다...