3주차 과제 -2 :영양제 검색 사이트
📋 구현 내용
✔ TagList, Input, ResetBtn 컴포넌트 구현
✔ Main 컴포넌트에 domain 컴포넌트 병합 및 UI 수정
💡 새로 알게 된 내용
✔ indexOf(), filter()
- 태그리스트를 만들 때 데이터에서 브랜드명을 가져와 중복된 이름을 제거할 때 사용했다. 처음 사용해본건아니지만 그냥 알고있는것과 적절하게 사용할 줄 아는 건 또 다른 것 같다. 머리가 안돌아가..
- 지난 과제에 이어 이번 과제에서도 api 데이터를 이용하다보니 배열을 수정하는 함수의 사용이 불가피했는데 이번에도 타입오류가 나서 조금 애를 먹었지만 그래도 잘 해결되었다. 배열 관련 함수를 사용하는 일이 굉장히 빈번한 것 같다. 관련 예제를 만들어보면서 공부하고 정리해야겠다.
✔ debounce
- 빠르게 같은 동작을 처리하는 함수가 있을 때, 중간 과정을 보여주지 않고 결과를 모아 보여줘도 문제가 되지 않을경우 사용한다. 이번 과제에서 검색어 입력시 onChange를 이용하여 value값을 가져오도록 했는데, 이런경우 타이핑하는 모든 순간마다 재렌더링이 일어난다. 그래서 debounce를 적용해 일정시간이 지난 후 한번에 처리되도록 설정했다.
✔ flex: 0 0 auto (flex-grow, flex-shirink, flex-basis)
- 지난 과제에서 카테고리 리스트 만들 때 카테고리 css 속성인 width:30%가 적용되지않고 모양이 찌그러져서 어려움을 겪었었다. 당시엔 웹홈페이지를 보고 float을 적용해 해결했었는데 이번에는 flex에 대해 더 알고싶어 검색해보니 flex: 0 0 auto를 적용하면 해결할 수 있다는 글을 찾을 수 있었다. flex 관련해서 더 공부해야겠다고 생각했는데 따로 시간내서 공부하는 것도 필요하지만 작업하면서 모르는 부분을 검색해서 알아가는 과정도 필요한 것 같다. 그래서 모른다고, 어렵다고 피하기보다는 일단 시작하고 만들면서 배우고 경험하는게 중요한 것 같다.
✔ 텍스트 커서 안뜨게 하는 방법
- 팀원 중 한 분이 항상 구현할 때마다 텍스트 커서 안뜨게 했으면 좋겠다고 했었는데 이번에 검색해서 적용해보았다. 그 분이 말하셨던건 blur함수를 적용하라고 하셨던것 같은데 검색해보니 css로 적용하는 방법이 있어 이 방법을 사용했다.
- 하지만 검색하면서 알게 된 정보에 의하면 이렇게 적용했을 경우엔 텍스트리더기에 읽히지않아서 웹 접근성 면에서는 좋지 않은 방법이라고 한다. 보기엔 좋아보이지만 웹접근성을 따져야한다면 사용을 지양해야 겠다.
css 속성 추가하기
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
✨ 느낀점
✔ 이번 과제는 부득이하게 거의 2명이서 진행해야 했는데, 그러다보니 처음 구상했던 기능들을 모두 구현하진 못했다. 검색기능을 구현하기 전, redux를 사용할지에 대해 고민했었는데 당시에는 사용하지않아도 충분히 구현할 수 있을거라 판단하고 작업을 시작했지만 filter 기능을 구현하면서 이전 검색어를 저장하거나, 브랜드버튼을 통해 필터링 된 데이터에서 검색어를 입력했을 때 다시 필터링 되는 등등.. 기존 로직으로는 한계가 있어 처음 구상했던 계획을 조금 바꾸어 단순하게 제품명, 혹은 브랜드명으로만 검색이 가능하도록 수정했고, 각 버튼을 이용시 이전 검색값은 초기화되도록 수정했다.
✔ 하지만 각 버튼들과 검색창도 따로 분리된 컴포넌트였기에 각각을 연결하기 위해선 부모컴포넌트에서 props로 전달, 전달 할 수 밖에 없었다. 그런 과정에서 전역상태관리의 필요성을 절실히 느낄 수 있었다.. 컴포넌트를 작은 단위로 나누어 작업하는 react의 특성상 전역상태관리는 필수인 것 같다. redux는 잘 모르지만 context API와 useReducer는 사용할 수 있었을 것 같은데 나중에라도 수정해서 적용해봐야겠다.
✔ 작은 부분이라 컴포넌트를 분리하지않고 작업했다가 뒤늦게 추가하고 수정해야 할 상황이 생겨 뒤늦게 컴포넌트를 분리해야하는 상황이 있었다. 지난 과제에서 컴포넌트를 잘 분리해서 사용해야겠다고 다짐했는데 바로 또 같은 실수를 하다니.. 이런 부분들은 계속 생각하고 습관이 되야하는데 아직 익숙치않아 그런 것 같다. 항상 함수처럼 컴포넌트도 한 개의 기능만 담당하도록 분리하고 쪼개는 습관을 들여야겠다.
기록하며 공부하기