팀원 소개 프로젝트 시작부터 완성 및 발표까지(1)

매일 했던일을 기록하고 싶었지만 팀장을 맡게 되면서 많이 바빴던 관계로 한번에 그동안 프로젝트를 정리해 보려 한다.

 

팀장으로 프로젝트를 진행하다!!

 

팀장을 하여 프로젝트를 이끌어보고 싶은 생각은 있었는데 아직 실력이 부족해 선뜻 팀장을 하겠다고 나서지는 못했다.

그래도 마침 첫 회의에서 팀원 분들이 실력에 상관없이 분위기를 잘 이끌어 줄 사람이면 괜찮다는 말을 듣고 조금 자신감을 가지고 팀장을 맡게 되었다.

 

첫 회의의 내용은 당연히 각자의 아이디어를 받고 의견을 취합하는 과정이였다.

나는 카카오톡이나 인스타같은 이미 유명한 디자인을 벤치마킹하자는 의견을 냈지만 팀원들의 원하는 방향이 다른 것 같아 의견을 더 들어보다가 회사 직원 소개와 같은 깔끔한 디자인을 만들자는 의견으로 어느정도 모두가 만족할 수 있는 의견으로 진행되었다.

 

우선 팀원간의 충돌을 방지하기 위해 팀의 규칙을 세웠다.

 

팀에서 가장 중요하게 생각했던 부분은 팀원이 행방불명 되면 가장 난감하단 것!!!

그래서 외출을 하거나 뻐지는 날은 꼭 공유를 하자고 약속했다.

그 다음은 아직 학습을 한지 얼마 안됐기 때문에 모르는 부분이 많다는 것을 인지하는 것!!!!

괜히 팀원한테 물어보기 부끄러워서 혼자 끙끙 앓으며 시간을 낭비하지 않기를 바랬다. 서로 돕는것이 팀이니까

 

이 페이지의 마지막쯤에 나올 내용이지만 미니 프로젝트이고 군대에서 아직 전역하지 못했었서 중간에 프로젝트에 참여

하는 분도 계시니 메인 페이지의 구상만 정하고 각자 파일을 만들어 보기로 했다. 대신 서로 모르는 부분은 공유하고

매일 퇴근하기 30분전에 각자의 코드를 공유하기로 약속했다!!

 

참고가 될만한 사이트와 구현할 기능을 미리 정리하였다.

 

그리고 드디어 내가 걱정했던 부분이 등장했다. 바로 깃허브와 깃 사용이 아직 미숙하다는 점....

깃허브를 만들기전 팀원들에게 미리 이부분을 이야기해 주었다. 팀장이긴 하지만 아직 깃허브 사용이 미숙하기에

아직 깃허브를 관리하기엔 부담스럽다고.... 결론은 깃허브는 다른 팀원이 만들고 내가 파이어 베이스 연결을 담당

하기로 했다. (그래도 앞으로의 프로젝트를 위해 이번에 확실하게 배워야지 라고 마음 먹음)

그래도 확실히 한번 써봤더니 나름 능숙하게 사용했다.

 

짧은 프로젝트이고 작은 프로젝트였지만 팀장을 맡게되니 어깨가 많이 무거웠다... 5일을 다합쳐 겨우 20시간 잔듯하다. 팀원들에게 구현하기로 한 기능은 거의 밤을 세서라도 한거같다. 그리고 성공하면 몸이 힘들어서 뻗었다. 지금와서 보니 그동안 진행과정 기록이 없다.... 캡쳐할 생각도 못했다.  (다음에는 좀 여유를 가져야지.....)

그래서 풀 스토리는 오늘 발표한 대본으로 대채하기로 하고 이번 프로젝트에서 내가 구현한것!! 그리고 어려웠던 점만 기록하려한다.

 

1. 파이어 베이스 연동

슬슬 쌓여가는 나의 파이어 베이스!! 벌써 두번째 파이어 베이스 담당자가 되었다. 이전 프로젝트에서 파이어 베이스 연동때문에 엄청 고생을 해서 그런가?? 이번에는 바로 필요한 부분만 연동할 수 있었다.

 

2. 내페이지 작성

페이지 디자인은 내가봐도 별로인거 같다. 하지만 이 페이지를 작성하면서 밤을 새며 배웠던 부분!! 바로 중간에 이미지를 클릭 할때 그에 해당하는 사진과 설명을 아래 부분에 토글하는것!! 토글을 하는 기능은 금방 구현하지만 내가 걱정한 것은 데이터 베이스를 연동해 팀원이 삭제되고 추가될 수 있다는 점!!! 그래서 함수를 유동적으로 사용해야 한다는 점!!!! 

 

 

    //이미지 id 개수만큼 가져오기
    var team_lenght = mbimage.length;


    //기본적으로 설명칸 닫기
    for (let i = 1; i <= team_lenght; i++) {
      $(`#postbox${i}`).hide();

    }

    // 팀 설명 모두 숨긴후 ,선택한 팀원 설명만 토글하기
    for (let i = 1; i <= team_lenght; i++) {
      $(`#image${i}`).click(function () {
        for (let j = 1; j <= team_lenght; j++) {
          $(`#postbox${j}`).hide();
        }
        $(`#postbox${i}`).toggle();
      })
    }
  })

 

바로 이코드!!  

솔직히 지금 보면 쉬운 코드지만 $postbox'{i}' 이부분을 생각하는데 너무 오래걸렸다. 진짜 힘들었음

그래도 이 부분을 이해하니

 

  window.onload = function () { // 첫 페이지 접속시 모든 이미지 흑백
    var memberImages = document.querySelectorAll('.memberimage');
    memberImages.forEach(function (image) {
      image.classList.add('grayscale');
    });
  };

  $(document).ready(function () {

    //클릭한 칸은 흑백 제거
    var mbimage = document.querySelectorAll(".memberimage")
    mbimage.forEach(function (image) {
      image.addEventListener('click', function () {
        image.classList.remove('grayscale');
        mbimage.forEach(function (otherimage) {
          if (otherimage !== image) {
            otherimage.classList.add('grayscale');
          }

        });
      });
    });

 

이 코드를 사용할 때 금방 활용 할 수 있었다.(흑백처리 기능은 팀원한테 도움받음)  이때 부터 매일 성장한다는 것을 느꼈다.

근데 사실 이거 구현한다고 새벽5시30분에 잤다...... 다음날 9시까지 출석인데.....

 

그 뒤로는 발표 대본에 나오겠지만 간략하게 설명하면 투표를 통해 디자인이 제일 괜찮은 정민님의 페이지를 사용하기로 했고 본격적으로 한페이지에 기능을 나누어 구현하는 단계가 시작되었다.

 

내가 맡은 부분은 운영자 페이지!!! 데이터를 연동하여 저장하고 읽어와서 팀원을 추가하는 기능!!!!!

내가 이부분을 위해 밤을 세며 동적변수 사용을 공부했지!!! 금방 할수 있을 거라 생각했다.....

하지만 결과적으로 나는 이날도 새벽 6시에 잠들었다. 아니 잤다고 표현하기도 힘든거 같다..... 날 그렇게 괴롭힌 부분!!! 근데 이번 프로젝트에서 날제일 성장 시켜준 부분!!!!!!!!! 내뇌가 컴퓨터처럼은 생각하지 못해도 컴퓨터를 어느정도 이해하게 만들어 준 부분 이부분을 다음 페이지에서 집중 리뷰해 보겠다.