😋 프로그래머스 2020 Dev-Matching 웹 프론트엔드 개발자(상반기) 후기

사과 emoji는 과제테스트에서 요구하는 필수 기능입니다.

1. 신청하게 된 계기

문제의 입출력이 함수형으로 되어있어서 자바스크립트로 문제를 푸는 나에게는 정말 편하고 좋았다.

출처 : 프로그래머스

2. 준비

출처 : 프로그래머스

3. 출제문제 다시보기

다시만들어본 고양이 검색 웹사이트 (과제)

3-1. 코드 구조

문제는 모두 javascript로 되어있었지만, setState 리렌더링이나 render() 안의 innerHTML을 통해 자손DOM을 구성하는 것, class 내부 state를 사용하는 것 등의 코드구조가 리액트와 무척 비슷하다는 느낌을 받았다.

// 이미지상세보기창 js
class ImageInfo {
  $imageInfo = null
  data = null

  constructor({ $target, data }) {
    const $imageInfo = document.createElement('div')
    $imageInfo.className = 'ImageInfo'
    this.$imageInfo = $imageInfo
    $target.appendChild($imageInfo)

    this.data = data

    this.render()
  }

  setState(nextData) {
    this.data = nextData
    this.render()
  }

  render() {
    if (this.data.visible) {
      const { name, url, temperament, origin } = this.data.image

      this.$imageInfo.innerHTML = `
        <div class="content-wrapper">
          <div class="title">
            <span>${name}</span>
            <div class="close">x</div>
          </div>
          <img src="${url}" alt="${name}"/>        
          <div class="description">
            <div>성격: ${temperament}</div>
            <div>태생: ${origin}</div>
          </div>
        </div>`this.$imageInfo.style.display = 'block'
    } else {
      this.$imageInfo.style.display = 'none'
    }
  }
}

이처럼 코드는 class의 인스턴스를 만듬으로써, DOM을 렌더링하였고, 해당 코드에는 없지만 setState() 메소드를 호출하면 리렌더링하는 등 class형식의 자바스크립트 파일은 리액트의 컴포넌트와 많이 닮아있다고 생각했다.

3-2. HTML, CSS 관련

시맨틱 태그 작성

반응형 처리

다크모드

3-3. 이미지 상세보기 모달

반응형 처리

모달 닫기 기능 구현 🍎

고양이 정보 불러오기 (AJAX)

3-4. 검색 페이지

autofocus , 검색창 비우기

데이터 로딩 UI 구현 🍎

데이터 없음 UI 구현 🍎

최근 검색어 기능

const TEMPLATE = '<input type="text">'

class SearchInput {
  $latestDOM = null
  latest_arr = []
  onSearch = null

  constructor({ $target, onSearch }) {
    const $searchInput = document.createElement('input')
    const $latestDOM = document.createElement('div')
    this.$latestDOM = $latestDOM
    this.$searchInput = $searchInput
    $searchInput.autofocus = true
    this.$searchInput.placeholder = '고양이를 검색해보세요.|'
    this.onSearch = onSearch

    $searchInput.className = 'SearchInput'
    $target.appendChild($searchInput)
    $target.appendChild($latestDOM)

    $searchInput.addEventListener('keypress', e => {
      if (e.keyCode === 13) {
        this.latest_arr.unshift(e.target.value)
        if (this.latest_arr.length > 5) {
          this.latest_arr.pop()
        } else {
        }
        console.log(this.latest_arr, e.target.value)
        this.render()
        onSearch(e.target.value)
      }
    })

    $searchInput.addEventListener('click', () => {
      $searchInput.value = ''
    })

    console.log('SearchInput created.', this)
  }

  render() {
    this.$latestDOM.innerHTML = this.latest_arr
      .map(item => {
        return `<span class="latest" style="cursor:pointer; border:1px solid black; padding: 3px; margin:3px">${item}</span>`})
      .join('')

    this.$latestDOM.querySelectorAll('.latest').forEach(($item, index) => {
      $item.addEventListener('click', e => {
        this.onSearch(this.latest_arr[index])
      })
    })
  }
}

먼저 검색어가 저장될 DOM 을 생성하고, 부모 노드에 DOM을 추가해준 뒤, 검색(keypress) 시, innerHTML 을 통해, 내부 요소들도 만들고, click 이벤트핸들러도 같이 등록하는 방식으로 구현해주었다.

페이지 새로고침 시, 마지막 검색결과 유지

랜덤 고양이 검색 버튼 구현 🍎

// App.js

this.searchInput = new SearchInput({
  $target,
  onSearch: keyword => {
    api.fetchCats(keyword).then(({ data }) => this.setState(data))
  },
  onRandomClick: () => {
    api3.fetchCats().then(({ data }) => this.setState(data))
  },
})

App.js 의 SearchInput 객체에 onRandomClick 메소드를 전달한다. 검색시 응답받는 데이터 형식이 같아서 api명만 바꿔주었다.

이미지 lazy load 구현

3-5. 스크롤 페이징

3-6. 코드 구조 변경

ES6 모듈 형태로 코드변경

fetch -> async await 변경

const api3 = {
  fetchCats: () => {
    return fetch(`${API_ENDPOINT}/api/cats/random50`).then(res => res.json())
  },
}

const api3 = {
  fetchCats: async () => {
    const response = await fetch(`${API_ENDPOINT}/api/cats/random50`)
    return response.json()
  },
}

API 의 status code 에 따라 에러 메시지를 분리하여 작성 🍎

const api3 = {
  fetchCats: async () => {
    const response = await fetch(`${API_ENDPOINT}/api/cats/random50`)
    if (response.status === 200) {
      return response.json()
    } else {
      console.error(`${response}에러 : ${response.statusText}`)
    }
  },
}

근데 이게 맞는 답인지는 잘 모르겠다. 😅

이벤트 위임 (Event Delegation)

this.$searchResult.querySelectorAll('.item').forEach(($item, index) => {
  $item.addEventListener('click', () => {
    this.onClick(this.data[index])
  })
})

this.$searchResult.innerHTML = this.data
  .map(
    (cat, i) => `
            <div class="item">
              <img src=${cat.url} alt=${cat.name} name=cat${i}/>
            </div>
          `)
  .join('')

this.$searchResult.addEventListener('click', e => {
  if (e.target.name) {
    this.onClick(this.data[e.target.name.substr(3, e.target.name.length - 4)])
  }
})

3-6. 테스트 관련(가산점)

4. 마치며