[Art-on] 스프린트2 -카카오톡 소셜 로그인

김재만·2022년 11월 3일
0

스프린트 2

이번 스프린트에서 진행할 내용은 1. 카카오톡 소셜로그인 2. 회원가입(최초로그인)
3. 로그아웃 4. 회원탈퇴 5. 유저정보수정이다. 추가로 스프린트의 핵심은 오히려 깔끔한 코드를 쌓아가기 위한 기준 세우기이다.

카카오톡 소셜로그인

이번 스프린트의 메인이자 우선 처리해야할 일은 카카오톡 소셜로그인 구현이다. 사내 프로젝트에서 react-kakao-login라이브러리를 이용하여 구현한지 얼마 안 되었으므로, 구현 자체가 어려울 것 같지는 않았다.

1. SDK추가하기

우선 index.html에 SDK를 추가했다. 무조건 필요한 부분이며, 가장 고민없이 할 수 있는 부분이니까..!

// public/index.html
<html>
	...
  <body />
	...
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
  </body>
</html>

2. 카카오 앱 키

클라우드 서비스에서 퍼스널 서비스를 식별하기 위한 값을 앱에 추가해야한다. 일단 깃허브 코드 상에 저장되어 돌아다니길 원하진 않으므로, 환경변수로 작성했다.

// .env

REACT_APP_KAKAO_APP_KEY="사이드프로젝트-앱키"

주의 사항은 첫 째, .env파일을 프로젝트 최상위 폴더에 만들기. 둘째는 프로젝트 재실행하기이다.

그리고, 공교롭게도 최초의 변수명을 작성함에 앞서 변수네이밍 방식에 따르면 어떻게 작성해야하는 가를 고민해야 했다. 해당 규칙을 정리하면 아래와 같다.

  1. 변수와 함수의 이름은 영어로 지을 것
  2. 하나의 명명규칙(camelCase, PascalCase, snake_case, ...)으로 통일할 것
  3. 짧고, 직관적이고, 효율적인 이름으로 지을 것
  4. 축약어를 사용하지 말 것
  5. 이름 안에 컨텍스트를 서술하지 말 것
  6. 결과를 예상하기 쉽게 지을 것

이미 익숙한 내용이지만, 위에 규칙에 따라 나름의 기준을 설정했다.

a1. 영어로 짓기✔️
a2. 디렉토리명은 snake_case, 컴포넌트명 및 컴포넌트 파일은 PascalCase, 함수명 및 함수 호출 파일은 camelCase, 변수 또는 정적자원파일은 camelCase로 작성
a3. 짧고 간결하며 직관적인 이름✔️
a4. 축약어 절대 쓰지 않기..!(특히 img ...)
a5. 이름 안에 컨텍스트 서술하지 않기(재사용성의 적)✔️
a6. 코드의 역할이 드러나는 이름✔️

그리고 아래는 함수, 변수명 짓기에 대한 좋은 방법 중 하나다.

함수명 짓기 도구 - A/HC/LC 패턴


함수명을 접두사 + 동작 + 상위 영역 + 하위 영역로 짓는 방식이다.

  • 동작 : get, set, reset, remove, delete, compose(기존 데이터에서 새 데이터 생성), handle
  • 영역 : 작동 가능한 영역을 서술(단, 영역이 일반화된 경우 생략 가능)
  • 접두사 : is, has(해당 값 소유 여부), should(특정 작업과 결합된 긍정적 조건문을 반환), min, max, prev(변수의 이전 상태), next(변수의 이후 상태)(함수에는 해당하는 경우가 적음)

3. 라우팅 처리 및 로그인페이지 작성

카카오 로그인 작업에 앞서, 라우팅 처리가 되지 않았음을 인지했다. 라우팅은 Next.js를 다음으로 미루었으니 익숙한 react-router-dom을 활용했다.

yarn add react-router-dom @types/react-router-dom

우선 BrowserRouter 공급자부터 설정했다.

// src/providers/app.tsx

import React from "react";
import { BrowserRouter } from "react-router-dom

type AppProvider ={
  children: React.ReactNode
}

export const AppProvider = ({ children }) => {
  return (
    <BrowserRouter>
      {children}
    </BrowserRouter>
  )
}

BrowserRouter를 불러와 자식요소(Routes)를 감싸도록 하고, 자식요소의 타입을 ReactNode로 정의했다. 공급자를 src/App.tsx에서 불러오면 완료다.

// src/App.tsx

import { AppProvider } from "providers/app";

function App() {
  return (
    <AppProvider>
    </AppProvider>
  )
}

export default App;

그 다음은 route 파일을 생성해야한다.

// src/App.tsx

import { AppProvider } from "providers/app";
import { AppRoutes } from "routes";

function App() {
  return (
    <AppProvider>
      <AppRoutes />
    </AppProvider>
  )
}

export default App;

// src/routes/index.tsx
import { publicRoutes } from "./public"

import { useRoutes } from "react-aouter-dom";

export const AppRoutes = () => {
  const commonRoutes = [{ path:"/", element: <></> }]
  
  const routes = publicRoutes;
  
  const element = useRoutes([...routes, ...commonRoutes])
  
  return <>{element}</>
}


// src/routes/public.tsx

const { AuthRoutes } from "features/auth"

export const publicRoutes= [
  {
    path: "/auth/*",
    element:<AuthRoutes />,
  }
]


// src/features/auth/index.ts

export * from "./routes"

// src/features/auth/routes/index.ts

import { Route, Routes } from "react-router-dom";

import { Login } from "./Login";

export const AuthRoutes = () => {
  return (
    <Routes>
      <Route path="login" element={<Login />} />
    </Routes>
  )
}

// src/features/auth/routes/Login.tsx

export const Login = () => {
  return <></>
}

일단 로그인 페이지에 대한 라우트 처리만 우선 구현했다.

로그인페이지는 카카오 로그인만 우선 띄워놓았다. 카카오 로그인은 react-kakao-login을 활용하였다.

// src/feature/auth/routes/Login.tsx

import { KakaoLoginButton } from "../components/KakaoLoginButton";

export const Login = () => {
  return (
    <>
      <KakaoLoginButton />
    </>
  );
};

// src/feature/auth/components/KakaoLoginButton.tsx

import KakaoLogin from "react-kakao-login";

export const KakaoLoginButton = () => {
  const handleSucessLogin = () => {};
  const handleFailLogin = () => {};

  return (
    <KakaoLogin
      token={process.env.REACT_APP_KAKAO_APP_KEY || ""}
      onSuccess={handleSucessLogin}
      onFail={handleFailLogin}
    ></KakaoLogin>
  );
};

4. Kakao Developer에 도메인 등록하기

카카오 디벨로퍼 콘솔에서 "내 어플리케이션 > 앱 설정 > 플랫폼" 페이지의 Web 사이트 도메인을 등록해야한다. 일단 로컬 테스트를 위해 http://localhost:3000을 등록했다.

등록하고 나니 아래와 같이 잘 나오는 것을 확인했다.

5. 로그인 데이터 확인하기

잘 받아온다! API 연결할 시간이다.

마무리

구조가 어마장장

profile
듣는 것을 좋아하는 개발자입니다

0개의 댓글