[TIL] 2023-04-12 DAY19

---

ExpressJS

GIT 주소 : https://github.com/dowoo303/frontendPlusBackend

---

• 오늘 배운것들

1. todolist-noDB
   DAY18에서 만든 backend와 오늘 만든 frontend 연결시켜보기
   연결 후 REST API 동작을 프론트엔드를 통하여 동작시켜보기

• 각종 팁

1. 여기서 http통신은 백엔드와 프론트엔드가 서로 통신하기 위해서 사용(axios)
2. CORS(Cross-Origin Resource Sharing) : 교차 출처(다른 출처)간의 리소스를 공유할 수 있는 정책

frontend (react+테일윈드)

시작

1. frontend 폴더에 react설치 : npx create-react-app .
2. 폴더 삭제
3. 테일윈드 설치 : https://tailwindcss.com/docs/guides/create-react-app
4. axios 설치 : npm i axios

frontend+backend 연결

시작

• axios를 이용하여 프론트엔드와 백엔드를 연결한다.
  -> .env 파일 생성 후 백엔드 주소 적어넣기
  REACT_APP_BACKEND_URL=http://localhost:3010

코드

const getToDoList = async () => {
    try {
      const response = await axios.get(
        `${process.env.REACT_APP_BACKEND_URL}/todo`
      );

      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    // useEffect가 비동기함수이기 때문에 async로 함수생성필요?
    // useEffect가 side effect이기 때문에 async를 이 안에 넣어줌?
    getToDoList();
  }, []); // [] 빈 추적 배열 = 처음에 렌더링 될 때 한번만 실행됨

결과

-> 오류 발생 - 통신규약 어김(CORS 필요)

CreateToDo.jsx

코드

const CreateToDo = ({ getToDoList }) => {
  const [title, setTitle] = useState("");

  const onSubmitCreateToDo = async (e) => {
    try {
      e.preventDefault();

      if (!title) {
        alert("타이틀을 입력해주세요!");
        return;
      }

      const response = await axios.post(
        `${process.env.REACT_APP_BACKEND_URL}/todo`,
        {
          title,
          desc: `${title} 아자아자 화이팅`,
        }
      );

      if (response.status !== 200) {
        alert("요청을 불러오지 못했습니다.");
        return;
      }

      getToDoList();
      setTitle("");
    } catch (error) {
      console.error(error);
    }
  };

결과

-> input에 title을 적어넣고 새 투두 생성 input을 누르면 post를 할 수 있다.

TodoCard.jsx

코드

const TodoCard = ({ title, isDone, index, getToDoList }) => {
  const onClickToggle = async () => {
    try {
      const response = await axios.put(
        `${process.env.REACT_APP_BACKEND_URL}/todo/done/${index}`
      );

      if (response.status !== 200) {
        alert("요청을 불러오지 못했습니다.");
        return;
      }

      getToDoList();
    } catch (error) {
      console.log(error);
    }
  };

  const onClickDelete = async () => {
    try {
      const response = await axios.delete(
        `${process.env.REACT_APP_BACKEND_URL}/todo/${index}`
      );

      if (response.status !== 200) {
        alert("요청을 불러오지 못했습니다.");
        return;
      }

      getToDoList();
    } catch (error) {
      console.error(error);
    }
  };

결과

-> onClickToggle을 타이틀 li에 연결하여 isDone을 조정하여 put할 수 있고, onClickDelete을 버튼에 연결하여 삭제 버튼을 누르면 delete가 가능하도록 설정

CORS

시작

• 기본적으로 CORS 정책은 서버 ↔ 서버 간에는 발생하지 않고 서버 ↔ 브라우저 간에 발생하게 된다.(Insomnia로 요청을 보냈을 때는 잘 받을 수 있는 이유입니다.)
  
  
• CORS 정책 위반이 발생하면 브라우저 측에서는 해당 요청을 파기 시킨다.
  (이때 서버 측은 정상적으로 요청을 응답했다고 판단하므로 주의)
  
  
• 해결방법 (NodeJS 기준)
  CORS 라이브러리를 설치 후 Express 미들웨어로 추가한다.
  (이 때의 CORS는 정책의 CORS가 아니라 NodeJS의 패키지 중 하나인 CORS 이다. - 동일이름)

동작

1. cors 설치 : npm i cors
2. backend에 import 및 미들웨어추가