Peep

기존의 3차에서 썼던 소스를 활용해서 계속 수업을 진행했습니다.

잘 있나 npm run serve를 한 번 해보고 시작합니다.

잘있으면 

일단 첫번째로는 인스타에 올릴 때 필터효과를 사용해보도록 하겠습니다.

cssgram 을 사용할 것인데요, 전 처음 알았어요

https://una.im/CSSgram/

사이트들어가면 보이는 이름들을 클래스로 넣으면 필터효과가 적용이 되는 라이브러리입니다.

사용하기 위해서 링크를 먼저 가져오겠습니다.

링크는 public > index.html에 넣어주겠습니다.

cdn 링크는 사이트 하단으로 내려가다보면 설명에 있습니다.

그 후에 이것을 사용할 영역을 만들어주겠습니다.

업로드 하던 부분에 만들면 되겠죠? step 2부분이요~

저 하단에 필터영역을 만들어주겠습니다.

일단 가짜 영역을 만들어볼께요

App.vue에 영역을 추가합니다.

그 후에 스타일로 좀 꾸며 줍니다.

저는 반응형으로 만들지는 않았습니다.

그리고 이미지를 똑같이 넣어줍니다.

3단계에서 바로 오면 newImgSrc가 무엇인지 아시겠죠?

그러면 렌더링이 아래와 같이 되는데,

이것을 반복문으로 여러개+필터를 입혀서 출력해보겠습니다.

아까 cssgram에서 본 필터명을 data로 만들어 줍니다. 그리고 그것으로 반복문을 돌려서 출력합니다.

클래스 명이 필터명과 동일하면 적용된다고 했죠?

v-bind:class로 filter 명을 넣어줍니다.

렌더링 잘되네요

스타일을 좀 수정하겠습니다.

filter-wrap을 감싸줄 태그를 만들고

스타일을 추가해주면

아래와 같이 렌더링 됩니다. 

그리고 이 필터들의 이름을 보여주겠습니다.

 누르면 원본 이미지가 변하도록 해보겠습니다.

버튼같이 보이도록 cursor 추가해주고

클릭 시 getFilter 이벤트 실행

타겟은 e.target 하면 클릭된 img가 나온다.

여기 클래스를 원본 이미지 class에 넣어주면되느데, 먼저 e.target의 클래스를 가져옵니다.

data에 selectFilter라고 빈값을 만들고 

필터명을 넣어줍니다.

그리고 원본이미지에 v-bind:class해서 넣어줍니다.

필터 이미지를 클릭하면 필터에따라 변하는 것을 볼 수있습니다.

자 이제 데이터가 저장되어야하니까 data.js에서 filter항목을 추가합니다.

기본을 normal로 등록해주고, 빈값이어도 상관은 없을 것 같아요.

그리고 저장하는 update() 함수에서 filter 키 값을 추가해줍니다. 

저장할때 selectFilter에 저장하니까 가져와서 담아줍니다.

그리고 렌더링이 될 수 있게 이미지에 v-bind:class로 넣어줍니다.

짜잔~ 처음부터 등록을 진행하면 내가 등록한 이미지에 필터가 적용된 모습이 확인됩니다.

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

1회차에서 이어서하는 부분입니다.

1회차 안보면 이해안될 수 있음 주의ㅎ

새로운 프로젝트 생성

ROOT폴더에서 새로운 프로젝트를 생성할 것입니다.

vscode에디터에서 ROOT 폴더 열어줍니다. 

(저는 vuu가 ROOT 폴더입니다. vuedongsan은 1차때 만든 프로젝트 폴더입니다.)

(모르겠으면 처음부터해도되나 install할 것들이 있습니다)

vue, @vue/cli

터미널을 열어줍니다.

(단축키 ctrl + `) 또는 메뉴에서 Terminal > New Terminal

터미널이 열린 경로를 확인해줍니다.

vue 프로젝트 폴더를 생성할 ROOT 폴더로 경로가 되어있는지 확인합니다.

(vuu임을 확인)

프로젝트 생성 명령어를 입력해줍니다.

vue create blog 

Please pick a preset~~ 질문이 나오면 엔터를 눌러주고 로딩바가 끝나기를 기다립니다.

생성이 완료되면 아래와 같이 나옵니다.

폴더이동

이제 작업할 폴더로 이동합니다.

이 상태에서 터미널 명령창에 cd .\blog\ 를 입력해도 됩니다.

명령어를 입력하면 아래와 같이 경로가 변함을 확인할 수 있다.

물론 vscode 에디터에서 open folder를 해도 아래와 같은 경로로 보일 것이다.

하지만 헷갈릴 여지가 있으므로 vscode 에디터에서 New folder하여 새로만든 프로젝트를 열어줄 것입니다.

폴더를 열어 준 후에 터미널을 열고 명령어를 입력해줍니다.

npm run serve

아래와 같이 나오면 성공

localhost:8080을 브라우저에 입력하여 접근해봅니다.

(만약 포트 숫자가 다르다면 적혀나온 포트로 접근해야합니다)

blog라는 새로운 프로젝트 폴더를 생성하였고 서버를 로컬에 띄워서 확인하였습니다.

이번 2회차는 router를 이용해서 블로그 경로를 생성하는 주제로 진행되었습니다.

서버가 돌아가고있는 터미널 말고 다른 모듈들을 다운로드 하기 위해서 다른 터미널을 열어주겠습니다.

터미널 우측에 +버튼 눌러주면 New Terminal이 열립니다.

메뉴 Terminal에서도 New Terminal을 눌러주면 됩니다.

경로 확인하면 나는 vuu 폴더에서 터미널을 열었기 때문에 마지막이 vuu로 나오는 부분이고,  만약 보는이가 blog 폴더에서 열었다면 blog를 끝으로 경로가 끝나야 합니다.

(폴더를 vscode에서 연 사람은 따라하지마세요.)

vuu에서 blog로 경로를 들어가보겠습니다.

아까 말한 명령어를 입력해줍니다.

cd .\blog\

라우터설치

blog 폴더로 들어온 후에 폴더내부에 router 모듈을 설치해 보겠습니다.

명령어 입력합니다.

npm install vue-router

그 후 bootstrap도 이용할 것이기 때문에 bootstrap도 다운받아 주겠습니다.

명령어 입력

npm install bootstrap-vue bootstrap

다운로드가 끝나면 src > App.vue에서 안에 내용을 싹다 지우고 자동완성(꺽쇠 < scaffold)을 이용하여 코드를 작성해줍니다. 그 후에 <div id=”app”> 태그 하나를 추가해줍니다.

지금부터 할 것은 라우터를 이용해서 총.. 3개의 url를 이용해서 페이지를 이동하는 것입니다.

home, introduce, page를 생성해볼 것입니다.

부트스트랩 설치

먼저 클릭 시에 이동이 가능하도록 네비게이션을 먼저 생성해보도록 하겠습니다.

아까 다운로드한 bootstrap 모듈을 활용하겠습니다.

bootstrap 모듈을 사용하기 위해서는 등록을 해줘야합니다.

bootstrap 사이트가면 확인가능하며 main.js에 등록하여 줍니다.

위에서 vue를 import해오는 부분은 중복이 되니까 지워줍니다.

위의 코드를 간단히 설명하면 

부트스트랩 모듈을 BootstrapVue라는 이름으로 import 하고 import해온 BootstrapVue을 Vue.use 문법을 통해 등록해줍니다.

그 후 css 사용을 하기 위해서 css들도 import해줍니다.

그냥 저렇게 문법을 써야하기때문에 사용하는 것입니다.

(모든 모듈을 사용할 때에는 모듈 홈페이지에서 사용법을 숙지해야 합니다) 

그 후 bootstra-vue 사이트를 가보면 여러가지 템플릿을 확인할 수 있습니다.

우리는 만들어진 템플릿을 가져와 사용만 하면 됩니다.

https://bootstrap-vue.js.org/docs

템플릿 가져다 쓰기

홈페이지 메뉴에서 components 를 눌러 들어와서 검색창에 원하는 검색어를 입력하면 되는데, 현재 네비바를 만들 것이기 때문에  nav bar를 입력합니다.

• 강사님이 강의 중에 왜 vuetify를 안쓰고 bootstrap을 사용하는지에 대해 말해줬는데, 그냥 유행이라고했다…… 뭘 쓰던 개인프로젝트에서는 상관없을 듯합니다. ㅎ

마음에 드는 템플릿의 태그를 복사해 와서 붙여넣고 확인해보겠습니다.

아까 띄운 서버 (localhost:8080)에서 네비 바가 확인가능합니다.

템플릿에서 안쓰는 것들은 지우고 사용할 것들만 구조에 맞춰서 적절히 둡니다.

이렇게 남았습니다.

요구조건은 해당 버튼 클릭 시 각각 url로 이동 시키고 해당 컴포넌트들을 보여줄 것입니다. 

HOME 클릭 시 /home 

Introduce 클릭 시  /introduce 

Page 클릭 시 /page

먼저 라우터 설정파일을 먼저 만들겠습니다.

라우터 모듈을 아까 다운로드 받았는데, 이 모듈을 해당 문법에 맞게 셋팅해줘야합니다.

라우터 설정

assets 하위로 router.js 파일을 하나 생성해줍니다.

그 후 router.js에 라우터를 사용할 수 있도록 등록해줍니다.

코드를 설명하면 

vue문법을 사용 할 것이니까 vue를 Vue라는 이름으로 import 해옵니다.

vue-router도 사용 할 것이니까 VueRouter라는 이름으로 import합니다.

그리고 Vue.use 문법을 사용해서 VueRouter를 등록해줍니다.

네이밍은 다 변경되어도 됩니다.

그 후에 등록한 라우터를 설정해줍니다.

위와 같이 추가해주어야하는데, 이것은 문법이므로 맞춰주어야 합니다.

코드를 설명하면 export default하는 이유는 router.js를 사용하려는 곳에서 import했을 때 셋팅 값을 사용하기 위함입니다.

mode는 등록하지 않을 경우 아래와 같이 #이 붙습니다.

그리고 routes 설정을 해주는데, 

routes에는 

path는 경로를 입력해줍니다. (사용자가 저 경로로 들어왔을때 어떤 컴포넌트를 보여줄지 설정하는 부분입니다)

name은 디버깅할 때 쓴다고는 합니다만., 정확히 어디서 쓰는지 모르겠습니다. 현재는 사용안합니다.

component는 내가 저 path로 들어왔을 때 어떤 컴포넌트를 보여줄 지 등록하는 것입니다.

즉,,,

path(/)로 들어왔을때 component(HOME)를 보여줘라.

라우터에서 사용 할 컴포넌트 생성

자, 이렇게 한 후 HOME 컴포넌트를 보여주려고 한다면 2가지 작업을 추가로 더 해야합니다.

첫번째는 HOME라는 컴포넌트가 있어야하고

두번째는 HOME 컴포넌트를 router.js에 import해줘야합니다.

세번째는 router를 사용하여 렌더하겠다는 것을 vue에 등록해줘야합니다.

네번째는 router를 보여줄 공간에 <router-view>를 입력하는 것입니다.

첫번째로 HOME 컴포넌트를 만들겠습니다.

components 파일 하위로 Home.vue파일을 만들어주고 내용을 채워줍니다.

이렇게하면 HOME 컴포넌트는 생성되었습니다.

두번째로 HOME 컴포넌트를 router.js에 import해줘야합니다.

router.js로 import 작업을 해줍니다.

그리고 세번째 작업인 router를 사용하겠다는 것을 vue에 등록하는 작업입니다.

main.js를 보면 new Vue가 있습니다.

여기서 Vue 문법을 통해 최종(?)적으로 렌더하고 있음을 아셔야 합니다.

new Vue 내부에 라우터를 등록합니다.

그러기위해서는 import가 먼저겠죠?

router.js를 import해옵니다.

그 후 Vue 문법에 맞게 router를 Vue에 넣어줍니다.

라우터 설정한 영역을 보여 줄 뷰 태그 삽입

그리고 마지막으로 등록한 라우터를 보여줄 곳에 <router-view></router-view>태그를 등록해줍니다.

App.vue에 넣어보도록 하겠습니다.

아까 띄운 서버를 확인(localhost:8080)해보면 HOME 컴포넌트가 성공적으로 나오는 모습이 보입니다.

라우터 설정, 컴포넌트 추가 요약

자 이제 다른 컴포넌트들도 추가해보도록 하겠습니다.

아래의 상황을 반복하여 만들어 주도록 하겠습니다.

Home 컴포넌트 예시

1.컴포넌트 생성 (Home.vue)

2.router.js에 옵션 값 삽입

결과

그리고 각각의 컴포넌트를 알아볼 수 있도록 텍스트를 넣어주겠습니다.

바뀌었는데 내용이 없어서 모를 수도 있기 때문입니다.

그 후 localhost:8080뒤에 /introduce 혹은 /page를 추가로 넣어서 확인해보겠습니다.

접근이 가능합니다만 저희는 네비를 클릭해서 이동하는 것을 의도하고 있습니다.

따라서 App.vue에서 nav 버튼 클릭 시 페이지 링크 이동이 가능하도록 nav 부분을 수정해주겠습니다.

App.vue

아래와 같이 수정하겠습니다.

<router-link> 태그를 통해 버튼 클릭시 to=”” 안에 있는 링크로 이동이 가능합니다.

저렇게 넣고 해당 버튼 클릭 시 url이 변하는 것과 해당 컴포넌트가 변하는 것이 확인 가능합니다.

자 이제 1회차에서 했던 부분을 활용하여 꾸며 주면됩니다. (v-for로 데이터를 반복시킨다던가해서 페이지를 꾸며보세요.)

2회차의 목적은 라우터 였으므로 여기서 마무리하겠습니다~

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

기능개발하기

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해주는 부분이 필요합니다.

vue.js 지역 컴포넌트를 만들어보자.

-화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하기 위하여 Component로 제작한다.

-Vue 문법 특성 상 최상위 루트 태그가 1개여야만 렌더가 가능하다.

-Component는 지역(Local)과 전역(Global)로 나눌 수 있다.

자 문법을 몰라도 컴포넌트 만들어 봅시다.

일단 new Vue ({   }); 가 뭘까요? https://kr.vuejs.org/v2/guide/instance.html

Vue 인스턴스 입니다.

인스턴스란?

설계도를 바탕으로 소프르웨어 세계에 구현된 구체적인 실체

-즉, 객체를 소프트웨어에 실체화하면 그것을 인스턴스라 함

-실체화된 인스턴스는 메모리에 할당됨.

-객체에 포함된다고 볼 수 있다.

실체 실체 객체 그러죠? 메모리에 할당되는 객체?로 알면될까요??

모든 Vue 앱은 이 인스턴스로 부터 시작됩니다^^ 가이드 한 번만 읽고 오세용 (솔직히 읽어도 잘 모르겠다)

과정을 풀어보자면...

1. <div> id가 app이고, 나는 #app 영역에 vue의 모든 문법을 쓸거고, 컴포넌트도 만들거다.

그러니까 그 #app을 new Vue({ }) 안에 el로 선언해야합니다.

2. 그리고 컴포넌트를 넣어야 하니까 컴포넌트를 먼저 변수로 선언합니다.

template : 해서 선언해줍니다.

3. cmp를 #app에서 사용하기 위해 vue에 등록해줄겁니다. 그러기 위해서 영역을 만듭니다.

4. cmp변수를 html에 넣기위해 components : {   } 라고 작성했던 내부에 넣어줍니다.

여기서 'my-cmp' 는 html에 <my-cmp>로 사용이 되는 이름이고, cmp는 template를 만들어줬던 변수이름입니다!

결과는  

위의 예제로 봤을 때 ..

컴포넌트를 넣을 영역은 el로 선언

html에 내용을 넣을 것을 js 변수로 선언(cmp)

js변수를 html에서 컴포넌트로 쓰려면 components에 선언

저기서 my-cmp는 #app 내부면 얼마든지 계속 쓸 수 있어요~