React 프로젝트: 인증이 있는 게시물의 해시태그 — 파트 #1

이 블로그 게시물은 React Query, Redux 툴킷, I18n, 사용자 정의 테마로 시작하는 방법에 대한 완전한 지식을 제공합니다.

부품 시리즈에 대한 빠른 링크:

PART #1 - ReactJS 소개 및 설치(본 게시물)
2 부 -
파트 #3 -
파트 #4 -
파트 #5 - styled-component의 고급 사용에 대한 기본 사항

어떤 단계에서든 막히면 Github repo을 참조하십시오.

완료된 프로젝트를 찾으려면 Demo link

이것이 우리가 만들 것입니다:

아무 것도 없는 상태에서 시작하여 자세히 다룰 내용을 살펴보겠습니다.

create-react-app을 사용하여 기본 React SPA 설정

Redux 툴킷을 사용하여 자체 상태 관리 시스템 설정

React Router를 사용하여 앱 탐색에 대해 알아보기

사용자 지정 다중 레이아웃 구축에 대해 알아보기

원격 데이터에 반응 쿼리를 사용하는 방법 알아보기

i18n 사용 방법 알아보기

스타일 구성 요소를 사용하여 스타일 지정 시작하기

사용자 정의 테마 구축 방법 알아보기

우리 프로젝트의 구조:

시작하기 전에 프로젝트가 어떻게 구성될 것인지에 대해 이야기해 봅시다.

create-react-app을 사용하여 React 앱을 생성하면 기본 React 앱이 생깁니다. 해당 응용 프로그램 내부에서 구성 요소 패턴을 만들고 폴더 구조는 다음과 같습니다.

오늘 우리의 목표는 다음과 같습니다.

새 React 블로그 만들기

Dummy Api 계정 설정 및 API 키 생성

React Routing을 사용하여 앱을 탐색할 수 있음

Create React App으로 프로젝트 생성:

나는 종종(항상은 아니지만 😁) Create React App을 사용하여 내 React 프로젝트를 시작합니다.

프로젝트 실행을 생성하려면 다음을 수행하십시오.

npx create-react-app my-app --template typescript

API:

프런트엔드는 API에서 데이터를 가져와야 합니다. 저는 DAummyapi를 선택합니다 🎬 : 무료입니다. API 키를 얻기 위해 계정을 생성하기만 하면 됩니다.

.env 파일에서 API 키를 환경 변수로 사용하세요.

REACT_APP_ENV =“dev”

REACT_APP_DUMMY_API_ID = YOUR_API_KEY

REACT_APP_DUMMY_API_ENDPOINT = YOUR_API_URL

REACT_APP_MOCK_API_ENDPOINT = YOUR_API_URL

구성이 완료되었으므로 코딩을 시작하겠습니다.

React 컴포넌트 구축

이 응용 프로그램에서 우리는 템플릿을 위한 5페이지를 갖게 될 것입니다.

필터가 있는 모든 작성자 세부 정보

작성자 세부 정보가 포함된 모든 블로그 게시물

확인이 포함된 양식 등록

확인이 포함된 로그인 양식

내 계정 페이지

그 파일들을 만들어 봅시다. src/폴더에서 src/pages 폴더를 만듭니다. 새로 만든 폴더 내에서.

React 라우터 설정:

React Router를 실행하려면 의존성을 설치해야 합니다. 프로젝트에서 다음 명령을 실행합니다.

npm install --save react-router-dom

router.js 파일을 만들고 이 코드를 복사하여 붙여넣습니다.

import AuthorListing from './pages/authors/author-listing-container';
import PostListing from './pages/posts/post-listing-container';
import LoginPage from './pages/onboarding/login-container';
import SignUp from './pages/onboarding/singup-container';
import AuthorDetail from './pages/authors/author-detail-container';
import MyAccount from './pages/onboarding/myaccount-container';
import AuthorFilters from './pages/authors/author-listing-filter-container';
import NotFound from './components/not-found';
const isLoggedIn = localStorage.getItem('token');

export const routes = [  
 { path: '/', label: 'Authors', layout_type: 1, component: {   sidebar: AuthorFilters,   main: AuthorListing, }, hide_on_auth: false,  }, 
 { path: '/posts', label: 'Posts', layout_type: 3, component: {   sidebar: '',   main: PostListing, }, hide_on_auth: false,  },  
 { path: '/my-account', label: 'My Account', layout_type: 3, component: {   sidebar: '',   main: MyAccount, }, hide_on_auth: !isLoggedIn,  },  
 { path: '/login', label: 'Login', layout_type: 3, component: {   sidebar: '',   main: LoginPage, }, hide_on_auth: isLoggedIn,  },  
 { path: '/sign-up', label: 'Sign Up', layout_type: 3, component: {   sidebar: '',   main: SignUp, }, hide_on_auth: isLoggedIn,  },  
 { path: '/profile/:id', layout_type: 2, component: {   sidebar: AuthorDetail,   main: PostListing, },  },  
 { path: '*', layout_type: 3, component: {   sidebar: '',   main: NotFound, } }
];

레이아웃 구성 요소:

레이아웃 구성 요소는 매우 단순하기 때문에 개발자가 동일한 페이지 레이아웃을 사용하려는 애플리케이션의 다른 부분에서 재사용할 수 있습니다. 또한 재사용 가능한 사용자 정의 레이아웃을 생성할 수 있습니다.

내 애플리케이션에서 세 가지 레이아웃 조합을 사용했습니다.

왼쪽 사이드바

오른쪽 사이드바

사이드바 없음

이 챌린지에서는 자식 구성 요소를 정의하고, 자식 구성 요소에서 props를 통해 수신할 데이터를 정의하고, 이 자식 구성 요소를 부모 구성 요소에서 여러 번 활용해야 합니다.

이 문제는 세 단계로 해결됩니다.

아래와 같이 레이아웃 유형 사이드바 및 메인으로 라우터의 매개변수를 정의합니다.

{ 
 layout_type: 1, 
  component: {   
     sidebar: AuthorFilters,   main: AuthorListing }, 
   },
   path: '/', 
   label: 'Authors'
}

layout_type => 1 = Left-sidebar 2 = Right-sidebar 3 = No-sidebar

하위 구성 요소를 정의하고 소품을 매개 변수로 제공합니다.

상위 구성 요소에서 하위 구성 요소를 사용하고 소품을 통해 데이터를 제공합니다.

Layout 폴더에서 Layout.js 파일을 만들고 여기에 레이아웃 구성 요소의 코드를 저장합니다.

import React from 'react';

const AppLayout = ({ main: Main, sidebar: Sidebar, type, ...rest }) => {
  const bodyTemplate = [];
  bodyTemplate[1] = (
    <>
      <div className='col-2 sidebar'>
        <Sidebar {...rest} />
      </div>
      <div className='col-10'>
        <Main {...rest} />
      </div>
    </>
  );
  bodyTemplate[2] = (
    <>
      <div className='col-10'>
        <Main {...rest} />
      </div>
      <div className='col-2 sidebar'>
        <Sidebar {...rest} />
      </div>
    </>
  );
  bodyTemplate[3] = (
    <>
      <div className='col-12'>
        <Main {...rest} />
      </div>
    </>
  );
  return (
      <div className='row'>{bodyTemplate[type]}</div>
  );
};
AppLayout.displayName = 'App Layout';
export default AppLayout;

함께 모아서

이제 구성 요소가 설정되었으므로 "localhost:3000"으로 이동하여 모든 페이지가 렌더링되는 것을 볼 수 있습니다.

계속되는 기사