검색 기능 만들기 2
검색 기능 민들기 어디서 보지 않았나 ???
그렇다. 저번 토이 프로젝트에서 만든 경험이 있다.
토이 프로젝트에 관한 글
https://velog.io/@userhwseo/ToyProject-%EA%B2%80%EC%83%89-%EA%B8%B0%EB%8A%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0
그렇지 않다.
이번 미니 프로젝트의 목적을 설명하겠다.
-
지난 번에 제작한 토이 프로젝트를 React로 마이그레이션 한다.
-
React에서 마이그레이션 하면서 추가적인 기능을 구현한다.
물론 나의 의지가 아닌 국비 학원 강사님께서 구현하도록 시킨 프로젝트이다.
필자는 처음에 똑같은 주제를 바닐라 자바스크립트와 리액트로 두 개를 만든다는게 조금 의아했다.
하지만 3분도 안되어서 마이그레이션 또한 중요하다고 생각이 바뀌게 되었다.
몇몇 회사들 중에서 마이그레이션 하는 작업을 하는 경우가 있다.
Vue 혹은 Angular (혹은 jQuery) 프레임워크를 사용하는데
React로 마이그레이션 하는 경우를 채용 공고에서 본 것 같다.
이러한 이유에 있어 마이그레이션 작업은 개발자에게 중요한 작업이다.
(물론 바닐라 자바스크립트를 React로 바꾸는 게 훠어어어얼씬 간단하다.)
토이 프로젝트에 관한 글을 읽어보지 않으신 분들을 위해서 간단하게 구현 해야할 기능들을 살펴보자.
- NYT API를 사용하여 뉴스들을 가져온다.
- 북마크(즐겨찾기) 기능 구현해야 한다.
- 검색창을 만들어 검색어와 관련된 뉴스만 가져와야 한다.
- 최근 검색한 단어들은 blur와 focus로 보이도록 해야한다.
- 무한 스크롤로 뉴스들을 계속해서 불러와야한다.
마이그레이션을 하면서 추가해야하는 점
- Redux를 사용하여 상태관리를 해야한다.
- 최근 검색어와 북마크된 뉴스는 localStorage에 저장해야 한다.
- react-route-dom을 사용하여 예상치 못한 경로로 접근 시 Home으로 redirect를 시킨다.
이상 위의 요구 조건들을 만족하는 웹을 제작하는 프로젝트였다.
또한 토이 프로젝트와 다른 점은 팀프로젝트라는 것이다.
조 원은 총 4명이며 각각 구현하기로 한 파트를 담당했다.
나
검색 키워드 뉴스를 렌더링
무한 스크롤
북마크 기능
예상치 못한 경로 접근 시 Home으로 redirect
A양
검색 창 구현
(타이핑 이후 0.5초 동안 추가 입력이 없으면 자동으로 검색)
최근 검색어 구현
B양
Style-Component를 활용한 스타일링
C군
검색 키워드 뉴스 렌더링 및 무한 스크롤
반갑다 NYT API야
NYT에서 Search API를 가져와 develop 브랜치에 API를 바로 사용 가능 하게 끔 함수를 만들어 놓았다.
이후 useEffect를 사용하여 input의 state에 따라 뉴스들을 렌더링하는데 성공했다.
API를 가져올 때 Axios를 사용해보고 싶었지만 다른 팀원들은 Axios를 배우지 않은 상태이다.
Axios랑 Fetch랑 큰 차이는 없긴하나 나 혼자 Axios를 배웠다고 사용하는 것은 너무 이기적인 생각이다.
혼란스러워 할 수 있는 팀원들을 위해 fetch를 사용하여 API를 받아왔다.
무한 스크로오오오올
무한 스크롤은 토이 프로젝트에서도 사용했던
Intersection Observer API를 사용했다.
React에서 Intersection Observer API와 같은 라이브러리가 있는 걸로 알고 있는데 이번엔 라이브러리를 사용하지 않고 기존 자바스크립트에 내장되어 있는 API를 사용했다.
이유는 라이브러리의 사용을 피하고 싶었다.
배우는 입장에서 라이브러리의 활용을 낮추고 싶다는 생각이 들었다.
라이브러리를 사용하면 좀 더 깔끔하고 간편한 코드로 구현이 가능하나 라이브러리 안에 있는 코드들이 어떤 식으로 동작하는지 알기 어렵기 때문이다.
observer의 target은 렌더 된 마지막 뉴스에 주었다.
북마크: 난 좀 다르다.
북마크는 바닐라 자바스크립트로 구현 할 때와는 조금 다르다.
바닐라 자바스크립트에선 하나의 URL에서 뉴스 리스트를 렌더하는 기능과 북마크 기능이 동시에 있다.
무슨 소리냐면 localhost:5500 페이지 안에서 뉴스리스트들이 나오게 되어 Clip 버튼을 누르게 된다면 하나의 배열 안에 해당 뉴스 기사들이 저장 되게 된다.
이후 나의 북마크 리스트들을 보고 싶다면 기존 검색으로 렌더링 된 기사들은 모두 없애고 배열에 저장된 북마크 리스트들을 재생성 해주는 것이다.
하지만 이번 프로젝트는 /clip이라는 다른 URL에 북마크 된 뉴스 기사들만 렌더링 되도록 하는게 목적이다.
그렇기 때문에 일단 react-route-dom으로 페이지를 나누고
Redux-toolkit을 사용하여 Clip 된 기사들을 전역으로 상태 관리하였다.
그렇게 Redux의 store에 저장된 기사들은 useSelector를 사용하여 Clip 컴포넌트에서 사용을 하도록 했다.
구현하면서 어려웠던 점
팀원들끼리 구현 기능 나누기
이 부분이 가장 난감했다.
리액트를 다룰 줄 아는 사람이 있는가 하며 어떤 이는 React 사용이 어렵다는 조원도 있다.
그리고 리덕스는 너무나도 어려워 하시기에 대부분의 기능을 내가 맡았다.
각자의 실력이 있기 때문에 서로 이해 해주고 무리한 요구는 맡기지 않았다.
Git 활용도
Github에 학원 매니저님께서 만들어 놓은 레포지토리가 있는데 그것을 fork하여 사용을 하는 형식이였다.
그런데 Private으로 된 레포지토리를 fork 해야 하는데 매니저님과 강사님의 소통에 문제가 생겨 그만 Public으로 된 레포지토리를 생성하게 되었다.
(이것은 매니저님과 강사님의 소통 문제)
왜냐면 강사님은 이 프로젝트를 다른 기수에도 사용을 하셔야 하기 때문에 검색으로 해당 내용과 코드가 디테일하게 나오게 되면 안되기 때문이다.
그렇게 Public으로 된 Git을 다시 Private으로 만드는 과정에서 내 코드를 제외한 다른 팀원들의 코드가 모두 날아가게 되었다. 😱😱😱
이때 정말 놀래서 5초정도 정적이 흘렀는데
다행히 다른 팀원들이 빠르게 레포지토리에 각자 코드를 올려주어서 사건은 마무리 되었다.
Git에 대해 조금 더 공부를 해야할 거 같고 많이 부딫혀 봐야할 거 같다.
간단하게 remote만 변경하면 되는 문제를 다르게 생각하여 어렵고 위험하게 레포를 이동시킨거 같다.
배운 점
1. fork 된 레포는 fork를 한 레포의 Public과 Private을 따라간다. (개인적을 변경 불가능)
2. fork 한 레포를 삭제한 후 다시 복원이 불가능하다.
컴포넌트 분리하기
Redux를 사용하여 전역 상태관리를 하였는데 아쉬운 점은
Reducer와 Action 폴더와 컴포넌트를 따로 만들어 관리했어야 했는데 그러지 못한 점이 조금 아쉽다.
만약 처음 설계부터 진행 하였다면 Redux 관리를 조금 더 섬세하게 했을 텐데 그러지 못한 점이 조금 아쉽다.
비동기적 상태관리
Redux에서 배운 thunk를 사용한 비동기 전역 상태관리를 사용해보고 싶었는데
시간적 여유나 이 다른 팀원들이 API를 사용하기 어려운 점을 고려하여 리팩토링 하진 않았다.
기회가 된다면 다음엔 Redux-thunk와 React Query를 사용해보려한다.
(React Query 진짜 사용해보고 싶어요 ~)
느낀점📝
확실히 Git을 활용하는 게 아직 익숙치 않다.
해당 프로젝트에서 Git flow를 사용하여 팀원들끼리 커밋도 잘했고 병합도 잘했다.
그럼에도 Repo 하나 옮기는 부분에서 크나큰 실수를 저질러 버렸다.
파이널 프로젝트에서도 Git을 좀 더 신중하고 많이 알아본 다음 사용 해야겠다.
그리고 컴포넌트 분리와 프론트엔드의 아키텍처 설계에 관해 조금 더 알아보고 싶은 생각이 들었다.
마지막으로 같이 함께 해준 팀원들에게 감사의 말을 하고 싶다.
