풀스택 서버리스: 리액트, AWS, 그래프QL을 이용한 최신 애플리케이션 개발

85

4

장

인증 소개

Container

.

js

이 파일에는 다른 컴포넌트에 재사용이 가능한 스타일을 적용하는 데 사용할 컴포넌트가 포

함되어 있습니다.

Nav

.

js

이 컴포넌트에서 내비게이션

navigation

을 만듭니다.

Profile

.

js

이 컴포넌트는 로그인한 사용자에 대한 프로필 정보를 렌더링합니다. 또한 사용자 가입과

로그인을 위한 인증 컴포넌트를 추가할 컴포넌트입니다.

Protected

.

js

보호된 경로를 생성하는 방법의 예로 사용될 컴포넌트입니다. 사용자가 로그인하면 이 경로

를 볼 수 있습니다. 로그인하지 않은 사용자는 로그인 양식으로 리다이렉션됩니다.

Public

.

js

사용자의 로그인 여부와 상관없이 볼 수 있는 기본 경로입니다.

Router

.

js

라우터와 현재 경로 이름을 결정하는 몇 가지 로직이 있는 파일입니다.

이제 파일들이 생성되었고 코드를 작성하기 위한 모든 준비가 완료되었습니다.

4.3.2

첫 번째 컴포넌트 만들기

먼저 애플리케이션에서 사용할 가장 간단한 컴포넌트인

Container

컴포넌트를 만들겠습니다.

이 컴포넌트는 스타일을 재사용해서 적용할 수 있도록 다른 모든 컴포넌트를 감싸는 데 사용할

것입니다.