[Vue.js 프로젝트] 중고거래 플랫폼 만들기

#1. 프로젝트 소개

- 중고거래 플랫폼 사과마켓

- vue.js 공부 후, 해당 기술을 적용해보고자 만들었습니다.

 

#2. 구현기능

1. 로그인

2. 게시글 CRUD 구현

3. 좋아요 기능 구현

    - 좋아요 클릭시 게시글에 카운팅되기

    - 마이페이지 > 위시리스트에 좋아요한 게시글 저장하기

4. 게시물 검색 및 최근 검색어 기능 구현

5. 마이페이지 > 유저 닉네임 및 프로필 사진 변경 및 저장

6. vuex 사용하여 전역으로 함수 관리하기

7. localStroage를 사용하여 유저 및 게시글 정보 저장하기

    - localStorage에 저장하기 어려운 사진첨부의 경우,createObjectURL을 사용하여 구현 

 

1. 로그인

• 로그인 시 setItem을 사용하여, 'userInfo'를 localStroage에 저장하도록 작업했습니다.
  • localStroage에 data를 저장할 경우, json형태에 맞는 데이터 변환이 필요합니다. JSON.stringify() 키워드를 사용하여 해당 사항을 해결했습니다.
• v-if 를 활용하여 'userInfo'라는 데이터가 null일때만 login 컴포넌트를 노출하고, 나머지의 경우 router-view를 노출하도록 작업해두었습니다.

 

 

2. 게시글 작성하기

게시글

• 작성완료시 작성 글의 모든 값을 object 형태로 생성한 뒤, 전체 상품 리스트인'productListData' 에 unShift 하여 추가했니다.
• 추후 뷰 페이지, 삭제 등의 기능 구현을 위해, 각 게시글 마다 식별가능한 id를 부여했습니다.
  • 배열의 가장 첫번째 글의 글번호에 +1을 하는 방식으로 제작했습니다.

첨부 이미지

• 이미지는 createObjectURL()을 사용해 input에서 받아온 Object.entries()의 value값을 임시 url로 치환한 후, 'imgUrlArray' 배열에 저장해 두었습니다.’
• v-if문을 활용해 첨부한 이미지가 있을 경우, 현재 첨부한 갯수를 카운팅한도록 작업했습니다.
• 이미지 삭제는 splice()를 사용해 선택된 이미지의 index를 ‘imgUrlArray’에서 잘라 주었습니다.

 

 

3. 게시글 뷰페이지

뷰페이지 데이터

• path: "/view/:id"의 형태로, router에 현재 상품게시글의 id를 param을 추가하여 상품별 뷰 페이지를 분리했습니다.
  • .find() 를 사용하여, ‘productListData’에 param의 id와 product의 id가 같은 것은 데이터만 뷰페이지에 전달되도록 작업해 두었습니다.

좋아요

• 하트버튼 클릭시, ‘userInfo’에 자신이 좋아요한 게시글의 id를 배열형태로 저장했습니다.
• 좋아요 갯수 : filter()를 사용하여 ‘productListData’ param의 id와 product의 id가 같은 상품을 가져오고, findIndx를 사용하여, 추출된 데이터의 index를 알아냈습니다. 그 이후 splice 를 사용하여 해당 인덱스의 ‘likeCnt’(좋아요갯수) 데이터를 증감시켰습니다.

 

 

4. 게시글 수정하기

• 작성한 페이지와 같은 페이지를 사용하나, router의 param을 사용하여 분기 처리 해두었습니다.
  • /write/:id? 의 형태로 param을 추가하여, param의 유무에따라 작성하기/ 수정하기 페이지로 나뉘어집니다.
  • 수정시의 데이터는 router param의 id와 filter()를 사용해, 'productListData'중 id가 param의 id와 같은것을 추출하여, 바인딩 했습니다.

 

5. 게시글 삭제하기

• filter() 를 사용하여, 현재 페이지 param id 를 제외한 newProductListData를 만들었습니다. 그리고 localStorage에 해당 data를 삽입했습니다
• 글 삭제시, ‘userInfo.liked’(유저가 좋아요 누른 상품의 id 배열)를 삭제 하지 않은 경우, 원치 않은 값이 관심상품에 들어가는 오류가 발생했습니다. 이를 해결하고자, 글 삭제시, wishArrary에 있는 해당 id데이터도 삭제 시키는 코드를 추가했습니다.

 

 

6. 관심상품 & 내가쓴글

• 관심상품 페이지는 .filter()와 .inclueds() 메서드를 사용하여, productListData중 좋아요한 게시글의 id 를 가지고 있는 데이터만 추출하여 출력해주었습니다.
• 최신글도 .filter()와 .inclueds() 메서드를 사용하여, productListData중 작성자의 id가 지금 user의 id와 일치하는 데이터만 추출하여 출력해 주었습니다.

 

 

7. 정보수정

• localStorag에 저장된 유저정보를 새로운 정보로 삽입하는 방법으로 진행했습니다
  • 유저 이미지의 경우, input에서 받아온 Object.entries() 의 value값을 받아와 *createObjectURL()*을 사용하여 임시 url을 생성한 후, 이미지를 변경했습니다.

 

 

8. 검색 & 최근검색어

검색

• .fiter() 와 .includes() 메서드를 사용하여, 검색 input 의 e.target.value가 productListData의 제목과 내용에 일치하는 데이터만 필터링하여 출력했습니다.

 

최근검색어 

• 한번 검색된 검색어는 localStorage에 저장하여, 최근 검색어가 리스트가 노출되도록 작업했니다.
• 각 최근 검색어 버튼은 클릭시, 검색 인풋의 value에 최근검색어 버튼의 value를 삽입하고, 바로 검색이 가능하도록 이벤트를 넣어두었습니다.

 

---

 

💡 성과 및 배운점

• 데이터 저장 및 조작하기
  • LocalStorage를 사용하여 저장이 필요한 회원 정보, 상품정보 등을 저장했다.
  • filter(), find(), includes(), splice(), 등의 매서드를 사용하여, 저장된 데이터를 용도에 맞게 추출할 수 있었다.
  • 이미지의 경우, createObjectURL을 사용하여 저장하였는데, 임시이미지를 생성한 것이라 캐시를 날리면 없어진다. 서버의 중요성을 실감했다.
• vuex를 사용하여 공통 데이터 효율적으로 관리하기
  • 공통으로 사용하는 데이터의 경우(상품데이터, 유저정보 데이터등..) 각각의 페이지에서 따로 관리시, 데이터의 일관성을 유지하기 어려웠다. 이러한 어려움을 해결하기 위해 vuex를 적용했고, 관리를 조금 더 수월할게 할 수 있었다.
• SCSS를 사용하여 스타일 작업을 더 빠르게
  • style파일을들 용도별로 구분하여 관리했는데, 체계적인 컴포넌트 관리가 가능했다.
  • 하지만 프로젝트 규모가 커지면 파일 생성시 네이밍에 대한 고찰이 필요할 것 같다.

 

• 리팩토링의 중요성
  • 완성되었다 생각하고 테스트를 해보니, 문제들이 발생했다. 꾸준히 테스트를 하며 버그를 해결하는것이 완벽한 프로그램을 만는것임을 깨달았다.
  • 현재는 백엔드 개발자들과 함께 프로젝트를 디벨롭 하고 있다. 스프링부트를 이용하여 만들어진 서버를 연결하는 작업을 진행중이다. https://github.com/yoosooyoung/apple