[개발 진행] 상세페이지 속 이미지 슬라이드(배너) 구현(With Vue.js)

정말.... 자료 찾는데 힘들었다.ㅜㅜ

제이쿼리로는 이미지 배너 형태를 많이 배포하기도 하고 자료도 많아서 가져다 쓰면 되는 경우가 많았는데,

vue로 구현된 슬라이드는 정말 찾기가 힘들었다. vuetify를 사용하면 이쁘고 편하고 좋다는데, 이걸 나~중에 알게되었다..

다들 새로 프로젝트 만들기전에 뷰티파이를 추가하고 만드는 방법만 설명해주고, 이미 만들어논 프로젝트에는 적용하는방법은 안나와있어서 또 한참 헤매다 포기했다. 이쁜거 진짜 많던데ㅜㅜ 다음에 뷰를 사용하게된다면 그땐 꼭 써봐야겠다ㅜㅜ 많이 아쉽다.

 

 

여러개를 시도해보다가 잘 연결도 안되고 결과도 자꾸 에러가 나서 결국 이미지 배너를 만들어보기로 했다.

처음에 목표는 터치를 해서 넘기는 방식을 하고 싶었으나, 구현 시간을 생각해(혹시 모를 에러가 존재 할 수도,,,,,;;;)

화살표를 넣고 클릭시 해당 방향으로 이미지 이동을 하는 것으로 구현하기로 했다. 

자료찾는데 없어서 구글링말고 유튜브에 검색을 해보니 강의 형식으로 올려주신게 있어서 정말 큰 도움이 되었다.

 

2개정도 보고 2가지로 만들었는데 서버랑 통신을 해야해서 서버에서 가져오는 정보와 비슷한 구조인 2번째 배너를 적용했다.

 

<첫번째 강의>

https://www.youtube.com/watch?v=Q2nTdvMCGoc&t=1s

 

<두번째 강의_1>

- 영어로 강의하시는데 발음이 좀 뭉개져서 알아듣기는 힘들었으나 그래도 열심히 들으니 이해가 됐다. 

  영어가 부담스러워도 코드를 찬찬히 따라가면 금방 이해가 되는 강의인 것 같다.

https://www.youtube.com/watch?v=5B_3IOWCtZ4

 

<두번째 강의_2>

https://www.youtube.com/watch?v=NTgCK2-Q06w&t=1510s

 

---

<내 코드 구현>

https://github.com/anji314/Today_Project/tree/master/src/components/Detail_Service

 

- 첫번째 강의 코드 : banner2.vue

- 두번째 강의 코드 : banner.vue + banner_img.vue

[ 첫번째 강의 구현 ]

이렇게 구현을 했는데,  banner2코드는 vue공부하면서 저장한 저장소로 옮길 것 같다.

가장 간단하게 구현할 수 있는 코드 이미지 넘어가는데 아무런 animation효과가 없다. 그래도 충실한 기능을 한다.

모바일 웹으로 만들거라 화면 크기를 모바일로 바꾸었더니 마우스 포인터가 점이 되었다 ㅎㅎㅎ

 

 

[ 두번째 강의 구현 ]

banner.vue 파일은 강의랑 완전히 똑같은 구현은 아니다. 필요한거 구현하고 필요없는거는 뺐다.

화살표 아이콘은 어썸아이콘을 사용했고 인덱스버튼이랑 이미지 자동 넘김은 뺐다. 

내 화살표의 기능은 화면 전환인데 강의에서는 이동과 자동 넘김의 방향도 바꾸는걸로 해서 그부분도 구현을 안했고,

자동넘김은 좋은 것 같은데 이전/다음 로 넘기는 버튼을 누를때, 자동넘김 타이밍이 겹치면 원하는 순서의 사진을 보는게 상당히 불편했다. 이게 적용 될 페이지가 사용자가 추천장소 사진을 보는건데 사진을 보려다가 자꾸 넘어가면 불편함을 느껴서 팀원들과 얘기 후 자동넘김은 빼기로 했다.

 

서버에서 요청받는 데이터의 형태를 서버 개발 맡으신 팀원분이 구현 코드에 맞춰주셔서 서버랑 연결은 정말 편하게 했다. 그냥 데이터 받아서 data부분만 객체에 담으면 잘돌아간다 ㅎㅎㅎ