FRONT/REACT

[리액트] 도서 검색 사이트 만들기

연듀 2021. 9. 5. 13:46

 

 

리액트로 도서 검색 사이트 만들기

 

로그인 화면
회원가입 화면

 

'하늘' 책 제목 검색 결과

 

책 상세정보
책 상세정보
출판사 '한빛' 검색 결과
페이징 처리
페이징 처리

 

 

기능

 

-책 제목, 출판사, 저자 별 단어 검색

 

-책 클릭시 상세정보 나오기

 

-페이지 클릭시 해당 페이지로 이동, 맨 끝 페이지/ 맨 앞 페이지 이동

 

-회원가입, 로그인 기능

 

 

 


 

리액트로 해본 첫 프로젝트였다.

백엔드 분들이랑 다른 프론트엔드 분들이랑 같이 작업했는데

백엔드에서 준 api 책 정보들을 프론트에서 받아 띄우는 식으로,

출판사, 저자, 책 이름별 검색시 필터링해 검색 단어가 포함된 책을 한 페이지 안 책의 개수만큼 렌더링하게 해줬다.

그리고 책 클릭 시 책 상세 정보 api를 받아 보여줬다.

페이징 처리 하는 부분에서 리액트에 원래 내장된 페이징 기능을 그대로 쓰지 않고 로직을 직접 짜서 했는데, 이 부분이 가장 어려웠던거 같다.

회원가입 부분에서는 post 방식으로 입력한 아이디 비번 값을 데이터베이스에 저장하고, 로그인 시에 입력값들이 데이터베이스에 있는 값이면 로그인 성공하게 해줬다.

리액트를 이론적으로 많이 공부하거나 실습하는 인강들을 많이 듣지 않은 상태에서 프로젝트를 한거라 실력이 많이 부족한걸 느꼈다. 다른 팀원분들의 도움도 많이 받았고 혼자였으면 못했을거같다.

장바구니 기능과 책 구매 기능까지 구현을 못한게 조금 아쉽다.

겨울방학때 리액트 공부를 더 열심히 해서 다음번 프로젝트 때는 좀더 완벽하게 해보고싶다 !