부산 맛집 API를 이용한 미니 프로젝트
1.기획
1-1. 프로젝트 기획 동기
코드스테이츠[SEB FE] Section3 Mini Hackathon과정에서 갑작스럽게 프로젝트를 진행하게 되었다. 나는 개인적으로 포트폴리오 프로젝트를 진행 하고 있으며 그 프로젝트의 목표는 express 서버와 Client를 직접 연결해보는 것이다. 따라서 외부 API를 다루는 것에 집중해보기로 했다.
나는 이전부터 외부 API를 다루는 것에 대한 경외감을 가지고 있었다.
나의 첫 팀 프로젝트에서 나는 외부 API를 전혀 다루지 못해 팀에게 도움이 되지 못했다.
결국 외부 API를 사용하지 않는 주제를 선정했다.
지금 생각해보면 당시에 버거운 일이었지만 실패의 경험은 여전히 아물지 못했다.
그래서 이번에는 기필코 직접 외부 API를 훌륭하게 사용해보이기로 다짐했다.
노마드코더에서 날씨 API, 영화API는 다뤄본 경험이 있어서 다른 분들이 사용하지 않을 것 같은 재밌는 데이터를 활용해 보고 싶은 욕심이 있었다.
대도시에는 그에 걸맞는 풍부한 API가 제공됐다. (주차장, 전기 자전거 버스 도착시간) 하지만 김해에 사는 나에게 피부로 와닿는 밀접한 정보가 아니라 흥미를 끌지 못했다.
고민 끝에 나는 익숙한 도시 부산을 선택했다.
적어도 부산은 저 행정구역이 어디구나는 꿰고 있다. 아무튼 부산 맛집 API를 사용해보기로 했다.
1-2. 기술 스택 및 구현하고 싶은 기능
기술 스택
1. react-router-dom
2. styled-components
3. axios
4. firebase
4. storybook
- 오늘 상태관리의 중요성을 뼈저리게 느꼈다. 여유가 있다면 Redux/toolkit 혹은 Recoil을 이용한 버젼도 만들어 보겠다.
- 일단 지금까지 커리큘럼에서 배운 내용들을 복습한다는 마음으로 기존의 익혔던 library위주로 구성했다. 스토리북은 아직 부족하다.
- 최근 인증,보안 수업을 통해 axios사용법을 익혔는데 fetch, http를 사용하는 방식과 비교하여 큰 편의성을 느껴 일단 호감이고 최근에 다른 프로트엔드 프로젝트 구인 게시글들에서 axios를 자주 접해서 더 적극적으로 사용해야겠다 마음 먹었다.
- 그리고 로그인등을 통해서 사용자가 저장한 데이터가 유지되도록 firebase등 데이터 베이스도 붙일 수 있다면 좋겠다.
구현하고 싶은 기능
해커톤처럼 갑작스럽게 시작한 프로젝트다보니 API를 먼저 정하고
그에 맞춰 구상하는 방향으로 진행되었다.
- 저장하기(가제)를 누르면 /wishtogo 에 저장되고 같은 식당이 여러번 등록 되지 않게 한다.
- 내가 방문한 식당에 대해서 리뷰를 남기고 /review에 저장한다.
두 번째 부분이 고민이다. /wishtogo에 저장해둔 식당들에만 리뷰를 남길 것인지 아니면 첫 화면에서도 리뷰를 남길 것인지
2-1. 첫 화면(/)에서 리뷰를 남긴다면 그 식당은 첫 화면에서 사라져야하는지?
2-2. 만약 /wishtogo페이지에서 review를 남긴다면 그 식당은 사라져도 될 것이다.
2-3. 그리고 만약에 첫 화면과 /wishtogo 모두 리뷰를 남길 수 있다면 input창을 각각 만들기보다. modal창 처럼 독립적인 화면을 가지면 좋을 것 같다.
- 네이버 및 카카오 API를 사용해서 식당 정보들을 다룰 수 있어도 좋을 것 같다. 전화번호를 전송해준다던지.
- 식당 운영 시간도 얻을 수 있는데 현재 시간과 운영시간을 비교하여 영업주인 식당과 그렇지 않은 식당을 다르게 표시하는 것도 좋을 것 같다.
2. 컴포넌트 구성
오늘 중간 발표때 까지만 해도 Home.js 컴포넌트에서 API에서 데이터를 받아왔었다.
그때 당시에는 Nav.js에 지역별로 필터를 해주는 옵션을 넣으려고했다.
그러다 보니 props의 데이터 흐름을 역행하여서 구현할 수 없다고 판단하여
App.js에서 데이터를 fetch받고 있다.
하지만 Nav에 옵션이 있게 되면 /wishtogo 에서도 Nav가 남아있고 거기서는 필터하는 것은 구현하기 어렵다 판단하여서 Home.js에 아래와 같이 구현하였다.
<select onChange={handleLocation}>
{locationFilter.map((el,idx) => (
<option value={el} key={idx}>{el}</option>
))}
</select>오늘 이렇게 회고를 하는 과정에서 컴포넌트 트리르 작성하고 보니 수정해도 괜찮을 것 같은 부분을 발견했다. 아래에서 정리하겠다
3. 기타
아래와 같이 Nav.js를 구성했는데 부족하지만 꽤 마음에 든다.
import styled from "styled-components"
import { Link } from "react-router-dom";
const NavContainer = styled.ul`
display:flex;
flex-direction: row-reverse;
width:100%;
margin : 0;
padding: 0;
background-color: darkslategrey;
list-style-type: none;
`
const NavItem = styled.li`
padding: 15px;
cursor: pointer;;
`
const LinkTo = styled(Link)`
text-align:center;
text-decoration: none;
color: white;
`
const Nav = () => {
return(
<NavContainer>
<NavItem><LinkTo to="/review">review</LinkTo></NavItem>
<NavItem><LinkTo to="/wishtogo">wishToGo</LinkTo></NavItem>
</NavContainer>
)
}4. 마무리
당장 개선 가능할 것 같은 부분
1. Router.js에서 데이터를 fectch해도 좋을 것 같다.
2. Container 컴포넌트와 그 자식 컴포넌트를 합쳐도 좋을 것 같다.
3. 당연히 CSS!! 이참에 막연한 두려움은 거두어 내고 싶다.
