프로젝트: React(TypeScript) 기반의 동적 UI 개발(4)-React Router<Link to='/'>, CORS

라우트 작성

React Router
https://reactrouter.com/en/main

Docs | React Router

yarn add react-router-dom

로그인	/login	도서 목록	/books
회원가입	/signup	도서 상세	/books/{id}
비밀번호 초기화	/reset	장바구니	/cart
		주문서 작성	/order
		주문목록	/orderlist

 

🔸리액트 라우터는 a태그가 아닌 <Link to={/라우터}>를 사용한다.

프로젝트 모델 정의

Book과 BookDetail은 Book에서 2가지가 추가되었기 때문에

extends Book으로 확장시켜사용했다.

API 통신 모듈 구성

레이어를 고려하여 설계하면

렌더 영역을 깔끔하게 유지할 수 있다.

훅을 통해서 중복코드를 줄이고 훅 안에서 데이터를 가공하는 로직을 제공

Fetcher 분리해서 API마다 달라질 수 있는 설정이나 변경사항을 대응할 수 있다.

전에 node.js 강의에서

book-shop API 설계한 것을 바탕으로 DB에 넣어놓은 데이터를

axios를 사용하여 통신하여 가지고왔다.

🔥CORS 에러

로컬끼리 통신을 하는데도, 포트번호가 서로 다르다보니 CORS에러가 발생했다.

yarn add cors

그래서 서버에 cors를 설치하고

app.use(cors());

cors를 import하여 위와같은 코드로 사용하고

위에 주석처리된 코드는 localhost:3000에서만 접속을 허용한다는 뜻이다.

지금 book-store-ref 작성중인 client의 package.json파일에서

proxy로 서버 URL을 추가해주었더니 해결되었다❗❗❗

회원가입

http.ts

➡️axios 인스턴스

auth.api.ts

book-shop 로컬 서버와 통신

Signup.tsx

 

DB에 잘 들어왔다❗❗