스타터 키트 다운로드

이 강의는 리액트 강의가 아니기 때문에, 미리 만들어 놓은 소스를 이용하겠습니다.

새로운 폴더를 만들고 터미널을 열고 아래와 같이 순서대로 입력해보세요.

git clone https://github.com/teracokr/react-starter-tera
cd react-starter-tera/

yarn install
yarn start

브라우저가 실행되면서 아래와 같은 화면이 보입니다.

환경파일 생성

내려받은 소스에서 .env.example 파일을 복사하여 env.local을 생성합니다.

REACT_APP_API_URL=http://localhost:1337
REACT_APP_URL=http://localhost:3000

.env.local 파일은 서버를 재시작 해야 반영이 됩니다. CtrI+C를 눌러 프론트엔드를 종료하고 다시 yarn start로 프론트를 실행합니다.

Strapi도 실행되어 있는지 확인합니다.

http://localhost:1337/admin/

Google 로그인 만들기

./src/pages/Login.js에 링크를 하나 만듭니다.

<a href={`${process.env.REACT_APP_API_URL}/api/connect/google`}>구글 로그인</a>

브라우저에서 ‘로그인’을 클릭하여, 로그인 페이지로 이동한 후, “구글 로그인” 링크가 잘 설정되어 있는지 확인합니다.

아래와 같이 구글 로그인 창이 뜨고,

구글 로그인을 해 보시면, 404 페이지가 뜹니다.

전체 Flow를 다시 한번 보겠습니다. 현재는 4번 단계까지 왔습니다.

Google OAuth, Strapi 까지 모두 통과했으나, Frontend 구성이 제대로 안되어 있는 상태입니다.

404페이지의 주소를 잘 보시면

http://localhost:3000/api/auth/google/callback

페이지를 구현해야 합니다. 이 값은 Strapi에 설정한 값인거 기억나시죠?

이제 프론트인 ReactJs에 위 url에 해당하는 페이지를 만들어 보겠습니다.

구글 OAuth 콜백 받아주는 페이지 생성

이제부터는 약간의 ReactJs에 대한 개념이 필요합니다. 어렵지 않으니 그냥 따라해보세요.

/api/auth/google/callback 에 해당하는 페이지를 만들고, 옆의 url(1)이 리액트파일(2)을 잘 따라가도록 Routing 해 주려고 합니다.

먼저 리액트파일(2)을 한번 만들어 보겠습니다.

Callback 받을 리액트파일(2) 생성

src폴더 밑에 auth 폴더를 생성하고 GoogleCallback.js를 생성합니다.
아래와 같이 코드를 입력합니다.

// ./src/auth/GoogleCallback.js
const GoogleCallback = () => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 12,
        position: 'absolute',
        width: '100%',
        height: '100%',
      }}
    >
      GoogleCallback
    </div>
  );
};
export default GoogleCallback;

지금까지 만든 내용을 보겠습니다.

라우팅 하기

이제는 url(1)이 리액트파일(2)을 잘 따라가도록 Routing 를 해 보도록 하겠습니다.

./routes/index.js 파일을 열어 아래 코드를 추가합니다.

import GoogleCallback from "../auth/GoogleCallback";

<Route path="/api/auth/google/callback" element={<GoogleCallback />}/>

저장하고 다시 브라우저로 가면 아래와 같이 나오면 정상입니다.

이제 여러분은 아래 Flow에서 4번까지 완료했고, 이제 실제 Strapi에 계정을 생성하는 5번 과정을 해 보도록 하겠습니다.