The나들이 프로젝트

마지막으로 글을쓴게 2월2일인데 마무리하고 정리하고 올리려니까 벌써 21일이 되버렸다.. 

원래는 중간중간 진행상황같은걸 정리해서 올려보고싶었는데 프로젝트를 진행하는데만 힘을너무쏟아서 블로그쪽은 생각도 안하고있었다.. 멀티가 이렇게나 안되다니.. 

프로젝트 끝난것도 저번주 월요일인데 프로젝트 끝나고 일요일에 정처기 필기시험이있어서 공부하느라 또 정리를 못하고 결국 22일이 되어버렸다.

 

그래도 어떤방법으로 만들었고 어떤걸 만들고싶었었는지 다시한번 정리해놔야 나중에 어떻게만들었는지

기억이 날것같아서 정리를 해볼려고한다.

 

 

프로젝트이름

The나들이

(떠나자 나들이 라는 의미로 만들었다)

 

기능

설정되있는 여행지 중에서 사용자가 선택하고 추천해주는 여행지중에서 여행 경로를 확인하고 관련한  정보를 얻을수있는 사이트

 

사용한라이브러리

@react-google-maps/api   구글지도기능을 이용하기위해 설치

redux-devtools/extension   redux상태를 파악할수있는 미들웨어 

html2/canvas                     화면을 캡쳐할수있게 해주는 라이브러리

antd                                    만들어진 스타일을 이용할수있는 라이브러리

node-sass                          scss를 이용해서 스타일을 적용하기위해 사용

axios                                   get,post요청을 하기위해서 사용.

react-cookie                        로그인 정보를 쿠키로 저장하기위해서 사용.

react-datepicker                  캘린더를 만들어주는 라이브러리

react-router-dom                라우터로 컴포넌트를 마운트시키는 라이브러리

react-redux                          리덕스로 상태값을 관리하는 라이브러리

react-icons                           아이콘을 만드는 라이브러리

styled-components             스타일이 적용된 컴포넌트를 만들어주는 라이브러리

 

필요할때마다 하나씩 설치를 하다보니 꽤 많은 라이브러리를 사용하게 됐다.. 점점 용량이 커지고 npm install 할때 걸리는 시간이 늘어나는게 이게 성능적으로 문제가 없나 싶었다.

꼭 필요한 라이브러리만 설치해서 사용하는게 좋은것같다.

(scss랑 styled-components 같이쓴건 좀 오바였지 싶다..)

 

데이터베이스

City 테이블 :각 나라별 위치좌표,이름,구글맵스에서 사용할 확대값 ,관련 블로그포스팅주소 , 월별 여행관련정보

SpotPlace 테이블: 나라의 추천관광지 이름,좌표,추천관광시간,이미지주소,추천경로순서

member 테이블: 회원가입관련자료: 유저코드,닉네임,비밀번호(암호화),이름,이메일

 

구현된 화면

팀원이 4명이고 다들 해외에서 살다오거나 연수경험이 있어서 각자 자기 지역을 담당해서

4개의 추천여행지를 만들었다

(캐나다,하얼빈,싱가포르:이건내가함!,제주도)

 

1200px 과 768px 에 반응형 디자인을 만들었다.

 

이제 실질적인 기능들이 모두 들어있는 일정만들기 페이지로 들어가보면.

기능이 좀 많은데 현재시간으로 제주도 날씨를 알려주고 (wheatherOnAPI를 이용했다)

달력으로 여행을할 기간을 찍으면 그 기간에 해당하는 여행팁을 알려준다.

오른쪽이 우리가 만들어놓은 추천 여행지인데 +를 눌러서 하나씩 일정을 추가시키면

오른쪽에서는 빠지고 왼쪽에 장소 추가되고 지도위에 마커가뜨고 마커들끼리 선으로 이어져서 동선을 쉽게 확인할수있다. (googlemapsAPI Marker , polyline 이용)

 

오른쪽 추천장소에 마우스를 올리면 해당장소로 지도의 포커스가 옮겨진다

(googlemaps 의 panTo기능을 이용)

아래 여행팁에 가려져있는 부분에 가고싶은 장소를 검색하면 해당장소로 포커스가 옮겨진다.

(구글지도의 자동완성기능사용 autocomplete)

 

지도위의 옵션버튼

 

여행기를 클릭하면 여행기블로그 포스팅이 연결된 팝업을 띄워준다.

<iframe> 태그를 이용해서 블로그 포스팅이있는 주소를 연결해서 보여줌

 

추천일정을 클릭하면 우리가 설정한 추천여행지와 추천코스 순서대로 보여준다

 

추천장소의 이미지가 슬라이더로 자동으로 넘어가고 아래 태그로 추천일정을 하나씩 선택하거나 모두선택버튼으로 모두선택할수있다. 선택하면 왼쪽에 장소가추가되고 지도에 마커와 경로가 그려진다.

장소들의 순서는 가장 좋다고생각하는 동선으로 순서를 정해서 하루정도에 돌아볼수있는 코스로 짜봤다.

 

 이제 일정을 모두 정하고 나면 일정생성버튼을 클릭하면 만든 경로의 이미지를 캡쳐해서 저장해준다.

 

기능들을 만들면서 좀 힘들었던 점이 많았는데 구글맵스 API가 자바스크립트로 사용하는 예시들은 인터넷에 많이 있는데 리액트라이브러리로 만드는 방법들은 예시가 많이 없어서 공식문서를 보고 여러가지 방법을 시도해서 만들었다. 사용된 예시가 많이 없어서 참고할만한게 별로없어서 힘들었다.

 

그리고 이미지를 주소에서 받아오다보니 이미지를 제대로 못받아와서 엑스박스가 뜨는경우가 있었다. 이런 문제를 처음봐서 당황했는데 이미지 태그에 옵션을 추가해주는걸로 해결할수있었다.

<img src={img} referrerpolicy="no-referrer" />

 

 

이미지를 캡쳐하는 라이브러리인  html2canvas도 처음사용해보는거라 어려웠는데 구글mapsAPI를 사용하니까  계속  CORS에러가 나서 이것도 열심히 구글링해서 구문한줄 추가해주니까 해결되었다.

html2canvas(document.getElementsByClassName('App')[0],{ useCORS: true }).then(canvas=>{
           onSaveAs(canvas.toDataURL('image/png'),'image-download.png')
})

 

 

 

페이지가많거나 내용이 많은 페이지는 아니었지만 기능적으로 새로운 api를 사용해보고 새로운걸 알아가면서 해야해서 시간이 좀 많이 걸렸던것같다.

API 관련한 부분은 선생님께 물어볼수도없어서 팀원들끼리 정말 열심히 찾아가면서 했던것같다. redux도 처음에 만들었던 reducer에서  2번정도는 구조를 바꾼것같다.

만들다보니 계속 막히는 부분이 생겨서 처음부터 제대로 다 구상을 해놓고 시작하면 이렇게 안해도될텐데 라는 생각을 계속했던것같다.. 사실 다 구상해놓고 만들수도 없지만..ㅠ 

 

4명이서 만들다보니 깃허브로 처음협업을해봤는데 종종 충돌이 생기고 머지가 안되는 상황이 종종 있었는데. 

이것도 찾아보면서 해결하다보니 확실히 팀으로 해보길 잘했다는 생각이 들었고 깃허브가 진짜 협업에 좋고 정신에 조금 해롭다는 걸 배웠다..

 

이제 개인프로젝트를 해야되는데 이번경험으로 리액트로 프로젝트만드는법에 조금 익숙해진것같아서 개인프로젝트는 조금 더 쉽게 할수있을것같은 생각이든다.