https://github.com/sweesweett/section3react

검색API를 이용, 카테고리에 따라 검색 태그 추천, 좋아요 리스트 저장/삭제
https://github.com/sweesweett/section3react

axios express react react-router styled-components

Last synced: 2 months ago
JSON representation

검색API를 이용, 카테고리에 따라 검색 태그 추천, 좋아요 리스트 저장/삭제

• Host: GitHub
• URL: https://github.com/sweesweett/section3react
• Owner: sweesweett
• Created: 2022-07-19T11:41:05.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-24T11:48:15.000Z (almost 4 years ago)
• Last Synced: 2026-01-03T19:08:43.210Z (6 months ago)
• Topics: axios, express, react, react-router, styled-components
• Language: JavaScript
• Homepage:
• Size: 1.42 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# search for what

### 코드스테이츠 솔로프로젝트

### 개발 기간 22.07~

### 사용한 라이브러리/ 프레임워크

#### 프론트엔드

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)**(create-react-app)**  

![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)  

![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)  

**axios**  

**react-uuid**

#### 백엔드

![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)  

**axios**  

**cors**  

**dotenv**

### 특징

- 검색어 카테고리에 따라 랜덤한 태그를 5개씩 추천(제품은 랜덤태그X)

- 해당 태그를 클릭했을 떄, 검색창에 적용할 수 있음

- Express.js를 이용하여 네이버 검색 API를 사용하여 해당 검색 결과를 하단에 나타냄

- 좋아요 리스트를 따로 볼 수 있음

- 하트 버튼을 눌렀을 때 서버와 통신(좋아요 리스트에 추가 서버는 server 브랜치)

- 좋아요 리스트 페이지에서 하트를 눌렀을 때 리스트에서 삭제

### 개발 사항 흐름

1.0 홈 화면의 기본 레이아웃 구현  

1.1 검색어 태그 기능 구현  

1.2 프록시서버 구현  

1.3 검색 결과 레이아웃 변경(사진o->사진x)  

1.4 좋아요 리스트 구현을 위해서 하트 버튼을 클릭할 때 해당 내용을 로컬 스토리지에 저장  

2.0 리액트 라우터를 사용하여 좋아요 리스트/ 홈 페이지 구현  

2.1 리스트 좋아요 리스트 추가 / 삭제 변경 (로컬 스토리지-> 서버와 통신)  

2.2 섹션 4 CRUD 미션을 위해 todo list 구현  

2.3 crud 서버쪽 구현

### 배포된 웹페이지 화면

추후에 추가