팀프로젝트 - 클린한끼

엘리스 두번째 프로젝트는 데이터를 활용한 웹 서비스였다

OTT 서비스 or 배달 서비스 두가지 주제가 있었는데,

넷플릭스 같은 OTT를 보기 보다는 배달음식을 더 자주 시켜먹어서 후자를 골랐다

그리고 배달음식과 관련해서 떠오르는 이슈들이 많기도 했다!

 

처음으로 하는 팀프로젝트 였기 때문에, 내가 주도적으로 팀을 이끌어 가고

프로젝트 개발의 방향을 잡아보고 싶어서 팀장을 자원했다.

 

팀프로젝트 5명이서 프로젝트 시작 전에 서울에서 모여 같이 밥을 먹었다.

협업 스킬을 기르기 위해 같이 방탈출을 했는데 14분을 남기고 클리어 했다.

카페에 가서 MBTI 얘기도 하고 서로에 대해 얘기를 많이했다.

(나는 세상만사 다 관심있는 ENFP!!!)

 

팀프로젝트 협업스킬(?)을 높이기 위해 방탈출 성공!!!

아이디어 회의도 같이 진행했었는데,

데이터 분석 결과 코로나로 인해 배달음식이 급증했다는 인사이트를 얻고,

배달음식이 조리상태를 확인할 수 없어 위생상태에 대한 불만이 많다는 사실을 알게 되었다.

그래서 우리는 소비자 불만을 해결하기 위해 위생가게 정보를 제공하는 서비스를 만들기로 정했다! 

(위생가게, 너로 정했다!!)

[01] 커밋 메시지 설정하기

---

.gitmessage.txt 파일을 만들어서 팀원들이 서로 통일된 커밋메시지로 gitlab에 올려 확인하기 쉽도록 만들었다.

 

# <타입> : <제목> 형식으로 작성하며 제목은 최대 50글자 정도로만 입력
# 제목을 아랫줄에 작성, 제목 끝에 마침표 금지, 무엇을 했는지 명확하게 작성

################
# 본문(추가 설명)을 아랫줄에 작성

################
# 꼬릿말(footer)을 아랫줄에 작성 (작성한 날짜와 작성자) ex) 210923 Kaky

################
# feature : 새로운 기능 추가
# fix : 버그 수정
# docs : 문서 수정
# test : 테스트 코드 추가
# refactor : 코드 리팩토링
# style : 코드 의미에 영향을 주지 않는 변경사항
# chore : 빌드 부분 혹은 패키지 매니저 수정사항
################

• 터미널에 `git config commit.template <.gitmessage.txt 경로>` 명령어 입력하기
• 커밋할 때 `git commit`만 입력하면 위의 창을 불러온다
• `git config --global core.editor vim` (git commit -> vi 에디터 화면으로 보기)
• `git config --global core.editor "code --wait" ` (git commit -> VSC 화면으로 보기)
• `git push --set-upstream origin master` 현재 위치한 브랜치와 origin에 해당하는 원격 저장소의 master 브랜치를 연결해준다.
• `git pull origin <branch name>` origin 에 연동된 원격저장소에서 특정 branch 만 pull하기

[02] 컴포넌트 경계선

---

프로젝트 개발을 하다보니 컴포넌트가 여러개 쌓이게 되면서 헷갈리기 시작했다.

팀원의 조언으로 border를 하나하나씩 주면서 컴포넌트 레고블록의 경계선을 주면

시각적으로도 작업하기 편하다는 것 알게 되었다.

 

컴포넌트별로 border에 색을 넣어 구분하면 깔끔!

 

[03] 컴포넌트 외부 클릭을 감지

---

SVG를 활용한 지도에서 서울 지역을 클릭했을 때 확대된 서울 지도의 모습을 보여주고,

다른 외부영역을 클릭하면 다시 전국지도로 돌아오는 기능을 넣으려고 했었다.

다른 외부의 컴포넌트를 클릭했을 때 함수를 진행시키고 싶었는데 useRef라는 유용한놈을 알게되었다.

 Javascript 에서는 getElementById(), Document.querySelector()을 이용하여 특정 DOM을 불러왔는데,

 React 에서는 useRef()를 이용하여 특정 DOM을 불러올 수 있다는 기능을 알게되어서 편리했다.

 

import React, { useRef, useEffect } from "react";
import "./styles.css";

function useOutsideClick(ref) {
  useEffect(() => {
    console.log(`useEffect()`);

    function handleClickOutside(event) {
      console.log(ref);

      // 현재 document에서 mousedown 이벤트가 동작하면 호출되는 함수입니다.
      if (ref.current && !ref.current.contains(event.target)) {
        console.log(`select의 외부 클릭을 감지!`);
      }
    }

    // 현재 document에 이벤트리스너를 추가합니다.
    document.addEventListener("mousedown", handleClickOutside);

    // useEffect 함수가 return하는 것은 마운트 해제하는 것과 동일합니다.
    // 즉, Class 컴포넌트의 componentWillUnmount 생명주기와 동일합니다.
    // 더 이상'mousedown'이벤트가 동작하더라도 handleClickOutside 함수가 실행되지 않습니다.
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]); // ref가 변경되면 useEffect를 다시 생성합니다.
}

export default function App() {
  // useRef를 사용하여 ref를 생성합니다.
  // null로 초기화합니다.
  const outsideRef = useRef(null);
  useOutsideClick(outsideRef);

  // 최초 실행시 null임을 확인할 수 있습니다.
  console.log(outsideRef);

  return (
    <div>
      <form>
        {/*
        select Element를 생성자(constructor)에서 생성한 outsideRef와 연결합니다.
        */}
        <select className="App" name="color" ref={outsideRef}>
          <option value="red">붉은색</option>
          <option value="black">검은색</option>
          <option value="blue">파란색</option>
        </select>
      </form>
    </div>
  );
}

 

서울 지도를 클릭하면 확대된 서울지도로 바뀌게 만들었다.

▼

 

외부 컴포넌트 영역을 클릭하면 다시 전국지도로 돌아오는 기능 추가!

 

[06] mySQL 데이터 업로드

---

배달 관련 데이터로 위생가게의 데이터를 DB에 넣으려고 했는데,

로컬에서는 mySQL에 데이터를 업로드하기 위해서는 따로 작업을 진행해야 했다.

 

1. VS code에서 데이터베이스 탭 누르고 우선 delivery_project 데이터 베이스 생성해놓기
2. sql 데이터 폴더에 저장하기(메모장 형식은 오류나기 때문에 워드패드로 진행했음)
3. cmd 명령프롬포트 실행 ->
`cd C:\Program Files\MySQL\MySQL Server 8.0\bin` (mySQL 설치된 폴더에 bin 파일경로) ->
`mysql -u root -p delivery_project < C:\Users\82105\Desktop\팀프로젝트\delivery_project.sql`
4. 명령어 입력하고 비밀번호 치면 mySQL 데이터가 업로드 된다.

 

[07] 프로젝트를 마무리하며...

---

팀프로젝트를 하면서 git을 적극적으로 활용해보게 되었다.

처음에는 git merge conflict가 나서 git pull이나 git push가 되지 않을 때 걱정이 앞섰지만, git status로 하나하나 확인해보면서 오류난 부분을 고쳐나가다 보니 생각보다 크게 걱정할 부분이 아니었구나 생각이 들었다. 또한 git push와 git pull을 여러번 사용해보면서, git을 이용하여 협업하는 것이 익숙해지고 편하다고 느껴졌다.

 

팀장을 맡으면서 어려웠던 부분은 프로젝트 기획 부분이였다.

우선은 각기 다른 팀원들의 생각과 프로젝트의 방향성을 한 곳으로 모아가기가 힘들었다. 그래서 프로젝트 초반에는 팀원들과 디스코드로 자주 모여서 아이디어 회의를 하고, 1~2시간 쉬면서 생각을 정리하고 다시 모이는 방식으로 타이트하게 회의 일정을 잡았다. 처음에는 동서남북으로 나눠지던 팀원들의 의견들이 점차 하나로 모아지는걸 보게 되었다.

 

우리가 해결하고자 하는 문제가 무엇이고, 어떻게 해결할 것인가에 대한 고민이 필요했다.

단순히 재미를 위한, 일회성이 아닌 웹 사이트를 이용하는 사용자들에게 유익한 인사이트를 주고 싶었다. 많은 시간의 회의와 아이디어 논의 끝에 프로젝트 기획이 마무리 되었다. 국민 신문고에 접수된 배달관련 불만들 가운데 위생문제가 가장 높았다. 위생가게 인증을 받은 가게를 보여줌으로써 사용자들이 위생등급 인증에 대해 알게되고, 우리동네 근처에 있는 위생가게에 관심을 갖도록 하였다.

 

팀장이었던 나는 프로젝트를 진행하면서 대시보드 한 페이지 안에 모든 데이터 정보와 그래프, 지도가 들어가면 좋겠다고 생각했다. 대시보드가 한 페이지 안에 들어가 있어서 사용자가 한눈에 보기 편하게 하면 더 좋겠다고 생각했다. 하지만 다른 팀원은 데이터 자료에 대한 스토리 개연성이 떨어진다는 이유로 각기 다른 페이지에서 보여주는게 좋겠다고 의견을 꺼냈다. 서로의 의견이 잘 맞물리지 않았을 때 코치님이 큰 도움이 되었다. 제 3자가 보는 입장에서 얘기를 들었을 때 내가 내 생각에만 빠져있다는걸 알게되었고, 객관적으로 볼 수 있게 되었다. 결국 우리는 이슈페이지를 만들어서 뉴스 형식으로 배달 음식 문제점에 대해 어필할 수 있게 되었고, 지도페이지에서 조금 더 일목요연하게 사용자가 볼 수 있도록 페이지를 구성하였다. 이로써 스토리에 개연성이 생기고, 사용자도 웹사이트를 방문했을 때 이질감없이 둘러볼 수 있도록 구성하였다.

 

 

[08] 생일축하해요~?!

---

프로젝트 기간중에 우리 팀원중에 한명이 생일이었다. 

코딩을 하다가 문득 좋은 아이디어가 떠올라서 몰래카메라를 시작했다 ㅎㅎ

이슈중에 중요한 문제가 터졌다고 큰일났다고 어그로를 무한히 끌어올린 뒤 생일인 팀원한테 해당 페이지로 가보라고 했다. 거기에는 우리가 로컬에서 작업한 생일축하 페이지를 렌더링해서 보여주었고 모두 빵터졌다 ㅋㅋㅋㅋㅋ

밤까지 코딩하느라 지치고 힘든 하루였지만 생일인 팀원이 엄청 좋아해서 뿌듯했다.

 

프로젝트중에 로컬에서 작업한 생일축하 페이지 ㅋㅋㅋ 몰래카메라 대성공!!

 

[08] 프로젝트 시연영상

---