위코드 8주차 회고 - 2차 프로젝트 아워트립

프로젝트

 

• 주제 : 여행 예약 플랫폼 사이트 마이리얼트립을 모티브 한 아워트립
• 기간 : 2022/06/07 ~ 2022/06/16 (10일)
• 코드 : 깃허브 바로가기

 

프로젝트 팀

 

• 팀명 : 아워트립
• Front-end
  • 손가영 : Nav, Footer, 마이페이지, 상세페이지
  • 유하은 : 메인 페이지
  • 윤경연 : 항공편 리스트 페이지, 결제 페이지
  • 최현민 : 소셜 로그인 페이지, 로딩 페이지
• Back-end
  
  • 정병휘
  • 최바다

 

개발 도구 🛠

 

Front-end

• HTML5
• Styled-Component
• JavaScript(ES6)
• React.js
• react-router
• slick (library)

 

Back-end

• Python
• Django
• MySQL
• Bcrypt
• pyjwt
• RESTful

 

Collaboration Tools

• Git
• GitHub
• Slack
• Trello

 

---

 

프로젝트 시연 영상

 

 

---

 

구현 사항

 

소셜 로그인(카카오톡)

 

 

소셜 로그인의 경우 결과적으로는 쉬웠지만, 어떻게 해야 하는지 알기까지 과정이 어려웠기 때문에 따로 정리를 했었다.

구현 방법 : https://hymndev.tistory.com/72

[React] 카카오 소셜 로그인 구현하기

 

소셜 로그인을 구현하면서 아쉬웠던 점은 Redirect URI로 이동하면서 인가 코드를 받게 되는데, 인가 코드를 백엔드에게 전달하여 아워트립의 자체 토큰을 얻고 나서야 main화면으로 navigate 하도록 설정했다. 이 과정에서 사용자에게 Redirect URI를 짧은 시간 동안 비치는데 상당히 거슬렸다. 사용자에게 Redirect URI를 보이지 않게 할 방법을 추가로 알아볼 예정이다.

 

로딩 화면

 

 

로딩 화면을 구현하는 방식에 고민이 굉장히 많았다. 로딩 화면을 컴포넌트로 만들어서 항공권 리스트 페이지에서 삼항 연산자를 사용해서 데이터가 다 들어오기 이전이면 로딩 화면을, 재 렌더링 하면서 데이터가 다 들어오면 항공권 리스트를 띄우려 했었다. 하지만 이렇게 진행하면 로딩 페이지는 1초도 안돼서 사라질 것이 분명했다. 이 방법이 로딩 페이지의 정석이라고 생각했지만 로딩 페이지를 조금 더 보여주고 싶었다. 마이리얼트립 사이트 또한 로딩 시간이 굉장히 길었는데 멘토가 강제로 로딩 화면을 오래 띄우는 게 아니라면 미국에서 API를 받아오지 않는 이상 이렇게 오래 걸릴 수 없다고 했다. 

 

그래서 로딩 페이지 자체를 만들고 메인에서 항공권을 검색하면 쿼리 파라미터와 함께 로딩 페이지로 이동하고, 로딩 페이지에서는 setTimeout() 함수를 사용해서 4초간 사용자에게 화면을 보여준 후, 항공권 리스트 페이지로 이동하도록 구현했다.

 

---

 

1차에 비해 개선된 점

 

 

1차 프로젝트에 비해서 무엇이 나아졌을까? 지난 회고 때를 참고해서 순서대로 이야기하자면 아래와 같다.

1. 소셜 로그인 기능 구현에 욕심이 나서 도전할 기회가 없었다.
2. styled-component를 사용했기에 신경 쓰지 않아도 됐었다.
3. 무엇을 사용하더라도 자세히 알고 있는 것이 중요하다는 점을 이번 프로젝트를 통해서 깨달았다.
4. 이번 프로젝트에서 트렐로에 회의 로그를 직접 작성해서 백엔드 내용에 귀를 기울였다.
5. 기능별로 신경 써서 브랜치를 생성하고 Push 했다.

 

결과적으로는 1차 프로젝트 때 아쉬웠던 점 대부분을 해결했다. 2주 만에 저번 프로젝트보다 조금 더 나아진 나를 확인할 수 있었다.

---

 

프로젝트 후기

 

힘들었던 점 하나를 뽑자면 git rebase가 아닐까 싶다. 이번 2차 프로젝트는 merge사용이 금지여서 rebase를 사용했는데, 동료에게 도움을 주다가, 동료 코드가 다 날아가 버렸다는 점이다. 처음에는 동료가 커밋을 제대로 남기지 않아서 날아간 줄 알았다. 동료가 밤을 새워서 코드를 하나하나 다시 작성해서 복구했고, 다음날 rebase를 다시 진행하는데 또 날아갔다. 내가 rebase를 제대로 알지 못하고 사용해서 생긴 문제를 직감하고, 멘토님에게 도움을 구해서 복구해서 강의까지 받았다. 나 때문에 밤을 새운 동료에게 미안하고, 긍정적으로 복구까지 해서 고마울 뿐이다. 이번 일을 통해서 도움을 줄 때는 무엇을 알더라도 제대로 공부하고 한 번 더 확인하고 도움을 주자고 다짐했다.

 

그리고 이번 2차 프로젝트를 진행하면서 팀 분위기가 얼마나 중요한지 깨달았다. 이전까지만 하더라도 혼자서 묵묵히 자신의 할 일을 하는 것이 중요하다고 생각했지만, 정말 좋은 분위기 속에서 프로젝트를 진행하니 장점이 상당히 많았다. 분위기가 밝으니 매사에 긍정적으로 대응하게 됐고, 막히는 부분이 있으면 스스럼없이 쉽게 질문하고 공유할 수 있었다. 무엇보다도 개발을 하면서 스트레스를 받지 않을 수 있었고, 개발에 더욱 재미를 붙일 수 있었다는 것이다.

 

이렇게 위코드에서 마지막 프로젝트를 정말 좋은 사람들과 진행해서 너무 다행이었다. 10일간 진행한 프로젝트였지만, 완성도도 꽤 있었고, 서로의 코드를 리뷰하면서 모르고 지나갔던 사실도 친절히 알려주는 동료들과 함께해서 좋았다. 마지막 1개월은 각자 선정된 기업에서 프로젝트를 진행하게 되는데, 다들 좋은 곳에서 많은 내용을 배워서 성공적인 개발자의 길을 걸었으면 하는 바람이다.