Team Project - Nike Clone Coding (4)

📲 팀 프로젝트

저번 Wepleshop 1차 프로젝트를 수행 후 두번째 팀 프로젝트입니다. 1차 프로젝트에서의 부족했던 점과 더 배우고 싶었던 점을 깨달았고, 이를 보완하는 방향으로 프로젝트를 진행해보자 하는 생각으로 이번 프로젝트를 진행하였습니다.
이번 클론 코딩 프로젝트의 주제는 Nike 웹사이트 입니다.
나이키는 스포츠웨어 브랜드 중에서 가장 유명한 브랜드라고 해도 과언이 아닐 것입니다. 평소 나이키를 좋아하는 저와 희윤님에 의해 Nike 가 채택되었고, 1차 프로젝트인 마플샵 클론코딩과 같은 웹 쇼핑몰이기에 진행 방향이 비슷했습니다. 차이점은 리스트 페이지 내에서의 다양한 필터링 SNKRS 페이지에서의 응모 및 추첨 기능이었으며, 백엔드를 구현할 저와 준혁님은 각자 이러한 메인 기능(필터링, SNKRS)을 한 가지씩 분담하여 프로젝트를 진행하였습니다.

---

⭐️ Team : 역할 분담

백엔드 : 이준혁 김영욱
프론트 엔드 : 황희윤, 이진웅

적용 기술

• Front-End : React.js, Sass
• Back-End : Node.js, Express, Prisma, nodemon, JWT, Bcrypt, My SQL, CORS
• Common : RESTful API
• Community Tools : Slack, Zoom, Notion

저번 프로젝트는 프론트엔드와 백엔드를 개인이 모두 한가지 이상을 구현하며 Fullstack으로 프로젝트를 진행하였습니다.
1차 프로젝트를 통해 프론트 엔드와 백엔드 중 어떤 것이 각자 자신에게 적합한지를 파악 가능했으며, 이번 2차 프로젝트는 프론트 엔드와 백엔드의 역할을 명확히 나누어, 프로젝트를 진행하였습니다.

백엔드 외의 역할이 있었다면, 프론트 엔드단에서 사용할 이미지(제품 이미지)는 순조로운 작업을 위해 백엔드인 저와 준혁님이 자료 수집을 진행하였습니다.
그 외엔 프론트 엔드와 백엔드의 작업들이 모두 역할 분담을 통해 이루어졌습니다.

• [프론트 엔드 github 링크]
• [백엔드 github 링크]

---

🐳 Nike Web Page

나이키 공식 홈페이지입니다. 해당 페이지의 큰 범주인 메인 페이지, 리스트 페이지 및 필터 기능, 디테일 페이지 입니다.

(나이키 디테일 페이지 / 출처 : 나이키 공식 홈페이지)

---

(나이키 리스트 페이지 / 출처 : 나이키 공식 홈페이지)

---

(나이키 리스트 페이지 - 필터링 (1) / 출처 : 나이키 공식 홈페이지)

---

(나이키 리스트 페이지 - 필터링 (2) / 출처 : 나이키 공식 홈페이지)

---

(나이키 디테일 페이지 / 출처 : 나이키 공식 홈페이지)

---

🌈 카카오 로그인 연동 구현

1차 프로젝트에서는 로그인과 회원가입 API를 자체적으로 개발하여 로그인 회원가입 기능과 그에 따른 인가 부여를 구현하였다면, 이번에는 소셜 로그인 기능을 연동시켜 로그인 기능을 구현해주도록 진행하였다. 사실 이 부분은 구글링과 유튜브, Kakao Developers 사이트의 공식 문서를 통해 공부를 해본 결과 많은 자료들과 방법들이 있었고, 코드 자체가 어려운 건 아니었지만, 이를 적용시키는 과정과 그것들을 이해하는데 많은 시간을 보냈다.

카카오 로그인 기능을 연동하는 방법은 다양하다. 자세한 내용은 공식 문서와 많은 블로그를 참고하였으며, 필자는 REST API KEY를 활용하여 프론트엔드에서 Access Token과 Refresh Token을 발급 받아 유저 정보를 받아오도록 처리해주었다. 받아온 유저 정보를 백엔드에 넘겨주어, 해당 유저 정보의 DB 내의 유무를 통해 이후의 인증 인가 과정을 처리해주도록 코드를 작성하였다. (허나, 더 좋은 방법은 프론트엔드에서는 Access Token을 받아 이를 Token으로 백엔드로 넘겨주는 것에서 멈추고, 백엔드에서 나머지 과정을 처리하는 것이 바람직하다고 하다. 이러한 작업 또한 추후 다시 진행하였으며 이후 포스팅에서 다룰 예정입니다.)

---

⚡️ 프론트엔드 구현 (Code > Access Token > 유저 정보 반환)

Auth.js

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import qs from 'qs';
import { CLIENT_SECRET, REDIRECT_URI, REST_API_KEY } from '../../config';

const Auth = () => {
  // calllback으로 받은 인가코드

  // 로그인 후의 URL 내의 code get
  const code = new URL(window.location.href).searchParams.get('code');

  const navigate = useNavigate();

  // 고유 REST API KEY , REDIRECT URI, CLIENT SECRET KEY, Code 를 통해 Access Token 반환
  const getToken = async () => {
    const payload = qs.stringify({
      grant_type: 'authorization_code',
      client_id: REST_API_KEY,
      redirect_uri: REDIRECT_URI,
      code: code,
      client_secret: CLIENT_SECRET,
    });
    try {
      // access token 가져오기
      const res = await axios.post('https://kauth.kakao.com/oauth/token', payload);

      // Kakao Javascript SDK 초기화
      window.Kakao.init(REST_API_KEY);

      // access token 설정
      window.Kakao.Auth.setAccessToken(res.data.access_token);

      navigate('/login');
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    getToken();
  }, []);

  return null;
};

// Kakao SDK API를 이용해 사용자 정보 획득

export default Auth;

액세스 토큰을 받아온 후 useNavigate() 훅을 통해 /login 페이지에서 유저 정보를 받아옴 (하단 코드 참조)

Login.js

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { GET_SIGN_IN_API } from '../../config';

function Login() {
  const [email, setEmail] = useState();
  const [name, setName] = useState();
  const [token, setToken] = useState();
  const navigate = useNavigate();

  // v2/user/me 에 해당 유저의 정보(이메일, 닉네임, 프로필 사진 등의 정보)를 반환
  const getLocal = async () => { 
    // Kakao SDK API를 이용해 사용자 정보 획득
    let data = await window.Kakao.API.request({
      url: '/v2/user/me',
    });

    // 유저 정보(이메일, 닉네암) state에 저장
    setEmail(data.kakao_account.email);
    setName(data.properties.nickname);
    alert(`${data.properties.nickname}님 반갑습니다!`);
  };
}

위 방식은 프론트엔드 내에서 자체적으로 code > Access Token > 유저 정보를 자체적으로 반환하는 과정이다. 성공적으로 유저 정보를 반환할 수 있지만, 확장성을 고려했을 때 적합하지 않다. 이유는 백엔드에서 Access Token을 받아 처리하는 작업이 아니기 때문에, 인가 부여 과정을 적합하게 처리하지 못하고, 확장성을 고려하지 못한 부분이기 때문이다. 그렇기에, 프론트엔드에서는 Access Token반환 과정까지만 거치고, Access Token을 백엔드에 넘겨주고, 백엔드에서 Access Token을 통해, 로그인, 유저 등록, 멤버쉽 인가 기능을 처리하주도록 코드를 수정하였다.

---

⚡️ 백엔드 구현 (Access Token > 유저 정보 반환 > 로그인, 유저 등록, 멤버쉽 인가 API 구현)

NewAuth.js (프론트 엔드에서 Access Token을 보내주는 작업)

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import qs from 'qs';
import { CLIENT_SECRET, REDIRECT_URI, REST_API_KEY, GET_SIGN_IN_API } from '../../config';

const Auth = () => {
  const navigate = useNavigate();
  const [token, setToken] = useState();

  // calllback으로 받은 인가코드
  const code = new URL(window.location.href).searchParams.get('code');

  useEffect(() => {
    try {
      axios
        .post(
          'https://kauth.kakao.com/oauth/token',
          qs.stringify({
            grant_type: 'authorization_code',
            client_id: REST_API_KEY,
            redirect_uri: REDIRECT_URI,
            code: code,
            client_secret: CLIENT_SECRET,
          })
        )
        .then(res =>
          axios
            .get(GET_SIGN_IN_API, { headers: { accessToken: res.data.access_token } })
            .then(res => {
              setToken(res.data.token);
              localStorage.setItem('token', token);
            })
        )
        .then(alert(`환영합니다!`))
        .then(navigate('/'));
    } catch (err) {
      alert('로그인 실패');
    }
  }, []);

  return null;
};

export default Auth;

이전 코드와 다른 점은 Access Token 을 SignIn API에 헤더를 통해 보내주어 get을 통해 로그인 기능을 구현한다는 점이다. 그 후 SignIn API를 통해 받아온 인가 Token을 통해 인증과 인가 처리를 프론트엔드에서 구현한다.

---

userController.js

import { userServices } from '../services';

const signIn = async (req, res) => {
  try {
    const accessToken = req.headers.accesstoken;
    if (!accessToken) {
      return res.status(401).json({ message: 'INVALID_KAKAO_TOKEN' });
    }
    const token = await userServices.signIn(accessToken);

    return res.status(201).json({ message: 'LOGIN_SUCCESS', token });
  } catch (err) {
    console.log(err);
    return res.status(500).json({ message: err.message });
  }
};

---

userServices.js

import { userDao } from '../models';
import token from '../utils/token';
import axios from 'axios';

const signIn = async accessToken => {
  // accessToken으로 kakao API에 접근하여 사용자 정보 취득
  const user = await axios.get('https://kapi.kakao.com/v2/user/me', {
    headers: {
      Authorization: `Bearer ${accessToken}`,
      'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
    },
  });

  // 데이터가 없을 경우 에러 처리
  if (!user.data) {
    const err = new Error('INVALID_USER');
    err.statusCode = 400;

    throw err;
  }

  const data = user.data;
  
  // 데이터 베이스 내에 해당 이메일의 유저 정보가 있는지 확인
  const isExist = await userDao.isExistEmail(data.kakao_account.email);
  let userId;

  // 해당 유저 정보가 이미 있을 경우, 해당 userId의 토큰을 반환
  if (isExist) {
    userId = await userDao.getUserId(data.kakao_account.email);
    return token.signToken(userId);
  }

  // 해당 유저 정보가 없을 경우, 회원 정보 생성
  await userDao.createUser(data.kakao_account.email, data.properties.nickname);
  // 생성된 유저의 userId와 토큰 반환
  userId = await userDao.getUserId(data.kakao_account.email);
  const signToken = token.signToken(userId);
  return signToken;
};

---

userDao.js

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// email을 통해 userId 반환
const getUserId = async email => {
  const createData = await prisma.$queryRaw`
        SELECT
          id 
        FROM 
          users
        WHERE
          email=${email};
        `;

  return createData;
};


// email, name 을 통한 회원 가입 (유저 등록)
const createUser = async (email, name) => {
  const createData = await prisma.$queryRaw`
        INSERT INTO 
          users (email, name) 
        VALUES 
          (${email}, ${name});
        `;

  return createData;
};

// 해당 email의 유저 정보의 중복 여부 파악
const isExistEmail = async email => {
  const [user] = await prisma.$queryRaw`
    SELECT 
      email,name 
    FROM 
      users 
    WHERE 
      email = ${email};
    `;
  return user;
};

프론트 엔드에서의 카카오 로그인 기능의 문제점을 파악하고, 백엔드에서 Access Token을 활용해 로그인 및 유저 등록시에 필요한 유저 정보를 axios와 kakao developers 의 자료를 참고하여 반환하는 API를 구현하였고, 반환한 유저 정보를 통해 User와 관련된 모든 API (로그인, 회원가입, 멤버쉽 인가 구현, 리뷰 등록, 리뷰 평균 반환)를 구현할 수 있게 되었습니다. 초기부터 확장성과 변경 용이성을 우선적으로 고려해야된다는 피드백이 되었던 작업이었습니다.

참고 링크

• 카카오 공식 문서
• 참고 블로그 (1)
• 참고 블로그 (2)

---