프론트엔드 개발을 위한 자바스크립트 - 3주차

 

 

 

https://school.programmers.co.kr/learn/courses/14723

[스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

 

 

---

 

서두

3주 차 미션부터 난이도가 조금 올라가서 이제야 3주 차 미션 + 강의를 마치고

 

후기를 적을 수 있게 됬다. 😂

 

구현 상세사항은 더보기를 눌러주세요

## 필수 구현사항
- [x] 이디어츠 API를 통해 이디어츠 공연 검색기 만들기


## 보너스 구현 사항
- [x] `fetch` 해오는 코드를 `async`, `await`를 사용하여 구현
- [x] `debounce` 기법을 이용해 불필요한 API 요청이 가는 것을 방지하기
- [x] `SearchHistory` 컴포넌트를 만들기
- [x] 해당 히스토리를 클릭하면 해당 검색어로 다시 검색하기
- [x] 히스토리를 클릭해 발생한 검색에 대해선 히스토리에 쌓이지 않게 하기
- [x] 최대 5개까지만 쌓일 수 있게 하며, 화면을 새 로고 침해도 유지되도록 만들기
- [x] 같은 이름의 검색어는 중첩해서 들어가지 않게 하기
- [x] `import` 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만들기
- [x] 이름 목록을 포스터 아래에 렌더링 하기
- [x] 뮤지션 이름을 클릭하면 해당 이름으로 공연 검색이 일어나도록 하기
- [x] 검색 내역이 쌓이지 않게 만들기


## How to 
- 구성 : App.js 에서 SearchInput.js SearchResult.js SearchHistory.js를 관리하도록 했습니다.
- Debounce를 통해 input값을 500ms의 딜레이를 가지고 받아들입니다.
- Custom Event 수신기를 App.js에 달아 검색 혹은 클릭 등 callSearch 행동이 일어나면 app.js에서 setState를 통해 리랜더합니다.
- 검색 내용 , 검색 타이틀, 검색 이력 표시는 Custom Event의 Detail 항목을 통해 상태 관리를 합니다.
- 포스터 리스트 중 타이틀 클릭 시 검색 이력이 쌓이지 않게 하기 위해 isChangeLocalValue (기본 true) 상태를 통해 제어합니다.
- 검색 이력은 LocalStorage를 통해 관리합니다.

 

 

https://zerosial.github.io/VanillaJS-showSearch/

Mission 3 - 움짤검색기

 

디자인은 Tailwindcss를 사용하여 간단하게 구현하였다.

---

 

사용하는 기술 스택

• Javascript🐱‍🏍
  시작이자 끝 처음이자 전부
  
  
• TailwindCSS
  수업 중에 사용하지 않는다. 사용하는 감을 잃지 않으려고 틈틈이 쓰는 중
  
  
• HTML + CSS
  과정 중엔 없고 기초적인 지식만 알면 된다.

 

---

3주 차 미션을 하며

2주 차 미션 때도 느꼈지만 컴포넌트 간의 역할과 책임 나누기

 

그리고 느슨한 결합 유지하기는 해 보면 해볼수록 늘긴 하는 것 같다. 😁

 

특히 처음 로토 님이 쓰던 render , setstate와 더불어 서로 간의

 

컴포넌트 연결을 보며 많은 생각을 하게 되었다.  😎

 

이번 과제를 하면서 분리해봤던 컴포넌트들

 

전체 코드 내역은 https://github.com/zerosial/VanillaJS-showSearch

GitHub - zerosial/VanillaJS-showSearch

 

이번에 시도해봤던 것은 Components 단에서 기능을 처리하고

 

utils 단에서는 그 외에 로컬 스토리지 , api의 호출 전반 및 검색 이벤트가 발생했을 때

 

커스텀 이벤트를 이용하여 app.js에서 캐치하여 setState가 이뤄지게 했다.

 

1. 검색 이력단에서의 클릭

2. 검색창에서의 검색어 입력 

3. 각 포스터 하단의 리스트 클릭

 

모두 새로운 데이터를 가지고 화면을 다시 갱신시킴으로 이러한 행동을 SearchApi단에서 fetch와 더불어

 

커스텀 이벤트를 디스 페치 하게 함으로써 상태 관리를 해 보았다.

 

const API_END_POINT = 'https://api.idiots.band/api/search?keyword=';

export default async function SearchApi({ value, isChangeLocalValue }) {
  try {
    const res = await fetch(`${API_END_POINT}${value}`);

    if (!res.ok) {
      throw new Error(`fetch 데이터에 실패했습니다.`);
    }

    document.dispatchEvent(
      new CustomEvent('callSearch', {
        detail: {
          isChangeLocalValue: isChangeLocalValue,
          title: value,
          data: await res.json(),
        },
      })
    );
  } catch (err) {
    throw new Error(`SearchApi에서 에러가 발생했습니다.${err}`);
  }
}

위의 3가지 검색 행동이 발생하게 된다면 SearchAPI를 실행하게 되고

 

이러한 검색어를 Value로 받아와 비동기 , 에러 처리 , 커스텀 이벤트 디스패치를

 

한 번에 하게 해서 컴포넌트를 분리하여 해결하였다.

커스텀 이벤트의 Detail

이번에 커스텀 이벤트를 더욱 활용해보면서 Detail 항목으로 상태 및 필요한 변수를 주고받는 게

 

마치 리엑트의 Recoil과 같은 상태 관리와 비슷하다는 생각이 들었다.

 

일반적으로 리엑트에서 이러한 변수들을 주고받게 된다면 props를 사용하던지 해서

 

자식에게 전달하는데 (마치 함수의 매개변수와 같이) 이러한 상태 관리를 편하게 하기 위해

 

 

상태관리 라이브러리를 보통 사용하게 되고 그중 내가 사용해 봤던 Recoil도 이와 마찬가지로

 

버블링을 통해 상태를 최상단으로 가져가서 어디서 던 가져다 쓸 수 있었다. 😁

 

 

과연 로토 님이 사용에 편리하지만 주의를 기울이라는 말이 실감이 되었다.

 

기능 자체가 너무 편리하고 변수 등 상태 관리가 엄청 간편해지는 기분이었다. 

 

 

---

 

안타깝게도 4주 차의 끝이 거의 다가오고 있다. 다음 주 수요일이 마지막 강의인데

 

그사이에 코드 리뷰 등도 여러 번 해보고 싶었지만 다른 스터디와 겹치고

 

남는 시간에 내 코드를 보며 이리저리 고민하다 보니 거의 코드 리뷰를 못한 것 같다 😥
(코드 리뷰 여전히 활발히 하시는 분들 존경합니다.)

 

이번 4주 차 미션은 바로 내일부터 힘들게 만들어서 꼭 수요일 전에 완성하고

 

실강을 들으면서 뒤풀이를 하고 싶다!