🛫 OURTRIP

🌴 프로젝트 소개

Myrealtrip을 참조하여 Ourtrip이라는 항공권 예매 웹사이트를 구현하였다.

1. 팀원소개

Front-end

손가영, 윤경연, 유하은, 최현민

Back-end

정병휘, 최바다

2. 프로젝트 기간

🕒 2022.06.07 ~ 2022.06.17

3. 사용 기술 스택

Front-end

• JavaScript(ES6)
• HTML, CSS
• SCSS
• ReactJS
• React-Router
• Styled compoent

Back-end

• Phython
• Django Web Framework
• Token: Bcrypt, JWT
• Database: MySQL

Tools

• Git, Github
• Trello
• Slack
  

4. 주요 구현 기능

메인 페이지

• 항공권으로 메인 페이지 구성
• 이벤트 배너, 추천 상품 정적으로 구현

---

회원가입

• OAuth 방식 소셜 로그인
• JavaScript SDK, Redirect

---

항공권 기능 구현

• 편도 항공권, 국내 여행

• 여행 카드 컴포넌트 생성

• 날짜 및 승객 필터링 구현

• 대기(로딩) 화면 구현

• 예약 화면 및 기능 구현

---

마이페이지 기능 구현

• 마이페이지 화면 및 기능구현
• 상세페이지 화면 및 기능구현

---

📕 나의 역할

- Nav

ourtrip의 네비게이션 바는 기타 네비게이션 바와 달리 드롭다운 서브 카테고리가 존재하지 않고, 메인 카테고리만 있기 때문에 비교적 로직이 단순 하다고 생각했다.

하지만 네비게이션 바가 메인페이지 외의 다른 페이지에서는 다른 스타일링이 적용되어있어서 어떤 동적으로 스타일링의 변화를 주기 위해 어떤 방법이 있을까 고민했던 기억이 있다.

첫번째 방법은 원시적인 방법으로 하나하나에 nav 컴포넌트를 적용해 주는 방법이었는데, 이는 상당히 비효율적인 방법이었기 때문에 최후의 수단으로 보류했다.

두번째 방법은 중첩라우팅의 사용이다. 라우터를 두개를 생성하고 스타일링이 변화하는 메인페이지만 다른 라우터에 다른 스타일링의 nav를 적용하여 보여주는 방법이다.
하지만 이 방법 한 nav컴포넌트를 두개 만들고 라우터를 또 각각 만들어서 연결해주는 방법이기때문에 첫번째의 방식보다는 덜하지만 다소 효율이 없다고 판단했다.

마지막 방법은 useLocation을 사용하여 pathname이 원하는 경로와 같을 때 (===)
"변화하는 스타일"만 조건을 주고 '/' (메인경로)와 이 경로가 아닐 때 active하게 스타일이 바뀌도록 하는 방법이 있다. 결국 배운 Styled component를 활용하면서도 효율을 극대화한 이 방법으로 동적인 nav바를 구현하였다.

네브바의 검색 input이 포커스 되었을 때 placeholder가 사라지지 않는 문제가 발생했는데

 :focus::-webkit-input-placeholder {
    color: transparent;
  }
  :focus:-moz-placeholder {
    color: transparent;
  }
  :focus::-moz-placeholder {
    color: transparent;
  }

이런식으로 Styled 컴포넌트가 적용된 부분에 넣어줬더니 간단하게 해결되었다.

마지막으로 로그인 토큰의 유무에 따라서 nav 오른쪽 상단의 메뉴가
파트너등록 - 로그인 - 회원가입 에서 >>> 내여행 - 로그아웃 - 메세지 - 알림 으로 변화하도록 로직을 만들어 주었다.

방법은 localStorage에 'token'으로 정의된 사용자의 토큰을 토대로 유/무에 따라서
어떤 텍스트를 보여줄 것인지 지정해주었고, 로그아웃이 될 경우에는 메인페이지로 이동 할 수 있게 로직을 구성했다.

.env 파일을 생성하여 테스트해보았디.

env파일이란?

웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다.

env 파일은 프로젝트의 최상위 루트에 파일을 만드는데,
외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다.

- Footer

ourtrip의 footer는 비교적 단순하고, 반복되는 카테고리가 오른쪽 부분에 있어서 간단히 상수데이터로 만들어 map함수를 적용했다. footer를 만들면서 Styled-component 연습이 되었던 것 같다.

- 마이페이지

앞에서 항공권을 예매하면 바로 마이페이지로 연결해 예정된 여행으로 보여줄 수 있도록 하였으며, 지난여행과 취소된 여행은 무엇이 있는 지 구현하였다.

오른쪽에 있는 세가지의 카테고리는 useState에 저장해서 onClick 했을 때 어떤 컴포넌트를 보여줄 것인지 적용했다.

<리팩토링 전>

{mycategory === 1 && <ReservationCard />}
{mycategory === 2 && <PrvTripCard />}
{mycategory === 3 && <CancelTrip />}

처음 로직은 단순히 mycatergory라는 useState의 값에 따라 어떻게 보여줄 것인지 펼쳐서 나열하는 방식으로 코드를 짰는데, 이 방식은 데이터가 많아질 수록 비효율적인 코드이며 유지보수가 어려워 질 우려가 있기때문에 다음과 같은 방식으로 선언 해 호출하는 방식으로 코드를 변경했다.

<리팩토링 후>

- 예약상세페이지

예약 상세페이지에서 useParams라는 함수를 사용하였다. 처음엔 접근방법을 몰라서 막막했지만 조언을 구해보니 useParams가 id값을 가져와 엔드포인트 뒤에 붙여주면 간단하게 해결될 문제였다. 그래서 백엔드와 엔드포인트를 reservations로 맞추고 뒤에는 아이디 값 (숫자 형식)을 붙여서 사용자에 따라, 여행에 따라 다른 예약 상세페이지가 보여질 수 있도록 구현하였다.

📘 마주한 문제

git에서 지저분한 commit을 정리하고 마지막과정에서 conflict를 최소화 하기위한 방법으로 git rebase -i master(main) rebase을 사용했는데 rebase과정에서 commit을 잘못 남겼던 탓인지 이전의 코드가 삭제되는 불상사를 경험했다.
처음엔 당황했지만 git reflog로 이력을 조회하고 git reset hard --이전커밋
으로 이전에 커밋으로 돌아가서 복구하는 방식으로 문제를 해결했다.

📙 프로젝트를 마치며

정말 운 좋게 에너지가 넘치는 팀원들을 만나서 행복하게 프로젝트를 진행할 수 있었다. 가장 기억이 남았던 게 트렐로에 팀원들과 프로젝트를 하면서 만들었던 선서문이다.

선언문 덕인지 서로 격려하며 어려울 때는 또 위로해주며 2주라는 시간을 보냈다.
모르면 모르겠다고 솔직하게 말하기로 약속했기 때문에 정말 사소한 문제 부터 골치아픈 문제까지 같이 고민하면서 프로젝트 기간을 보냈다.

팀원이 또,,,(앞에 언급했던 것 처럼) rebase를 하다가 2번이나 파일을 날려버렸던 적이 있었는데, "웃으면서 그냥 날새지뭐~ 하면되지" 했던 그 모습이 정말 인상깊었다.심지어 날을 새면서 다 복구해서 팀프로젝트에 전혀 차질없이, 오히려 더 매끄럽게 진행될 수 있도록 해낸 것이다. 어떻게 저렇게 단단한 멘탈을 가질 수 있지? 내 상황이었다면 어떻게 대응했을까? 정말 신선한 충격이었다. 덕분에 마음가짐을 정비 할 수 있었다.
앞으로 더 긍정적인 마인드로, 좋은 코드로 개발해야지 !! 고마워요 경연님 ♡

ㅠㅠ 너무 정이 들어 버려서 2주라는 시간이 체감 3일로 느껴졌다. 이번 주말이 지나면 팀원들을 못보니까 너무너무 아쉽다... 꼭 또 만나서 프로젝트 같이 합시다!!! ILOVEYOU(●ˇ∀ˇ●)(❁´◡`❁)