📚 Part 4 컴포넌트 작성 기초

---

📁 기본 컴포넌트 작성

리액트의 핵심은 component이다. component는 UI에 독립적이고, 재사용 가능한 부분으로 각각의 컴포넌트가 모여서 어플리케이션 전체를 구성한다. 작은 단위의 컴포넌트를 작성하고 이를 조립해서 전체 화면 또는 어플리케이션 프로젝트를 개발할 것이다. 이는 개발 과정을 모듈화할 수 있고, 재사용 등을 통해 관리가 쉬워지는 효과를 누릴 수 있다.

const TitleStyle = styled.h1<Omit<Props, "children">>;

Omit : Props의 interface에서 children을 제외한다는 뜻

---

📁 헤더와 푸터

📌 헤더의 구성

Header.tsx (1020px)

• 로고 영역 (처음으로 이동)
• 카테고리 (목록 카테고리로 이동)
• 개인화 영역 (로그인 여부에 따라 분기)

npm install react-icons --save 

react-icons 설치해주기

📌 푸터의 구성

Footer.tsx (1020px)

• 로고 영역
• 카피라이트

📚 Part 5 모델과 API 연동

---

📁 라우트 작성

라우트 : 페이지 or 링크를 통해서 이동하는 경로
이번 프로젝트에서는 react 라우트를 이용한 방법을 사용할 것임

📌 react-router-dom

1. React Router를 사용
2. npm install react-router-dom @types/react-router-dom --save 로 설치

📌 라우트 작성

1. 로그인 /login

2. 회원가입 /signup

3. 비밀번호 초기화 /reset

4. 도서 목록 /books

5. 도서 상세 /books/{id}

6. 장바구니 /cart

7. 주문서 작성 /order

8. 주문 목록 /orderlist

---

📁 프로젝트 모델 정의

📌 주요 모델

1. User
2. Book
3. Category
4. Cart
5. Order

---

📁 API 통신 모듈 구성

📌 데이터 흐름

View → Hooks → Query Library(optional) → Fetcher → API server

view에서 hooks에 데이터를 요청하고 중간에 (react 쿼리와 같은) 쿼리 라이브러리가 존재할 수도 있음. fetcher(특정 모델을 목적으로 하는 fetcher or 함수를 감싸는 http client가 존재함)에서 API server와 통신을 하고, 역으로 데이터를 넘겨주면 그 데이터를 view 화면에 render 하게 됨.

layer을 고려해서 설계하면 render 영역을 깔끔하게 유지할 수 있다.
hooks을 통해서 중복 코드를 줄이고 hooks 안에서 데이터를 가공하는 내용의 로직을 제공할 수 있다. fetcher 역시 분리해서 api마다 달라질 수 있는 설정이나 변경 사항 등을 대응할 수 있음.

npm i axios --save

axios 설치해주기

📌 cors 오류 발생

백엔드에서 작업했던 app.js 파일에 npm install cors 명령어를 사용하여 cors 다운 받아준다

const cors = require('cors');
//생략
app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
}));
//생략

위와 같은 코드 추가해주기

그리고 프론트엔드 작업의 package.json에

"proxy": "http://localhost:6250"

추가해주기!

📌 회원 가입

event.preventDefault(); : 기본적으로 submit을 하게 되면 페이지가 이동하는데, 그 페이지 이동을 막아줌

React Hook Form이라는 라이브러리를 사용할 것이기 때문에

npm install react-hook-form

명령어 사용
useForm : form을 관리하는 커스텀 hooks
register: input의 값을 register