[클라우딩 어플리케이션 엔지니어링 TIL] 240124 - 고양이 사진 검색 과제테스트, 코딩테스트

Intro

---

오늘은 강의는 안듣고 테스트만 풀었다.

4시간짜리 과제테스트만 풀어도 힘들다. 자기 전에 코딩테스트 문제도 3문제 풀었다.

마지막 문제 lv2 풀려다가 힘들어서 내일로 미뤘다 ㅎㅎ

 

 

오늘 학습한 내용

: 과제테스트와 코딩테스트 풀어보기

---

 

이틀 전에 풀었던 고양이 문제와 조금 다른.. 고양이 사진 검색기 문제를 풀었다. 지난 문제들과 비슷한 구현 문제도 있었고 새로운 문제도 있었다. 이번 문제에선 index.html에 구현된 요소들을 컴포넌트화하는 작업부터 시작했다.

새롭게 풀어 본 문제들만 리뷰해보았다.

 

---

 

검색어 추천

[필수] 추천 검색어 API를 이용해 입력란에 추천 검색어를 보여주세요. 추천 검색어는 엔터를 치는 등 별도의 행위가 없을 때에도 자동으로 보여야 합니다.
✅ keywords라는 class 명으로 스타일링 되어있습니다. 자세한 내용은 index.html과 style.css를 참고하시기 바랍니다.
✅ API에 대한 설명은 하단에 있습니다.
✅ API에서 에러가 나거나, 추천 검색어가 없는 경우에도 검색 기능을 사용하는 데에는 문제가 없어야 합니다.

검색어 추천 - 사용성 개선
키보드와 마우스를 이용해서 추천 검색어를 선택할 수 있게 만들어 주세요.
1️⃣ esc를 누르면 추천 검색어 창이 닫힙니다.
2️⃣ 키보드의 위, 아래 키를 누르면 추천 검색어 하이라이트가 옮겨지고 엔터를 누르면 하이라이트가 위치한 검색어가 입력창에 반영되고 사진이 검색됩니다.
3️⃣ 마우스로 다른 곳을 클릭하여 input이 focus를 잃어버리는 경우 추천 검색어 창이 닫힙니다.
4️⃣ 마우스로 추천 검색어를 누르면 커서가 위치한 검색어가 입력창에 반영되며 사진이 검색됩니다.  

 

위의 문제에서 필수 구현과 1, 3, 4번 문제를 해결했다.

2번은 못 풀었다. 풀어보려고 했는데 시간 부족 + 풀다가 막혀서 포기.. ㅠ 해설 강의 들어봐야겠다.

• Keywords.js

class Keywords {
  data = {
    items: [],
  }

  constructor({ $target, onSelectKeyword }) {
    this.$keywordsContainer = document.createElement('div')
    this.$keywordsContainer.className = 'keywords'

    this.$keywordsList = document.createElement('ul')
    this.$keywordsContainer.appendChild(this.$keywordsList)
    $target.appendChild(this.$keywordsContainer)

    this.onSelectKeyword = onSelectKeyword
  }

  setState(newData) {
    this.data = { ...this.data, ...newData }
    this.render()
  }

  showKeywordList() {
    this.$keywordsContainer.style.display = 'block'
  }

  hideKeywordList() {
    this.$keywordsContainer.style.display = 'none'
  }

  render() {
    if(this.data.items) {
      this.$keywordsList.innerHTML = this.data.items.map(item => `
        <li class='keywordItem'>${item}</li>
      `).join('')
      this.showKeywordList()

      // 4. 마우스로 추천 검색어를 누르면 커서가 위치한 검색어가 입력창에 반영되며 사진이 검색됩니다.
      this.$keywordsList.querySelectorAll('.keywordItem').forEach($item => {
        $item.addEventListener('click', e => {
            this.onSelectKeyword(e.target.textContent)
        })
      })

      // 1. esc를 누르면 추천 검색어 창이 닫힙니다.
      document.addEventListener('keydown', e => {
        if(e.key === 'Escape') {
          this.hideKeywordList()
        }
      })

      // 3. 마우스로 다른 곳을 클릭하여 input이 focus를 잃어버리는 경우 추천 검색어 창이 닫힙니다.
      document.addEventListener('click', e => {
        if(e.target.className !== 'keyword') this.hideKeywordList()
      })    
    } else {
      this.$keywordsList.innerHTML = ``
      this.hideKeywordList()
    }
  }
}

export default Keywords

• App.js

...

this.header = new Header({ $target ...

// 4. 마우스로 추천 검색어를 누르면 커서가 위치한 검색어가 입력창에 반영되며 사진이 검색됩니다.  
this.keywords = new Keywords({ $target, onSelectKeyword: keyword => {
  this.header.setState({ searchValue: keyword })
} })

...

 

Header 컴포넌트에 키워드 값을 전달해 클릭했을 경우, input value 값을 키워드 값으로 변경하고 value 값으로 조회하도록 구현했다.

 

 

---

검색

검색이 일어나면 url 뒤에 ?q={검색어}를 붙입니다.
⚠️ 페이지 url에 검색어가 존재하는 경우 페이지에 진입하자마자 해당 검색어로 검색된 결과가 나오도록 합니다.

 

• App.js

constructor() {
  this.header = new Header({ $target, onSearch: keyword => {
    this.loading.show()
    api.fetchCats(keyword).then(({ data }) => {
      if(data) this.setState({
        items: data
      })
    })
  
    // URL queryString update
    this.setSearchParams(keyword)
    this.loading.hide()
  }, 

...

}

 

setSearchParams 함수

setSearchParams(keyword) {
  const url = new URL(window.location);
  url.searchParams.set('q', keyword);
  window.history.pushState({}, '', url);
}

 

키워드를 검색할 경우 url을 재로딩 없이 변경해주는 함수를 구현했다.

제대로 한건지는 잘 모르겠다 ㅎㅎ

 

• App.js

...

// URL params
if(location.search) {
  const urlSearchParams = new URLSearchParams(location.search)
  const searchKeyword = urlSearchParams.get('q')
  if(searchKeyword) {
    this.header.setState({ searchValue: searchKeyword })
  }
}

...

 

페이지 진입 시 url에 검색어가 존재하는 경우 해당 검색어로 검색하는 코드를 구현했다.

 

 

---

👩‍💻 과제 테스트 후기

코드의 기능이 점점 추가되면서 코드가 복잡해져 좀 어려웠다. 😭

그래도 [필수] 문제는 다 풀었다. 그걸로 일단 만족...

주말에 다시 차근차근 풀어봐야겠다.

 

 

 

 

---

코딩 테스트 문제

• Lv0) 문자 개수 세기

문제 설명
알파벳 대소문자로만 이루어진 문자열 my_string이 주어질 때, my_string에서 'A'의 개수, my_string에서 'B'의 개수,..., my_string에서 'Z'의 개수, my_string에서 'a'의 개수, my_string에서 'b'의 개수,..., my_string에서 'z'의 개수를 순서대로 담은 길이 52의 정수 배열을 return 하는 solution 함수를 작성해 주세요.

제한사항
⚠️  1 ≤ my_string의 길이 ≤ 1,000

입출력 예
my_string: "Programmers"
result: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 2, 0, 1, 0, 0, 3, 1, 0, 0, 0, 0, 0, 0, 0]

 

내가 푼 코드

function solution(my_string) {
    let answer = []
    const upperStr = new Array(26).fill(0)
    const lowerStr = new Array(26).fill(0)
    const MY_STR_LEN = my_string.length
    
    // A-Z: 65-90 (26개), a-z: 97-122 (26개)
    for(let i=0; i<MY_STR_LEN; i++) {
        const code = my_string[i].charCodeAt()
        code <= 90 ? upperStr[code-65]++ : lowerStr[code-97]++
    }
    
    answer = [...upperStr, ...lowerStr]
    return answer
}

 

문자를 아스키 코드로 변환하는 charCodeAt() 메서드를 사용해서 풀어보았다.

A-Z까지 65-90이고, a-z는 97-122라서 숫자가 쭉 이어져 나열됐다면 바로 인덱스 찾아서 넣었을텐데.. 91-96이 비어서 ㅠ 소문자인지 대문자인지 찾아서 따로 넣어주는 작업이 필요해 배열을 두개 생성했다.

변환한 코드값이 90이하면 대문자에 code-65한 배열 index를 찾아서 +1하고 소문자면 code-97한 배열 index를 찾아 +1을 해줬다.

그리고 마지막에 ...연산자로 두 배열을 합쳐서 리턴해주었다.

 

 

• Lv0) 이어 붙인 수

문제 설명
정수가 담긴 리스트 num_list가 주어집니다. num_list의 홀수만 순서대로 이어 붙인 수와 짝수만 순서대로 이어 붙인 수의 합을 return하도록 solution 함수를 완성해주세요.

제한사항
⚠️ 2 ≤ num_list의 길이 ≤ 10
⚠️ 1 ≤ num_list의 원소 ≤ 9
⚠️ num_list에는 적어도 한 개씩의 짝수와 홀수가 있습니다.

입출력 예
#1. num_list: [3, 4, 5, 2, 1] / result: 393
#2. num_list: [5, 7, 8, 3] / result: 581

 

내가 푼 코드

function solution(num_list) {
    let answer = 0
    let even = ''
    let odd = ''
    
    num_list.forEach(num => {
        num%2 ? even += num.toString() : odd += num.toString()
    })
    
    answer = Number(even) + Number(odd)
    return answer
}

 

num_list를 순회하면서 짝수인지 홀수인지 판단한 후, 짝수면 숫자값을 even에 문자열로 이어 붙여주고 홀수면 odd에 이어 붙여줬다.

그리고 even과 odd의 값을 Number로 변환한 후 더해주었다.

 

• Lv1) 크기가 작은 부분 문자열

문제 설명
숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.
예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.

제한사항
⚠️ 1 ≤ p의 길이 ≤ 18
⚠️ p의 길이 ≤ t의 길이 ≤ 10,000
⚠️ t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.

입출력 예
#1. t: "3141592" / p: "271" / result: 2
#2. t: "500220839878" / p: "7" / result: 8
#3. t: "10203" / p: "15" / result: 3

 

내가 푼 코드

function solution(t, p) {
    let answer = 0
    const DIGIT = p.length
    const pNum = Number(p)
   
    for(let i=0; i<=t.length-DIGIT; i++) {
        const targetNum = Number(t.slice(i, i+DIGIT))
        if(targetNum <= pNum) answer++
    }
    
    return answer
}

 

p와 자릿수가 같게 t를 잘라야 하는 문제이다.

t를 순회하면서 slice를 이용해서 자릿수에 맞게 숫자를 자른 후 p의 값과 비교해서 p보다 작거나 같은 수일 경우 answer을 +1 해주었다.

 

 

---

👩‍💻 코딩 테스트 후기

코딩 테스트는 레벨 1까지만 풀었는데 기존에 프로그래머스에서 코딩 테스트 문제를 여러번 풀어서 1까진 쉽게 풀 수 있다.

프로그래머스의 레벨 2문제도 많이 풀어보았기 때문에 금방 풀 것 같다. 😊

암튼 오랜만에 알고리즘 문제를 푸니 재밌기도 하고 꾸준히 풀기로 했었는데 그동안 못풀어서.. 다시 꾸준히 풀어보아야겠다고 생각했다.

 

 

 

마무리

---

내일부터 방학인데 방학을 제대로 즐길 순 없을 것 같다.

아직 밀린 공부가 많이 있기 때문에 ㅠㅠ

그래도 다행히 이틀의 방학을 주신 덕에 다음주에 들어가는 Figma 강의 전까지 밀린 강의는 다 끝낼 수 있을 것 같다.

내일도 또 열심히 달리자