[프로그래머스 과제테스트] 고양이 사진 검색 사이트

KINA KIM·2022년 5월 14일
0
post-thumbnail

🍊데모 페이지 / ✏️GitHub

📷 구현 과정


1) 구현사항

- 시맨틱한 코드

시맨틱(symantic)한 코드란 무엇인가? 시맨틱은 '의미의'라는 뜻을 가지고 있는 단어다. 코드에 적용하게 되면 말 그대로 Div 태그를 남발하지 않고 의미있는 코드를 작성하라는 정도로 이해하면 될 것 같다.

//시맨틱하지 않은 코드
<div>푸터입니다.</div>
//시맨틱한 코드
<footer>푸터입니다.</footer>

위의 코드보다 아래의 코드가 무엇을 의미하는지 보다 쉽게 이해할 수 있다.

* HTML 주요 태그

<header></header> //페이지 최상단에 위치
<nav></nav> //네비게이션 바
<aside></aside> //사이드에 위치하는 공간
<main></main> //주요 내용
<section></section> //문서의 특정 영역
<article></article> //특정 영역 내부의 콘텐츠
<ul>
<li></li> // ul과 li는 함께 쓰이며 리스트 의미
</ul>
<footer></footer> //페이지 하단

이 외에도 많은 태그들이 존재하는데 시맨틱한 코드를 작성하기 위해서는 적재적소에 어울리는 HTML 코드를 알고 있을 필요가 있다.

- Lazy Loading

페이지는 처음 로딩될 때 페이지의 전체 내용이 한꺼번에 로딩이 된다. 그런데 용량이 매우 크거나 리소스를 많이 포함하고 있는 내용을 이렇게 한꺼번에 불러오게 되면 서비스의 속도도 느려지는데다 메모리 낭비가 어마어마할 것이다.

그래서 리소스 절약과 메모리 낭비를 방지하기 위해 현재 화면에 보이지 않는 이미지들을 나중에 로딩하는 방식이 바로 Lazy Loading이다.

왜 고양이 검색 사이트에 lazy loading이 필요한가? 고양이 검색 시 수많은 고양이 사진이 한 번에 들어오기 때문이다.

lazy loading을 구현하는 방법은 세가지가 있다.

* getBoundingClientRect 사용

* Intersection Observer API 사용

* <image loading = 'lazy'> 사용

나는 세번째 방법을 적용했지만 사파리에서는 작동을 아직 안 한다고 한다.

- 다크 모드

다크 모드는 어두운 색상의 배경에 밝은 요소를 사용하는 UI이다. 다크모드를 구현하는 방법은 여러가지가 있는데 prefers-color-scheme CSS를 사용했다.

그리고 토글 버튼을 사용해서 현재 상태가 라이트 모드면 다크 모드로, 다크 모드면 라이트 모드로 전환을 해줘야 했는데 모드 변경 시 배경, 헤더, 검색창, 검색 결과창까지 변경될 요소들에게 새로운 클래스명을 부여하고 CSS를 일일히 하나하나 바꿔줘야 하나 싶어서 절망했다.

그래서 지푸라기라도 잡는 심정으로 모드 토글 버튼을 지원하는 웹페이지를 방문해서 개발자 모드로 HTML 코드를 뒤져봤다. 내가 방문한 웹페이지는 바로 벨로그다. 개발자 모드를 켜서 모드를 전환할 때마다 벨로그가 어떤 식으로 css를 변경하는지 훑어봤더니 body에 data-theme이라는 요소로 토글을 하고 있었다.

토글할 때마다 변화하는 body data-theme의 모습! 그래서 이걸 활용해서 쉽게 다크모드 토글 버튼을 만들 수 있었다.

* prefers-color-sheme

다크 모드는 어두운 색상의 배경에 밝은 요소를 사용하는 UI이다. 사용자 환경이 다크모드인지 라이트 모드인지 자동으로 인식하고 그에 맞춘 테마를 제공해야 하는데 prefers-color-scheme가 그 역할을 해준다. CSS에 variable을 사용하고, 사용자 환경이 다크모드인지 라이트모드인지를 인식해서 해당 variable을 한꺼번에 바꿔주는 방식으로 구현했다.

* data-theme

그렇다면 data-theme이란 무엇인가? 동적으로 반응하는 CSS 웹 변수다. 테마를 쉽게 스위칭할 수 있도록 도와주는 제이쿼리 문법이라고 한다. css 파일에서 :root처럼 css변수를 저장하는 방식으로 css를 정의하고, 토글 버튼으로 data-theme을 변경해주면 해당 테마로 변화한다.

- 사용 API 추가

첫 문제 풀이때는 제공되는 API를 사용했는데 복기인만큼 귀여운 고양이 API를 추가적으로 사용하기로 했다. 헤더의 귀여운 화들짝 고양이를 클릭하면 랜덤 고양이 움짤이 나오도록 만들었다.
https://thecatapi.com/


2) 로직

- 필요한 렌더링

0-1. 모든 렌더링 시 로딩 중임을 알리는 UI적 처리 필요
0-2. 최근 검색어 5개를 검색어 기록창에 보여주고 클릭 시 검색이 일어나야 한다.
0-3. 검색 결과가 없는 경우 UI적 처리 필요
0-4. 새로고침해도 마지막 검색 결과 화면 유지 (LocalStorage 사용)
1. 페이지 접속 시 비어있는 메인 페이지를 로딩한다.
2-1. 검색어를 받으면 API에서 검색어를 불러와 검색 결과를 렌더링한다.
2-2. 랜덤 고양이 버튼을 누르면 랜덤 고양이 사진을 렌더링한다.

- 폴더 구조


2) 구현

import App from './App.js'
new App(document.querySelector("#App"));

0개의 댓글