[TIL] 23_1227 미니 프로젝트를 마치며

프로젝트 시작

팀장정하기 

일단 팀장부터 정하자며 사다리 타기를 돌렸으나 돌린 사람인 내가 팀장이 됐어.

그리고 발표와 시연영상 제작자를 뽑기 전에 몰래 돌려봤는데 전부 내가 되서ㅋㅋ

결국 이건 사다리타기의 억까가 아닌가 하며 다른 팀원분께 한 번 돌려달라고
부탁드려서 그렇게 발표와 시연영상 제작을 다른 분들과 분담을 하게 됐지.
차근차근 프로젝트에 들어갈 내용도 다같이 기획하고 채우고 프로젝트 구성과
디자인, 기능 분담을 어떻게 할 지 기획을 순조롭게 시작했어. 

 

와이어프레임 만들기 & 디자인, 기능 부여하고 역할 분담

이래저래 만들어진 이번 미니프로젝트 와이어 프레임. 능력자분들의 솜씨로 매끄러워졌어.

 

와이어프레임을 짜는 것부터 어디에 하면 좋을까 어떻게 그리면 좋을까하며 다같이 논하다가 figma에 작성하기로 했어. 정말 횡재였던 건 같이 하는 팀원분들이 전부 능력자라 금방 습득하거나 와이어프레임 좀 만져보신 분이 계시고 처음 figma를 만져보시는데도 불구하고 금방 활용하시고 정리까지 잘 하시는데, 다른 분들도 거의 비슷해서 착착 이루어져서 저녁 전까지 다 기획이 완료됐어. 역할 분담도 본인이 해보시겠다는 분들이 많으셔서 금방 됐고. 일사분란하게 다들 코딩을 시작했지. 기능은 어떻게 넣을까하다가 일단 필요한 디자인부터 다 넣고 정하기로 했어.

다같이 기능부터 생각하면 뭘 어떻게 넣어야 할 지 모르겠어서 우선적으로 할 수 있는 것부터 하고 정하기로 했어. 그렇필수 사항으로 메인틀, 헤더/ 팀원 소개란 / 팀원 프로필 카드 / 카드 더보기에 이어지는 모달창 / 방명록 쓰기, 조회 그리고 필수 사항을 완료하면 선택 사항으로 방명록 수정, 삭제, 프로필 사진 업로드 기능까지 정해졌어. 

 

 

팀이 맞닥들인 문제와 해결

중간점검

- 당장 git을 터미널로 하기엔 익숙해지는 시간이 필요해서 수작업으로 병합하고 push, pull하며 생기는 conflict들을 같이 코드리뷰하며 해결하는 것부터 했어. 코드가 그렇게 많은 편이 아니라서 다행이었던 것 같아. 나중에 코드가 많아지면 수작업으로 병합하기엔 어려울 것 같아. 나중엔 꼭 다같이 merge로 병합을 할 수 있게 되기를! 

 

휘발되는 레이아웃

-팀원분이 global css를 만들어서 제공해주셨는데 나중에서야 적용해서 이전 css의 레이아웃이 많이 분산되서 놀랐어.
그래도 병합할 때 큰 문제는 없었고 css도 조금씩만 수정하면 되서 다행이였어. 그래도 개발시간이 줄어드니 반드시 global css를 제대로 적용하고 나서 그 위에서 코딩을 짜야겠다고 다짐하게 됐어. 

 

로컬 브랜치에서 다른 브랜치의 최신화

- git checkout 으로 다른 브랜치에 가서 작업물 확인을 하려고 했지만 서로 최신화가 안 되어있거나 최신화 정도가 달라서 황당해했어. git pull origin 해당 브랜치 이름을 통해 그 브랜치의 원격 브랜치에서 작업된 최신 작업물을 가져와야 했지.

아래는 최신화시켰던 해결방법이야. 

//다른 로컬 브랜치로 이동할 수 있는 명령어야. 
//쓰기 전엔 이동하기 전 본인 브랜치에 add, commit할 내용들이 없이 깔끔한 채로 이동해야 해.
git checkout 다른 브랜치


//다른 로컬 브랜치의 상태를 최신화해주려면
//해당 브랜치로 이동한 상태에서
git checkout 다른 브랜치 이름

//해당 브랜치의 원격 브랜치의 최신 작업물을 pull로 받아오는 거야.
git pull origin 해당 브랜치 이름

 

 

 

개인 트러블 슈팅

-모달창을 열었을 때 카드에 해당하는 id값과 일치하는 데이터를 DB에서 가져오기

로직

//로직
//1. 더보기 버튼($(".cardBtn1"))을 클릭 시, 
$(".cardBtn1").click(async function() {
//2. 모달창(모달, 모달배경)을 보여주며(document.style.display = "block")
//3. 데이터를 파이어베이스에서 가져오고
//4.가져온 데이버베이스의 컬렉션에서 문서 꺼내기
//5.문서에서 필요한 값들 꺼내기- 데이터에 부여했던 id값을 꺼내 let id = modaldata["id"];로 담아줌.
//6. dataset값을 가져오기 
//-카드에 해당하는 id를 html에 dataset방법으로 data-id를 DOM접근 메소드인 getElementById()메소드로 지정해서 가져옴.
//7.데이터를 가져올 때마다 붙여서 보여줄 html을 동적으로 만들어 줌(let data_html에 html요소들을 담아 줌) 
//8.데이터에서 꺼낸 id와 dataset으로 부여한 id값이 일치하면 해당 데이터를 넣은 카드를 생성하기.
//(if문으로 DB에 있는 데이터에 넣은 id값과 카드의 id값이 담긴 dataset값을 담은 cardId가 같으면 붙여넣고 아니면 담지말아라는 조건)
})

 

본문 html

 

 

문제1

1. 클릭한 카드의 id와 데이터베이스의 id와 데이터는 붙여지는데 "클릭한 카드"와 일치하지 않음
2. 데이터는 전부 [object object]로 붙여짐

 

 

원인. 

1. 첫번째 원인은 클릭한 카드가 뭔지 지정해줘야 "해당하는" id값을 가져오는데 지정해주지 않아서 dataset으로 설정한 id값을 랜덤으로 가져옴

2. 가져 온 데이터가 객체형태로 바뀌어 있다는 걸 확인했지만 그냥 자료형태만 표현한 건 줄 알았으나 객체로 키엔 자료형으로 값엔 데이터값으로 한 번 더 감싸져있는 거였음(파이어베이스에서 데이터가 들어오는 형태에 무지했음)

시도.
1. for문 식이 잘못됐는 지 forEach문으로 바꿔서 조건을 주어 해 봄

2. 조건 안에서 찾은 문서를 잘못된 지점에서 가져오는 지 console.log로 확인해 봄

해결 방안 

1. 6번 로직 변경을 변경해서 "DB에서 가져올 id와 일치하는 카드"를 클릭해서 인식하고 카드의 dataset의 data-id값을 가져오는 걸로 함 (event.currentTarget을 이용해서 카드를 지정해주고 해당 카드의 dataset의 id값을 찾아줌)

2. console.log를 찍어서 해당 값을 가지고 있는 정보를 찾아서 데이터가 들어오는 형태를 보고 꺼내옴.

 

 

해결하며 느낀점

-불친절한 파이어베이스 문서를 꼭 더 유심히 찾아서 데이터가 들어오는 형태나 다른 구조나 내장함수에 대해 더 찾아보고 공부해봐야겠다. 

 

 

 

마침

만족

사실 소통하며 제작할 수 있는 기간이 짧았다는 것말곤 정말 다 만족이었어. 프로젝트 스코프도 적당했고 팀원분들도 완전 열정적이셔서 팀으로 필요한 일이면 척척 찾아서 알아서 해주셨고 티키타카가 정말 잘 맞았어. 거기다가 코드리뷰도 하면서 다양한 코드를 접하기도 하고 서로 알게 된 지식 적극적으로 알려주셔서 어려운 기능들도 오래 고민했지만 같이 고민하면서 금방 해결하셨어. 튜터님과도 고민 나누는 데에 서슴치 않아서 다같이 가서 물어보기도 하고ㅋㅋㅋ

 

 

불편

개발기간은 7일인데 3일이나 쉬는 날이라 실제 팀원들과 소통하며 개발할 수 있는 기간이 4일 밖에 되지 않아서 걱정을 많이 했었어. 물론 첫날에 아이디어와 디자인과 역할 분담은 다 했지만 그 외에도 의견을 나눌 게 많았거든 다들.

나같은 경우엔 모달만드는 기능을 다른 분과 나눠서 맡게 됐는데, 각자 구현하는 방식도 달라서 일단 기능 구현을 마치고 어떻게 파이어베이스에서 데이터를 가져와서 각 문서로 분배할 지도 찾아보고 의견도 나눠야 했어. 실제로 같이 소통할 수 있는 날이 하루 이틀 밖에 없어서 완성할 수 있을까 불안하기도 했어. 그래도 주말과 연휴를 마치고도 다들 쉬는 날 최대한 구현해보고 고민해보고 소통하는 당일에 같이 해결할 수 있는 게 무척 많았어. 정말 같이 하는 것만큼 빨리 끝나는 일도 없더라. 서로 소통하시면서 고민하시던 걸 금방 해결하셨어. 난 다 구현해놓고 구현된 걸로 다른 문제가 생겨서 고민하다 결국 튜터님을 통해 도움을 받아서 해결하고 의외로 완성일보다 하루 전에 해결을 해서 좋았어. 

 

 

마무리

 

 

배운 점

- 프로젝트 기획할 때 순서대로 하면 착착 이루어지는 걸 알았고 확실하게 처음부터 컨벤션과 global css를 만들고 코딩을 시작하고 병합을 자주 하면 팀원들과 conflict해결할 때 같이 코드리뷰하고 병합도 자주하니까 코드 복구도 빠르고 작업속도도 빠르게 할 수 있었어. 짜잘한 css나 html복구하기도 편했어. 물론 병합해주신 분이 잘 해주셨지만 ㅋㅋ수작업이든 merge로든 병합도 자주 해야겠어. 그래야 해결 못 하고 있던 문제도 그 시간을 비롯해서 코드리뷰하면서 해결할 수 있는 것 같아.  

 

 

 

협업을 하며 느낀 점

코드 리뷰를 하거나 기능 구현을 하면서 맡은 기능에 대해 같이 고민하고 서로가 가진 지식을 공유하다보니 강의를 보면서 알던 부분 이상으로 더 깊게 알 수 있었어. 어떻게 설명하면 상대에게 내가 고민하는 문제를 더 잘 알려줄 수 있을까 혹은 내가 이해한 걸 어떻게 더 쉽게 설명할 수 있을 지 적절한 예시도 만들게 됐고. 자유로운 공휴일이었는데도 맡은 부분에 대해서 서로 고민하고 있었다는 게 흥미로웠어. 이런 열정적인 팀원분들과 함께 각자를 소개하는 서비스를 만들 수 있어서 좋았어. 특히, planA로 모달을 만들어서 정한 시간 내에 구현하지 못하면 좀 더 확실하고 쉬운 방법인 창으로 띄우는 planB를 할까도 고민이 많이 됐는데. 그래도 팀원분들이 하나씩 구현해나가는 걸 보면서 완성해봐야겠다는 자극이 생겼고 결국 정해진 시간보다 이르게 만들어내면서 코드병합도 하고 예상보다 잘 나온 서비스를 보니 만족스러웠어.