1일차 작업 내용

/GymListPage /GymListfound /useGymFilter

헬스장 목록. API끌어오기. API데이터가 적어서 더미데이터 생성

• 무한 스크롤(Infinite Scroll)과 Intersection Observer

500개의 데이터를 한꺼번에 그리면 브라우저가 너무 힘들어해서, 처음엔 20개만 보여주고 사용자가 바닥에 닿을 때마다 추가로 불러오는 방식을 사용했습니다. 이때 브라우저의 Intersection Observer API를 써서 스크롤 위치를 효율적으로 감시했습니다

• useMemo를 활용한 데이터 최적화

데이터가 많다 보니 검색하거나 정렬할 때마다 매번 500개를 다시 계산하면 성능 저하. 그래서 useMemo를 사용해 필요한 값(검색어, 페이지 번호)이 바뀔 때만 연산이 일어나도록 최적화했습니다. 특히 '호점 번호순'으로 정렬하는 로직을 넣었습니다

• React.memo와 useReducer를 통한 리렌더링 방지

컴포넌트 성능의 핵심은 '불필요한 리렌더링' → React.memo로 개별 리스트 아이템을 감싸서 데이터가 안 변하면 다시 그리지 않게 했고, useReducer를 사용해 상태 업데이트 로직을 컴포넌트 외부로 분리했습니다. 함수가 불필요하게 재생성되는 것을 막아 프로파일러 수치를 크게 낮출 수 있었습니다.

→useMemo와 무한 스크롤로 연산량을 줄이고 useReducer와 React.memo를 사용하여 리액트의 리렌더링 성능을 극대화했습니다

2일차 작업 내용

newsAPI를 연결햇을때는헬스장 관련 뉴스가 연동 돼서 조금 더 자연스럽게 하기 위해서 공공데이터 (헬스장 업체정보 공공API) 를 가져와서 사용

Troubleshooting

• CSV 파일을 불러왔으나 화면에 한글 대신 다이아몬드 기호()가 출력됨.

→ 엑셀에서 'UTF-8'로 다시 저장하기를 시도했으나, 엑셀 프로그램 특성상 눈에 보이지 않는 표식(BOM)이나 설정 문제로 해결되지 않음.

• Papa.parse 에 인코딩 옵션을 추가했지만 여전히 깨짐. 일부 환경에서 cp949라는 명칭을 인식하지 못함

→ 가장 표준적인 한국어 인코딩 명칭인 euc-kr로 변경하여 브라우저 호환성을 확보함

• 검색창에 한글 입력 시 글자가 씹히거나 중복으로 입력되는 현상 발생.

→ 실시간으로 URL 파라미터를 업데이트하면서 컴포넌트가 과도하게 재렌더링됨. 이 과정에서 한글 조합(IME)이 깨짐.

해결: 입력 상태(inputText)와 검색 결과 상태(searchTerm)를 분리. 사용자가 입력을 마친 후 버튼을 누르거나 엔터를 칠 때만 검색이 실행되도록 수정하여 개선함.