[React] Day_12 미니프로젝트 중간점검 - (1) (feat. 죽겠어요.)

 

내일 공휴일인데.. 반납해야겠군..🥲

 

오늘.. 깃허브와 싸운다고 시간이 쪼매 늦어져서

냅다 업로드는 해놓고... 수정하는 TIL이 될 예정임둥..

결론은 뭐.. 쉽지 않네요;;

너무 공부를 안 한 거 같기도 하고.. 할 수 있는 건 계속 벽에 깡깡 머리만 치며 이해하는 거라

눈물이.. 조금 앞을 가리네요 (주르륵)

 

투데이 TIL은 진행 중인 프로젝트의 현 상황, 진행하며 깨달은 부분

마지막으로 제가 기억해야 할 부분 위주로 작성해 보도록 하겠습니다.

레쯔 고.

 

 

미니 프로젝트 (1) - 프로젝트 개요

 

이번 미니 프로젝트는 팀 및 팀원을 소개하는 내용이 포함된 웹페이지를 제작하는 것으로,

6명이 하나의 팀이 되어 진행 중에 있다. (10/4 완성 예정)

우리의 프로젝트 이름은 팀명을 그대로 사용한 "I5E1 Project" 인데,

왜.. I5E1 이냐고 물어보신다면.. 아래를 보시죠.

이 사진이면 이해가 되실겁니다. (끄덕)

 

아 여담으로, E1I5라는 팀이 작년에 존재했더라..

이걸 어떻게 알았느냐, 누가 냅다 링크를 가져오더니 우리 조가 한 거 아니냐면서 물어봤기 때문..

절대 방... 씨라고 말해. 절대로.

뭐 여튼, 우리는 I들이 많으니 저 이름을 따라간 거고.. 다행히(?) 위치는 바뀌었으니

엄연히 다른 팀이라고 말할 수 있다.(당당) 그래서 나 왜 또 팀장이지..?

 

어쩌다 보니 두서가 길어졌다. 빠르게 개요로 넘어가 보도록 하자.

미니 프로젝트의 개요 예시는 다음과 같다.

미니 프로젝트 개요 예시 이미지

 

예시를 참고하며 우리는 미팅을 통해 아래의 내용을 포함한 홈페이지를 제작하기로 하였다.

(간단하게 이해한 내용을 바탕으로 작성한 개요라, 추후 수정될 수 있음.)

• 포함할 내용 :
  • 간단한 팀소개 내용
  • 본인을 잘 나타낼 수 있는 한마디, MBTI
  • 객관적으로 살펴본 본인의 장점 → ex) 문제해결능력, 그리고 포토샵능력자
  • 본인의 스타일 및 협업 스타일 → ex#나는야_소통왕 #끈기는_나의_모토
  • 팀원들의 블로그 주소 (티스토리, GitHub)
• 구성 :
  • 메인화면 - 메인페이지 및 팀 소개
  • 멤버 메뉴 - 멤버카드(사진, 이름, MBTI, 장점, 협업스타일, GitHub, 블로그)
  • 멤버 등록 메뉴 - 멤버등록 모달
  • 날씨 - Open API 활용
• 기능 :
  • 방명록 및 멤버카드 CRUD - Firebase의 Realtime_DB 를 활용하여 구현 (Firebase 호스팅으로 배포)
  • 멤버카드 - 사진 클릭 시 개인 상세 프로필 모달 띄워지도록 구현
  • Vertical dot 버튼 클릭 시, 수정/삭제 툴팁 보이도록 구현
    +) 수정의 경우 update 모달 변경, 삭제 클릭 시, “삭제하시겠습니까?” 팝업이 나오도록 제작
  • 방명록 - 글자수 100자 이내로 제한, textarea에 내용 입력 후 작성 버튼 클릭 시 DB에 push 되도록 구현
  • 방명록 데이터, 최근 등록 순으로 정렬, 작성시간 분/시간 단위로 처리

 

미니 프로젝트 (2) - Figma 를 활용한 와이어프레임 구축 

 

기존의 림졍이었으면.. 분명 냅다 종이와 펜부터 챙겨서 페이지를 끄적이며 그렸을 테지만?

혼자서 하는 프로젝트도 아니었고, 모두가 온라인으로 실시간 소통을 하는 입장이라

Figma 를 활용하여 와이어프레임을 구축해 보았다.

아주 먼 옛날.. 구상했던 웹페이지 레이아웃 (물론 싹-다 뜯어고쳤지만🥲)

 

우리는 Figma Assets, Simple Design System의 Examples - Home Page 를 베이스로 제작되었으며,

그 위에 필요한 추가 기능을 입히는 방식으로 제작되었다.

보시다시피 우리의 컨셉은 간결 & 깔끔. 딱 넣을 기능만 넣었다.

왜 예전에 만들었던 웹페이지랑 똑같아보이ㅈ...

 

 

미니 프로젝트 (3) - 역할 분담

 

프레임도 구축되었겠다.. 팀원이 각자의 역할을 맡아 업무를 수행할 시간이다.

열띤 토론 끝에 도달한 역할 분담의 결과는..

가장 어려운 팀원 소개 및 방명록 부분에 4명을 투입,

헤더와 푸터 1명, 랜딩페이지 및 팀 소개에 1명을 기본으로 배정하고

필요에 따라 유동적으로 인원이 변동될 수 있는 방식이 채택되었다.

또한 팀원들 모두가 최대치의 역량을 낼 수 있도록 역할을 배정하였으며,

모르는 부분이나 질문과 관련해서는 실시간 소통으로 해결하기로 하였다.

 

해당 과정에서 나는 보다 신중하게 회의에 임하며 의견 조율에 집중했는데..

다들 알다시피 대부분 의견이 갈리게 되면 과반수의 의견으로 넘어가게 되어 소수의 의견이 묵살되는 경우가 많은 편이다.

물론 이해하고 넘어가는 팀원도 있겠지만, 그렇지 않은 경우에는 팀원들의 불만이나 불화가 생길 가능성이 높아져

추후에 다시 팀원으로 만났을 때, 안 좋은 감정으로 만나 추후 프로젝트에 차질이 생기는 경우를 많이 봤기에..

최대한 그런 상황을 방지하기 위함이 제일 컸달까..🙄

다행히 서로가 윈윈 하는 의견으로 진행되어 고생한 팀원분들께 정말 감사하고.. 고마웠던 순간이었달까.

 

 

미니 프로젝트 (4) - GitHub repositories 생성 및 섹션 연결

 

Git.. 너란놈은 도대체...

 

각자 섹션을 어느 정도 완성 한 뒤.. 섹션을 연결하기 위한 GitHub 레퍼지토리를 생성하여

회의를 통해 필요한 만들어진 폴더 구조를 main에 넣고 페이지를 배포하던 중.. 404 오류가 뜨고 말았다!

쉽지않은 404;

 

이 친구로 확인했을 때.. 이유인즉슨.. index.html 가 main 에 존재하지 않아서였다고..

아마 다른 이유가 있겠지만.. 이것저것 하기엔 머리가 과부하라 폴더 하나를 줄였다. (절대 귀찮아서 아닙니다. 진짜임.)

기존 폴더 구조(좌) 에서 변경한 구조의 모습(우)

 

이후엔 팀원들끼리 열심히 커밋했습니다 히히 (충돌 난 건 절대 비밀임)

 

 

마무리 - 남은 건 CSS 정리와 디버깅... 

 

뭐,, 하다보면 나도 저렇게 되겄지..?

 

얼레벌레 현 상황을 정리하자며는..

대충 작성시간을 기준으로 모달을 제외한 대부분의 섹션은 완료단계에 도달했즤만

남은 건 CSS 조정과 오류 부분 디버깅... (을 가장 간단하게 뚱땅뚱땅한 제가 담당합니다.)

휴일.. 반납해야겠지? (주륵) 내일.. TIL은 금요일에 이어서 같이 작성하겠습니다.

구롬 20000.

 

 

 

 

살려줘 젭알.