BOOKFLIX

BOOKFLIX

package.json - dependencies

• axios: "^0.19.2",
• prop-types: "^15.7.2",
• react: "^16.13.1",
• react-dom: "^16.13.1",
• react-router-dom: "^5.2.0",
• react-scripts: "3.4.1",
• styled-components: "^5.1.1"

기술 스택

React hook

개발기간

5일

프로젝트를 하게된 계기

책을 좋아해서 서점에 자주 간다. 가서 제일 먼저 하는 일은 베스트셀러, 신간 매대를 보는 것이다.
서점에 가지 않고도 베스트셀러 ,신간 도서를 확인할 수 있고 도서 검색도 할 수 있는 웹 어플리케이션이 있다면 참 편리하겠다는 생각이 들었다. 물론 네이버에 베스트셀러를 검색하거나 인터파크, 알라딘과 같은 도서 사이트를 이용해도 되지만 꽉 찬 화면으로 내가 원하는 정보만 나열되어 있는 웹사이트라는 점에서 메리트를 느껴서 만들게 되었다.

기능

• 베스트셀러, 신간도서, 추천도서 보기
• 각 도서 클릭시 세부 사항을 보여줌
• 세부 사항에서 구매하기를 클릭시 도서 구매링크로 이동
• 도서 검색 (입력한 문자열의 결과를 실시간으로 보여줌 )

힘들었던점

1. CSS

각 컴포넌트들을 css 레이아웃, 꾸미는것이 꽤나 고역이었다. css 실력이 미숙하기도하고 흥미도 없어서 그랬던것 같지만 완성된 웹사이트를 보니 뿌듯했고 styled-component 라이브러리를 사용해서 각 컴포넌트 js파일에 css까지 작업할 수 있어서 매우 편리했다.

2. netlify 배포 오류

배포후에 proxy를 설정한 경로로 api요청을 보내지 않아서 404 오류로 데이터들을 받아오지 못했다. toml 파일을 추가해서 해결하려고 시도 했지만 성공하지 못했다. 다음 프로젝트때에 이 문제는 꼭 해결해야겠다.

아쉬운점

도서 검색시 버그

도서 검색시에 실시간으로 입력한 값을 받아온 데이터와, 검색할 문자열을 입력 후 엔터를 쳐서 받아온 데이터 값이 다른 경우가 종종 있었다. 이 부분은 사실 뭐가 문제인지 잘 모르겠다.

느낀점

1. 리액트 그리고 훅의 편리함

컴포넌트들을 재사용하면서 코드가 줄어들고 가독성이 좋아지고 효율적으로 작업하고 있다는 느낌이 들어서 정말 좋았다. 그리고 리액트 훅을 사용해서 작업해보니 클래스 컴포넌트로 작업했을때보다 훨씬 코드 가독성도 좋고 사용도 편리했다. 문서를 보니 훅의 여러 기능들이 많이 있던데 한번 살펴보아야겠다.

2. 가독성 좋은 코드를 쓰려고 노력하자

이번 프로젝트를 하면서 전에 수강했던 넷플릭스 클론 코딩 코드를 많이 참고했다. 유용한 기능들과 코드들을 내 프로젝트에 응용해서 작업했고, 그 과정에서 같은 기능과 코드라도 최대한 가독성좋게 작업했다는 점을 느끼게되어서 작업시에 늘 염두에 두어야겠다고 생각했다.

3. netlify 커뮤니티가 활성화 되있다.

netlify에 문제가 생겨서 구글링해보면 netlify 커뮤니티에 유저가 질문하고 netlify 소속 개발자로 보이는 사람이 직접 답변을 달아주는 글들을 많이 목격했다. 답변의 퀄리티도 홀륭해서 플랫폼을 운영하는 모범사례라는 생각이 들었다.

4. 오래된 api는 되도록 지양하자

현재 사용한 인터파크 도서 api는 관리를 하고있지 않다는 글을 보게 되었다. 그래서 그런지
신간도서 ,추천도서, 도서검색 결과가 영 시원찮다..