두번째 미니 프로젝트팀원 소개 프로젝트 시작부터 완성 및 발표까지(2)

너무너무 중요한 부분!!!!!!

 

누가 나한테 짧은 개발 공부중 어떤코드가 기억에 남냐고 묻는다면 바로 이 코드라고 할거 같다.

 

        // 모듈안에서 전역변수 선언 (모듈밖에서는(전역변수 선언시 윈도우가 생략되어있음) )
        // 시간 지연때문에 안됨, js파일을 먼저 불러옴

        let docs = await getDocs(collection(db, "team-member"));
        docs.forEach((doc) => {
            let row = doc.data();

            let image = row['image'];
            let name = row['name'];
            let job = row['job'];
            let memberAge = row['memberAge'];
            let memberMbti = row['memberMbti'];
            let memberHobby = row['memberHobby'];
            let memberStrength = row['memberStrength'];
            let memberStyle = row['memberStyle'];
            let memberQuotation = row['memberQuotation'];
            let memberEmail = row['memberEmail'];
            var memberImages = document.querySelectorAll('.profile-img');
            // window 를 붙이면 전역 변수가 돼서 모듈안에서도 다른 파일에서 접근 가능
            window.membernumbers = memberImages.length + 1;
            // **********li id 추가 및 프로필이름 id 추가

            var blogLogoUrl = '';
            if (memberEmail.includes('tistory'))
                blogLogoUrl = 'https://i.namu.wiki/i/Jz0MFNR7_7LHx1Yda0Hy6929g3BD5fWmaARdUMMFPkFIAVC_ewY7BEcoIGhepmTKRBKmSxRSUBjI7pklIZLaAA.svg';
            else if (memberEmail.includes('velog'))
                blogLogoUrl = 'https://pbs.twimg.com/profile_images/1228368893321736193/Ov0og7E8_400x400.jpg';

            let member_html = `
            <ul class="team-list">
                <li id="profileBox${window.membernumbers}" >
                    <div id="profileImg${window.membernumbers}" class="profile-img" >
                        <img src="${image}" alt="">
                    </div>
                    <div class="profile-info">
                        <h3 id="profileName${window.membernumbers}">${name}</h3>
                        <p>${job}</p>
                    </div>
                </li>
            </ul>`;
            $('#teamList').append(member_html);

            // 설명칸 추가
            $('.intros').append(` 
            <div id="Intro${window.membernumbers}" class="intro" style="margin-left: 357px;width:600px; height:400px;">
                <div class="intro-title">
                    <strong>${job}</strong>
                    <em>${name} <a href="${memberEmail}" target="_blank"><img class="blog-logo" src="${blogLogoUrl}"></a></em>
                    
                </div>
                <div class="intro-txt">
                    <!-- <p><span>나이</span>&emsp;${memberAge}</p> -->
                    <p><span>MBTI</span>&ensp;${memberMbti}</p>
                    <p><span>취미</span>&ensp;${memberHobby}</p>
                    <p><span>장점</span>&ensp;${memberStrength}</p>
                    <p><span>협업 스타일</span>&ensp;${memberStyle}</p>
                    <p><span>좌우명</span>&ensp;${memberQuotation}</p>
                    <!-- <p><span>이메일</span>&ensp;${memberEmail}</p> -->
                </div>
                <div>
                    <img class="intro-image" src="${image}" alt="">
                </div>
            </div>
            `)

            // 함수를 calllate로 묶어서 늦게 부름 -> main.js가 실행 된 후 함수를 수동으로 호출
            calllate();
        });

 위는 index.html

아래는 함수를 모아놓은 main.js

// 함수 전체 묶어서 append 하면 호출
function calllate() {
    //기본적으로 설명칸 닫기,흑백 만들기
    for (let i = 1; i <= membernumbers; i++) {
        $(`#Intro${i}`).hide();
        $(`#profileImg${i}`).css('filter', 'grayscale(100%)');
    }

    // 팀 설명 모두 숨긴후 ,선택한 팀원 설명만 토글하기
    for (let i = 1; i <= membernumbers; i++) {
        $(`#profileImg${i}`).click(function() {
            for (let j = 1; j <= membernumbers; j++) {
                $(`#Intro${j}`).hide();
                $(`#profileImg${j}`).css('filter', 'grayscale(100%)');
                /********추가함***** */
                $(`#profileName${j}`).css('text-decoration', 'none');
            }
            $(`#Intro${i}`).toggle();
            console.log("toggled" + i);
            $(`#profileImg${i}`).css('filter', 'grayscale(0%)');
            console.log(`#profileName${i}`);
            $(`#profileName${i}`).css('text-decoration', 'underline');
            $(`#profileName${i}`).css('text-underline-offset', '5px');
        })

 

이틀째 잠을 제대로 자지 못한상태!!!!! 하지만 잠들수 없다!!!!!!! 구현을 차라리 내가 할 수 없는 부분이면 너무 피곤해서 잤을거 같다. 중요한것은 그동안 성장하여 충분히 구현할 수 있을거 같은 기능인데 하지못한다는 점!!!!!!!!!!

 

진행과정을 다시 떠올려 보면 위 두개의 코드블럭은 각각 다른 페이지에서 작성되어 있었다. 목표는 데이터베이스에 저장되어 필드들을 받아와서 1명단위로 묶어서 출력하는 것!!!!!!  내가 이부분을 위해 전날 밤새며 유동적인 변수와 함수에 대해서 공부했지!!!!!

 

내가 처음 든 생각 

1.데이터 베이스에서 읽어온 필드들을 각각의 변수에 저장한다.

이부분

 

 

2.  .append를 사용하여 원하는 클래스에다가  붙어 넣어 버린다. 

 

 

 

3. 팀원의 숫자 만큼출력이 되야하기 때문에 어제 배운 것을 사용한다.

 

 

이미 성공한 코드이기 때문에 잘 작성되어 있지만 만들때 나를 괴롭혔던 것은 팀원의 숫자를 담을 수 있는 변수를 받아서 다른 파일에 있는 함수에서 그 변수를 사용하는 것이다! 이것 때문에 정신이 나가버리는 줄 알았다.  팀원의 숫자를 담기위해 팀원이 필수로 가지고 있는 image 라는 필드를 변수에 담아 memberimages.lengt 를 통해 분명 팀원의 수를 잘 받아 온다는 것을 확인했다. 그런데 함수가 있는 main.js파일에서 아무리 해도 변수를 가져오지 못하는 것이다. 

그래서 구글에서 범수의 유효범위에 대해 계속 검색을 해봤다. 내가 설정한 변수는 전역 변수가 맞는데 도저히 가져오질 못하는 것이다.

그 때 나의 구세주와 같은 원하님과 규리님이 나타났다. 원하님이 'type = module' 이부분이 문제인 것이라 알려줬다. 쉽게 얘기해서 특별한 방법을 쓰지 않으면 모듈 안에서 설정된 변수는 다른파일에서 불러 올 수 없다는 것!!!!!!!!!!

그렇게 원인을 알게 된후 검색을 하며 규리님의 도움과 함께 해결법을 찾아냈다

전역변수로 사용하고 싶은 변수앞에 widow. 을 붙이는 것!!!! 내가 겨우 이 6글자 때문에 새벽에 못자고 있다니

그래도 같이 찾아준 규리님께 너무 감사드리며 main js 파일에서 membernumbers 를 console.log 를 통해 찍어 보았다.

갑자기 기적이 일어난 것처럼 변수를 불러왔다 ㅠㅠㅠㅠ 컴퓨터는 읽고 싶어도 변수가 보이지 않았기에 못 읽었던것....

오래걸리긴 했지만 해결했기에 기쁜마음으로 모든 코드를 작성하고 실행을 시켰다. 근데 변수는 읽어 왔는데 실행이 안된다??? 

 

 

내가 당황하고 있으니 원하님이랑 규리님이 웃으셨다.

"정근님 왜 안될까요? 찾아보시겠어요????" --> 제가 함수를 잘못썼나요? --> 아니요 함수는 잘썼어요 이상없습니다.

그 때 규리님이 거들었다.

"하하하 이거는 눈에 보이지는 않아요. 근데 컴퓨터는 알고있음" --> 네? 그게 무슨소린가요?? --> 하하하하하

 

결국 아무리 생각해봐도 함수가 이상없는데 안나올 수 밖에 없다는 말뜻을 이해하지 못했다. 그래서 원하님이 답을 알려주셨다. 실행 순서의 문제라고 내가 작성한 append 부분보다 main.js 의 함수가 먼저 실행된다는 것!

너무 어이없었지만 뭔가 머리를 한대 맞은 느낌이 들었다. 그래서 그부분을 해결하기 위해 내가 사용하고 싶은 함수를 묶어주고 실행하고 싶을때 불러주는 방법을 사용하였다. 진짜 귀중한 버그와 해결법을 배웠더니 기록을 안남길 수가 없었다.

블로그에 꼭 남기기 위해  주석으로 열심히 적어놓았다. 드디어 남길 수 있어서 많이 기쁘다.

 

정말 중요한 걸 배웠다는 느낌덕분에  새벽에 겨우 잠들 수 있었지만 많이 행복했다. 

그 다음날은 문제없이 하루를 보냈다. 생각보다 머지하는 과정도 어렵지 않게 넘어갔고 디테일한 부분만 고치고 있었다. 

하지만 가장 중요한 부분이 있었다. 바로 발표를 해야한다는 것......... 발표를 희망하는 사람이 없다는 것.......

결국 어쩌다보니 내가 발표를 맡게 되었다.

그래서 결국 발표 대본을 짜고 연습한다고 거의 4일을 제대로 못잤다....

발표 대본

안녕하세요.
12조 조장 류정근 입니다.

 발표를 시작하기전에 /저희 프로젝트 과정을 설명 드리겠습니다.

  저희 12조는/ 첫 회의에서/ 이번 미니 프로젝트의 목표가/ 코드 작성을 통해/
 페이지 제작과/ 협업을 경험해보는 것/이라고 해석하였습니다.
  그래서 각자 메인페이지를/ 처음부터 끝까지 구현해보고/ 그중 하나를 투표해서/ 결정 하기로 했습니다. 
 그 이후/ 혼자해결하기 어려운 기능을/ 협업을 통해/ 한 페이지에 구현해 보기로 했습니다.



페이지에 접속 하게 되면/ 저희조로/ 3행시를 한/ 애니메이션이 등장합니다.

(페이지 새로고침)

저희팀의 색깔입니다. 함께이기고/ 단결된 마음/ 도전에 응하고/ 하나의 비전/열정은 두배로

메인페이지에 대해 설명해 드리겠습니다.
메인

보시다시피 /메인페이지는/ 주기적으로 /슬라이딩이 됩니다.
마우스를 호버링 할 경우/  프로필박스의 크기가 커지며/ 색이/ 연하게 변경됩니다.
프로필 사진 클릭시/ 토글이 되며/ 사진과 정보~가 나타납니다.
블로그 아이콘을 누르면 / 새 창을 통해 블로그를 열어 줍니다. 
메인 페이지 상단에는 사용자의 화면 진행상태를 표시해주는 스크롤상태바가 있습니다.
우측 하단에는/  고정된 버튼이 있습니다. /이 버튼을 통해 /스크롤을 / 탑으로~ 이동 시킬 수 있습니다.


다음 페이지는 관리자 페이지 입니다.
(관리자 페이지로 넘어가기)
이페이지는/ 관리자들만/ 접근/ 가능하도록/ 되어있습니다.
입력 매개변수는/ 보시는 거와 같이 10가지로/ 설계하였습니다.

데이터베이스로는 /파이어베이스를 /사용하였으며, 데이터관리 및 팀원 추가 삭제 기능이 있습니다.
여기 이 합류하기 버튼을 누르면 파이어베이스에 값이 저장 되고,
 저장된 값은 메인 홈페이지에서 불러 올 수 있습니다.
등록된 모든 사용자는 페이지하단에서 확인할 수 있습니다.

저희는 각자 제작한 5가지 페이지 중에 한가지를 투표로 뽑았기 때문에 페이지가 1개 뿐입니다.
각자 페이지를 만들고 하나를 뽑는게 뭐가 협업이냐? 라고 생각 하실 수 있습니다.
한 페이지에서 비슷한 기능을 구현함으로서 더욱 효율적이고 정교한 코드를 작성할 수 있다 생각합니다.
 각자 다른 페이지를 맡았을 때보다 /자연스럽게, ~ 더 자주 ,/ 더 많이 ,코드리뷰를/ 하게 될 것이고 
그만큼 /<팀원간의 교류!!>가~ 늘어나는 것이/ <현업과 연결!!!!>된다고 생각합니다.

실제로 매일 밤 8시 30분에 각자 구현한 기능과 코드를 팀원들과 교류하며 소개하는 시간을 가졌습니다. 
5명 전원이 내향적인 i 성향이지만 칭찬과 코드리뷰를 통해 어색함을 줄이고 의사소통을 함으로써 
이번 프로젝트를 순조롭게 진행할 수 있었습니다.

마지막으로!! 저희 팀원들이 만들었던 페이지를 소개해 드리고 마무리 하겠습니다.

 

어쨌든 발표까지 두번째 프로젝트도 끝!!!!

마지막 결과물