[ SSAFY 7기 ] 1학기 파이널 프로젝트 Happy House

main 페이지

 

 

싸피 1학기의 파이널 프로젝트로 진행한 Happy House 프로젝트이다.

1학기 내내 Happy House를 완성하기 위한 관통 프로젝트를 진행하는데 마지막 파이널 프로젝트에선 새롭게 배운 Vue를 적용했기 때문에 프론트는 거의 새롭게 갈아 엎었다고 봐도 무방했다.

 

이 글은 Vue로 프론트를 제작하며 신경 썼던 부분을 회고하하는 글이다.

 

UI

vue 템플릿으로 검색해서 찾은 Vue Soft UI Dashboard를 사용해 전체 UI 틀을 제작 했다.

https://demos.creative-tim.com/vue-soft-ui-dashboard/#/dashboard

Vue Soft UI Dashboard by Creative Tim

그런데 너무 관리자 페이지 느낌이 나서 Dashboard는 하나도 사용하지 않게 되었고 로그인, 회원가입 페이지 두개만 사용하고 그 페이지와 비슷하게 UI를 만들었다.

 

 

이 템플릿은 Vue3로 제작되었다. 따라서 수업시간에 배웠던 2버전으로 변경해야 했다.

사실 3그대로 썼으면 좋았었을법 했지만 혼자 하는 플젝이 아니라서 수업에서 배웠던 버전으로 맞추는게 혼란이 없을 것 같아서 변경했다.

Vue 3의 사용에 대해 검색 해 봤을 때 아직까지는 Vue3가 주류인 느낌이 아니라서 3의 달라진 부분은 추후 학습해도 괜찮을 것 같았다.

 

다음은 3로 작성된 템플릿을 2에서 사용하기 위해 변경해줬던 부분들이다.

 

Vue 2와 3는 뷰 인스턴스를 생성하는 방법이 다르다.

뷰 인스턴스 생성 : vue3(왼쪽) , vue2(오른쪽)

vue2 는 Vue 를 바로 사용해서 뷰 인스턴스를 생성하는 반면 Vue 3에서는 createApp 함수를 임포트 받아서 생성한다.

 

Vue 3와 2의 또다른 차이점은 라이프 사이클 훅이다.

라이프 싸이클 훅 : vue3(왼쪽) , vue2(오른쪽)

create,mount,update는 동일한데 destroy가 unmount로 변경 되었다.

이것 때문에 오류 수정하는데 한참 걸렸다.

컴포넌트를 사용하지 않게 될 때 마다 실행되는 기능이 있었는데 자꾸 vue2로 변경한 버전에서 해당 기능이 실행되지 않았다.

코드를 계속 보면서 beforeUnmounte() 훅을 사용하는걸 봤는데도 '당연히 Unmounte도 있겠지' 하고 다른데서 문제를 찾고 있었다.

그러다 생각해보니 vue2에선 분명 컴포넌트가 삭제될때 destroy를 사용했는데..? 하고 다시 보니 vue2에서는 없는 beforeUnmount 훅을 사용하고 있었다.

vue 3에선 beforeDestroy대신 beforeUnmount를 사용한다.

이 부분을 beforeDestroy로 변경해주니 동작이 잘 되었다..

 

vue2 버전에서 사용하지 않는 라이프싸이클 훅을 작성해도 코드의 오류가 없었기 때문에 한참을 헤맸다ㅜㅜ 

 

 

신경쓴 부분 

컴포넌트 재사용 

자주 사용하는 컴포넌트는 웬만하면 재사용 가능하도록 만드려고 노력했다.

 

좋아요 기능을 하는 좋아요 버튼이 그 중 하나이다.

버튼을 누르면 좋아요 리스트에 추가 되고 버튼의 하트가 채워진다.

좋아요 상태의 버튼을 한번 더 누르면 좋아요 리스트에서 삭제가 되고 하트 색도 다시 흰색이 된다.

 

이 좋아요 버튼을 여러 페이지에서 사용하기 때문에 재사용이 가능하도록 만들었다.

LikeButton 컴포넌트를 만들어서 필요한 곳에서 임포트 해서 사용하였다.

좋아요 된 상태, 크기를 props로 전달해주면 된다.

버튼을 클릭 하면 버튼 클릭 이벤트를 발생시키고 이벤트를 처리할 곳에서 해당 동작을 처리 했다.

 

현재 아이템이 좋아요 리스트에 있는지 없는지는 db에 저장되어 있고 해당 아이템을 db에서 조회해서 좋아요 된 상태인지 아닌지를 판단한다.

 

좋아요를 누르거나 해제할 때도 서버에 요청하여 db에 추가,삭제한다.

 

상태 여부만 체크해서 컴포넌트에 전달해주면 되니 편리했다.

 

좋아요 리스트 페이지에서는 좋아요 한 아파트와 좋아요 한 사용자 등록 매물을 확인 할 수 있다.

이것도 목록을 보여주는 list컴포넌트 하나에서 보고싶은 메뉴에 따라 내용만 달라지도록 구현하였다.

vuex에 현재 보고있는 카테고리 state를 저장해두고 카테고리 버튼을 누르면  카테고리 state를 변경한다.

list컴포넌트에서는 카테고리 state에 맞게 리스트 내용을 보여준다.

 

list 는 listItem들로 구성되어 있는데, 이 listItem들도 현재 카테고리 state에 따라서 아파트 이름을 보여줄지, 사용자 등록 매물의 정보를 보여줄지를 다르게 해서 하나의 컴포넌트를 계속 사용하게 하였다.

list에서 listItem 으로 카테고리를 전달하는데.. 지금 보니 vuex에 카테고리가 state로 저장 되어 있어서 굳이 props로 보내지 않아도 됐다.

 

새로고침 없이 부분 렌더링 하기 

기능 하나 실행 할 때 마다 변경내용을 반영하기 위해 새로고침 되는걸 매우 안좋아한다. 웬만하면 SPA의 부분 렌더링 특징을 살려 프론트를 구현하고자 했다.

좋아요를 취소하면 리스트에서 삭제되고 다시 좋아요를 누르면 리스트에 추가 되어야 하는데

좋아요 버튼을 누를 때 마다 새로고침이 된다면 현재 내가 설정해둔 상태들이 모두 초기화가 되어버린다.

따라서 전체 새로고침 없이 부분적으로 리스트 부분만 수정이 가능해야 한다.

 

좋아요 한 상태는 db에 저장 되어야 하기 때문에 버튼을 누르면 서버로 변경 내용을 전송한다.

프론트의 list에서도 변경을 감지하기 위해서 이벤트 버스로 이벤트를 전송하고 리스트 컴포넌트에서 이벤트를 받아 삭제, 추가를 처리한다.

 

 

회원 삭제 페이지에서 동일하게 새로고침 없이 리스트 내용이 변경 되도록  했다. 

테이블의 크기가 행의 개수에 따라 변하기 때문에 새로고침이 일어난 것 처럼 보이지만 새로고침이 일어난건 아님! 

 

 

 

크게 신경 쓰려고 노력했던 부분들은 이정도다.

구현 해 두고 바라보면 잘 느껴지지도 않는 스쳐지나가는 부분이라 아쉬워서 글로 남겨보았다.

 

 

느낀점 

뷰의 러닝커브가 리액트에 비해 낮다는것을 확실히 체감 할 수 있었다. 물론 복잡하게 인증이나 최적화 같은것은 신경쓰지 않았지만,

기초를 배우고 바로 프로젝트를 진행 하는데 큰 어려움이 없었다.

v-for, v-if 같은 뷰 프레임워크의 디렉티브들이 정말 편리했다.

리액트는 데이터(state)를 변경하면 setState함수로 업데이트를 해주어야 하는데 뷰는 선언해둔 data를 변경하면 바로 변경 내용에 따라 렌더링이 되는점이 큰 차이인것 같다.

 

그럼에도.. 

시간이 부족해서 구조화보다는 구현에 비중을 두어서 중복된 코드가 좀 있고 일관성 없이 서버 요청을 여기 저기서 하는 코드도 있다. 

시간 날 때 틈틈이 리팩토링을 해 보아야 겠다.

 

 

PS

별거 아니지만 하고 나서 뿌듯했던 것 1순위

카카오맵 api를 사용했는데 카테고리 버튼 변경한것.

기본 카테고리 버튼에서 귀여운 아이콘들로만 변경했는데 완성도가 확연히 높아보였다.

 

 

 

별거 아니지만 뿌듯했던 2순위 

카드 컴포넌트! 이미지 위에 뱃지를 올린 것이 예뻐서 맘에 들었다. 왼쪽 매물 목록에 쓸 용도로 만든 카드인데 뒤늦게 급하게 추가한 뉴스기사를 보여줄때도 살짝 수정해서 사용했다.