React 🕹Toyproject

기사를 렌더링하는 리액트 미니 토이프로젝트를 진행하게 됐다.

이전에 자바스크립트로 동일하게 작업했던 프로젝트를 이번에는 리액트로 구현하는 것이다.

<이전에 자바스크립트로 직접 작업했던 프로젝트>

접근 방법

맨 처음 자바스크립트 토이 프로젝트를 시작했을 때에는, 시간이 없다는 생각에 접근 방법을 생각하지 않고 눈에 보이는 것부터 무작정 만들기 시작했었다.

자바스크립트였어서 가능했던 일인지 모르겠지만, 계획을 짜놓지 않고서도 인풋 값에 따라 API 가져오기, 스크롤이 바닥에 닿게되면 더 많은 기사 API 호출하기, 클립기능 등을 차근차근 구현해낼 수 있었다.

그러나 이번 리액트 프로젝트는 이전과 같이 무턱대고 작업을 시작하려고 하자 제대로 동작시킬 수 있는 것이 하나도 없었다.
결국, 꼬박 하루를 버리고 나서야 접근 방법을 먼저 고안해 내지 않으면 안될 것 같다고 느꼈다.

그래서 일단, 위 프로젝트의 접근 방법을 생각해내려고 한다.

1. 인풋 값을 통해 검색된 API 가져오기
2. 가져와진 기사들의 컴포넌트 보여주기
3. search history 저장하여 보여주기
4. 무한 스크롤 구현 (무한 스크롤 시 짧은 시간 내에 여러번 호출 되지 않도록 만들것)
5. clip 기능 구현

일단 방향은 크게 이렇게 잡아봤는데...

... 만약 혼자 해야 했으면 위 기능을 모두 혼자 구현해야 했을 것이다.

👩🏿‍🤝‍🧑🏽조별 과제👩🏽‍🤝‍👩🏻인만큼 한 부분씩 각자 맡아서 구현하기로 했다.
나는 search history를 저장하여 보여주기 부분을 맡았다.

search history 구현 단계

내가 맡은 부분은 input(search history) 으로, 필수 요구사항은

• input value가 존재하고 마지막 타이핑 이후로 0.5초가 경과되었을 때 검색 API 호출하기
• search history 저장하여 보여주기
• search history가 없거나 input에 focus 되어있지 않을 때에는 history 보이지 않기

였다.

<작업 단계, 경과, 작업물 결과>

1.

일단 input value를 가져와서 배열에 담고, input 아래에 보여주는 것 까지는 할 수 있었는데, 아직 debounce 기능을 구현하지 못해 한 글자 한 글자, 각 글자가 입력될 때 마다 배열에 담기고 있는 모습을 볼 수 있다.

2.

조장님이 배열의 입력 순서를 거꾸로 바꿔달라고 하셔서 말씀대로 냉큼 바꿨다.

3.

드디어 input값에 디바운스를 적용해 Array에 저장하는 방법을 알아냈다!
key 값이 없어 오류가 발생하여 일단 .map의 인덱스 값을 넣어주어서 해결하였고, 문제없이 5개까지만 저장하고 출력하도록 만들었다.
리액트 아직 감을 모르겠어서... 머리가 빠개지는 것 같았지만... 조금씩 필수 요구사항을... 충족해 나가고 있다...

4.

input의 두 번째 요구사항인 'search history가 존재할 때, 그리고 input이 focus 상태일 때 search history를 노출한다'를 구현할 수 있었다!
어떻게 구현할까, 접근 방법을 이것 저것 생각해봤고 useRef 등등 이런 저런걸 많이 써봤는데, 결과적으로는 생각보다 간단하게 구현할 수 있었다. 😊
이제 내 파트에는... 마지막으로... local storage를 활용한 기능만이 남아있다...

5.

local storage 사용법을 제대로 숙지하지 않은 상태로 얼렁뚱땅 구현하려고 하니 이런식으로ㅎ... 되는 것을 볼 수 있다... 실시간으로 들어가지 않고 브라우저를 껐다가 키거나 혹은 새로고침 했을 때에 searchHistory의 값이 들어가버린다.
원하는 구현도 1% 에도 못 미치고 있다.. 제대로 구현하기 위해선 local storage에 대해 다시 정확히 이해해서 접근방법을 새로 생각해내야 할 것 같다.
그래도 다행히 로컬 스토리지 배열 개수 5개까지 저장하는 것까지는 위처럼... 어찌 했다... 근데... 이제 엉성하게 구현해서 배열 안에서도 배열에 담겨버리는... 하,,,

6.

어찌저찌 이것 저것 공부하고 찾아봐서 첫번째 값만 실시간으로 넣는 것은 일단 성공했다. (결국 큰 성과는 없었다는 소리😥)
이제 배열에 다섯개 모두 담는 일과... 사이트를 껐다가 켜도 유지되고 있는 localStorage 정보와 동일하게... searchHistories가 존재할 수 있도록 하는 일이... 남았다...

7.

아니 진짜 코드 더럽게 짜서 어찌저찌 돌아가게는 해놨다!!! (뿌듯)

진짜 완전히 이 꼴이긴 한데 일단 팀프로젝트인 만큼, 맡은 기능을 제대로 구현하는게 우선이라고 생각한다. 깔끔하고 정돈된 코드로 다듬는 것은 차후의 일...
이제 브라우저를 껐다가 켰을 때에 history에 저 로컬 스토리지의 값들이 남아있도록 하는 것만 구현하면 내 파트 구현은 완성이다!!!

8.

필수 요구사항을 읽어보니, 로컬 스토리지를 통해 브라우저를 재시작해도 유지되는 SearchHistory 구현을 원하는 것 같다.
일단 로컬 스토리지에 최근 5개 검색어를 저장하는데에는 성공을 했으니, 얼추 접근방법을 생각해내면 가능할 것만 같다.

그래서 일단 생각해 본 접근법은 이렇다.

만약 로컬 스토리지가 1개 이상 존재하고, SearchHistoryArray가 존재하지 않는다면?
  {
  	로컬 스토리지 정보 가져와서 배열로 담기
    담긴 배열을 서치 히스토리 어레이로 복사해넣기 (혹은 가져온 배열을 직접 서지 히스토리 어레이에 담아버리기?)
    그 배열 HTML에 그리기
  }

잘 구현할 수 있기를 바라며...

9.

이미 작성해놨던 코드를 통해 비슷한 방식으로 구현해낼 수 있었다!
이제 새로고침을 해도, 브라우저를 종료시켰다가 들어와도 이전에 저장됐던 제일 최근의 history 여
로컬 스토리지를 저장할 때 사용했던 코드를 조금 다른식으로 만져보니 역으로 손쉽게 꺼낼 수 있었고 브라우저에 저장되는 searchHistory를 짧은 시간 내에 구현해낼 수 있었다. 😆

이제 내 파트 구현은 끝!!!

다행히 아직 리액트 미니프로젝트 기간이 남아있어, 다른 파트 구현 방법도 스스로 생각해볼 수 있을 것 같다.
혹은 코드 리팩토링을 하는 것도 나쁘지 않을 것 같다.
지금 아직 실력이 부족한 상태여서 뭐가 필요한 코드인지, 불필요한 코드인지 알 수 없는 상태기에 불가능 할수도 있지만, 다시 되돌아본다면 뭐가 보이지 않을까?

10.

다른 팀원과 얘기해봤는데, 크게 수정할만한 코드는 없는 것 같고, 코드에 for문을 자주 사용했는데, 이 for문을 map으로도 바꿔보라는 의견이 있었다.
그건 일단 나중에 해보기로 하고...

일단 다른 팀원과 합쳐서 기능을 시험해보기 위해 임시 레포를 만들어봤다.
서로 겹치는 부분을 간단히 해결하고 confilct를 없앤 후 합칠 수 있었다.

합친 후 기능을 테스트 해봤는데, 합친 후에도 정상적으로 동작하는 것을 볼 수 있었다. :)

아무튼 리액트 미니프로젝트 글은 여기서 마무리!!