vue.js 기초- 인스타그램 만들어보기 02 (코딩애플 세미나 후기)

*선생님코드아님 주의, 틀릴 수 있음 주의, 들으면서 적은거 아님주의, 복습하면서 적은거임,

기능개발하기

1. 리스트 팝업 토글

2. 50만원 미만

3. 고가순 정렬

4. 저가순 정렬

5.리스트 원래대로

1.리스트 팝업 토글

-<template>내부에 버튼과 팝업의 html을 생성해주세요.

버튼

팝업

위의 List는 컴포넌트화 해서 가져왔는데, 이렇게 해도 되고 html에 그냥 태그를 사용해서 작성해도 상관 없습니다.

(원룸들오리지널을 넣어야 변형이 없습니다.)

-data에 배열 데이터, if문에 들어갈 데이터가 있어야합니다.

여기서 리스트보여줄까로 show, hide하고 원룸들 데이터로 v-for를 사용해서 출력해줍니다.

여기서 원룸들의 [...Data]는 원룸 데이터를 import해와서(Data)를 deep 카피하여 넣은 것입니다.

 

정리하면

import Data from '경로' 로 데이터를 Data로 가져오고

이 Data를 하나는 오리지널로 원룸들오리지널에 할당해주고

하나는 [...Data]해서 복사한 데이터를 원룸들에 넣어주는 부분입니다.

 

그 후 클릭하면 보여주기 위해서 함수를 만들어줍니다.

-methos에 함수를 추가해줍니다.

(Vue의 함수들은 methos에 들어가야 합니다.)

클릭하면 not연산자 (!) 로 인해서 this.리스트보여줄까 의 값은 항상 반대되는 값이 할당됩니다.

스타일은 본인이 추가하여 팝업형식으로 만들어보면 됩니다.

아래는 렌더링 결과입니다.

-html

데이터를 이용해서 리스트를 하나 만들어줍니다. 

데이터의 변형이 그때 그때 필요하기 때문에 원룸들 데이터를 사용합니다.

Card 컴포넌트에 v-for문을 넣어 반복시켰으며 컴포넌트에 prop로 원룸들 데이터를 전달해줬습니다.

props는 아래와 같이 받습니다.

전달한 props를 데이터 바인딩 해줍니다.

2. 50만원 미만

먼저 methos에 함수를 생성해줍니다.

filter를 이용해서 50만원 미만인 배열만 return 하였습니다.

그 후에 template 내부의 html 태그에 v-on:click으로 함수 바인딩해줍니다.

50만원 미만의 배열만 return됨을 확인할 수 있습니다.

3. 고가순 정렬

똑같이 html 태그를 사용하여 버튼을 만들고 methos에 함수를 생성해 준뒤, 바인딩해줍니다.

sort 함수를 이용하여 내림차순으로 정렬합니다. 

a,b 파라미터로 넘어온 배열들을 각, 각의 price를 비교하여 내림차순으로 정렬해줍니다.

this.resetData()는 조금 뒤에 설명하겠습니다만 없으면 안됩니다.

4. 저가순 정렬

이것도 sort함수를 이용해주는데, 아까와는 반대로 a,b의 위치가 변경되었습니다.

오름차순으로 정렬했습니다.

5 리스트 원래대로

버튼을 만들고 바인딩해줍니다.

맨 처음 저장했던 데이터의 순서대로 나오게 할 것입니다.

this.원룸들에 오리지널 데이터를 삽입해줄 것인데,

이때 위와 같이 안넣고 그냥 this.원룸들 = this.원룸들오리지널을 넣게되면 this.원룸들오리지널과 데이터가 바인딩되므로,,, 데이터 변형 시에 원룸들오리지널도 변형이 됩니다.

 

따라서 [...this.원룸들오리지널] (deep 카피방식)을 이용해서 this.원룸들에 오리지널데이터를 넣어줍니다.

data영역도 보면 원룸들은 import한 데이터를 [...Data] 형식으로 넣어주고 있습니다.

이것도 Data의 변형을 막기 위해 deep 카피 방식을 사용한 부분입니다.

(틀렸으면 알려주세요)

 

이렇게 하는 이유가...

저가순, 고가순 함수를 사용할 때, filter, sort메소드를 사용하고 있는데 이 메소드들은 원본 데이터에 변형을 가져오는 함수들이기 때문입니다.

즉 저가순으로 정렬하면 원본데이터가 저가순데이터로 아예변형이 되는 것입니다.

 

따라서 reset함수가 없으면 

50만원미만 -> 고가순 눌렀을 때, 50만원미만 데이터가 3개로 한 번 걸러졌다면 3개의 데이터를 가지고 고가순으로 정렬이 진행될 수 있습니다.

 

따라서 필요한 위치를 파악하여 resetData해주는 부분이 필요합니다.