도서 정리 프로젝트(1)

프로젝트 설명

도서 검색 및 열람 페이지, 내가 읽은/읽고 싶은 책을 정리할 수 있는 페이지

이 프로젝트를 진행하게된 이유

1. 내가 읽은 책과 읽고 싶은 책을 정리하고 싶다.
2. 추천받는 개발 서적들에 대해 기록해 놓고 싶다.
3. 확실하게 학습하고 기록하면서 프로젝트를 진행하고 싶다.
4. 리액트와 상태관리 라이브러리를 학습하고 싶다.

핵심 기능

1. 도서 목록(무한 스크롤)
2. 대표 카테고리 별 목록(웹 개발, 프론트엔드, 웹디자인)
3. 읽은/학습한 도서 저장
4. 읽고 싶은 도서 저장
5. 도서 검색(제목)

개발 환경

1. React.js
2. Redux
3. styled-components
4. axios
5. Figma
6. Git/Github

---

환경 설정

도서 검색 API

카카오의 OPEN API 사용

왜?

1. 너무 많은 정보는 필요하지 않았다.
2. 호출 건수에 대한 제한이 없다. (이것저것 학습하며 호출하다보면 호출제한 걸려있는게 아쉬울 때가 있었다…)
3. 가장 익숙한 JSON의 형식과 배열의 형태를 지키며 RESPONSE 반환해준다.

그래서 내 상황에 가장 편리하다고 생각했다.

kakao developers 페이지에 접속한다.

‘내 애플리케이션’ 에서 애플리케이션을 추가한다.

‘REST API키’ 가 생성된다.

‘문서’ - ‘시작하기’ - ‘Daum 검색’ - ‘개발 가이드’ - ‘책 검색’으로 이동하여 제시된 규칙을 따른다.

받은 ‘REST API키’는 위에 보이는 Auth과정에서 사용한다.

import axios from 'axios';

const REST_API_KEY = 'rnadom';
const instance = axios.create({
  baseURL: `https://dapi.kakao.com/v3/search/book`,
  headers: {
    "Authorization" : `KakaoAK ${REST_API_KEY}`,
  },
});

export default instance;

axios를 사용하면서 instance로 ‘baseURL’과 ‘header’를 설정해놓는다.

axios를 사용할 때, 쿼리값(검색을 원하는 질의어)만 넘겨주면 된다.

// 기존 방법 (URL과 Auth를 매번 작성해줘야 한다.)
import axios from 'axios';

const res = axios.get(`https://dapi.kakao.com/v3/search/book`, {
	headers: {
	  "Authorization" : `KakaoAK ${REST_API_KEY}`,
	},
	params : {
		query : "프론트엔드"
	}
})

// instance 설정 후
import axios from './api/axios'; // 내가 수정한 axios를 사용해야 한다. (경로 설정 주의)

const res = axios.get('', {
	params : {
		query : "프론트엔드"
	}
})

---

리액트 환경 설정

npx create-react-app ./
npm i axios
npm i styled-components
npm i react-router-dom
npm i redux react-redux

이번 프로젝트를 계기로 상태관리 라이브러리를 사용해보고 싶었다.

그래서 MobX와 Redux를 고민 하다가 Redux를 사용해보기로 했다.

왜?

1. 현재까지 가장 많은 사용성을 보이고, 관련 정보가 많다.
2. 원칙적으로 상태의 불변성을 지키는 특징을 지니고 있다.
   • React는 애초에 상태의 불변성을 지키는데 더 편리하도록 설계된 라이브러리라고 알고있다. 이것에 비추어 봤을 때, Redux를 사용하는게 더 일관적인 것 같은데…? 라고 생각했다.

일단 배워보자! 라는 생각으로 결정했다.

(결국 나중에는 MobX도 경험해야, 그 차이를 실감할 것같다.)

---

진행 과정 1일차

사용할 기술 검색과 선택

이번 기회에는 Redux를 사용해 보기로 결정했다. TypeScript와 Next.js도 사용해보고 싶었지만, 내 상황에서 과부화가 올 것같았다. 기회가 된다면 먼저 완성하고 리팩토링 과정까지 경험하면 좋을 것같다.

---

Figma로 간단한 레이아웃 구조 설정

1. 화면 기준 너비
2. 내비게이션
3. 검색창
4. 카테고리
5. 책 목록
6. 나의 페이지(로 이동하는 버튼의 위치 정도…)

페이지 레이아웃

---

폴더구조 생성

1. ‘api/axios.js’ 폴더
   • axios instance 설정(baseURL, header)
2. ‘components’ 폴더
   • 책
   • 책 목록/카테고리
   • 내비게이션
   • 검색창
3. ‘hooks’ 폴더
   • 재사용 하는 커스텀 훅 작성(책 목록 가져오는 함수 작성 예정)
4. ‘pages’ 폴더
   • 접속 시 웹개발 카테고리의 책 목록을 출력(랜딩페이지)
   • 북마크 목록을 볼 수 있는 개인 페이지(예정)

폴더/파일 구조

1.