스타팅 플랜트 - 사용자 맞춤 식물 추천 웹

📌프로젝트 소개 

✅ 식물을 키우고 싶지만 어떤 식물이 나에게 맞는지 모르는 사람들!!

✅ 여러 식물들을 한꺼번에 비교해보고 고르고 싶은 사람들!!

을 위해 제작하게 된 웹이다. 🤗

 

※ 프론트엔관련 기술이 담겨 있는 회고록입니다. 

📌프로젝트 시작!

 

react로 사용한 프로젝트, next.js랑 고민을 많이 했는데 next.js 도 react 기반으로 작동한다는 점을 고려하여, react 에 대한 기본적인 이해를 더 깊게 다지고자 react 를 선택하기로 결정했다. 

 

🧐배운것

✅ 의존성 배열(Dependency Array) 과 조건부 할당을 이용한 검색 기능 

사용자가 입력한 검색어를 보내고

navigate("/search_result", {
    state: { plants: filteredPlants, searchTerm: searchTerm },
});

 

검색어를 받아서 브라우저에 추출 

  useEffect(() => {
    // location.state에서 검색 결과와 검색어를 가져옴
    const { plants: newPlants, searchTerm: newSearchTerm } = location.state || {
      plants: [],
      searchTerm: "",
    };

    setPlants(newPlants);
    setSearchTerm(newSearchTerm);
  }, [location.state]); // location.state가 변경될 때마다 useEffect 실행

 

사용자가 입력한 검색어를 의존성 배열에 담아 배열에 포함된 값이 변경될 때마다 useEffect 내부의 콜백 함수가 실행. 즉, location.state가 변경될 때마다 콜백 함수가 실행되어 상태를 업데이트된다.

 

세상에!! 의존성 배열에 사용자 검색어를 담을 수 있구나!! 처음에 react를 배울 때는 이런 기능이 실제 웹을 구현할 때 어떻게 쓰일지 감이 안잡히는 데 퍼즐처럼 맞춰지는 기능들이 참 재밌는 것 같다. 

 

여기서 사용자의 현재 검색어를 가져올 수 있는 것은 useLocation을 통해 location.state를 참조하여 이전 페이지에서 navigate 이용해 전달된 검색 결과(newPlants)와 검색어(newSearchTerm)를 추출하는 것이다. 

 

✅MSW 기반으로 한 Mock API

 

문제

프론트에서 여차저차 식물 추천 컴포넌트와 검색창 컴포넌트의 ui를 다 만들고 api를 연동할 준비까지 마쳤지만, 사이드 프로젝트로 인해 백엔드 개발자와 다른 시간대로 api가 나올 때까지 마냥 기다릴 수는 없었다!!

 

해결

MSW 기반으로 한 Mock API를 이용해 백엔드 API 개발 완료 전에도 프론트엔드 기능 개발 및 테스트를 진행할 수 있게 되어, 전체 프로젝트의 개발 시간을 효율적으로 단축할 수 있었다. 

 

 MSW 무엇인가?

백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.

 

프로젝트의 public 디렉토리에 서비스 워커 파일을 초기화한 후 handlers.js 만들어서 API 요청을 가로채고 모방할 응답을 정의하며 된다. 

 

// src/mocks/handlers.js
import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("https://api.example.com/plants", ({ request }) => {

    const query = new URL(request.url).searchParams;

    const level = query.get("level");
    const type = query.get("type");
    const place = query.get("place");
    const price = query.get("price");

    const plants = [
      {
        id: 0,
        name: "몬스테라",
        level: "Beginner",
        type: "foliage",
        place: "all",
        price: "1_won",
      },
    ];

    return HttpResponse.json({
      plants: filteredPlants,
    });
  }),
];

 

처음에 업데이트 이전 버전을 사용하느라 애를 먹었지만 구글에서 이것저것 검색하니깐 금세 최신 버전이 나왔다! 

자세한 설명 -> https://2-doooo-2.tistory.com/169

 

✅ 구글 로그인 구현과 커스텀 

문제1

처음 이용한 GoogleLogin은 빠르게 로그인을 구현할 수 있지만 디자인 커스텀이 되지 않았다.

 

그래서 이런 기본적인 디자인밖에 사용하지 못한다. 

 

해결1

custombutton으로 사용가능한 Implicit flow 방법으로 진행 , useGoogleLogin 사용해서 커스텀하기 

const GoogleLoginButton = () => {

  const signIn = useGoogleLogin({
    onSuccess: async (tokenResponse) => {
      const userInfo = await axios
        .get("https://www.googleapis.com/oauth2/v3/userinfo", {
          headers: { Authorization: `Bearer ${tokenResponse.access_token}` },
        })
        .then((res) => res.data);
      const mypage_userInfo = {
        name: userInfo.name,
        email: userInfo.email,
      };
    },
  });

  return (
    <div>
      {userName ? (
          <p>
            로그아웃
          </p>
      ) : (
        <div className="googlg_login_before_wrap" onClick={() => signIn()}>
          <p className="googlg_login_text">로그인</p>
        </div>
      )}
    </div>
  );
};

function Login() {
  return (
    <>
      <GoogleOAuthProvider clientId={clientId}>
        <GoogleLoginButton />
      </GoogleOAuthProvider>
    </>
  );
}

export default Login;

 

 이 방법을 이용해 로그인 버튼을 새로 디자인했지만 바로 새로운 문제에 직면했다. 

 

<GoogleLogin/>은 바로 사용자 정보가 담긴 token을 credential에 담아 발급해주지만 useGoogleLogin 을 사용하면 access_token을 가지고 다시 Google에 요청해서 사용자 정보를 가져와야 한다.

 

문제 2

나는 지금 백엔드 없이 mock api를 통해 데이터를 계속 받아오고 있었다. 그래서 구글로그인도 이 mock api를 사용해서 구현하면 문제가 없을 거라고 생각했다. 하지만 access토큰이 서버스 워커 api로 보내지지 않았다. 

해결 2

https://react-oauth.vercel.app/ 

나는 내 상황에 맞는 코드를 이 사이트에 들어가서 다시 찾았다. 지금은 백엔드 요청 없이 유저 정보와 access token만 필요하니 나에게 맞는 더 간단한 코드가 있었다. 그래서 가져온 코드가 

 onSuccess: async (tokenResponse) => {
      const userInfo = await axios
        .get("https://www.googleapis.com/oauth2/v3/userinfo", {
          headers: { Authorization: `Bearer ${tokenResponse.access_token}` },
        })
        .then((res) => res.data);
      const mypage_userInfo = {
        name: userInfo.name,
        email: userInfo.email,
      };
    },

백엔드로 보내지 않고 구글에 사용자 정보를 요청해 받아왔다. 이때, 요청 헤더에 Authorization 속성을 설정하여, 앞서 얻은 access_token을 사용하여 요청을 인증한다. "Bearer ${tokenResponse.access_token}" 구문은 Bearer 토큰 인증 스키마를 사용하여 액세스 토큰을 전달한 것이다. 

 

✅ .env 이용한 보안 설정 후 배포 

문제 

API 키나 비밀번호와 같은 민감한 정보는 직접 삽입하지 않고 process.env.REACT_APP_API_KEY를 통해 API 키를 환경 변수에서 불러오는 방식을 사용한다. 하지만 이와 같은 설정 후 vercel로 배포를 하고 나니 오류가 났다. + react와 react-google-login 버전이 다른 것도 한 몫했다. 

해결 

첫번째로 vercel에서 환경 변수를 설정할 프로젝트로 이동한 후 Settings 메뉴에서 Environment Variable 페이지로 이동한다.

 

여기서 내가 설정한 키와 값을 넣어주면 된다. 

 

두번째로 react가 다운그레이드가 안돼서  react-google-login 버전삭제 후 아래 명령어를 통해 재설치해줬다. 

npm install @leecheuk/react-google-login

 

더 자세히 보기 -> https://2-doooo-2.tistory.com/171

 

✅ 마이페이지 생성 

처음으로 사용해본 useAuth 커스텀 훅

 

useAuth 커스텀 훅은 React 애플리케이션에서 인증 상태를 전역적으로 관리하는 강력한 방법을 제공한다. 이를 통해 개발자는 사용자 인증 정보를 쉽게 접근하고, 이 정보를 기반으로 사용자 경험을 개인화하며, 보안을 강화할 수 있다.

 

어떤 컴포넌트에서든지 현재 로그인한 사용자의 정보에 접근할 수 있으며, 이를 통해 보다 동적이고 사용자 친화적인 UI를 구성할 수 있게 된다. 

 

문제 

하지만 문제는 useAuth에서 나타나지 않았다. 문제는 사용자 프로필을 로컬스토리지에 저장했음에도 새로 고침 시 사용자 프로필 사진이 저장되지 않는다는 것이었다. 

 

해결 

  const handlePhotoChange = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onloadend = () => {
      const base64String = reader.result;
      setPhoto(base64String);
      localStorage.setItem("userPhoto", base64String); 
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  };

 

localStorage에 저장된 사진의 URL이 세션 기반 URL이기 때문에 발생한 에러이다.  즉, 페이지를 새로고침하면 이 URL은 더 이상 유효하지 않게 되어 이미지가 사라지게 된다. 

선택된 파일(event.target.files[0])을 FileReader 객체를 사용하여 읽은 후, 파일의 내용을 Base64 인코딩된 문자열로 변환한 후 에러가 해결됐다. 

 

하지만 대부분의 브라우저에서 로컬 스토리지의 용량은 약 5MB로 제한되어 있다. Base64 인코딩은 원본 데이터보다 약 33% 더 크기 때문에, 고화질의 사진이나 여러 사진을 저장하기에는 부적합할 수 있다. 그러니 만드는 프로젝트를 고려해서 사용해야 한다. 

 

✅ recoil을 이용한 장바구니

React의 장점 중에 장점, 여러 컴포넌트 간에 상태를 공유하기 아주 적합한 라이브러리이고 그것을 위해 존재하는게 Recoil이다. Recoil을 사용해 간단하게 상태를 전역적으로 관리할 수 있었고 컴포넌트 어느 곳이든 장바구니의 상태를 조회하고 수정할 수 있다. 

import { useRecoilState } from "recoil";
import { cartState } from "./atoms";
import { useAuth } from "../context/AuthContext"; 

const useAddToCart = () => {
  const [cart, setCart] = useRecoilState(cartState); 
  const { currentUser } = useAuth(); 

  const handleAddToCart = (plantId, name, image, type, level) => {
    if (!currentUser) {
      alert("로그인이 필요한 기능입니다.");
      return;
    }
    
    const isItemInCart = cart.some((item) => item.plantId === plantId);
    if (isItemInCart) {
      alert(`${name}은(는) 이미 장바구니에 담겨 있습니다.`);
      return;
    }

        const newItem = { plantId, name, image, type, level };
        setCart([...cart, newItem]);
        window.confirm(`장바구니에 ${name}을 담겠습니까?`);
  };

  return handleAddToCart;
};

export default useAddToCart;

 

cart에서도 역시 useAuth훅을 사용해 로그인 상태일때만 장바구니를 사용할 수 있도록 정의해 비즈니스 로직을 적용시켰다. 

 

❓번외 

그냥 갑자기 useAuth도 전역으로 상태를 관리하기 위함이고 recoil도 전역으로 상태를 관리하기 위한 건데 그러면 장바구니기능도 useAuth를 이용하지 못하는지 궁금해졌다. 결론은 부적합하다

Recoil

정의: Recoil은 React 애플리케이션을 위한 상태 관리 라이브러리입니다. 전역 상태 관리를 쉽게 할 수 있도록 설계되었으며, 컴포넌트 간의 상태 공유를 간단하게 만들어 줍니다.

목적: Recoil은 애플리케이션 내에서 여러 컴포넌트 간에 상태를 공유하고 관리하는 데 사용됩니다. 복잡한 상태 로직을 쉽게 관리할 수 있도록 돕습니다.

기능: 상태(atom) 생성, 상태 업데이트, 파생 상태(selector) 관리 등 전역 상태 관리에 필요한 다양한 기능을 제공합니다.

사용 예시: 장바구니 항목 관리, 사용자 설정 관리, 애플리케이션의 테마 상태 관리 등 다양한 전역 상태를 관리하는 데 사용할 수 있습니다.

useAuth

정의: useAuth는 특정한 라이브러리나 API가 아닌, 일반적으로 사용자 인증 상태를 관리하기 위해 만들어진 커스텀 훅의 예시 이름입니다. 이 훅은 React 컨텍스트(Context)와 같은 메커니즘을 통해 구현될 수 있으며, 애플리케이션 전반에 걸쳐 사용자의 로그인 상태를 관리하고 접근할 수 있게 해줍니다.

목적: 사용자의 로그인 상태, 인증 토큰, 사용자 정보 등 인증과 관련된 데이터를 관리하고, 이를 애플리케이션의 다른 부분에서 쉽게 접근할 수 있도록 하는 것입니다.

기능: 로그인, 로그아웃, 사용자 세션 확인, 사용자 정보 업데이트 등 인증과 관련된 기능을 제공합니다.

사용 예시: 로그인 페이지, 보호된 라우트 접근 제어, 사용자 정보 표시 등 사용자 인증이 필요한 기능을 구현하는 데 사용됩니다.

 

Recoil은 일반적인 상태 관리를 위한 도구이며, useAuth는 인증 상태 관리를 위한 특정 목적의 커스텀 훅이다. Recoil은 애플리케이션의 다양한 데이터를 관리하는 데 사용되고, useAuth는 주로 사용자 인증과 관련된 데이터를 관리하는 데 사용된다. 장바구니 기능을 구현하는 데는 여러 컴포넌트에서 접근하고 수정할 필요가 있기 때문에 Recoil과 같은 상태 관리 라이브러리가 적합하다!!

 

📌완성한 프로젝트 

 

https://starting-plant-nu.vercel.app/

Starting Plant

 

 

🫨느낀점 

코드를 구현하는 과정보다 회고하는 과정에서 아 맞다. 이랬지 하면서 더 많은 학습이 되는 것 같다. 다시 한번 복습을 중요성을 깨닫게 되는 시간이었다.

지금 프로젝트도 만족스럽지만 여기서 더 고도화 하는 작업을 하고 싶은 욕심이 난다!. 계속 리팩토링 해보면서 클린코드를 작성할 수 있도록 더 노력해야겠다. 

그리고 백엔드 개발자와 더 많은 소통으로 지금은 비록 mock api를 사용했지만 나중에는 실제 데이터 베이스랑 연결해서 작업을 끝마쳐야겠다. 

 

...

시간이 흐르고 백엔드 개발자와 api 연결하는 작업을 통해 데이터 연결에 성공했다!! 

하지만 서버를 켜놔야 작동이 가능해서 따로 그 코드를 배포한지 않았다. 나름 cors에러 없이 무사히 넘어가 다행이다