[12] 음식점 포스 프로그램 - 프론트엔드 API 연동(1) - 고객 정보, 로그 표시 연동

지난 시간에는 Java - Spring Boot 기반 백엔드에서 API를 구축해보았습니다.

 

이번 시간에는 백엔드 API 구현한 내용을 기반으로 하여 프론트엔드에서 API를 연동해 보겠습니다.

 

앞써, 정의된 API를 이용하여 그대로 프론트엔드에서 사용을 해보겠습니다.

 

 

1. 고객 정보 API 연동

 

(1) 화면으로 보는 필요 request 값과, API 명

<userInfo.tsx>

 

(2) API 인터페이스

- 사용자 조회 =>  (이 프로젝트에서는 1명의 회원만 조회)

• URI :/api/user/info/
• Method : GET
• Request : null
• Response : 리스트 [uno, userName, userAge, userSex, userPhone, userNumber, userCardPassword]

 

(3) 제출 클릭시 로직 시작부

  // 입력 이후, 회원 정보가 저장 되면서 recoil에 저장 후 header에 사용자 정보 저장
  const submitUserInfo = () => {

    setUserInfo(createForm)

    /** 로그에 담는다 */
    const createLog: CreateLogInfoType = {
      pageNo: 1,
      pageEventTitle: "로그인",
      pageEventView: "로그인 성공",
      crtTime: JSON.stringify(today),
    }

    const ob = {
      ...createForm,
      ...createLog
    }

	// 여기서 React-Query 를 이용하여 삽입을 실행합니다.
    const response =mutate(ob);

    if (isLoading) {
      return <p>현재 지금 회원 정보 삽입 중 입니다.</p>
    }

    if (error) {
      return <p>삽입에 실패하였습니다..</p>
    }
    navigate('/menuindex');
  }

 

(4) 삽입 부분 API 연동, (React-Query를 작성했을 때, Recoil State에 저장한다.)

  // 유저 정보의 관련 DB 삽입
  // 리액트 Query 작성
  const { mutate, isLoading, error} = useMutation(async (createFormVo:UserInfoVo) => {
    const response = await fetch('http://localhost:8080/api/user/info/insert/user/info', {
      method: 'POST',
      body: JSON.stringify(createFormVo),
      headers: {
        'Content-Type': 'application/json'
      }
    })

    return response;
  },{
    onSuccess: () => {
      fetch('http://localhost:8080/api/user/info/').then(
        (res) =>   {
          return res.json()
      }).then( (res) => {
          setUserInfo(res[0])
      }).catch((e) => console.log(e))
    }
  });

 

 

(5) 회원 정보 삽입 후, 결과 값 출력

- 사용자 조회 =>  (이 프로젝트에서는 1명의 회원만 조회)

• URI :/api/user/info/
• Method : GET
• Request : null
• Response : 리스트 [uno, userName, userAge, userSex, userPhone, userNumber, userCardPassword]

 

<Header.xml>

  const setUserInfo = useSetRecoilState(userInfoState);
  const userInfo = useRecoilValue(userInfoState);

  const { isLoading, isError, data } = useQuery({
    queryKey: ['userInfoQuery'],
    queryFn: () =>
      fetch('http://localhost:8080/api/user/info/').then(
        (res) => res.json(),
      ),
  });

  if (isLoading) return 'Loading...';

  if (isError) return 'An error has occurred : ';

  setUserInfo(data[0]);

 

이렇게 작성을 하면, 정상적으로 출력이 되어지나, React-Query를 사용하면 실시간 갱신 역할을 수행 할 수 있습니다.

여기서 Recoil을 새로 고침 시 state 값 유지가 되지 않는 구조로 작성을 하여 지금 단계에서는 React-Query를 통해 백엔드 API 연동하여 수행을 해야 정확한 값을 불려 올 수 있습니다.

현재는 연습용 프로젝트라 React-Query의 구조를 알아가보는 시간으로 만들기 위해 이렇게 작성을 하였지만, 이대로 작성을 할 경우 로딩 시간이 있기 때문에 데이터가 몇초후 갱신하는 현상이 발생하여 사용자 측 입장에서는 불편함을 느낄 수 있다고 생각합니다.

따라서 먼저 인터페이스 구현 후, Recoil로 새로 고침시 State 값을 유지하면서 실시간 갱신을 하는 형식은 차후에 다룰 예정입니다.

 

 

(6) 로그 정보 생성 로직

- 로그 조회 =>  (이 프로젝트에서는 1명의 회원만 조회)

• URI :/api/log/
• Method : GET
• Request : null
• Response : 리스트 [uno, lno, uno, pageNo, pageEventTitle, pageEventView, crtTime]

 

<logInfo.tsx>

  const [logInfo, setLogInfo] = useRecoilState(logInfoState);
  const { isLoading, isError, data } = useQuery({
    queryKey: ['userLog'],
    queryFn: () =>
      fetch('http://localhost:8080/api/log/').then(
        (res) => res.json()
      ).then(
        (res) => {
          setLogInfo(res)
        }
      ),
  });

  if (isLoading) return 'Loading...';

  if (isError) return 'An error has occurred : ';

  console.log(data)

 

 

(7) 기타 TypeScript에서 interface 설정

<userInfoState.tsx>

import {atom} from 'recoil'


export interface UserInfoVo {
  // userInfoVo에 담을 변수
  uno: Number,
  userName: String,
  userAge: Number,
  userSex: String
  userPhone: String,
  userNumber: String,
  userCardPassword: String,
  lno: Number,
  pageNo: Number,
  pageEventTitle: String,
  pageEventView: String,
  crtTime: String
}

export interface UserInfoType {
  uno: 0
  , userName: ''
  , userAge: 0
  , userSex: ''
  , userPhone: ''
  , userNumber: ''
  , userPassword: ''
};

export const userInfoState = atom({
  key: 'userInfo',
  default: {
      uno: 0
    , userName: ''
    , userAge: 0
    , userSex: ''
    , userPhone: ''
    , userNumber: ''
    , userPassword: ''
  } as UserInfoType
});

 

<logInfoState.tsx>

import {atom} from 'recoil'

export interface UpdateLogInfoType {
    uno: number
    pageNo: number,
    pageEventTitle: string,
    pageEventView: string,
    crtTime: string,
};

export interface CreateLogInfoType {
    pageNo: number,
    pageEventTitle: string,
    pageEventView: string,
    crtTime: string,
};

export interface LogInfoType {
    lno: number,
    uno: number, // 누가 로그인 했는지 알 수 없음 (-1로 지정)
    pageNo: number,
    pageEventTitle: string,
    pageEventView: string,
    crtTime: string,
};


export const logInfoState = atom({
  key: 'logInfo',
  default: [] as LogInfoType[],
  // default: [{
  //     lno: 1,
  //     uno: -1, // 누가 로그인 했는지 알 수 없음 (-1로 지정)
  //     pageNo: 1,
  //     pageEventTitle: "로그인",
  //     pageEventView: "로그인 진입",
  //     crtTime: JSON.stringify(today),
  // }],
});

/**
 * page 번호
 * 1 : 로그인
 * 2 : 메뉴
 * 3 : 계좌
 * 4 : 음식
 * 5 : 로그아웃
 * 
 * 이벤트 
 * 진입, 성공, 실패, 계좌 입/출금, 음식(장어덮밥) 주문
 */

 

 

 

마치며,

고객 정보와 로그인 시 사용자가 이벤트로 지정한 로그를 표시 할 수 있도록 인터페이스를 연동해보았습니다.

현재, 이 포스팅은 프론트 엔드 개발자가 백 엔드 개발자에게 API 인터페이스가 만들어지면 그것을 토대로 연동하는 방법으로 작성하였습니다.

이 경우, 현업에서 기본적으로 사용하는 용도 중 하나로 올려보았습니다.

다음 시간에는 계좌 입출금 및 로그 출력, 음식 주문시 로그 출력까지 연동하며, 고객 정보 초기화 작업을 진행해보겠습니다.