무한 스크롤과 페이징 구현
오늘은 React 애플리케이션에서 무한 스크롤과 페이징을 구현하는 방법에 대해 찾아보았다. 사용자가 스크롤을 아래로 내릴 때 데이터를 동적으로 로드하여 "더 보기" 버튼 없이도 부드러운 사용자 경험을 제공하는 방법을 알아보았다.
핵심 개념
- 페이징과 API 요청
- 서버에서 데이터를 일정 단위(page, page_size)로 받아오기 위해 쿼리 파라미터를 사용한다.
- 기존 데이터를 덮어쓰지 않고 새로운 데이터를 기존 상태(state)에 추가한다.
- 스크롤 이벤트 처리
- 사용자가 컨테이너의 하단에 도달했는지를 scroll 이벤트로 감지한다.
- 하단에 도달했을 때 다음 페이지 데이터를 가져오는 함수(fetchSessions)를 호출한다.
- React 상태 관리
- 여러 상태를 관리해야 한다.
- sessions : 로드된 모든 데이터를 저장.
- page : API 요청 시 사용할 현재 페이지를 추적.
- loading : 중복 API 호출을 방지.
- hasMore : 추가 데이터가 더 있는지 여부를 표시.
- 여러 상태를 관리해야 한다.
- 효율적인 리소스 관리
- 메모리 누수를 방지하기 위해 이벤트 리스너를 추가하고 제거.
- 불필요한 리렌더링을 막기 위해 상태 업데이트를 최적화.
코드 구현
여기서는 React에서 무한 스크롤을 적용한 주요 코드를 작성했다. 주요 작업은 아래와 같다.
- API 요청을 통해 데이터 페이징.
- IntersectionObserver를 활용해 스크롤 이벤트 감지 최적화.
- 데이터 병합과 상태 관리.
이 과정을 통해 React로 사용자 경험을 개선하는 무한 스크롤 방식을 구현해보았다.
Axios 인증 헤더와 Django REST Framework에서 비밀번호 변경 처리
Axios를 사용해 Django REST Framework(DRF) 기반 백엔드와 통신하는 과정에서 발생한 문제를 해결해보려고 했다.
1. Axios 요청에서 Authorization 헤더 추가
- Django REST Framework는 인증된 요청만을 허용하기 때문에 Authorization 헤더에 인증 토큰(JWT 또는 세션 토큰)을 포함해야 한다고 한다.
- Axios 인스턴스를 생성할 때 기본 헤더에 Authorization을 추가하는 방식으로 문제를 해결할 수 있다고 한다.
export const apiRequest = axios.create({
baseURL: `${baseURL}/api/v1/accounts`,
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${localStorage.getItem("accessToken")}`, // 인증 토큰 추가
},
});위와 같이 코드를 수정할 수 있다.
2. DRF에서 사용자 인증 처리
- DRF의 IsAuthenticated 권한 클래스는 인증되지 않은 사용자의 접근을 차단한다.
- 비밀번호 변경 API에서 request.user가 None으로 처리되는 문제가, 인증 정보가 누락된 요청에서 발생했다면, 아래와 같이 permission_classes에 IsAuthenticated를 추가하여 인증된 사용자만 비밀번호 변경을 처리하도록 설정할 수 있다.
from rest_framework.permissions import IsAuthenticated
class PasswordAPIView(APIView):
permission_classes = [IsAuthenticated]
def put(self, request, *args, **kwargs):
user = request.user # 현재 인증된 사용자
new_password = request.data.get("new_password")
user.set_password(new_password)
user.save()
return Response({"detail": "Password updated successfully."})백엔드 코드 예시는 위와 같다.
3. 비밀번호 변경 요청 데이터 점검
- 프론트엔드에서 요청 데이터를 올바르게 전달하고 있는지 확인했다.
- 요청 데이터는 아래와 같은 형식으로 백엔드로 전달 된다.
const formData = {
new_password: "examplePassword123",
};
4. 문제 원인 및 해결 과정
- 문제 원인
No User matches the given query.라는 에러는 인증 정보가 누락되어 발생했었다. 이는 Authorization 헤더에 인증 토큰이 포함되지 않은 상태에서 요청이 전송된 것이 원인이었다. - 해결 방법
Axios 인스턴스 생성 시 Authorization 헤더를 추가하여 요청에 인증 정보를 포함하도록 수정하는 방법을 시도했다.
Django에서 DEBUG = False 설정 시 ALLOWED_HOSTS 필수 설정
Django 프로젝트에서 DEBUG = False로 설정하면 반드시 ALLOWED_HOSTS를 설정해야 한다는 것을 알게 되었다. 이 설정은 운영 환경에서 애플리케이션 보안을 강화하기 위한 중요한 요소다.
문제 상황
DEBUG = False로 설정 후, 서버를 실행했더니 아래와 같은 에러 메시지가 발생했다.
CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False.원인
- DEBUG가 False일 경우, Django는 허용된 호스트만 애플리케이션에 접근할 수 있도록 ALLOWED_HOSTS 설정을 요구한다.
- ALLOWED_HOSTS는 애플리케이션이 허용할 도메인, IP 주소를 지정하는 리스트다.
해결 방법
1. ALLOWED_HOSTS 설정 추가하기
- settings.py 파일에서 허용할 도메인 또는 IP 주소를 ALLOWED_HOSTS에 명시한다.
ALLOWED_HOSTS = ['example.com', 'www.example.com', '127.0.0.1', 'localhost']
2. 모든 호스트를 허용하기 (권장하지 않음 )
- 모든 호스트를 허용하려면 와일드카드('*')를 사용할 수 있지만, 보안상 위험하다.
ALLOWED_HOSTS = ['*']
3. 환경 변수로 관리하기
- 민감한 정보를 코드에 직접 작성하지 않고 .env 파일에 저장하여 로드한다.
- .env 파일
ALLOWED_HOSTS=example.com,www.example.com- settings.py 파일
from decouple import config
ALLOWED_HOSTS = config('ALLOWED_HOSTS', default='').split(',')
DEBUG = False는 운영 환경에서만 설정해야 하며, 개발 중에는 DEBUG = True로 유지해야 한다. ALLOWED_HOSTS는 보안을 위해 중요한 설정이므로, 운영 환경의 도메인/호스트에 맞게 정확히 설정해야 한다. 민감한 설정 값을 코드에 직접 작성하지 않고 환경 변수로 관리하는 것이 더 안전하다.