search

dbgml4647 / Programmers-2020.8-Frontend-Test

Programmers/ 2020.8 Frontend-Test :fire:
0 stars 0 forks source link

#문제 1 #1

Open dbgml4647 opened 4 years ago

dbgml4647 commented 4 years ago

문제 보기

주제

당신은 2020년 상반기에 고양이 사진 검색 사이트를 만들었습니다만, 관리를 잘못하여 사이트가 폐쇄되었습니다. 당신은 지난 실수를 발판 삼아 하반기에는 더 좋은 사이트를 만들려고 하는데요. 이번에는 단순히 사진만을 보여주기보단, 사용성을 개선해 유저가 검색을 쉽게 할 수 있도록 검색어 추천 기능을 넣으려고 합니다. 그리고 가능하다면, 성능을 고려하여 여러 가지 부차적인 일도 하고 싶네요. 3시간 내에 사이트를 만들 수 있을까요? 만들고 싶은 결과물은 다음과 같습니다.

image

과제 설명

  1. 컴포넌트는 function 문법, class 문법 어느 쪽을 사용해도 괜찮습니다.
  2. 각 컴포넌트는 각각의 상태 값을 가지고 있고, render 함수를 통해 현재 상태를 렌더링 합니다.
  3. render 함수는 파라미터를 넘겨받는 것 없이 해당 컴포넌트의 상태 변수들만 갖고 렌더링이 일어나도록 설계해야 합니다.
  4. DOM 접근은 최소화해야 합니다.
  5. 컴포넌트 간의 결합은 최대한 느슨해야 합니다.

요구 사항

중요 말머리로 [필수] 가 붙은 요구사항은 반드시 수행해주세요.

검색어 추천

검색어 추천 - 사용성 개선

검색

검색 - 사용성 개선

퍼포먼스 향상

코드 구조 관련

API 설명

1. 추천 검색어 API

URL

GET https://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/keywords?q={keyword}

Parameter

Response

다음과 같은 추천 검색어로 구성된 배열

["name1", "name2", "name3"]

예시

검색창에 헤어를 입력하면 아래와 같이 요청합니다.

curl 'https://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/keywords?q=%ED%97%A4%EC%96%B4'

// response
[
  "브리티쉬 롱헤어",
  "브리티쉬 숏헤어",
  "컬러포인트 숏헤어",
  "엑조틱 숏헤어",
  "오리엔탈 숏헤어"
]

1. 검색 API

URL 

GET http://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/search?q={keyword}`

Parameter

Response

다음과 같은 검색결과로 이루어진 배열

{
  "data": [
    {
      "id": "id",
      "url": "url",
      "name": "name"
    }
  ]
}

예시

브리튀시 롱헤어 로 검색했을 경우 


curl 'http://jf3iw5iguk.execute-api.ap-northeast-2.amazonaws.com/dev/api/cats/search?q=%EB%B8%8C%EB%A6%AC%ED%8B%B0%EC%89%AC%20%EB%A1%B1%ED%97%A4%EC%96%B4'

대략 아래와 같은 응답이 내려옵니다.

{
  "data": [
    {
      "id": "MTc5NDU2MQ",
      "url": "https://cdn2.thecatapi.com/images/MTc5NDU2MQ.jpg",
      "name": "British Longhair / 브리티쉬 롱헤어"
    },
    {
      "id": "5cc",
      "url": "https://cdn2.thecatapi.com/images/5cc.jpg",
      "name": "British Longhair / 브리티쉬 롱헤어"
    },
    {
      "id": "bbr",
      "url": "https://cdn2.thecatapi.com/images/bbr.jpg",
      "name": "British Longhair / 브리티쉬 롱헤어"
    },
    {
      "id": "2do",
      "url": "https://cdn2.thecatapi.com/images/2do.jpg",
      "name": "British Longhair / 브리티쉬 롱헤어"
    },
    {
      "id": "bna",
      "url": "https://cdn2.thecatapi.com/images/bna.jpg",
      "name": "British Longhair / 브리티쉬 롱헤어"
    },
    ...
    // 이하 줄임
  ]
}
dbgml4647 commented 4 years ago

https://eungbean.github.io/2018/06/11/How-to-use-markdown/

마크업 작성하기

dbgml4647 commented 4 years ago

image