바닐라 자바스크립트 사진 검색 프로젝트

프로젝트 내용

기본적으로 프로그래머스 과제 테스트를 바탕으로 구현했다. 디자인이라든지 사용한 API, 일부 기능들은 조금씩 다르지만 바닐라 자바스크립트를 이용하여 컴포넌트를 구현한다는 점을 가장 중요하게 생각하고 진행하였다.

기본적으로 가능한 기능은 아래와 같다.

 

1. 키워드로 사진 검색.

2. 랜덤 사진 보여줌.

3. 키워드 5개까지 저장할 수 있음.

4. 저장된 키워드 클릭시 다시 그 키워드로 검색된 사진들을 보여줌.

5. 새로고침 시에도 검색 및 키워드 데이터 유지. 

 

API는 unsplash의 api를 사용했다. 퀄리티 좋은 사진들을 보면서 개발하니까 개발하는 것도 즐거웠다.

https://unsplash.com/documentation

 

 

 

코드 요약

App에서 각각의 컴포넌트를 관리하는데, 이때 App은 고유의 state(error, visible, image, data, keywords)를 가지고 있다. data는 말 그대로 사진 데이터를 말한다. API로 요청을 보내면 랜덤 사진의 경우 하나의 사진 데이터를 보내주고, 키워드로 검색할 경우 여러개의 사진 데이터를 보내준다. keywords는 검색한 키워드의 배열인데 최대 5개까지만 저장한다. image와 visible은 사진 모달 때문에 필요한 state인데, image에는 말 그대로 클릭한 모달의 사진 데이터가 들어 있고 visible은 모달이 보여지는지 여부를 담는다. error는 검색 결과가 없을 때 true가 되도록 설정했다.(화면에는 no results. 처럼 표시된다.)
App은 각각의 컴포넌트에 onRandom, onSearch 등의 함수를 내려준다. 주로 데이터 통신이 일어날 때 state가 변경된다. 처음에는 사실 state에 loading도 포함되어 있어서 검색 데이터를 받아오기 전/후로 state 변경이 일어났다.
여기서 문제가 시작되었다. 😅

 

 

마주친 문제와 코드 개선

리팩토링 전. 한 번 클릭했는데 log들이 두 번씩 출력되는 걸 확인할 수 있다. 자세히 보면 이미지가 로드되기 전 깜빡임이 있다.

 

 

다크모드 버튼을 클릭할 때는 깜빡임이 없는데, 랜덤 버튼을 클릭하거나 검색하는 등 아무튼 데이터 통신이 일어나는 경우 페이지가 찰나에 깜빡인다. 그게 너무 거슬렸다. 원인을 알기 위해 각각의 컴포넌트에 console.log('random') 이런 식으로 로그를 찍어서 확인해보았다.

원인은 사실 loading을 state로 관리하기 때문이었다. 기본적으로 loading은 false이다가, 데이터 통신이 일어나기 직전에 loading을 true로 설정하고, 데이터를 성공적으로 받아오든/에러가 나든 어쨌든 통신이 끝나면 loading은 false가 되어야 한다. 이렇게 되면 api 호출을 할 때마다 state가 짧은 시간 내에 두 번이나 바뀌게 되어 깜빡이게 된 것이다.

눈물을 머금고 loading을 state에서 빼고 그냥 api 호출 전/후로 startLoading(), endLoading()을 호출해서 그냥 loading 컴포넌트의 display를 'block', 'none' 이 되도록 조절했다.

 

 

state가 한 번만 바뀌면서 깜빡이지 않는다.

 

 

결과는 이렇다. API 호출을 하기 전에는 state가 바뀌지 않게 되었기 때문에 깜빡임이 사라지고 state도 데이터를 받아온 후에 한 번만 바뀌는 것을 확인할 수 있다.

정말 별 거 아닌 거지만 이렇게라도 원인을 알아서 조금이나마 코드를 개선한 경험이 처음이라 너무 즐거웠다. 진심. 지금도 글이 술술 써진다.

 

 

 

스타일링

 

스타일링은 이번 프로젝트의 목적이 아니었기 때문에 최소한으로 했다. 그래도 darkmode를 어떻게 구현하면 좋은지에 대해서 생각을 해봤다. 단순히 검은 것은 글씨요, 흰 것은 바탕이다. 이러다가 다크모드로 바꾸면 반대로 바탕은 검은색, 글씨는 흰색. 이렇게 한다고 좋은 다크모드가 아니구나. 색상을 그저 반전하는 것보다 여러 사이트들을 돌아다니면서 어떤 색으로 설정해야 하는지 탐구도 해봤다.

그 외의 디자인은 그냥 accent-color를 하나 정해서 전체적으로 톤을 맞춰주는 정도로 했다. 최소의 시간으로 최대한 효과를 얻기 위해서. 아무래도 보여지는 게 완성도가 떨어지면 개발하는 동안 계속 그 화면을 봐야 하는 내가 제일 고통이다. 그리고 google fonts에서 찾은 work sans 폰트 적용해주기. css에 @import으로 폰트 불러온 것도 처음이었다. 그동안은 계속 html에 넣었었는데. 이것도 이번에 처음 한 경험 중 하나다.

 

 

 

배포 및 깃헙 관리

 

이번에는 깃헙 커밋부터 신경을 쓰려고 했다. 깃모지를 사용하고 Feat, Fix, Update, Docs 등의 말머리도 사용하고 최대한 커밋을 자주 하려고 했다. 그리고 작고 소중한 프로젝트긴 하지만 배포를 해보는 경험이 중요할 것 같아서 vercel을 통해서 배포를 했다. 정말 별 것 아니었다. 가입하는 데에 시간이 더 걸린 것 같다. 그리고 리드미도 성심성의껏 작성했다. 아무리 열심히 쓴 코드여도 직관적으로 이미지로 보여지는 게 중요할 것 같아서 이미지 캡쳐하고, 동영상 녹화하고. 이것도 다 처음했는데 정말 별 거 아니었다. 아 재밌다 정말
그리고 동영상 gif 로 변환하고 지금 블로그 회고를 작성한다.

 

 

 

느낀 점

 

바닐라 자바스크립트 프로젝트는 앞으로 한 두개 정도만 하고 리액트로 다시 돌아가서 몰두해보려고 한다. 즐거웠던 프로젝트였다! 처음 해본 게 많았는데 아무리 작은 프로젝트여도 내가 열심히 해서 완성도를 높이면 이렇게 즐기면서 할 수 있구나 라는 걸 느꼈다.

 

 

https://vanilla-photo-search.vercel.app