Laravel 9를 사용한 반응 페이지 매김에 대한 Junior 접근 방식입니다.

Unsplash에 있는 Tim Wildsmith의 표지 사진



이 글을 쓰면서 저는 프로그래밍을 처음 접했습니다.
풀스택 웹 개발자를 위한 집중 부트캠프가 7개월 밖에 없습니다.
저는 아직 훈련 중이며 가장 큰 리소스는 Google, Dev.to 및 Stack overflow입니다.
시니어 개발자 친구들로부터 그것들은 절대 사라지지 않는다는 말을 들었습니다.
-- "대부분의 사람들은 메모리에서 코드를 작성할 수 없습니다. 프로세스 내내 어딘가에 웹 검색이 항상 포함되어 있기 때문입니다."- 그들은 말한다.
-- "언어와 프레임워크의 기본 논리 구조를 배우는 데 집중하세요. 나머지는 구문에 불과합니다."- 그들은 나에게 조언했다.

그럼! 충분히 간단하게 들립니다...
이론적으로는 간단합니다. 모든 프로그래밍 언어는 데이터 구조, 제어 구조 및 시퀀싱에 대해 동일한 기본 개념을 가지고 있습니다. 맞습니까?
다음은 이 주제에 대한 흥미로운 기사입니다.
very nice interesting article

그러나 언어에서 언어로, 프레임워크에서 프레임워크로 이동하면 매우 혼란스러울 수 있습니다. 당신의 "후배"기억 속에는 모든 것이 여전히 너무 생생해서 모든 것을 섞기만 하면 됩니다.

그런 다음 Laravel/React 소셜 플랫폼 프로젝트가 나왔습니다.

그래서 Laravel과 React로 만든 블로그 프로젝트의 페이지네이션 기능을 작업해야 했을 때 벅찼습니다. 저는 리액트 경험이 일주일 밖에 없었습니다... (음 전체 소셜 플랫폼 프로젝트가 압도적이었지만 이 기사에서는 이 간단한 기능에만 집중할 것입니다.
그래서 나는 내가 받은 조언을 기억하고 일반적인 Google 검색으로 이 사가를 시작했습니다(다른 사람들이 어떻게 했는지 볼 수 있습니까?).



끝없는 반응 구성 요소와 YouTube 비디오 튜토리얼 토끼 전체에 오랜 제작 시간을 보낸 후 저는 이전보다 더 혼란스러웠습니다.
제대로 이해했다면 구성 요소에 대한 MVC 폴더 안에 구성 요소 파일을 만들어야 합니다. 이 파일은 복잡한 수학 항목처럼 보이는 논리로 가득 차 있을 것입니다(수학에 대한 내 기술은 간단한 계산기를 넘어 가지 않습니다. mac OP 시스템에 있음) 사용하려는 페이지로 이 구성 요소를 가져와야 합니다.
오른쪽! 그래, 그 충고는 또 뭐였지...?

나는 전에 아주 쉬운 페이지 매김을했습니다. 간단한 Laravel/Breeze/Tailwind 프로젝트에서. 내가 해야 할 일은 쿼리 작성기에서 내장된 메서드 "paginate"를 호출한 다음 블레이드 페이지에 코드 줄을 추가하는 것이었고 완벽하게 작동했습니다!

쿼리 빌더

class UserController extends Controller
{
    /**
     * Show all application users.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('user.index', [
            'users' => DB::table('users')->paginate(15)
        ]);
    }
}

블레이드 페이지

<div class="container">
    @foreach ($users as $user)
        {{ $user->name }}
    @endforeach
</div>

{{ $users->links() }}

여기에서 자세히 알아볼 수 있습니다.
Laravel pagination doc

좋아요, 이 프로젝트의 경우 모든 프런트 엔드가 React로 구축되었으므로 이것을 사용할 수 없지만 처음부터 페이지 매김을 구축할 필요가 없을 수도 있습니다. 아마도 내장 구성 요소에 대한 유사한 접근 방식이 있을까요?
조금 더 검색한 끝에 마침내 내가 원하는 것을 찾았습니다.

Npm React-paginate doc

괜찮아! 그냥 패키지를 다운받아서 라라벨 솔루션보다 코드를 조금 더 추가하면 되었는데, 초보 실력으로는 어려운 일을 대부분 패키지에서 처리하고 있습니다.

해보자!

나는 이미 모든 Laravel-react 프로젝트를 설치했고 인증, 데이터베이스 테이블 및 마이그레이션, 페이지 라우팅은 모두 백엔드에서 Laravel & Breeze에 의해 처리되었습니다(그 부분을 개발하는 그룹 동료). 그래서 페이지 뷰를 구축하고 페이지 매김을 개발하기 위해 바로 이동할 수 있었습니다. 나의

이제 전략을 세울 준비가 되었습니다.

먼저 패키지를 설치하십시오.

npm install react-paginate --save