프로젝트를 진행하면서 데이터가 많아지면 페이지네이션(Pagination)이 필요하게 된다.라이브러리를 사용할 수도 있지만, 공부의 취지로 직접 구현해보기로 했다! 이번 포스팅에서는 React로 Pagination을 구현한 과정을 정리하려고 한다. 🌻 Pagination의 동작 구조Pagination의 전반적인 동작 구조는 네이버 블로그의 Pagination을 참고했다.1. 페이지 번호를 클릭하면 페이지가 변경된다. (URL의 쿼리 스트링 값이 업데이트된다.)2. 현재 페이지에는 active 디자인을 적용한다.3. 이전 및 다음 버튼은, 해당 방향으로 이동 가능한 페이지가 있을 때만 표시된다.4. 이전 버튼을 클릭하면, 이전 페이지 그룹의 마지막 페이지로 이동한다.5. 다음 버튼을 클릭하면, 다음 페이지..

Kakao Maps API를 사용하여 사용자의 현재 위치를 지도에 표시하는 방법에 대해 정리해보려고 한다. Geolocation API를 통해 현재 위치를 가져오고, 해당 위치를 Kakao Maps에 표시하는 방식으로 구현했는데, 구체적인 과정을 단계별로 설명해보자! 그 전에, 현재 위치를 Geolocation API를 사용해서 가져오는 방식이 가장 보편적인 것을 알았다.Geolocation API란?Geolocation API는 웹 브라우저에서 사용자의 현재 위치 정보를 얻을 수 있게 해주는 API이다.이 API를 사용하면 사용자의 허락을 받아 현재 위치를 가져올 수 있다. 아래와 같이 호출하여 현재 위치를 가져올 수 있다.navigator.geolocation.getCurrentPosition(suc..

🍎 React-Router를 사용하는 이유 프로젝트를 진행하면서 React Router Dom을 사용하면 React 애플리케이션 내에서 페이지 간 이동을 쉽게 구현할 수 있다.기존 태그를 사용할 경우, 페이지 전체가 새로 로딩된다.이는 화면 깜빡임이 필수적으로 발생하고, 이는 사용자 경험을 떨어뜨릴 수 있다! React-Router를 사용하면, 라우팅을 통해 부드러운 화면 전환이 가능해진다.즉, SPA 사용자 경험 향상을 위해 React Router를 사용하는 것이다. Router의 종류에는 HashRouter, BrowserRouter가 있다. 나는 주로 BrowserRouter를 사용하여 개발을 해왔다. +) 이전에 하루네컷 서비스를 진행할 때, 배포 후 로그인 기능에서 리다이렉트가 안되는 문제를 ..

컴포넌트 레벨 스타일링 개별 컴포넌트 단위로 스타일링 애플리케이션 레벨 스타일링 모든 컴포넌트에 동일하게 적용하는 스타일 애플리케이션 레벨 스타일을 지원하기 위해서 Styled Components는 createGlobalStyle()라는 함수를 제공한다. const GlobalStyle = createGlobalStyle` body { background: #e9ecef; } `; function App() { return ( 안녕하세요 ); } export default App; 전역스타일 컴포넌트를 최상위 컴포넌트 App에 추가해주면, 하위 모든 컴포넌트에 스타일이 적용된다 => 이 때, 전역 스타일 컴포넌트 내부로 하위 컴포넌트를 포함시키는 것이 아니라(~~), 최 상위 컴포넌트로 전역 스타일 컴포..

1. React-Query  -  리액트 쿼리는, 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술 - 서버는 클라이언트에게 데이터베이스에 있는 정보를 전달해주는 역할을 한다   > 이 때, 서버:api서버 / 클라이언트: 리액트 앱(웹 브라우저에서 실행되는, 우리가 작성한 앱) server state / client state를 가지고 있는 어플리케이션의 아키텍쳐 구조 데이터베이스에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데, 이 때 서버에서 가져오는 데이터를 '서버의 상태'라고 이야기 한다. (서버 스테이트)      서버는, 데이터 베이스에서 기록된 정보 (ex.유저 기록)를 불러온다. 이러한 정보들을 조합해서, 서버state를 만들고, 클라이..

보호되어 있는 글입니다.