2021.04.25

김승우·2021년 4월 25일

TIL

목록 보기

51/68

1. TIL

1. Vue 컴포넌트 별 생성 시 $route.path가 다를 수 있다.

router-view에 따라 그려지는게 아닌 컴포넌트

created훅에서 '$route.path'확인 결과 "/"가 나왔다.
router-view를 통해 변경된 경로에 따라 그려지는 컴포넌트

Vue Router에서 정의된 해당 컴포넌트를 그리는 path.

> ✨ 따라서, 컴포넌트 별 생성 시점이 다른 것을 알 수 있었다.

2. 사이드 프로젝트 요구사항 수정

😊 컴포넌트 구조

Header
	- Navbar
		- Search
			- SearchForm.vue => 검색 페이지로 이동 로직


Browse
	- SearchPage.vue => 검색 로직

😊 필수 구현 사항

0. 버튼 기능
	0.1 검색 버튼 클릭 기능 => 검색 폼 노출, 노출과 동시에 포커스 이동 [✔]
	0.2 검색 영역 바깥 클릭 기능 => 검색어가 없을 경우, 검색 폼을 제거 [ ]
	0.3 검색어 초기화 기능 => 검색어 초기화 및 이전 페이지로 이동 기능 [ ]


1. 검색 기능
	1.1 검색어를 입력하고, 엔터 키를 입력 이벤트 바인딩. [✔]
    1.2 입력한 키를 받아서 API 조회 [✔]
	1.3 SearchPage에 해당하는 경로로 이동한다. => 현재 페이지가 SearchPage라면 페이지를 이동하지 않는다. [✔]
	1.4 SearchPage에서는 검색 결과를 보여준다. => 스토어를 통해서 검색 결과를 가져온다. [✔]
	1.5 데이터를 더 불러올 수 있을 경우 스크롤을해서 데이터를 더 불러온다.

2. 검색 결과 표시 기능
	2.1 검색 결과가 없을 경우 표시 [✔]
    2.2 TODO 🤣 스타일링

3. 무한 스크롤 기능( 데이터를 더 불러올 수 있으면, 스크롤을 통해 다음 페이지를 불러온다. )

5. 페이지를 새로고침 했을 경우
	5.1 검색어를 받아서 저장해야함.

😊 추가 구현 사항

1. 검색어를 입력하는 동안에는 로딩화면을 보여주고, 검색어 입력이 종료되면 검색 결과를 보여준다.
2. 같은 검색어일때는 엔터 입력 불가능
3. 검색어 저장 기능(최근 검색어 리스트)

😊 How?

1. Search.vue

검색 버튼 클릭
1. 검색 폼 노출 [✔]
2. 포커스 이동 [✔]
: 검색 폼 노출 여부 : store에서 관리 ( 다른 페이지에서 사용할 수도 있음 )
route가 변경되었을 경우 검색 폼을 비노출 상태로 변경해야함 [✔]
- 해당 컴포넌트에서 처리 : ( $route.path의 변화를 감지해서 처리 )

2. SearchForm.vue

검색어를 입력하고, 엔터를 입력한다. [✔]
검색어를 스토어의 searchText에 세팅한다.
SearchPage로 이동한다.
- 이동하는 타이밍
  1. 엔터를 입력하는 동시에

3. SearchPage.vue

watch를 통해 searchText의 변화를 감지한다.
searchText가 변경되었을 경우 검색한다.
검색 결과를 Search Store 모듈에 저장한다. [✔]
- 검색 결과 => 렌더링 용도 (results) [✔]
- 총 검색 개수/페이지 => 추가 검색할지 여부 결정 (total_pages) [✔]
- 검색 현재 페이지 => 추가 검색 용도 (page) [✔]
검색 결과를 보여준다.
✨ 새로 고침이 되었을 경우
- 새로 고침 여부를 어떻게 체크?
  - created 훅에서 스토어의 searchText의 여부를 체크하고, 없을 경우 새로고침, 혹은 검색을 통해서 진입했으므로 최초 세팅을 한다.
    1. this.$route.query.q를 searchText로 세팅
    2. SET_IS_SEARCH_FORM(true);
    3. 최초 검색 API 시작