[Project] 맥주와 함께하는 숙소 예약 서비스 'BeerBnB'

프로젝트 소개

• 메인 서비스
  • 맥주, 소주, 위스키 등 '술과 어울리는 숙소'를 테마로 지역별, 유형별 원하는 숙소를 검색하고, 예약할 수 있다.
  • '호스트 등록'을 서비스를 통해 내 숙소를 쉽게 등록하고 호스트가 될 수 있다.
• 프로젝트 기간 : 2021.08.02.-2021.08.13.
• 모티브 페이지: 에어비엔비
• 참여자: 총 6명. Front-end(김가영, 이나현, 배윤아, 황문실), Back-end(김도담, 박종규)
• 구현 기능 (페이지 기준)
  1. 메인 페이지 : 날짜, 지역 별 숙소 검색이 가능한 Navigation bar
  2. 소셜 로그인 : 카카오 API 활용 소셜 로그인
  3. 숙소 리스트 페이지 : 선택 숙소 리스트 및 카카오 지도 API 활용 숙소 마킹
  4. 숙소 상세 페이지 : 숙소 정보 및 예약(기간, 금액) 기능
  5. 마이 페이지 : 예약 숙소 리스트
  6. 호스트 등록 페이지 : 카카오 주소 API 활용 숙소 form(text, image, 주소) 등록
• GitHub repository : Front-end

데모 영상

사용 기술

Front-End

• React.js, styled-components, axios, react-google-maps/api, react-slick, moment, react-dates, react-daum-postcode, react-kakao-login

Back-End

• Python, Django web framework, Bcrypt, My SQL

Common

• RESTful API, trello

직접 구현 사항

소셜 로그인

• 카카오 API를 활용해 카카오 로그인으로 서비스를 이용할 수 있음.
• 로그인 시 navigation bar에 '로그아웃', '마이 페이지' 버튼 생성
  

주요 코드

  const handleLogin = () => {
    Kakao.Auth.login({
      scope: 'profile_nickname, profile_image, birthday',
      success: function (response) {
        fetch(`${API.LOGIN}`, {
          method: 'GET',
          headers: {
            Authorization: response.access_token,
          },
        })
          .then(res => res.json())
          .then(res => {
            if (res) {
              localStorage.setItem('token', res);
              setIsLoggedIn(true);
              console.log(res);
            }
          });
      },
      fail: function (error) {
        alert('아이디와 비밀번호를 확인해주세요:)');
      },
    });
  };

소셜 로그인 프로세스

• Kakao.Auth.login 함수를 사용해 카카오 로그인을 실행하고, scope에 필요한 정보를 가져온다. (사이트 내 프로필 등록을 위한 닉네임, 사진, 생년월일 정보를 가져옴)
• success 콜백에서 카카오에서 사용자 토큰을 받아, fetch로 백엔드 서버에 넘겨준다.
• 백엔드 서버에서 우리 사이트에서 사용할 토큰을 주면, 프론트 localStorage에 저장한다.

호스트 등록 페이지

• 숙소 정보(text), 게스트 인원(증감 버튼), 숙소 요금, 이미지 업로드 등 다양한 form type 사용
  
• 카카오 주소 API, axios를 사용해 주소 찾기 기능 구현
  

프로젝트 회고 🌟

프로그래밍(기술 구현) 측면

• 소셜 API 활용
  이번 프로젝트에서 가장 기대했던 부분으로 여러 카카오 API를 내가 필요한 기능에 직접 구현해보고 싶었다.
  '로그인 정도야 하루면 가능하지!'라고 생각했던 초기와 달리 일주일이 걸려서야 겨우 UI 팝업을 만들어낼 수 있었고, 이후 메인 페이지와의 연결에서도 많은 어려움을 겪었다.
  ➡️ 공식 문서, 개념의 중요성을 다시 한 번 느끼게 된 계기가 되었다. 공식 문서를 제대로 보지 않고 잘 안될 때마다 구글링을 했는데, 역시 돌아와 공식 문서에서 답을 찾았다. 시간이 걸리더라도 공식 문서를 제대로 읽고, 이해하자.
  ➡️ 인증/인가, 로그인 구현 원리에 대해 제대로 이해한 후 코드를 짰다면 학습이 많이 되었을 것 같다. 코드를 구현하는데 급급해 원리를 이해하지 못하고 후에서야 다시 공부했다.
• GitHub rebase
  효율적인 협업을 위한 'rebase'를 진행했다. 처음 진행이라 나의 실수로 다른 분들의 코드에 피해가 갈까봐 조마조마했다.
  ➡️ 깃과 깃헙은 양파같은 녀석이다. 공부하면 할수록 어려운데 또 결과는 효과적이라 매력적이다. 많이 연습하고 실패해보면서 익혀두어야겠다.
• ReactJS function형 & Styled-Component
  class형보다 function형은 JS를 더 많이 닮았고 그렇기 때문에 직관적이다. state를 관리하는 것도 class보다 단순하다. 그러나, 코드로만 봤을 때는class형이 componet간의 유기적 관계, 흐름이 잘 드러나는 것 같았다.
  styled-component는 별도의 스타일 페이지 없이 해당 component 페이지 내에서 함께 쓸 수 있어 효율적이다. 하지만 CSS, Scss에 비해 제약이 있어 스타일 설정이 어려웠다.
  ➡️ Redux, axios 등 component를 효과적으로 관리할 수 있는 프레임워크를 공부해야겠다.

프로젝트 매니지먼트 측면

• 효과적, 효율적 소통을 가능케 한 '프로젝트 기획'과 'API 정의서'
  이번 프로젝트는 시작과 그 과정이 매끄러웠다.
  많은 이유가 있겠지만 가장 큰 역할은 '프로젝트 기획서'와 'API 정의서'가 했다.
  일잘러 팀원의 제안으로 구성할 페이지 별 API, 기능을 설명하는 프로젝트 기획서를 작성하고 서로 어떤 작업을 할지 공유했으며, API 정의서를 통해 프론트-백이 매번 묻지 않아도 기능별 API를 확인할 수 있었다.
• SCRUM의 진가
  매일 오전 팀 전원이 참여하는 Daily Standup Meeting은 15분 내로 간단한 인사와 함께 간략하게 '오늘의 할 일'과 'blocker'를 나누었다.
  blocker에 대해 이야기하면 팀원들이 서로 의견을 내고, 어려운 부분을 도와주거나 프로젝트 방향을 바꾸어 나갈 수 있어 프로젝트 일정을 지연시킬 수 있는 요소들을 사전에 방지할 수 있었다. 그리고 무엇보다 프로젝트에 임하면서 생기는 심리적 부담감과 스트레스를 덜어줄 수 있었다.
• 프로젝트 나무를 보는 눈
  아쉬운 점도 물론 있다. 프로젝트를 기획하는 과정에서 내가 하는 기능의 프론트 부분 뿐 아니라 백엔드와 어떻게 통신하고 연결해야하는지 등에 대한 전반적인 이해가 필요했는데 부족했다. 그 결과 잘못된 데이터 전달 형식의 코드를 멋지게 짰고, 거듭 수정해야했다.
  모르면 물어보고, 중간중간 더 자주 백엔드 개발자님과 소통해야겠다는 큰 깨달음을 얻었다.