😊 TIL

1. Styled-component

:https://ui.toast.com/weekly-pick/ko_20190430#%EC%95%B1-%ED%85%8C%EB%A7%88-%EA%B5%AC%ED%98%84--vuejs%EC%99%80-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%93%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%ED%85%8C%EB%A7%88-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

2. Vue Global Mixin & Plugin

: https://webruden.tistory.com/224
: https://blog.jungbin.kim/web/2020/01/11/js-vue-global-mixin-refactoriing.html#global-mixin

3. 폴더 구조를 어떻게 가져가야할까?

4. Vue에 Sass 적용하기

: https://lannstark.tistory.com/7

5. string에서 중복된 값이 존재하는지 체크하는 함수

 const checkIsDuplicatedValue = (data = "") => {
   /**
         * 1. 우선 string을 배열로 변환한다.
         * 2. 첫 번째 인덱스부터 하나씩 순회하면서 중복된 데이터가 있는지 체크
         * 3. 체크한 값을 리턴한다.
         */
   if (!data.length) return false;

   let isDuplicatedValue = false;

   const arrayData = data.split("");

   // 마지막 인덱스는 이전 인덱스와 모두 비교했으므로 length - 1까지 순회
   for (let i = 0; i < arrayData.length - 1; i++) {
     // 중복된 데이터가 있는지 체크했으면, 바깥 반복문 종료
     if (isDuplicatedValue) break;
	
     for (let j = i + 1; j < arrayData.length; j++) {
       // 중복된 데이터가 존재할 경우 반복문 종료
       if (arrayData[i] === arrayData[j]) {
         isDuplicatedValue = true;
         break;
       }
     }
   }

   return isDuplicatedValue;
 };

사이드 프로젝트 리팩토링 작업

😊 컴포넌트 구조

Header
	- Navbar
		- Search
			- SearchForm.vue => 비즈니스 로직


Browse
	- SearchPage.vue

😊 필수 구현 사항

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


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

2. 검색 결과 표시 기능
	2.1 검색 결과가 없을 경우 표시

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

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

😊 추가 구현 사항

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

😊 컴포넌트 별 로직

1. Search.vue

• 검색 버튼 클릭

  1. 검색 폼 노출 ✔
  2. 포커스 이동 ✔

  : 검색 폼 노출 여부 : store에서 관리 ( 다른 페이지에서 사용할 수도 있음 )

• route가 변경되었을 경우 검색 폼을 비노출 상태로 변경해야함 ✔

  • 해당 컴포넌트에서 처리 : ( $route.path의 변화를 감지해서 처리 )

2. SearchForm.vue

• 검색어를 입력하고, 엔터를 입력한다.

• 검색어를 받아서, 검색 API를 조회한다. 그리고 동시에 SearchPage로 이동한다. 이때 쿼리스트링 값이 현재 검색어가 된다.

  • 이동하는 타이밍
    1. 엔터를 입력하는 동시에
    2. 검색 API를 조회하고 나서 이동

• ✨ 새로 고침이 되었을 경우

  • 새로 고침 여부를 어떻게 체크?

    • created 훅에서 쿼리스트링이 있을 경우에 최초 검색어로 지정 후, 검색 함수 실행

  • 검색 함수의 역할

    1. 검색 API 조회
    2. 검색 페이지로 이동 => 단, 현재 페이지가 SearchPage일 경우에 경로 이동 X

3. SearchPage.vue

• 검색 결과를 보여준다.

• ✨ 새로 고침이 되었을 경우