Vue로 웹 사이트 만들기!

애플코딩 짱짱

애플코딩 완강 후 vue로 개인 프로젝트를 진행하였다. 배울땐 쉬웠는데 막상 직접 해보려고 하니 막히는 경우가 많아서 애먹었다... 그래도 한달 공부하고 결과물을 만들어 낸 것에 대해 만족한다!!! 그리고 공부한 걸 직접 활용해서 프로젝트를 진행해보니 내가 놓쳐던 부분이나 애매하게 알게 된 내용들을 알수 있어서 좋았따!!! 다음 미니 프로젝트를 기약하며 !!!

Art_Shop_ground_vue

데모 사이트

https://art-ground-shop-github-io.vercel.app/

윈도우는 깨지는... 맥용으로 만들었음...

프로젝트 목표

• Vue에 쓰여지는 다양한 메서드와 더미 api를 활용하여 데이터 바인딩을 하고 vue에 대한 전반적인 지식을 습득하기 위한 연습용 프로젝트 입니다.

프로젝트 내용

• 미술 작품을 쇼핑하고 본인이 좋아하는 예술 작품을 다이어리에 공유하는 간단한 웹 사이트 입니다.

사용 스택

• Vue, axios, bootstrap, vue-router, css, vuex

기능 구현 및 시연 영상

shop page shop page 전체

정렬 기능

api 호출(더보기 기능)

상세페이지(유효성 검사)

---

diary page diary page 전체

이미지 업로드 및 글 발행 기능

좋아요 기능

마무리...

이번 개인 프젝을 통해 뷰에 대한 전반적인 학습을 할 수 있어서 좋았다!!! 뭔가 뿌듯하다!!! 하지만 아쉬운 점이 한두가지가 아니다. 이번 프로젝트를 통해 아쉬운 점에 대해 적어 보려고 한다.

기능적인 측면

1. 검색기능이 없어서 아쉽다.
   • 검색기능을 도전 하다 잠시 보류하다 결국 검색기능을 놓쳤다... 이부분은 좀 더 공부하고 보완 해야 될 것 같다. 좀만 생각하면 충분히 해결 할 수 있을 것 같다.
2. 좋아요 기능
   • 좋아요 기능을 구현 하였지만 좋아요 버튼을 누를때 다른 좋아요 데이터도 클릭이 되는 현상이 나타난다... 이 것 또한 해결 해야 할 숙제 중 하나다. 애초에 store에서 데이터를 관리해서 시작했으면 꼬일 일이 없을 것 같다. 처음에 그냥 더미 데이터를 만들어서 시작해서 애매했다.. 분명 다른 방법이 있을 것 같다.
3. 글 수정 및 삭제 기능
   • 글 쓰기는 가능 하지만 수정 및 삭제 기능이 없는게 아쉽다. 리엑트랑 비슷해서 충분히 할 수 있는 숙제 인 것 같다. 나중에 여유 있을 때 다시 도전 해보자!!!

코드적인 측면

더보기 기능에서 api 호출 할 때 이게 맞을까? 하는 의구심이 들 정도이다. 시간적인 측면에서도 그렇고 콜백지옥을 연상케 하는 코드 이다. 분명 리펙토링이 필요하고 좀 더 간결하고 효율적으로 코드를 작성 할 방법이 있을 것 같다.. 좀 더 생각해보고 연구해보자.

 methods: {
         more(){
            axios.get('https://run.mocky.io/v3/b5a2228a-deaf-405f-af77-85b4a955b6d9%27')
             .then((a)=>{
                 // console.log(a)
                 // console.log(a.data)
                 this.artData.push(a.data)
                 axios.get('https://run.mocky.io/v3/c1d882fc-08e4-46e9-acf4-a3ae2e14636a%27')
                 .then((b)=>{
                     // console.log(b)
                     this.artData.push(b.data)
                     axios.get('https://run.mocky.io/v3/2834c58c-0530-4a8e-8762-dd330745db8c%27')
                     .then((c)=>{
                         this.artData.push(c.data)
                     }).catch((err)=>{
                         console.log(err)
                     })
                 })
             })
         },

마무리

전반적으로 많이 부족하고 고쳐야 할 점이 한 두가지가 아니지만 한 달 동안 공부해서 이정도로 만들수 있는 것에 대해 자신감을 얻게 된 계기가 되었고 부족한 부분은 좀 더 공부해서 보완하는 방향으로 가야 할 것 같다. 코딩 공부 너무 재밌다!!! 끝@!