클라우딩 어플리케이션 엔지니어링 TIL Day 18, 19 - 고양이 사진첩 만들기 모의고사, 최종 모의고사 후기

지금까지 배운 고양이 사진 검색 사이트에 대한 내용을 바탕으로 모의 테스트를 진행하는 날이다

최종 모의 테스트, 과제 테스트로 총 두개의 테스트에 대한 후기를 작성해보고자 한다

---

# 테스트 후기

# 최종 모의 테스트

최종 모의테스트는 2시간 동안 두개의 필수 요구사항을 해결하는 문제였다

프로그래머스에서 출제한 모의 테스트이기 때문에 자세한 문제 내용이나 코드를 첨부할 수는 없을 듯하여

문제를 풀이하며 기억에 남는 것, 중요했던 것, 헷갈린 개념 등을 정리해보려고 한다

(혹시나 해서 테스트 결과 보기로 들어가서 확인해봤는데 코드가 바꼈네..?!)

 

# 필수 과제 1

첫번째 필수 과제는 검색어를 자동 완성하는 것이다

input 창에 검색어를 누르기만 하면 바로 밑에 해당 검색어가 포함된 데이터들을 리스트 형식으로 뿌려줘야 했다

필수 과제 1번을 해결한 과정을 간략하게 정리해보겠다

 

1. value 값이 있을 때의 조건 설정하기

key가 눌리면 value 값이 존재한다

따라서 제일 바깥에 if(value)의 조건을 주어서 value 값이 있을 때에만

검색어 API, 고양이 사진 리스트 API를 불러오도록 설정하였다

 

2. CSS에서 display 속성 고쳐주기

input 밑에 검색어 자동 완성 리스트를 보여주고 싶었는데

HTML 태그를 넣어도 보이지 않았다

무엇이 문제인지 계속 찾다가 CSS 에서 display : none; 속성으로 되어있는 것을 확인했다

이 속성을 고치니까 밑에 잘 뜬다

 

3. 검색어 API의 데이터 형식을 파악하고 알맞게 뿌려주기

검색어를 불러오는 API의 데이터 형식을 우선 파악했다

해당 검색어가 포함된 데이터들을 배열 형태로 주고 있었다

따라서 이 배열을 리스트 형태로 보여주기 위해 <ul><li> 태그를 사용하여 $keywords.innerHTML 에 map 메소드로 넣어주었다

이 과정에서 map 과 forEach의 차이에 대해서 다시 한번 공부할 수 있었다

 

4. 검색어를 입력하지 않을 때는 보이지 않도록 해주는 옵션 추가

검색어를 입력했다가 지워도 아래에 띄워진 리스트는 그대로 보였다

검색어를 지우면 404 에러가 뜨면서 console 창에 message가 떴다

따라서 response.message 가 있다면, 즉 모든 검색어가 지워진 상태라면

display = 'none' 으로 검색어 자동완성이 보이지 않도록 설정하고

그 외에는 보이도록 설정해주었다

찾아보니

$keywords.style.display = '원하는 설정값' 을 지정해줘서 CSS를 변경해줄 수 있었다

($keywords.setAttribute("display",'block') 이 방법도 사용해봤는데 적용이 안 됐다)

 

# 필수 과제 2

이거는 딱히 설명할 것은 없고 문제를 아주 자세히 잘 읽어보고 명세서를 꼼꼼하게 확인하면

30초 만에 해결할 수 있는 문제다

사소한 것 하나하나 꼼꼼하게 읽어보자

 

따라서 전체적인 코드의 흐름은 다음과 같다

if (value) {
    추천검색어 fetch {
        if (!response.message) {
            $keywords.style.display = 'block';
        } else {
            $keywords.style.display = 'none';
        }
    }

    if (keyup == 'enter') {
        // 검색 엔터 눌렀을 때 fetch API 호출
    }
} else {
    $keywords.style.display = 'none';
}

---

# 고양이 사진 검색 사이트 과제 테스트

고양이 사진 검색 사이트 과제 테스트는 그동안 들은 강의의 총정리 같은 느낌이었다

4시간 동안 진행되며 강의에서 실습한 내용들을 다시 구현해야했다

해당 테스트 내용은 강의 내용과 일치해서 따로 정리할 것들은 없지만

고양이 사진 검색 사이트 해설 강의를 반복해서 계속 들어야 한다는 것을 다시 한번 느꼈다

해본 실습인데도 기억이 잘 나지 않고, 구조도 다시 보니 어려운 것 같고

아직 한참 부족하다는 것을 느꼈다

다시 한번 초기 파일 구조 분석부터 시작해서 실습 과제를 최대한 스스로 해결해봐야겠다

---

# 새로 알게 된 점

두가지의 테스트를 해결하면서 실제 프론트엔드 채용 과정에서 과제 테스트가 어떤 식으로 나오는지 알게 되었다

고양이 사진 검색 사이트 과제는 굉장히 어려운 것 같다(물론 내가 부족해서 더 그렇게 느끼는 것일수도 있다)

고양이 사진 검색 사이트처럼 순수 바닐라 자바스크립트로 된 프로젝트의 구조를 파악하고

원하는 기능을 추가할 수 있는 정도의 실력이 되고 싶다

그렇게 되기 위해서는 지금보다 몇배는 더 노력해야겠다

갈길이 멀고도 험하지만 이번 테스트 다시 한번 복습하고 정리하면서 새로운 주차의 강의를 들을 준비를 해야겠다