토이 프로젝트 | 월드컵 참여/생성 프로젝트

깃허브 링크

배포 사이트 링크

 

만들게 된 이야기

위 코드 X 원티드 프리온 보딩을 하며 팀원으로써 알게 된 양성호 프런트 개발자님이 함께 프로젝트를 만들어보자고 하여서 서로 아이디어를 내본 결과 성호님이 다른 개발자들이 어떤 개발 메서드를 가장 많이 사용하는지 통계로 알 수 있게 보여주는 사이트 어떻냐고 제안을 받아 만들게 되었습니다. 

 

기능 구현 (맡았던 부분)

헤더

• google 로그인에서 받은 정보를 담은 state 값을 이용해서 로그인, 비로그인 상태에 따라 다르게 화면에 표시되도록 하였습니다.
• 모바일 화면에서는 메뉴들을 한 번에 담기에 화면이 작아서 메뉴를 눌러 모달이 열리는 형식으로 고안하게 되었습니다.

 

댓글 컴포넌트

Axios의 get, put을 활용한 해당 월드컵 댓글 데이터 관리

• axios의 get, put 메서드를 이용해 get으로는 월드컵의 아이디에 해당되는 데이터를 불러와 전체 데이터와 댓글 데이터를 얻을 수 있었고 put으로는 불러온 전체 데이터와 댓글 데이터를 서버에 보낼 객체에 이용하여 월드컵 데이터 안의 comment 배열 데이터만 수정하였습니다.

댓글의 작성된 시간을 사용자들에게 표시

• 댓글이 작성된 시간을 Now, 몇 분 전, 몇 시간 전 , 몇 월 며칠 그리고 연도가 바뀌었을 경우 연도가 표시되도록 하였습니다.

 

월드컵 생성 페이지

Axios의 post를 활용한 서버 데이터 추가

• axios의 post메서드를 이용해 월드컵 사이트에 필요한 API 데이터들을 객체 형식으로 Server DB에 보냈습니다.

React Hook Form을 이용한 불필요한 코드 관리

• 16개의 인풋 창과 입력된 값들을 관리하기 위해 React Hook Form을 사용하여 사용하는 코드량을 줄였습니다.

uuidv4를 활용한 유니크한 아이디 값 추가

• uuidv4를 사용하여 각각 다른 id를 가지게 하여 API에 사용할 시 중복되지 않게 설계하였습니다.

에러 메시지 표시

• 필수 입력값, 최대 글자 수를 넘었을 때 에러 메시지가 각 입력창 아래에 표시되도록 하였습니다.

댓글 삭제 로직

  const onDeleteClick = async (id: string) => {
    const ok = window.confirm('정말 삭제하시겠습니까?');
    if (ok) {
      const findIndex = data.comments.findIndex(
        (item: IWorldCupCommentProps) => item.id === id
      );
      const newComments = [
        ...data.comments.slice(0, findIndex),
        ...data.comments.slice(findIndex + 1),
      ];
      await axios
        .put(`${BASE_URL}/world/${keyword[2]}`, {
          ...data,
          comments: newComments,
        })
        .then(() => setRefetch((prev) => !prev));
    }
  };

• confirm 기능을 이용해 사용자가 실수로 삭제하지 않도록 하였습니다.
• findIndex로 해당 월드컵의 댓글 데이터와 매개변수로 받은 id를 비교해 몇 번째에 위치했는지 알아내고 slice를 이용해 해당되는 댓글을 삭제했습니다.
• setRefetch를 통해 삭제가 되고 상태 값을 변하게 하여 페이지의 리 렌더를 유도하여 실시간으로 삭제된 데이터를 불러오도록 하였습니다.

로그인 여부에 따라 다르게 표시

• 비로그인 시 로그인하여 댓글을 입력해주세요라고 표시하며 입력되지 않습니다.

 

마이 페이지

자신이 만든 월드컵 데이터 표시

• axios의 get 메서드를 이용해 로그인된 아이디가 월드컵 생성자 아이디인 경우만 데이터를 불러왔습니다.

데이터의 여부에 따라 다르게 표시

• 불러온 데이터의 length 값이 0일 경우 생성한 월드컵이 없다고 표시했습니다.
• 불러온 데이터가 존재할 경우 월드컵 리스트 컴포넌트를 이용해 화면에 표시했습니다.

조건문을 활용한 월드컵 리스트 컴포넌트 재사용

• 월드컵 리스트는 홈과 마이 페이지에서 재사용되는 컴포넌트입니다. 마이 페이지에서는 삭제하기 기능을 지원하기 때문에 월드컵 리스트 컴포넌트에 props로 setData 가 있을 경우 삭제 기능이 화면에 표시되도록 하였고 함수에서도 setData가 없을 경우 return; 을 해주어 오류를 방지했습니다.

 

로그인

Google Cloude Platform

• Google Cloude Platform에서 사용자 인증 정보를 생성해 OAuth 2.0 클라이언트 ID를 생성해 프로젝트에 이용했습니다.
• 배포한 사이트의 URL에서만 클라이언트 ID가 이용 가능하도록 하여 사이트의 보안을 설정했습니다.

react-google-login을 활용한 구글 로그인 구현

• react-google-login 라이브러리를 활용해 사용자에게 구글 로그인을 지원하고 사용자의 정보를 이용할 수 있게 사용자 정보를 state 값으로 저장했습니다.

선택 애니메이션

• 두 가지의 항목 중 선택되는 동작에 따라 left , right , default의 state값이 할당됩니다.
• 할당된 state 값에 따라 style-component의 속성이 바뀌는 식으로 구현했습니다.
• CSS 속성인 transition , transform을 사용하여 부드럽게 가운데로 위치하도록 구현했습니다.

Header에 meta 정보 추가

• meta 정보를 추가함으로써 카카오톡으로 공유를 보낼 때 URL만 보내지는 것이 아닌 타이틀, 보여줄 이미지 , 보여줄 설명글 등을 알맞게 설정할 수 있었습니다.

정리 및 회고

새로 알게 된 점

• 배포된 사이트에서의 구글의 OAuth를 이용한 클라이언트 설정하는 방법과 node.js에서 react-google-login이라는 간단한 라이브러리 사용으로 쉽게 구글 로그인을 할 수 있다는 점을 알게 되었습니다. 이처럼 작은 프로젝트들에 사용이 용이해 보였습니다.
• header에 meta 정보를 추가함으로써 카카오톡 공유 이미지 설정하는 방법을 알게 되었고 , 카카오톡 개발자 사이트에서 meta가 한번 저장되면 meta를 변경하여도 바로 변경이 되지 않아 해당 기록을 삭제하여 변경하는 방법을 알게 되었습니다.

힘들었던 점 / 해결과 극복 방법

• 헤더 컴포넌트를 만들 때 로그인, 비로그인 화면에서 각각 다른 화면을 표시해야 하였는데 이에 더불어 미디어 쿼리를 이용해서 pc화면, 모바일 화면에서의 로그인, 비로그인 화면이 다르다 보니 styled-component를 이용해서 props로 조건을 사용할 매개변수를 보내 css에서 이용했었고 미디어 쿼리에서의 속성들도 적극 활용해서 활용한 경험이 있습니다.
• 선택 애니메이션이 보기엔 만들기 쉬워 보였으나 이기고 진 애니메이션의 transition이 달라서 헷갈렸었습니다. styled-component로 props를 보내 매개변수를 조건문으로 사용해서 해결했었습니다.
• Json-server로 서버와 axios로 통신하였는데 API 구조를 설계하는 것부터 put으로 해당되는 데이터를 스프레드 문법으로 기존 데이터와 수정된 데이터만 바꾸어서 객체를 보냈어야 했었습니다. 먼저 API 구조는 월드컵과 댓글을 각각 다르게 구분해야 하나 싶었지만 각각의 월드컵에서 댓글을 가지는 게 해당 월드컵의 댓글 수도 표시할 수 있는 이상적인 API 구조라고 생각되어서 월드컵 안에 댓글, 월드컵 데이터를 설계하여 해결했습니다.

 

프로젝트 후기

프런트 앤드 개발자 2명이서 같이 협업한 결과물이 너무 마음에 들었습니다. 저는 협업 기회가 남들에 비해 많이 없어서 협업에 있어서는 좀 미숙하다고 생각되었는데 이제는 어떤 협업이 있어도 자신 있게 참여할 것 같습니다. 이제는 백앤드 개발자와도 함께 만들어보는 경험을 가지고 싶다는 생각이 듭니다.